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

NEW Add webpack module, updates for SS4 beta

.editorconfig

@@ -0,0 +1,17 @@
+# For more information about the properties used in this file,
+# please see the EditorConfig documentation:
+# http://editorconfig.org
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[{*.yml,package.json,*.js,*.scss}]
+indent_size = 2
+
+# The indent size used in the package.json file cannot be changed:
+# https://github.com/npm/npm/pull/3180#issuecomment-16336516

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "airbnb",
+  "rules": {
+    "init-declarations": 1
+  }
+}

.travis.yml

@@ -1,22 +1,33 @@
 language: php
 
-php:
-    - 5.6
-    - 7.0
-    - 7.1
-
 env:
-    - DB=MYSQL CORE_RELEASE=4
+  global:
+    - COMPOSER_ROOT_VERSION=4.0.x-dev
+
+matrix:
+  include:
+    - php: 5.6
+      env: DB=MYSQL PHPCS_TEST=1 PHPUNIT_TEST=1
+    - php: 7.0
+      env: DB=MYSQL PHPUNIT_TEST=1
+    - php: 7.1
+      env: DB=MYSQL PHPUNIT_COVERAGE_TEST=1
 
 before_script:
-    - git clone git://github.com/silverstripe/silverstripe-travis-support.git ~/travis-support
-    - php ~/travis-support/travis_setup.php --source `pwd` --target ~/builds/ss
-    - cd ~/builds/ss
+  # Init PHP
+  - phpenv rehash
+  - phpenv config-rm xdebug.ini
+  - echo 'memory_limit = 2048M' >> ~/.phpenv/versions/$(phpenv version-name)/etc/conf.d/travis.ini
+
+  # Install composer dependencies
+  - composer install --prefer-dist
+  - composer require --prefer-dist --no-update silverstripe/framework:4.0.x-dev silverstripe/cms:4.0.x-dev silverstripe/admin:1.0.x-dev
+  - composer update
 
 script:
-    - vendor/bin/phpunit --coverage-clover segment-field/coverage.clover segment-field/tests
+  - if [[ $PHPUNIT_TEST ]]; then vendor/bin/phpunit; fi
+  - if [[ $PHPUNIT_COVERAGE_TEST ]]; then phpdbg -qrr vendor/bin/phpunit --coverage-clover=coverage.xml; fi
+  - if [[ $PHPCS_TEST ]]; then vendor/bin/phpcs src/ tests/; fi
 
 after_success:
