locomotivecms_wagon 2.4.1 → 3.0.0.beta2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 072fec8725ec5ef0d48b6e9e06174fc47884725532eb650a660df682a5a6039d
-  data.tar.gz: 5f9c92b2ffde2a7b470e775d8be1a318d1d6c83b371b4307f2cddc5d3da37c60
+  metadata.gz: c33351fe2046901e6626169513512649c1ef89138ddefbb7e6518f7638aa9551
+  data.tar.gz: c68a753d743433cc31a90869cf5a64b9dec4b003e824700c97307b290aa5cb0b
 SHA512:
-  metadata.gz: fde290dedb20a47167514e285352003b3bf4dbdef20bba601bc678d589b7aabaa5430e64366ba900354643ded46ea7e882c33040a4a4618aec552e54c5c2162e
-  data.tar.gz: c314ac6240384b8f5f68984a8412929b718f31360c511abe4d12b53db7141c3b025aa2dcb1fab29b14d9f6cfaf5fafc35d2e263bd8ce09a7604ea61949ca8ccd
+  metadata.gz: cc455822bee6b547cbcb809e6c37089aff24d6a1e693ba260fe5b40321b65e0fa65baec724f2d8c39aed10f1119f62f7c7becba871f310c5e553c05e0f45eaf6
+  data.tar.gz: 0170d1822297219fde5aec1052710b3f2fc29cc6aa7f94b78630713c3eb0ab9a98781706828d9c76aca9e037aacb59576fb3d40b91ddc6ab566f188f90017cb8

data/Gemfile

@@ -6,9 +6,9 @@ gemspec
 gem 'rb-fsevent', '~> 0.9.1'
 
 # Development
-# gem 'locomotivecms_common', github: 'locomotivecms/common', branch: 'master', require: false
-# gem 'locomotivecms_coal',   github: 'locomotivecms/coal',   branch: 'master', require: false
-# gem 'locomotivecms_steam',  github: 'locomotivecms/steam',  branch: 'master', require: false
+# gem 'locomotivecms_common', github: 'locomotivecms/common', ref: '4d1bd56' , require: false
+# gem 'locomotivecms_coal',   github: 'locomotivecms/coal',   ref: '01a0a32', require: false
+# gem 'locomotivecms_steam',  github: 'locomotivecms/steam',  ref: 'd621100', require: false
 # gem 'duktape', github: 'judofyr/duktape.rb', ref: '20ef6a5'
 
 # Local development

data/generators/blank/app/assets/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env"]
+}

data/generators/blank/app/assets/fonts/.empty_directory

@@ -0,0 +1 @@
+.empty_directory

data/generators/blank/app/assets/javascripts/app.js

@@ -0,0 +1,19 @@
+// === Wagon main javascript file ===
+
+// Tell Webpack to load the style
+import '../stylesheets/app.scss';
+
+// Import the classes required to handle sections
+import SectionsManager from './sections/_manager';
+import * as Sections from './sections';
+
+document.addEventListener('DOMContentLoaded', event => {
+
+  // Load all the sections
+  const sectionsManager = new SectionsManager();
+
+  // Register sections here. DO NOT REMOVE OR UPDATE THIS LINE
+
+  sectionsManager.start();
+
+});

data/generators/blank/app/assets/javascripts/sections/_manager.js

