Merge pull request #17 from Voog/013-block-settings

Add page height & full width options to blocks

Author: PeeterPaal

components/block-structure.tpl

@@ -58,8 +58,10 @@
     {{ background_key }}-picker-area
     js-background-type
     {{ bg_type }}
-    {% if content_class -%}{{ content_class }}{%- endif -%}
-    {% if animated -%}animated js-animated-block{%- endif -%}
+    {% if page_height %}page-height{% endif %}
+    {% if full_width %}full-width{% endif %}
+    {% if content_class -%}{{ content_class }}{%- endif %}
+    {% if animated -%}animated js-animated-block{%- endif %}
   "
   data-block-key="{{ id }}"
 >

components/block.tpl

@@ -1,6 +1,18 @@
 {%- assign id = block_data.key -%}
 {%- assign content_area_count = layout_data.content_areas | default: 1 -%}
 
+{%- assign page_height = block_data.settings.page_height -%}
+
+{% if page_height == null -%}
+  {%- assign page_height = true -%}
+{% endif -%}
+
+{% assign full_width = block_data.settings.full_width -%}
+
+{% if full_width == null -%}
+  {%- assign full_width = false -%}
+{% endif -%}
+
 {%- capture move_buttons -%}
   <button
     class="move-button up-button js-move-button"
@@ -27,6 +39,44 @@
   ></button>
 {%- endcapture -%}
 
+{%- capture settings_options -%}
+  <div class="settings-options">
+    <div class="settings-checkbox">
+      <label>
+        <input
+          type="checkbox"
+          class="js-settings-checkbox"
+          data-key="{{ id }}"
+          data-setting="page_height"
+          {% if page_height %}
+          checked
+          {% endif %}
+        />
+
+        {{ "full_height" | lce }}
+      </label>
+    </div>
+
+    {% if layout_name == "column" -%}
+      <div class="settings-checkbox">
+        <label>
+          <input
+            type="checkbox"
+            class="js-settings-checkbox"
+            data-key="{{ id }}"
+            data-setting="full_width"
+            {% if full_width %}
+            checked
+            {% endif %}
+          />
+
+          {{ "max_width" | lce }}
+        </label>
+      </div>
+    {% endif -%}
+  </div>
+{%- endcapture -%}
+
 {%- capture change_layout_options -%}
   {%- if allowed_layouts.size > 1 -%}
     <div class="change-layout-options" data-title="{{ 'change_content_layout' | lce }}">
@@ -74,6 +124,7 @@
         {{ move_buttons }}
         {{ delete_button }}
         {{ change_layout_options }}
+        {{ settings_options }}
       </div>
     {%- endif %}
 
@@ -97,7 +148,9 @@
           content_class: content_class,
           id: id,
           layout_name: layout_name,
-          separate_bg_pickers: layout_data.separate_bg_pickers
+          separate_bg_pickers: layout_data.separate_bg_pickers,
+          full_width: full_width,
+          page_height: page_height
         -%}
       {% endfor %}
     {%- else -%}
@@ -117,7 +170,9 @@
         content_class: content_class,
         id: id,
         layout_name: layout_name,
-        separate_bg_pickers: layout_data.separate_bg_pickers
+        separate_bg_pickers: layout_data.separate_bg_pickers,
+        full_width: full_width,
+        page_height: page_height
       %}
     {% endif %}
   </div>

javascripts/editmode.js

@@ -397,12 +397,32 @@
       });
     };
 
+    const bindBlockSettingsButton = ({bodyBlocks, dataKey}) => {
+      $('.js-settings-checkbox').on('change', e => {
+        const targetKey = e.target.dataset.key;
+        const settingKey = e.target.dataset.setting;
+        const currentBlock = bodyBlocks.find(block => String(block.key) === String(targetKey));
+
+        const $currentBlockElement = $(`[data-block-key="${targetKey}"]`);
+
+        currentBlock.settings = currentBlock.settings || {};
+        currentBlock.settings[settingKey] = e.target.checked;
+
+        pageData.set(dataKey, bodyBlocks);
+
+        $currentBlockElement.find('.block').each((_, block) => {
+          $(block).toggleClass(settingKey.replace(/_/g, '-'), e.target.checked);
+        });
+      });
+    };
+
     const bindBlockActions = ({bodyBlocks, dataKey, deleteConfirmation}) => {
       $(document).ready(() => {
         bindBlockAdd({bodyBlocks, dataKey});
         bindBlockDelete({bodyBlocks, dataKey, deleteConfirmation});
         bindBlockReorder({bodyBlocks, dataKey});
         bindBlockLayoutChange({bodyBlocks, dataKey});
+        bindBlockSettingsButton({bodyBlocks, dataKey});
       });
     };
 

javascripts/editmode.min.js

@@ -393,12 +393,32 @@
     });
   };
 
+  const bindBlockSettingsButton = ({bodyBlocks, dataKey}) => {
+    $('.js-settings-checkbox').on('change', e => {
+      const targetKey = e.target.dataset.key;
+      const settingKey = e.target.dataset.setting;
+      const currentBlock = bodyBlocks.find(block => String(block.key) === String(targetKey));
+
+      const $currentBlockElement = $(`[data-block-key="${targetKey}"]`);
+
+      currentBlock.settings = currentBlock.settings || {};
+      currentBlock.settings[settingKey] = e.target.checked;
+
+      pageData.set(dataKey, bodyBlocks);
+
+      $currentBlockElement.find('.block').each((_, block) => {
+        $(block).toggleClass(settingKey.replace(/_/g, '-'), e.target.checked);
+      })
+    });
+  };
+
   const bindBlockActions = ({bodyBlocks, dataKey, deleteConfirmation}) => {
     $(document).ready(() => {
       bindBlockAdd({bodyBlocks, dataKey});
       bindBlockDelete({bodyBlocks, dataKey, deleteConfirmation});
       bindBlockReorder({bodyBlocks, dataKey});
       bindBlockLayoutChange({bodyBlocks, dataKey});
+      bindBlockSettingsButton({bodyBlocks, dataKey});
     });
   };