From 675f6ae8e2a1bd1a674c5275252ddc22b921bfa9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Siim=20Ha=CC=88elm?= Date: Thu, 11 Jun 2020 13:14:49 +0300 Subject: [PATCH 1/5] Add row settings editor --- components/template-tools.tpl | 62 +++++++++++++++++++++++++++++++++++ layouts/common_page.tpl | 56 ++++++++++++++++++++++++++++++- 2 files changed, 117 insertions(+), 1 deletion(-) diff --git a/components/template-tools.tpl b/components/template-tools.tpl index 0ca6cae9..94837beb 100644 --- a/components/template-tools.tpl +++ b/components/template-tools.tpl @@ -105,5 +105,67 @@ {% endif %}; site.bindRootItemSettings(rootItemValuesObj); + + //========================================================================== + // Modular content area settings + //========================================================================== + var pageData = new Edicy.CustomData({ + type: 'page', + id: {{ page.id }} + }); + + {% if page.data.row_settings %} + var valuesObj = {{ page.data.row_settings | json }}; + {% else %} + var valuesObj = {row_items_count: "1"}; + {% endif %}; + + var settingsBtn = document.querySelector('.js-settings-btn'); + + var SettingsEditor = new Edicy.SettingsEditor(settingsBtn, { + menuItems: [ + { + "title": "Rows count", + "type": "select", + "key": "row_items_count", + "list": [ + {"title": "1", "value": "1"}, + {"title": "2", "value": "2"}, + {"title": "3", "value": "3"}, + {"title": "4", "value": "4"}, + {"title": "5", "value": "5"}, + {"title": "6", "value": "6"}, + {"title": "7", "value": "7"}, + {"title": "8", "value": "8"}, + ] + }, + { + "title": "Min row item width in px", + "type": "number", + "min": 1, + "key": "row_min_width", + "placeholder": "Set min row item width in px" + }, + { + "title": "Row item padding in px", + "type": "number", + "min": 1, + "key": "row_padding", + "placeholder": "Set item padding in px" + } + ], + + values: valuesObj, + + commit: function(data) { + pageData.set('row_settings', data, { + success: function() { + // reloading is necessary to rerender the content areas + window.location.reload(); + } + }); + } + }); + document.querySelector('.js-settings-btn').removeAttribute('disabled'); {% endeditorjsblock %} diff --git a/layouts/common_page.tpl b/layouts/common_page.tpl index 391c60e4..6bc1e30e 100644 --- a/layouts/common_page.tpl +++ b/layouts/common_page.tpl @@ -5,6 +5,41 @@ {% include "html-head" sidebar: true %} {% include "template-styles" %} + + {% assign row_settings = page.data.row_settings %} + + {% if row_settings.row_items_count != nil %} + {% assign row_count = row_settings.row_items_count %} + {% else %} + {% assign row_count = 1 %} + {% endif %} + + @@ -32,7 +67,26 @@ {% comment %}TODO: Remove duplicate content-arera class.{% endcomment %}
-
{% content %}
+ {% if editmode %} + + {% endif %} + + {% assign count = 1 %} + + {% if row_count %} + {% assign count = row_count | to_num %} + {% endif %} + +
+ {% for i in (1..count) %} + {% if forloop.first != true %} + {% assign name = "col-" | append: i %} + {% endif %} +
+ {% content name=name %} +
+ {% endfor %} +
{% endif %} From e79c2b4c42d96c4cdc8993bad983e52b09c3b08f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Siim=20Ha=CC=88elm?= Date: Thu, 11 Jun 2020 13:42:21 +0300 Subject: [PATCH 2/5] Change key naming --- components/template-tools.tpl | 8 ++++---- layouts/common_page.tpl | 20 ++++++++++---------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/components/template-tools.tpl b/components/template-tools.tpl index 94837beb..63cbb0d6 100644 --- a/components/template-tools.tpl +++ b/components/template-tools.tpl @@ -117,7 +117,7 @@ {% if page.data.row_settings %} var valuesObj = {{ page.data.row_settings | json }}; {% else %} - var valuesObj = {row_items_count: "1"}; + var valuesObj = {items_count: "1"}; {% endif %}; var settingsBtn = document.querySelector('.js-settings-btn'); @@ -127,7 +127,7 @@ { "title": "Rows count", "type": "select", - "key": "row_items_count", + "key": "items_count", "list": [ {"title": "1", "value": "1"}, {"title": "2", "value": "2"}, @@ -143,14 +143,14 @@ "title": "Min row item width in px", "type": "number", "min": 1, - "key": "row_min_width", + "key": "min_width", "placeholder": "Set min row item width in px" }, { "title": "Row item padding in px", "type": "number", "min": 1, - "key": "row_padding", + "key": "padding", "placeholder": "Set item padding in px" } ], diff --git a/layouts/common_page.tpl b/layouts/common_page.tpl index 6bc1e30e..8b026642 100644 --- a/layouts/common_page.tpl +++ b/layouts/common_page.tpl @@ -8,8 +8,8 @@ {% assign row_settings = page.data.row_settings %} - {% if row_settings.row_items_count != nil %} - {% assign row_count = row_settings.row_items_count %} + {% if row_settings.items_count != nil and row_settings.items_count != "" %} + {% assign row_count = row_settings.items_count %} {% else %} {% assign row_count = 1 %} {% endif %} @@ -18,23 +18,23 @@ .container-row-flex { display: flex; flex-wrap: wrap; - {% if row_settings.row_padding != nil %} - margin: 0 -{{row_settings.row_padding}}px; + {% if row_settings.padding != nil %} + margin: 0 -{{row_settings.padding}}px; {% endif %} } .col-item { flex: auto; - {% if row_settings.row_min_width %} - min-width: {{row_settings.row_min_width}}px; - {% if row_settings.row_padding %} + {% if row_settings.min_width %} + min-width: {{row_settings.min_width}}px; + {% if row_settings.padding %} {% endif %} - padding: {{row_settings.row_padding}}px; + padding: {{row_settings.padding}}px; {% endif %} } .container-row-{{row_count}} .col-item { - {% if row_settings.row_padding != nil %} - width: calc(100%/{{row_count}} - {{row_settings.row_padding}}*2px); + {% if row_settings.padding != nil %} + width: calc(100%/{{row_count}} - {{row_settings.padding}}*2px); {% else %} width: calc(100%/{{row_count}}); {% endif %} From 394e9a47732433aa41441d45812ed4ea0c46f4a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Siim=20Ha=CC=88elm?= Date: Thu, 11 Jun 2020 13:45:03 +0300 Subject: [PATCH 3/5] Remove duplicate code --- components/template-tools.tpl | 4 ---- 1 file changed, 4 deletions(-) diff --git a/components/template-tools.tpl b/components/template-tools.tpl index 63cbb0d6..5abe62cb 100644 --- a/components/template-tools.tpl +++ b/components/template-tools.tpl @@ -109,10 +109,6 @@ //========================================================================== // Modular content area settings //========================================================================== - var pageData = new Edicy.CustomData({ - type: 'page', - id: {{ page.id }} - }); {% if page.data.row_settings %} var valuesObj = {{ page.data.row_settings | json }}; From 41bcc21f9d326cd774c9b59a1355e13781303f94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Siim=20Ha=CC=88elm?= Date: Thu, 11 Jun 2020 13:48:32 +0300 Subject: [PATCH 4/5] Rename page data item keys & classnames --- components/template-tools.tpl | 12 +++++----- layouts/common_page.tpl | 42 +++++++++++++++++------------------ 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/components/template-tools.tpl b/components/template-tools.tpl index 5abe62cb..f6f20c16 100644 --- a/components/template-tools.tpl +++ b/components/template-tools.tpl @@ -110,8 +110,8 @@ // Modular content area settings //========================================================================== - {% if page.data.row_settings %} - var valuesObj = {{ page.data.row_settings | json }}; + {% if page.data.column_settings %} + var valuesObj = {{ page.data.column_settings | json }}; {% else %} var valuesObj = {items_count: "1"}; {% endif %}; @@ -121,7 +121,7 @@ var SettingsEditor = new Edicy.SettingsEditor(settingsBtn, { menuItems: [ { - "title": "Rows count", + "title": "Columns count", "type": "select", "key": "items_count", "list": [ @@ -136,14 +136,14 @@ ] }, { - "title": "Min row item width in px", + "title": "Min item width in px", "type": "number", "min": 1, "key": "min_width", "placeholder": "Set min row item width in px" }, { - "title": "Row item padding in px", + "title": "Item padding in px", "type": "number", "min": 1, "key": "padding", @@ -154,7 +154,7 @@ values: valuesObj, commit: function(data) { - pageData.set('row_settings', data, { + pageData.set('column_settings', data, { success: function() { // reloading is necessary to rerender the content areas window.location.reload(); diff --git a/layouts/common_page.tpl b/layouts/common_page.tpl index 8b026642..04a175a2 100644 --- a/layouts/common_page.tpl +++ b/layouts/common_page.tpl @@ -6,37 +6,37 @@ {% include "html-head" sidebar: true %} {% include "template-styles" %} - {% assign row_settings = page.data.row_settings %} + {% assign column_settings = page.data.column_settings %} - {% if row_settings.items_count != nil and row_settings.items_count != "" %} - {% assign row_count = row_settings.items_count %} + {% if column_settings.items_count != nil and column_settings.items_count != "" %} + {% assign column_count = column_settings.items_count %} {% else %} - {% assign row_count = 1 %} + {% assign column_count = 1 %} {% endif %} @@ -58,8 +58,8 @@ {% endif %}
-
-
+
+
{% if editmode or main_has_content %}
@@ -68,16 +68,16 @@ {% comment %}TODO: Remove duplicate content-arera class.{% endcomment %}
{% if editmode %} - + {% endif %} {% assign count = 1 %} - {% if row_count %} - {% assign count = row_count | to_num %} + {% if column_count %} + {% assign count = column_count | to_num %} {% endif %} -
+
{% for i in (1..count) %} {% if forloop.first != true %} {% assign name = "col-" | append: i %} From e7b54cb22ce76bb84753bc7e5df8f36dfbe3b43e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Siim=20Ha=CC=88elm?= Date: Thu, 11 Jun 2020 15:59:32 +0300 Subject: [PATCH 5/5] Check for empty string --- layouts/common_page.tpl | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/layouts/common_page.tpl b/layouts/common_page.tpl index 04a175a2..255250ff 100644 --- a/layouts/common_page.tpl +++ b/layouts/common_page.tpl @@ -18,13 +18,13 @@ .container-column-flex { display: flex; flex-wrap: wrap; - {% if column_settings.padding != nil %} + {% if column_settings.padding != nil and column_settings.padding != "" %} margin: 0 -{{column_settings.padding}}px; {% endif %} } .col-item { flex: auto; - {% if column_settings.min_width %} + {% if column_settings.min_width != nil and column_settings.min_width != "" %} min-width: {{column_settings.min_width}}px; {% if column_settings.padding %} {% endif %} @@ -33,7 +33,7 @@ } .container-column-{{column_count}} .col-item { - {% if column_settings.padding != nil %} + {% if column_settings.padding != nil and column_settings.padding != "" %} width: calc(100%/{{column_count}} - {{column_settings.padding}}*2px); {% else %} width: calc(100%/{{column_count}});