@@ -0,0 +1,94 @@
+class Manager {
+
+  constructor() {
+    this.sections = {};
+  }
+
+  registerSection(type, actions) {
+    console.log(type, actions);
+    this.sections[type] = actions;
+  }
+
+  start() {
+    this.eachType((type, actions) => {
+      this.queryAll(`.locomotive-section[data-locomotive-section-type="${type}"]`).forEach((section, index) => {
+        this.runAction(actions, 'load', section);
+      });
+    });
+    this.registerEvents();
+
+    window._sectionsManager = this;
+  }
+
+  registerEvents() {
+    const events = {
+      section: ['load', 'unload', 'select', 'deselect', 'reorder'],
+      block: ['select', 'deselect']
+    }
+
+    for (var namespace in events) {
+      events[namespace].forEach(eventType => {
+        const eventName = `locomotive::${namespace}::${eventType}`;
+        const actionName = this.eventTypeToActionName(namespace, eventType);
+
+        document.addEventListener(eventName, event => {
+          this.applyRuleToEvent(actionName, event);
+        });
+      });
+    }
+  }
+
+  applyRuleToEvent(actionName, event) {
+    const { sectionId, blockId } = event.detail;
+    const section   = document.getElementById(`locomotive-section-${sectionId}`);
+    const type      = section.getAttribute('data-locomotive-section-type');
+    const block     = this.queryOne(`[data-locomotive-block="section-${sectionId}-block-${blockId}"]`, section);
+
+    this.runAction(this.sections[type], actionName, section, block)
+  }
+
+  eventTypeToActionName(namespace, eventType) {
+    if (namespace === 'section')
+      return eventType;
+    else
+      return namespace + eventType.charAt(0).toUpperCase() + eventType.slice(1);
+  }
+
+  runAction(actions, actionName, section, block) {
+    const action = actions[actionName];
+
+    if (action !== undefined)
+      action(section, block);
+  }
+
+  eachType(callback) {
+    for (var type in this.sections) {
+      const actions = this.sections[type];
+      callback(type, actions)
+    }
+  }
+
+  queryAll(selector, scope) {
+    scope = scope ? scope : document;
+    return scope.querySelectorAll(selector);
+  }
+
+  queryOne(selector, scope) {
+    scope = scope ? scope : document;
+    return scope.querySelector(selector);
+  }
+
+  testAction(eventType, section, block) {
+    const hasBlock  = block !== undefined && block !== null ;
+    const namespace = hasBlock ? 'block' : 'section';
+    const sectionId = section.getAttribute('id').replace('locomotive-section-', '');
+    const blockId   = hasBlock ? block.getAttribute('data-locomotive-block').replace(`section-${sectionId}-block-`, '') : null;
+    const detail    = { detail: { sectionId, blockId } };
+    const eventName = `locomotive::${namespace}::${eventType}`;
+
+    document.dispatchEvent(new CustomEvent(eventName, detail));
+  }
+
+}
+
+export default Manager;

data/generators/blank/app/assets/javascripts/sections/index.js

@@ -0,0 +1,5 @@
+// Import all the sections here
+//
+// Example:
+// export { default as Hero } from './hero';
+//

data/generators/blank/app/assets/package.json.tt

@@ -0,0 +1,35 @@
+{
+  "name": "<%= config[:name] %>",
+  "version": "1.0.0",
+  "description": "Assets source for the <%= config[:name] %> website",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack --config webpack.dev.js --progress --colors --watch",
+    "build:dev": "webpack --config webpack.dev.js --progress",
+    "build:prod": "NODE_ENV=production webpack --config webpack.prod.js --progress",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Wagon",
+  "license": "ISC",
+  "dependencies": {
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.4",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-es2015": "^6.24.1",
+    "css-loader": "^0.28.11",
+    "mini-css-extract-plugin": "^0.4.0",
+    "node-sass": "^4.9.0",
+    "optimize-css-assets-webpack-plugin": "^4.0.2",
+    "postcss-flexbugs-fixes": "^3.3.1",
+    "postcss-loader": "^2.1.5",
+    "sass-loader": "^7.0.1",
+    "style-loader": "^0.21.0",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.1",
+    "webpack-merge": "^4.1.4",
+    "file-loader": "^1.1.11",
+    "image-webpack-loader": "^4.3.0"
+  }
+}

data/generators/blank/app/assets/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('postcss-flexbugs-fixes'),
+    require('autoprefixer')
+  ]
+}

data/generators/blank/app/assets/stylesheets/app.scss

@@ -0,0 +1 @@
+// Wagon main stylesheet file

data/generators/blank/app/assets/webpack.common.js

