Merge pull request #115 from Voog/105_add_blog_settings

Add blog and article settings (#115)

Gruntfile.js

@@ -234,7 +234,7 @@ module.exports = function(grunt) {
       },
 
       js_concat: {
-        files: 'sources/javascripts/concat/**/*.js',
+        files: ['sources/javascripts/concat/**/*.js', 'sources/javascripts/concat/editmode/*.js'],
         tasks: ['concat', 'uglify:build', 'exec:kitmanifest', 'exec:kit:javascripts/*.js']
       },
 

components/article-settings-variables.tpl

@@ -0,0 +1,19 @@
+{%- assign articleSettingsData = article.data.article_settings -%}
+
+{% assign article_data_show_date_defined = false %}
+{% if article.data.article_settings.show_date == true or article.data.article_settings.show_date == false %}
+  {% assign show_article_date = article.data.article_settings.show_date %}
+  {% assign article_data_show_date_defined = true %}
+{% elsif site.data.article_settings.show_dates == false %}
+  {% assign show_article_date = false %}
+{% else %}
+  {% assign show_article_date = true %}
+{% endif %}
+
+{% if article.data.article_settings.show_comments == true or article.data.article_settings.show_comments == false %}
+  {% assign show_article_comments = article.data.article_settings.show_comments %}
+{% elsif site.data.article_settings.show_comments == false %}
+  {% assign show_article_comments = false %}
+{% else %}
+  {% assign show_article_comments = true %}
+{% endif %}

components/edicy-tools.tpl

@@ -1,5 +1,10 @@
 {% editorjsblock %}
   <script src='{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.js'></script>
+
+  {% if _isSettingsEditor == true %}
+    {% include "settings-editor" %}
+  {% endif %}
+
   <script>
     var siteData = new Edicy.CustomData({
       type: 'site'

components/html-head.tpl

@@ -16,7 +16,7 @@
 {% if site.data.touch_icon %}<link rel="apple-touch-icon" href="{{ site.data.touch_icon }}">{% endif %}
 
 {% comment %}STYLESHEETS{% endcomment %}
-{% stylesheet_link "main.min.css?v=berlin-2.2.2" %}
+{% stylesheet_link "main.min.css?v=berlin-2.2.3" %}
 
 {% comment %}Google fonts for Design Editor{% endcomment %}
 <link href="https://fonts.googleapis.com/css?family=Anonymous+Pro:400,400i,700,700i|Arvo:400,400i,700,700i|Cousine:400,400i,700,700i|Crimson+Text:400,400i,700,700i|Fira+Sans:400,400i,700,700i|Lato:400,400i,700,700i|Lora:400,400i,700,700i|Montserrat:400,400i,700,700i|Noto+Serif:400,400i,700,700i|Open+Sans:400,400i,700,700i|PT+Sans:400,400i,700,700i|PT+Serif:400,400i,700,700i|Playfair+Display:400,400i,700,700i|Raleway:400,400i,700,700i|Roboto+Mono:400,400i,700,700i|Roboto+Slab:400,700|Roboto:400,400i,700,700i|Source+Sans+Pro:400,400i,700,700i|Ubuntu+Mono:400,400i,700,700i|Ubuntu:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,hebrew,latin-ext,vietnamese" rel="stylesheet">

components/settings-article-page.tpl

@@ -0,0 +1,94 @@
+{% include 'settings-editor-button',
+  _titleKey: "article",
+  _descriptionKey: "edit_article_settings",
+  _className: "js-article-settings-btn",
+  _wrapClassName: "content_settings-btn"
+%}
+
+<script>
+  window.addEventListener('DOMContentLoaded', function(event) {
+    {% if articleSettingsData %}
+      var articleDataValues = {{ articleSettingsData | json }};
+    {% else %}
+      var articleDataValues = {};
+    {% endif %}
+    {% if site.data.article_settings %}
+      var globalDataValues = {{ site.data.article_settings | json }};
+    {% else %}
+      var globalDataValues = {};
+    {% endif %}
+    var show_comments, show_date;
+    if (articleDataValues.show_comments != null && articleDataValues.show_comments !== '') {
+      show_comments = Boolean(articleDataValues.show_comments);
+    } else if (globalDataValues.show_comments != null && globalDataValues.show_comments !== '') {
+      show_comments = Boolean(globalDataValues.show_comments);
+    } else {
+      show_comments = true;
+    }
+    if (articleDataValues.show_date != null && articleDataValues.show_date !== '') {
+      show_date = Boolean(articleDataValues.show_date);
+    } else if (globalDataValues.show_dates != null && globalDataValues.show_dates !== '') {
+      show_date = Boolean(globalDataValues.show_dates);
+    } else {
+      show_date = true;
+    }
+
+    var valuesObj = {
+      show_comments: show_comments,
+      show_date: show_date
+    }
+
+    initSettingsEditor(
+      {
+        settingsBtn: document.querySelector('.js-article-settings-btn'),
+        menuItems: [
+          {
+            "titleI18n": "comments",
+            "type": "toggle",
+            "key": "show_comments",
+            "tooltipI18n": "toggle_current_article_comments",
+            "states": {
+              "on": true,
+              "off": false
+            }
+          },
+          {
+            "titleI18n": "publishing_date",
+            "type": "toggle",
+            "key": "show_date",
+            "tooltipI18n": "toggle_current_article_date",
+            "states": {
+              "on": true,
+              "off": false
+            }
+          }
+        ],
+        dataKey: 'article_settings',
+        values: valuesObj,
+        entityData: 'articleData',
+        containerClass: ['bottom-settings-popover', 'first', 'editor_default', 'js-prevent-sideclick'],
+        noReload: true,
+        prevFunc: function(data) {
+          var $articleComment = $('.comments'),
+              $articleDate = $('.post-date');
+
+          if (data.show_date === true) {
+            $articleDate.removeClass('hide-article-date');
+            $articleDate.addClass('show-article-date');
+          } else if (data.show_date === false) {
+            $articleDate.removeClass('show-article-date');
+            $articleDate.addClass('hide-article-date');
+          }
+
+          if (data.show_comments === true) {
+            $articleComment.removeClass('hide-article-comments');
+            $articleComment.addClass('show-article-comments');
+          } else if (data.show_comments === false) {
+            $articleComment.removeClass('show-article-comments');
+            $articleComment.addClass('hide-article-comments');
+          }
+        }
+      }
+    );
+  });
+</script>

components/settings-blog-page.tpl

@@ -0,0 +1,73 @@
+{% include 'settings-editor-button',
+  _titleKey: "blog",
+  _descriptionKey: "edit_blog_settings",
+  _className: "js-blog-settings-editor",
+  _wrapClassName: "content_settings-btn"
+%}
+
+<script>
+  window.addEventListener('DOMContentLoaded', function(event) {
+    {% if site.data.article_settings %}
+      var globalDataValues = {{ site.data.article_settings | json }};
+    {% else %}
+      var globalDataValues = {};
+    {% endif %}
+    var show_comments, show_dates;
+    if (globalDataValues.show_comments != null && globalDataValues.show_comments !== '') {
+      show_comments = Boolean(globalDataValues.show_comments);
+    } else {
+      show_comments = true;
+    }
+    if (globalDataValues.show_dates != null && globalDataValues.show_dates !== '') {
+      show_dates = Boolean(globalDataValues.show_dates);
+    } else {
+      show_dates = true;
+    }
+    var valuesObj = {
+      show_comments: show_comments,
+      show_dates: show_dates
+    }
+    initSettingsEditor(
+      {
+        settingsBtn: document.querySelector('.js-blog-settings-editor'),
+        menuItems: [
+          {
+            "titleI18n": "comments",
+            "type": "toggle",
+            "key": "show_comments",
+            "tooltipI18n": "toggle_all_articles_comments",
+            "states": {
+              "on": true,
+              "off": false
+            }
+          },
+          {
+            "titleI18n": "publishing_date",
+            "type": "toggle",
+            "key": "show_dates",
+            "tooltipI18n": "toggle_all_dates",
+            "states": {
+              "on": true,
+              "off": false
+            }
+          }
+        ],
+        dataKey: 'article_settings',
+        values: valuesObj,
+        entityData: 'siteData',
+        noReload: true,
+        containerClass: ['bottom-settings-popover', 'first', 'editor_default', 'js-prevent-sideclick'],
+        prevFunc: function(data) {
+          var $articleDate = $('.post-date.site-data');
+          if (data.show_dates === true) {
+            $articleDate.removeClass('hide-article-date');
+            $articleDate.addClass('show-article-date');
+          } else if (data.show_dates === false) {
+            $articleDate.removeClass('show-article-date');
+            $articleDate.addClass('hide-article-date');
+          }
+        },
+      }
+    );
+  });
+</script>

components/settings-editor-button.tpl

@@ -0,0 +1,17 @@
+<div class="js-prevent-sideclick layout_settings-btn {{_wrapClassName}}">
+  <button class="{{_className}} js-settings-editor-btn edy-cbtn">
+    <span>
+      <span class="edy-cbtn-content">
+        <span class="edy-cbtn-ico"></span>
+        <span>
+          {%- if _titleKey != blank -%}
+            <div class="bold">{{ _titleKey | lce | escape_once }}</div>
+          {%- endif -%}
+          {%- if _descriptionKey != blank -%}
+            <div class="grey">{{ _descriptionKey | lce | escape_once }}</div>
+          {%- endif -%}
+        </span>
+      </span>
+    </span>
+  </button>
+</div>

components/settings-editor.tpl

@@ -0,0 +1,70 @@
+{% if editmode %}
+  <script>
+    function initSettingsEditor(options = {}) {
+      var entityData;
+      if (options.entityData === 'siteData') {
+        var entityData = new Edicy.CustomData({
+          type: 'site'
+        });
+      } else if (options.entityData === 'articleData') {
+        var entityData = new Edicy.CustomData({
+          type: 'article',
+          id: '{{article.id}}'
+        });
+      } else {
+        var entityData = new Edicy.CustomData({
+          type: 'page',
+          id: '{{page.id}}'
+        });
+      }
+
+      var SettingsEditor = new Edicy.SettingsEditor(options.settingsBtn, {
+        menuItems: options.menuItems,
+        values: options.values || options.defaultValues,
+        buttonTitleI18n: options.buttonTitleI18n,
+        buttonActiveClass: 'active',
+        containerClass: options.containerClass || 'editor_default',
+        preview: function(data) {
+          options.prevFunc && options.prevFunc(data);
+        },
+        commit: function(data) {
+          entityData.set(options.dataKey, data, {
+            success: function() {
+              if (options.noReload !== true) {
+                window.location.reload();
+              } else {
+                $('body').removeClass('layout_settings-visible');
+              }
+            }
+          });
+        }
+      });
+
+      options.settingsBtn.removeAttribute('disabled');
+      $('.edy-settings-editor:not(.editor_default)').each(function() {
+        if ($(this).find('.layout_settings-close').length <= 0) {
+          $(this).prepend('<div class="layout_settings-close"></div>');
+        }
+      });
+      $('.layout_settings-close').click(function() {
+        $('body').trigger('click');
+      });
+      $('.js-settings-editor-btn').click(function() {
+        if ($(':not(.editor_default) .edy-settings-editor-inner-title').length >= 1) {
+          $('.edy-settings-editor-inner-title').text($(this).find('.edy-cbtn-content .p14.bold').text());
+        } else {
+          $('.edy-settings-editor:not(.editor_default) .edy-settings-editor-inner').prepend(
+            '<h3 class="edy-settings-editor-inner-title">' + $(this).find('.edy-cbtn-content .p14.bold').text() + '</h3>'
+          );
+        }
+      });
+      $(document).on('click', function(event) {
+        if (!$(event.target).closest('.js-prevent-sideclick').length) {
+          $('body').removeClass('layout_settings-visible');
+        };
+      });
+    }
+
+    site.initSettingsEditorBtn();
+  </script>
+{% endif %}

components/settings-popover.tpl

@@ -0,0 +1,29 @@
+{%- if editmode -%}
+  <div class="layout_settings-popover js-layout_settings-popover">
+    {%- if _blogPage == true -%}
+      {% include 'settings-blog-page' %}
+      {% include "edicy-tools", _isSettingsEditor: true %}
+    {%- elsif _articlePage == true -%}
+      {% include 'settings-article-page' %}
+      {% include "edicy-tools", _isSettingsEditor: true %}
+    {%- endif -%}
+
+    <div class="layout_settings-arrow"></div>
+  </div>
+
+  <div class="js-layout_settings-btn js-prevent-sideclick d-none">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clip-path="url(#clip0)">
+        <path d="M10.707 3.22198L3.63596 10.293C3.21533 10.7137 3.02123 11.2751 3.05366 11.8256C3.05742 11.8895 3.06175 11.9517 3.0673 12.0124C3.0673 12.0288 16.0424 12.0288 16.0424 12.0288C16.3665 11.7046 16.9451 11.126 17.7781 10.293L10.707 3.22198ZM12.1212 1.80777L19.1923 8.87884C19.9734 9.65988 19.9734 10.9262 19.1923 11.7073L12.1212 18.7783C10.5591 20.3404 8.02649 20.3404 6.46439 18.7783L2.22175 14.5357C0.659653 12.9736 0.659653 10.4409 2.22175 8.87884L9.29282 1.80777C10.0739 1.02672 11.3402 1.02672 12.1212 1.80777Z" fill="black"/>
+        <path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M20 22C21.6569 22 23 20.6569 23 19C23 17.8954 22 16.2288 20 14C18 16.2288 17 17.8954 17 19C17 20.6569 18.3431 22 20 22Z" fill="black"/>
+      </g>
+      <defs>
+        <clipPath id="clip0">
+          <rect width="24" height="24" fill="white"/>
+        </clipPath>
+      </defs>
+    </svg>
+  </div>
+
+  <div class='layout_settings-tooltip'>{{ 'design_settings' | lce | escape_once }}</div>
+{%- endif -%}

components/template-cs-product-list.tpl

@@ -8,4 +8,4 @@
     "scope": "global"
   */
   --product-list-item__width: 33.3%;
-}
+}