Merge pull request #92 from Voog/design_editor

Voog design editor features support

Gruntfile.js

@@ -6,10 +6,13 @@ module.exports = function(grunt) {
 
     // Removes old files.
     clean: {
-      assets: ['assets'],
-      images: ['images'],
-      javascripts: ['javascripts'],
-      stylesheets: ['stylesheets']
+      reset: {
+        src: ['assets', 'images', 'javascripts', 'stylesheets']
+      },
+
+      remove: {
+        src: ['sources/components/custom-styles/tmp']
+      }
     },
 
     modernizr_builder: {
@@ -22,42 +25,6 @@ module.exports = function(grunt) {
       }
     },
 
-    // Copys the files from the source folders to the layout folders.
-    copy: {
-      assets: {
-        files: [
-          {
-            expand: true,
-            cwd: 'sources/assets/copy',
-            src: '*',
-            dest: 'assets/'
-          }
-        ]
-      },
-
-      images: {
-        files: [
-          {
-            expand: true,
-            cwd: 'sources/images/copy',
-            src: '*',
-            dest: 'images/'
-          }
-        ]
-      },
-
-      javascripts: {
-        files: [
-          {
-            expand: true,
-            cwd: 'sources/javascripts/copy',
-            src: '*',
-            dest: 'javascripts/'
-          }
-        ]
-      }
-    },
-
     // Concatenates the javascript source files to the javascripts folder.
     concat: {
       build: {
@@ -89,7 +56,7 @@ module.exports = function(grunt) {
 
     // Compiles the stylesheet files.
     sass: {
-      build: {
+      build_main: {
         options: {
           style: 'expanded',
           sourcemap: 'none'
@@ -101,6 +68,21 @@ module.exports = function(grunt) {
           dest: 'stylesheets/',
           ext: '.css'
         }]
+      },
+
+      // Builds custom style components to temporary folder.
+      build_custom_styles: {
+        options: {
+          style: 'expanded',
+          sourcemap: 'none'
+        },
+        files: [{
+          expand: true,
+          cwd: 'sources/components/custom-styles',
+          src: '*.scss',
+          dest: 'sources/components/custom-styles/tmp',
+          ext: '.css'
+        }]
       }
     },
 
@@ -110,11 +92,16 @@ module.exports = function(grunt) {
           require('autoprefixer')({browsers: 'last 4 versions'})
         ]
       },
-      dist: {
+      main_styles: {
         src: [
           'stylesheets/*.css',
           'stylesheets/!*.min.css'
         ]
+      },
+      custom_styles: {
+        src: [
+          'sources/components/custom-styles/tmp/*.css'
+        ]
       }
     },
 
@@ -153,6 +140,78 @@ module.exports = function(grunt) {
       }
     },
 
+    // =========================================================================
+    // If custom styles can be concatenated to one component, then this
+    // block here will replace the placeholder strings with proper <style> tag
+    // beginning and ending.
+    // =========================================================================
+    // replace: {
+    //   custom_styles: {
+    //     src: ['sources/components/custom-styles/tmp/*.css'],
+    //     overwrite: true,
+    //     replacements: [
+    //       {
+    //         from: '/* GRUNT-REPLACE: CUSTOM-STYLES-PREPEND */',
+    //         to: '{% comment %}Template custom styles definitions.{% endcomment %}\n<style data-voog-style>'
+    //       },
+    //       {
+    //         from: '/* GRUNT-REPLACE: CUSTOM-STYLES-APPEND */',
+    //         to: '</style>'
+    //       }
+    //     ]
+    //   }
+    // },
+
+    // Copys the files from the source folders to the layout folders.
+    copy: {
+      assets: {
+        files: [
+          {
+            expand: true,
+            cwd: 'sources/assets/copy',
+            src: '*',
+            dest: 'assets/'
+          }
+        ]
+      },
+
+      images: {
+        files: [
+          {
+            expand: true,
+            cwd: 'sources/images/copy',
+            src: '*',
+            dest: 'images/'
+          }
+        ]
+      },
+
+      javascripts: {
+        files: [
+          {
+            expand: true,
+            cwd: 'sources/javascripts/copy',
+            src: '*',
+            dest: 'javascripts/'
+          }
+        ]
+      },
+
+      // Copies the compiled css files from temporary folder to "components"
+      // folder and renames the files to ""*.tpl".
+      custom_styles: {
+        files: [
+          {
+            expand: true,
+            cwd: 'sources/components/custom-styles/tmp',
+            src: '*.css',
+            dest: 'components',
+            ext: '.tpl'
+          }
+        ]
+      }
+    },
+
     // Executes the Voog Kit toolkit manifest generation and file upload commands.
     exec: {
       kitmanifest: {
@@ -181,44 +240,50 @@ module.exports = function(grunt) {
 
       js_copy: {
         files: 'sources/javascripts/copy/*.js',
-        tasks: ['copy:javascripts', 'exec:kitmanifest']
+        tasks: ['copy:javascripts', 'exec:kitmanifest', 'exec:kit:javascripts/*.js']
       },
 
       js_concat: {
         files: 'sources/javascripts/concat/*.js',
-        tasks: ['concat:build', 'uglify:build', 'exec:kitmanifest']
+        tasks: ['concat:build', 'uglify:build', 'exec:kitmanifest', 'exec:kit:javascripts/*.js']
       },
 
-      css: {
+      css_main: {
         files: [
           'sources/stylesheets/*.scss',
-          'sources/stylesheets/*/*.scss'
+          'sources/stylesheets/*/*.scss',
         ],
-        tasks: ['sass:build', 'postcss', 'cssmin:build', 'exec:kitmanifest']
+        tasks: ['sass:build_main', 'postcss', 'cssmin:build', 'exec:kitmanifest', 'exec:kit:stylesheets/*.css']
+      },
+
+      custom_styles: {
+        files: 'sources/components/custom-styles/*.scss',
+        tasks: ['sass:build_custom_styles', 'postcss:custom_styles', 'copy:custom_styles', 'clean:remove', 'exec:kitmanifest']
       },
 
       img_copy: {
         files: 'sources/images/copy/*',
-        tasks: [ 'copy:images', 'exec:kitmanifest']
+        tasks: [ 'copy:images', 'exec:kitmanifest', 'exec:kit:images/*']
       },
 
       img_minify: {
         files: 'sources/images/minify/*',
-        tasks: ['imagemin:build_images', 'exec:kitmanifest']
+        tasks: ['imagemin:build_images', 'exec:kitmanifest', 'exec:kit:images/*']
       },
 
       assets_copy: {
         files: 'sources/assets/copy/*',
-        tasks: ['copy:assets', 'exec:kitmanifest']
+        tasks: ['copy:assets', 'exec:kitmanifest', 'exec:kit:assets/*']
       },
 
       assets_minify: {
         files: 'sources/assets/minify/*',
-        tasks: ['imagemin:build_assets', 'exec:kitmanifest']
+        tasks: ['imagemin:build_assets', 'exec:kitmanifest', 'exec:kit:assets/*']
       },
 
+
       voog: {
-        files: ['javascripts/*.js', 'stylesheets/*.css', 'layouts/*.tpl', 'components/*.tpl'],
+        files: ['layouts/*.tpl', 'components/*.tpl'],
         options: {
           spawn: false
         }
@@ -228,17 +293,22 @@ module.exports = function(grunt) {
 
   grunt.loadNpmTasks('grunt-contrib-clean');
   grunt.loadNpmTasks('grunt-modernizr-builder');
-  grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-postcss');
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-sass');
   grunt.loadNpmTasks('grunt-contrib-cssmin');
   grunt.loadNpmTasks('grunt-contrib-imagemin');
+  // Uncomment if custom styles can be concatenated to one component.
+  // grunt.loadNpmTasks('grunt-text-replace');
+  grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-exec');
 
-  grunt.registerTask('default', ['clean', 'modernizr_builder', 'copy', 'concat', 'uglify', 'sass', 'postcss', 'cssmin', 'imagemin']);
+  // Default task with text replacement (for automatic <style> tag wrapping).
+  // grunt.registerTask('default', ['clean:reset', 'modernizr_builder', 'concat', 'uglify', 'sass', 'postcss', 'cssmin', 'imagemin', 'replace', 'copy', 'clean:remove']);
+
+  grunt.registerTask('default', ['clean:reset', 'modernizr_builder', 'concat', 'uglify', 'sass', 'postcss:main_styles', 'cssmin', 'imagemin', 'postcss:custom_styles', 'copy', 'clean:remove']);
 
   grunt.event.on('watch', function(action, filepath, target) {
     if (target == 'voog') {

components/blog-listing-article-add.tpl

@@ -1,4 +1,4 @@
-<a class="blog-article-newer without-image add-button" href="{% if blog-listing-article-add == "item" %}{{ item.url }}{% else %}{{ page.path }}{% endif %}?new">
+<a class="blog-article-newer without-image cms-blog-article-add-button" href="{% if blog-listing-article-add == "item" %}{{ item.url }}{% else %}{{ page.path }}{% endif %}?new">
   <div class="article-top">
     <div class="top-inner aspect-ratio-inner">
       <div class="article-placeholder">

components/menu-level-1.tpl

@@ -1,6 +1,6 @@
 <ul class="menu menu-horizontal menu-public menu-level-1{% if menu_current %} menu-current{% endif %}">
   {% unless site.root_item.hidden? %}
-    <li class="menu-item js-prevent-link-click">
+    <li class="menu-item{% if site.root_item.selected? %} item-current{% endif %} js-prevent-link-click">
       {% menulink site.root_item %}
 
       {% if blog_pages_size == 1 %}

components/template-cs-blog-list.tpl

@@ -0,0 +1,105 @@
+:root {
+  /* VoogStyle
+    "pathI18n": ["blog"],
+    "titleI18n": "max_nr_of_columns",
+    "editor": "listPicker",
+    "list": {{ base_number_of_columns_set }},
+    "featured": true,
+    "scope": "global"
+  */
+  --article-box-width: 33.3%;
+  /* VoogStyle
+    "pathI18n": ["blog", "article_box"],
+    "titleI18n": "image_radius",
+    "editor": "rangePicker",
+    "min": 0,
+    "max": 100,
+    "step": 1,
+    "unit": "%",
+    "scope": "global"
+  */
+  --article-box-image-radius: 0;
+  /* VoogStyle
+    "pathI18n": ["blog", "article_box", "normal"],
+    "titleI18n": "line_height",
+    "editor": "rangePicker",
+    "min": 1,
+    "max": 5,
+    "step": 0.1,
+    "unit": "",
+    "scope": "global"
+  */
+  --article-box-line-height: 1.2;
+  /* VoogStyle
+    "pathI18n": ["blog", "article_box", "normal"],
+    "titleI18n": "size",
+    "editor": "rangePicker",
+    "min": 8,
+    "max": 100,
+    "unit": "px",
+    "featured": true,
+    "scope": "global"
+  */
+  --article-box-font-size: 18px;
+  /* VoogStyle
+    "pathI18n": ["blog", "article_box", "normal"],
+    "titleI18n": "font_size",
+    "type": "button",
+    "editor": "toggleIcon",
+    "states": {
+      "on": "600",
+      "off": "400"
+    },
+    "icon": "bold",
+    "scope": "global"
+  */
+  --article-box-font-weight: 400;
+  /* VoogStyle
+    "pathI18n": ["blog", "article_box", "normal"],
+    "titleI18n": "font_style",
+    "type": "button",
+    "editor": "toggleIcon",
+    "states": {
+      "on": "italic",
+      "off": "normal"
+    },
+    "icon": "italic",
+    "scope": "global"
+  */
+  --article-box-font-style: normal;
+  /* VoogStyle
+    "pathI18n": ["blog", "article_box", "normal"],
+    "titleI18n": "text_decoration",
+    "type": "button",
+    "editor": "toggleIcon",
+    "states": {
+      "on": "underline",
+      "off": "none"
+    },
+    "icon": "underline",
+    "scope": "global"
+  */
+  --article-box-text-decoration: none;
+  /* VoogStyle
+    "pathI18n": ["blog", "article_box", "normal"],
+    "titleI18n": "text_transform",
+    "type": "button",
+    "editor": "toggleIcon",
+    "states": {
+      "on": "uppercase",
+      "off": "none"
+    },
+    "icon": "uppercase",
+    "scope": "global"
+  */
+  --article-box-text-transform: none;
+  /* VoogStyle
+    "pathI18n": ["blog", "article_box", "normal"],
+    "titleI18n": "color",
+    "type": "button",
+    "editor": "colorPicker",
+    "featured": true,
+    "scope": "global"
+  */
+  --article-box-color: rgba(0, 0, 0, 0.8);
+}