@@ -0,0 +1,47 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  entry: './javascripts/app.js',
+  output: {
+    path:     path.resolve(__dirname, '../../public'),
+    filename: 'javascripts/bundle.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|es6)$/,
+        exclude: /(node_modules|bower_components)/,
+        loader: 'babel-loader',
+        query: { presets: ['env'] }
+      },
+      {
+        test: /\.scss$/,
+        use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
+      },
+      {
+        test: /\.(woff2?|svg)$/,
+        loader: 'file-loader?name=fonts/[name].[ext]&useRelativePath=false&publicPath=../'
+      },
+      {
+        test: /\.(ttf|eot|otf)$/,
+        loader: 'file-loader?name=fonts/[name].[ext]&useRelativePath=false&publicPath=../'
+      },
+      {
+        test: /\.(gif|png|jpe?g|svg)$/i,
+        use: [
+          {
+            loader: 'file-loader', options: {
+              outputPath: 'images/',
+              name: '[path][name].[ext]'
+            }
+          },
+          { loader: 'image-webpack-loader', options: { bypassOnDebug: true } }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({ filename: 'stylesheets/bundle.css', allChunks: true })
+  ]
+};

data/generators/blank/app/assets/webpack.dev.js

@@ -0,0 +1,7 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'inline-source-map'
+});

data/generators/blank/app/assets/webpack.prod.js

@@ -0,0 +1,12 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.config.js');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+
+module.exports = merge(common, {
+  plugins: [
+    new OptimizeCssAssetsPlugin({
+      assetNameRegExp: /\.css$/,
+      cssProcessorOptions: { discardComments: { removeAll: true } }
+    })
+  ]
+});

data/generators/blank/app/views/pages/404.liquid

@@ -2,7 +2,7 @@
 title: Page not found
 published: true
 ---
-{% extends index %}
+{% extends layouts/default %}
 
 {% block 'main' %}
 

data/generators/blank/app/views/pages/index.liquid

@@ -2,18 +2,10 @@
 title: Home page
 published: true
 ---
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>{{ site.name }}</title>
-    <meta name="keywords" value="{{ site.meta_keywords }}" />
-    <meta name="description" value="{{ site.meta_description }}" />
-  </head>
-  <body>
-    <h1>{{ page.title }}</h1>
-    {% block 'main' %}
-    <p>Lorem ipsum....</p>
-    {% endblock %}
-  </body>
-</html>
+{% extends layouts/default %}
+
+{% block 'main' %}
+
+<p>Go to app/views/pages/index.liquid to modify the home page</p>
+
+{% endblock %}

data/generators/blank/app/views/pages/layouts/default.liquid

@@ -0,0 +1,22 @@
+---
+title: Default layout
+is_layout: false
+---
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    {% seo %}
+
+    {{ 'bundle.css' | stylesheet_tag }}
+    {{ 'bundle.js' | javascript_tag }}
+  </head>
+  <body>
+    <h1>{{ page.title }}</h1>
+
+    {% block 'main' %}
+    {% endblock %}
+  </body>
+</html>

data/generators/blank/app/views/sections/.empty_directory

@@ -0,0 +1 @@
+.empty_directory

data/generators/page/template.liquid.tt

@@ -41,6 +41,17 @@ content_type: <%= config[:content_type] -%>
 # Control the display of the page in the back-office.
 # display_settings:
 #   hidden: true          # hidden for authors?
+
+# Content of the list of sections if the {% sections_dropzone %} liquid tag is present in the page.
+# sections_dropzone_content: >
+#   []
+#
+
+# Content of sections outside the dropzone
+# sections_content: >
+#   {}
+#
+
 ---
 {% extends parent %}
 

data/generators/section/%type%.js.tt

@@ -0,0 +1,26 @@
+const Section = {
+
+  // load: (section) => {
+  // },
+
+  // unload: (section) => {
+  // },
+
+  // select: (section) => {
+  // },
+
+  // deselect: (section) => {
+  // },
+
+  // reorder: (section) => {
+  // },
+
+  // blockSelect: (section, block) => {
+  // },
+
+  // blockDeSelect: (section, block) => {
+  // }
+
+}
+
+export default Section;

data/generators/section/template.liquid.tt

