Merge pull request #85 from creative-commoners/pulls/2.0/webpack

NEW Convert frontend assets to use silverstripe/webpack-config

.editorconfig

@@ -10,7 +10,7 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[{*.yml,package.json}]
+[{*.yml,package.json,*.js,*.scss}]
 indent_size = 2
 
 # The indent size used in the package.json file cannot be changed:

.eslintignore

@@ -0,0 +1,2 @@
+client/dist/
+client/lang/

.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@silverstripe/eslint-config/.eslintrc');

.gitattributes

@@ -2,6 +2,9 @@
 /docs export-ignore
 /.gitattributes export-ignore
 /.gitignore export-ignore
+/.eslintignore export-ignore
+/.sass-lint.yml export-ignore
+/.eslintrc.js export-ignore
 /.travis.yml export-ignore
 /.tx export-ignore
 /.scrutinizer.yml export-ignore

.gitignore

@@ -0,0 +1,6 @@
+.sass-cache
+npm-debug.log
+node_modules/
+/**/*.js.map
+/**/*.css.map
+yarn-error.log

.sass-lint.yml

@@ -0,0 +1,178 @@
+# sass-lint config to match the AirBNB style guide
+files:
+  include: '**/client/src/**/*.scss'
+  ignore:
+    - 'client/src/styles/legacy/*'
+    - 'admin/client/src/styles/legacy/*'
+options:
+  formatter: stylish
+  merge-default-rules: false
+rules:
+  # Warnings
+  # Things that require actual refactoring are marked as warnings
+  class-name-format:
+    - 1
+    - convention: hyphenatedbem
+  placeholder-name-format:
+    - 1
+    - convention: hyphenatedlowercase
+  nesting-depth:
+    - 1
+    - max-depth: 3
+  no-ids: 1
+  no-important: 1
+  no-misspelled-properties:
+    - 1
+    - extra-properties:
+       - "-moz-border-radius-topleft"
+       - "-moz-border-radius-topright"
+       - "-moz-border-radius-bottomleft"
+       - "-moz-border-radius-bottomright"
+  variable-name-format:
+    - 1
+    - allow-leading-underscore: true
+      convention: hyphenatedlowercase
+  no-extends: 1
+
+  # Warnings: these things are preferential rather than mandatory
+  no-css-comments: 1
+
+  # Errors
+  # Things that can be easily fixed are marked as errors
+  indentation:
+    - 2
+    - size: 2
+  final-newline:
+    - 2
+    - include: true
+  no-trailing-whitespace: 2
+  border-zero:
+    - 2
+    - convention: '0'
+  brace-style:
+    - 2
+    - allow-single-line: true
+  clean-import-paths:
+    - 2
+    - filename-extension: false
+      leading-underscore: false
+  no-debug: 2
+  no-empty-rulesets: 2
+  no-invalid-hex: 2
+  no-mergeable-selectors: 2
+  # no-qualifying-elements:
+  #   - 1
+  #   - allow-element-with-attribute: false
+  #     allow-element-with-class: false
+  #     allow-element-with-id: false
+  no-trailing-zero: 2
+  no-url-protocols: 2
+  quotes:
+    - 2
+    - style: double
+  space-after-bang:
+    - 2
+    - include: false
+  space-after-colon:
+    - 2
+    - include: true
+  space-after-comma:
+    - 2
+    - include: true
+  space-before-bang:
+    - 2
+    - include: true
+  space-before-brace:
+    - 2
+    - include: true
+  space-before-colon: 2
+  space-between-parens:
+    - 2
+    - include: false
+  trailing-semicolon: 2
+  url-quotes: 2
+  zero-unit: 2
+  single-line-per-selector: 2
+  one-declaration-per-line: 2
+  empty-line-between-blocks:
+    - 2
+    - ignore-single-line-rulesets: true
+
+
+  # Missing rules
+  # There are no sass-lint rules for the following AirBNB style items, but thess
+  # - Put comments on their own line
+  # - Put property delcarations before mixins
+
+  # Disabled rules
+
+  # These are other rules that we may wish to consider using in the future
+  # They are not part of the AirBNB CSS standard but they would introduce some strictness
+  # bem-depth: 0
+  # variable-for-property: 0
+  # no-transition-all: 0
+  # hex-length:
+  #   - 1
+  #   - style: short
+  # hex-notation:
+  #   - 1
+  #   - style: lowercase
+  # property-units:
+  #   - 1
+  #   - global:
+  #       - ch
+  #       - em
+  #       - ex
+  #       - rem
+  #       - cm
+  #       - in
+  #       - mm
+  #       - pc
+  #       - pt
+  #       - px
+  #       - q
+  #       - vh
+  #       - vw
+  #       - vmin
+  #       - vmax
+  #       - deg
+  #       - grad
+  #       - rad
+  #       - turn
+  #       - ms
+  #       - s
+  #       - Hz
+  #       - kHz
+  #       - dpi
+  #       - dpcm
+  #       - dppx
+  #       - '%'
+  #     per-property: {}
+  # force-attribute-nesting: 1
+  # force-element-nesting: 1
+  # force-pseudo-nesting: 1
+  # function-name-format:
+  #   - 1
+  #   - allow-leading-underscore: true
+  #     convention: hyphenatedlowercase
+  # no-color-literals: 1
+  # no-duplicate-properties: 1
+  # mixin-name-format:
+  #   - 1
+  #   - allow-leading-underscore: true
+  #     convention: hyphenatedlowercase
+  # shorthand-values:
+  #   - 1
+  #   - allowed-shorthands:
+  #       - 1
+  #       - 2
+  #       - 3
+  # leading-zero:
+  #   - 1
+  #   - include: false
+  # no-vendor-prefixes:
+  #   - 1
+  #   - additional-identifiers: []
+  #     excluded-identifiers: []
+  #     placeholder-in-extend: 1
+  # no-color-keywords: 2