-    - cd segment-field
-    - wget https://scrutinizer-ci.com/ocular.phar
-    - php ocular.phar code-coverage:upload --format=php-clover coverage.clover
+  - if [[ $PHPUNIT_COVERAGE_TEST ]]; then bash <(curl -s https://codecov.io/bash) -f coverage.xml; fi

_config.php

@@ -1,4 +1 @@
 <?php
-
-define('SEGMENT_FIELD_PATH', __DIR__);
-define('SEGMENT_FIELD_DIR', basename(__DIR__));

client/src/bundles/segment-field.js

@@ -0,0 +1,130 @@
+window.jQuery.entwine('ss', ($) => {
+  $('.field.segment:not(.readonly)').entwine({
+    MaxPreviewLength: 55,
+
+    Ellipsis: '...',
+
+    onmatch() {
+      if (this.find(':text').length) {
+        this.toggleEdit(false);
+      }
+
+      this.redraw();
+      this._super();
+    },
+
+    redraw() {
+      const field = this.find(':text');
+      // @todo these aren't used, should they be? Otherwise, remove
+      // const value = field.val();
+
+      // let preview = value;
+
+      // if (value.length > this.getMaxPreviewLength()) {
+      //   preview = this.getEllipsis()
+      //    + value.substr(value.length - this.getMaxPreviewLength(), value.length);
+      // }
+
+      this.find('.preview').text(field.data('preview'));
+    },
+
+    toggleEdit(toggle) {
+      const field = this.find(':text');
+
+      this.find('.preview-holder')[toggle ? 'hide' : 'show']();
+      this.find('.edit-holder')[toggle ? 'show' : 'hide']();
+
+      if (toggle) {
+        field.data('original', field.val());
+        field.focus();
+      }
+    },
+
+    update() {
+      const field = this.find(':text');
+      const current = field.data('original');
+      const updated = field.val();
+
+      if (current !== updated) {
+        this.addClass('loading');
+
+        this.suggest(updated, (data, el) => {
+          $(el).removeClass('loading');
+
+          field.val(data.suggestion);
+          field.data('preview', data.preview);
+
+          this.toggleEdit(false);
+          this.redraw();
+        });
+      } else {
+        this.toggleEdit(false);
+        this.redraw();
+      }
+    },
+
+    cancel() {
+      const field = this.find(':text');
+      field.val(field.data('original'));
+      this.toggleEdit(false);
+    },
+
+    suggest(val, callback) {
+      const field = this.find(':text');
+      const parts = this.closest('form').attr('action').split('?');
+
+      let url = `${parts[0]}/field/${field.attr('name')}/suggest/?value=${encodeURIComponent(val)}`;
+
+      if (parts[1]) {
+        url += `&${parts[1].replace(/^\?/, '')}`;
+      }
+
+      $.ajax({
+        url,
+        dataType: 'json',
+        success(data) {
+          callback(data, this);
+        },
+        error(xhr) {
+          /* eslint no-param-reassign: ["error", { "props": false }]*/
+          xhr.statusText = xhr.responseText;
+        },
+        complete() {
+          field.removeClass('loading');
+        },
+      });
+    },
+  });
+
+  $('.field.segment .edit').entwine({
+    onclick(event) {
+      event.preventDefault();
+      this.closest('.field').toggleEdit(true);
+    },
+  });
+
+  $('.field.segment .update').entwine({
+    onclick(event) {
+      event.preventDefault();
+      this.closest('.field').update();
+    },
+  });
+
+  $('.field.segment .cancel').entwine({
+    onclick(event) {
+      event.preventDefault();
+      this.closest('.field').cancel();
+    },
+  });
+
+  $('.field.segment :text').entwine({
+    onkeydown(event) {
+      const code = event.keyCode || event.which;
+
+      if (code === 13) {
+        event.stop();
+        this.closest('.field').update();
+      }
+    },
+  });
+});

client/src/styles/segment-field.scss

@@ -0,0 +1,14 @@
+.field.segment {
+  .preview-holder .preview {
+    border-left: 0;
+  }
+
+  .edit-holder {
+    display: none;
+  }
+
+  .preview-holder .edit,
+  .edit-holder .update {
+    margin-left: 10px;
+  }
+}

codecov.yml

@@ -0,0 +1 @@
+comment: false

composer.json

@@ -15,8 +15,9 @@
 		"silverstripe/cms": "^4.0@dev"
 	},
 	"require-dev": {
-		"phpunit/phpunit": "^3.7",
+		"phpunit/phpunit": "^5.7",
 		"mockery/mockery": "^0.9",
+        "squizlabs/php_codesniffer": "^3",
 		"silverstripe/reports": "^4.0@dev",
 		"silverstripe/siteconfig": "^4.0@dev"
 	},
@@ -27,12 +28,10 @@
 	},
 	"autoload": {
 		"psr-4": {
-			"SilverStripe\\Forms\\": "code"
+			"SilverStripe\\Forms\\": "code/",
+			"SilverStripe\\Forms\\Tests\\": "tests/"
 		}
 	},
-	"autoload-dev": {
-		"psr-4": {
-			"SilverStripe\\Forms\\Tests\\": "tests"
-		}
-	}
+    "minimum-stability": "dev",
+    "prefer-stable": true
 }

package.json

@@ -1,13 +1,24 @@
 {
 	"scripts": {
-		"build": "browserify public/segment-field.js -t babelify --outfile public/segment-field.dist.js && uglifyjs public/segment-field.dist.js -o public/segment-field.dist.min.js",
-		"watch": "watchify public/segment-field.js -t babelify --outfile public/segment-field.dist.js && uglifyjs public/segment-field.dist.js -o public/segment-field.dist.min.js"
-	},
+    "build": "yarn && NODE_ENV=production webpack -p --bail --progress",
+    "watch": "yarn && NODE_ENV=development webpack --watch --progress",
+    "css": "WEBPACK_CHILD=css npm run build",
+    "lint": "eslint client/src; sass-lint -v -c ../silverstripe-admin/.sass-lint.yml"
+  },
 	"devDependencies": {
-		"babel": "^5.4",
-		"babelify": "^6.1",
-		"browserify": "^10.2",
-		"uglify-js": "^2.4",
-		"watchify": "^3.2"
-	}
+    "@silverstripe/webpack-config": "^0.2.5",
+    "babel-core": "^6.7.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "eslint": "^2.7.0",
+    "eslint-config-airbnb": "^6.2.0",
+    "eslint-plugin-react": "^4.3.0"
+  },
+  "dependencies": {
+    "babel-preset-es2016": "^6.24.1",
+    "jquery": "^3.2.1"
+  },
+  "engines": {
+    "node": "^6.x"
+  }
 }