@@ -0,0 +1,183 @@
+---
+{
+  "name": "<%= config[:name] %>",
+  "class": "my-css-classname",
+  "icon": "<%= config[:icon] || 'image_text' %>",
+  <% if config[:global] -%>"keep_icon": true,<% end %>
+  "settings": [
+    {
+      "label": "My awesome title",
+      "id": "title",
+      "type": "text"
+    }
+  ],
+  "blocks": [
+    {
+      "name": "List item",
+      "type": "list_item",
+      "settings": [
+        {
+          "label": "Item title",
+          "id": "title",
+          "type": "text"
+        }
+      ]
+    }
+  ]<% if config[:global] -%>,
+  "default": {
+    "settings": {
+      "title": "Hello world"
+    },
+    "blocks": [
+      {
+        "type": "list_item",
+        "settings": {
+          "title": "Item #1"
+        }
+      },
+      {
+        "type": "list_item",
+        "settings": {
+          "title": "Item #2"
+        }
+      },
+      {
+        "type": "list_item",
+        "settings": {
+          "title": "Item #3"
+        }
+      }
+    ]
+  }<% else -%>,
+  "presets": [
+    {
+      "name": "<%= config[:name] %>",
+      "category": "Category 1",
+      "settings": {
+        "title": "Hello world"
+      },
+      "blocks": [
+        {
+          "type": "list_item",
+          "settings": {
+            "title": "Item #1"
+          }
+        },
+        {
+          "type": "list_item",
+          "settings": {
+            "title": "Item #2"
+          }
+        },
+        {
+          "type": "list_item",
+          "settings": {
+            "title": "Item #3"
+          }
+        }
+      ]
+    }
+  ]<% end %>
+}
+---
+{% comment %}
+Above is the JSON definition of your section filled with random settings and blocks.
+The setting's type can be one of the following values : checkbox, image_picker, index, radio, rich_text, select, text, url.
+Modify it to match your needs.
+
+<% if config[:global] -%>
+To use your global section, just add the following code in your layout template:
+
+  {% global_section <%= config[:type] %> %}
+
+<% else -%>
+To use your section, 2 possibilites:
+
+1. within a dropzone
+
+Make sure that your layouts includes the following liquid tag:
+
+  {% sections_dropzone %}
+
+If you want to test this section in your Wagon site, add the following
+lines in the YAML section of any page including the {% sections_dropzone %}
+(or inheriting from a layout including it):
+
+sections_dropzone_content: >
+  [
+    {
+      "type": "<%= config[:type] %>",
+      "settings": {
+        "title": "My awesome section",
+      },
+      "blocks": [
+        {
+          "type": "list_item",
+          "settings": {
+            "title": "Item #1"
+          }
+        },
+        {
+          "type": "list_item",
+          "settings": {
+            "title": "Item #2"
+          }
+        },
+        {
+          "type": "list_item",
+          "settings": {
+            "title": "Item #3"
+          }
+        }
+      ]
+    }
+  ]
+
+2. as stand-alone section
+
+  {% section <%= config[:type] %> %}
+
+If you want to test this section in your Wagon site, add the following
+lines in the YAML section of the page including the statement above or complete it.
+
+sections_content: >
+  {
+    "<%= config[:type] %>": {
+      "settings": {
+        "title": "My awesome <%= config[:type].humanize %> section"
+      },
+      "blocks": [
+        {
+          "type": "list_item",
+          "settings": {
+            "title": "Item #1"
+          }
+        },
+        {
+          "type": "list_item",
+          "settings": {
+            "title": "Item #2"
+          }
+        },
+        {
+          "type": "list_item",
+          "settings": {
+            "title": "Item #3"
+          }
+        }
+      ]
+    }
+  }
+
+<% end -%>
+{% endcomment %}
+<div>
+  <h2>{{ section.settings.title }}</h2>
+  <ul>
+    {% for block in section.blocks %}
+    <li {{ block.locomotive_attributes }}>
+      {{ block.settings.title }}
+    </li>
+    {% endfor %}
+  </ul>
+</div>