client/src/bundles/CheckForUpdates.js

@@ -0,0 +1,94 @@
+/* global window */
+
+window.jQuery.entwine('ss', ($) => {
+  /**
+   * p tag that holds button
+   */
+  $('#checkForUpdates').entwine({
+    /**
+     * Magically set by the magic get/set{thisMemberProperty} (see poll function below)
+     */
+    PollTimeout: null,
+
+    /**
+     * Start the loading process
+     */
+    onclick() {
+      this.setLoading();
+    },
+
+    /**
+     * Poll the current job and update the frontend status
+     */
+    onmatch() {
+      if (this.getButton(true).length) {
+        this.setLoading();
+      }
+    },
+
+    /**
+     * Add warning message (set as data attribute on GridFieldRefreshButton) before
+     * and has finished
+     */
+    setLoading() {
+      const message = this.getButton().data('message');
+      $('.ss-gridfield-buttonrow')
+        .first()
+        .prepend(`<p class="alert alert-info">${message}</p>`);
+      this.poll();
+    },
+
+    /**
+     * Poll the provided "check" endpoint to determine whether the job has been processed
+     * and has finished.
+     */
+    poll() {
+      const self = this;
+      $.ajax({
+        url: self.getButton().data('check'),
+        async: true,
+        success: (data) => {
+          self.clearLoading(JSON.parse(data));
+        },
+        error: (error) => {
+          if (typeof console !== 'undefined') {
+            console.log(error);
+          }
+        }
+      });
+    },
+
+    /**
+     * Returns the "Check for updates" button
+     *
+     * @param {boolean} disabled
+     */
+    getButton(disabled) {
+      let button = 'button';
+      if (disabled) {
+        button += ':disabled';
+      }
+      return this.children(button).first();
+    },
+
+    /**
+     * Cleanup timers and reload the GridField
+     * @param {String|boolean} checkResult
+     */
+    clearLoading(checkResult) {
+      if (checkResult !== true) {
+        // Reload the report
+        this.closest('fieldset.ss-gridfield').reload();
+        return;
+      }
+
+      // Ensure the regular poll method is run
+      // Kill any existing timeout
+      clearTimeout(this.getPollTimeout());
+
+      this.setPollTimeout(setTimeout(() => {
+        $('#checkForUpdates').poll();
+      }, 5000));
+    },
+  });
+});

client/src/bundles/GridfieldDropdownFilter.js

@@ -0,0 +1,14 @@
+/* global window */
+
+window.jQuery.entwine('ss', ($) => {
+  $('.gridfield-dropdown-filter select').entwine({
+    /**
+     * Trigger the action when the select is changed. This clicks a
+     * hidden button that is entwined by GridField.js . This is similar
+     * to how GridFieldFilterHeader works.
+     */
+    onchange() {
+      this.parent().find('.action').click();
+    }
+  });
+});

client/src/bundles/bundle.js

@@ -0,0 +1,2 @@
+require('./CheckForUpdates');
+require('./GridfieldDropdownFilter');

client/src/styles/bundle.scss

@@ -0,0 +1,5 @@
+// Import core variables
+@import "variables";
+
+// Maintenance module styles
+@import "sitesummary";

client/src/styles/sitesummary.scss

@@ -0,0 +1,45 @@
+.package-summary {
+  margin-top: 0;
+
+  h3 {
+    margin-bottom: 0;
+  }
+
+  td {
+    vertical-align: middle;
+  }
+
+  .grid-refresh-button {
+    margin-bottom: 0;
+  }
+}
+
+.package-summary__title {
+  display: block;
+}
+
+.package-summary__anchor {
+  color: inherit;
+  text-decoration: inherit;
+  display: block;
+
+  &:hover,
+  &:active {
+    color: inherit;
+    text-decoration: inherit;
+  }
+}
+
+.gridfield-dropdown-filter button {
+  display: none;
+}
+
+.site-summary__more-info {
+  color: inherit;
+  margin: $input-padding-y;
+
+  &:hover {
+    text-decoration: none;
+    color: inherit;
+  }
+}

composer.json

@@ -39,8 +39,7 @@
             "dev-master": "2.x-dev"
         },
         "expose": [
-            "css",
-            "javascript"
+            "client/dist"
         ]
     },
     "suggest": {