Replace browserify/gulp with Webpack

.eslintignore

@@ -3,26 +3,26 @@ client/dist/
 admin/client/dist/
 
 # Ignore legacy files
-client/src/legacy/AssetUploadField.js
-client/src/legacy/ConfirmedPasswordField.js
-client/src/legacy/DateField.js
-client/src/legacy/GridField.js
-client/src/legacy/HtmlEditorField.js
-client/src/legacy/InlineFormAction.js
-client/src/legacy/PermissionCheckboxSetField.js
-client/src/legacy/SelectionGroup.js
-client/src/legacy/TabSet.js
-client/src/legacy/TinyMCE_SSPlugin.js
-client/src/legacy/ToggleCompositeField.js
-client/src/legacy/ToggleField.js
-client/src/legacy/TreeDropdownField.js
-client/src/legacy/UploadField.js
-client/src/legacy/UploadField_downloadtemplate.js
-client/src/legacy/UploadField_select.js
-client/src/legacy/UploadField_uploadtemplate.js
-client/src/i18n.js
-client/src/i18nx.js
-client/src/jQuery.js
+admin/client/src/legacy/AssetUploadField.js
+admin/client/src/legacy/ConfirmedPasswordField.js
+admin/client/src/legacy/DateField.js
+admin/client/src/legacy/GridField.js
+admin/client/src/legacy/HtmlEditorField.js
+admin/client/src/legacy/InlineFormAction.js
+admin/client/src/legacy/PermissionCheckboxSetField.js
+admin/client/src/legacy/SelectionGroup.js
+admin/client/src/legacy/TabSet.js
+admin/client/src/legacy/TinyMCE_SSPlugin.js
+admin/client/src/legacy/ToggleCompositeField.js
+admin/client/src/legacy/ToggleField.js
+admin/client/src/legacy/TreeDropdownField.js
+admin/client/src/legacy/UploadField.js
+admin/client/src/legacy/UploadField_downloadtemplate.js
+admin/client/src/legacy/UploadField_select.js
+admin/client/src/legacy/UploadField_uploadtemplate.js
+admin/client/src/i18n.js
+admin/client/src/i18nx.js
+admin/client/src/jQuery.js
 admin/client/src/legacy/LeftAndMain.js
 admin/client/src/legacy/LeftAndMain.*.js
 admin/client/src/legacy/CMSSecurity.js

.gitignore

@@ -9,3 +9,4 @@ admin/thirdparty/chosen/node_modules
 node_modules/
 coverage/
 /**/*.js.map
+/**/*.css.map

.scss-lint.yml

@@ -8,6 +8,8 @@ scss_files: '**/client/src/**/*.scss'
 exclude:
   - 'client/src/styles/legacy/*'
   - 'admin/client/src/styles/legacy/*'
+  - 'admin/client/src/font/styles.css'
+
 
 severity: error
 

.travis.yml

@@ -60,7 +60,6 @@ script:
  - "if [ \"$BEHAT_TEST\" = \"1\" ] && [ \"$CMS_TEST\" = \"\" ]; then vendor/bin/behat @framework; fi"
  - "if [ \"$PHPUNIT_TEST\" = \"1\" ] && [ \"$CMS_TEST\" = \"1\" ]; then vendor/bin/phpunit cms/tests; fi"
  - "if [ \"$BEHAT_TEST\" = \"1\" ] && [ \"$CMS_TEST\" = \"1\" ]; then vendor/bin/behat @cms; fi"
- - "if [ \"$NPM_TEST\" = \"1\" ]; then npm run sanity; fi"
  - "if [ \"$NPM_TEST\" = \"1\" ]; then npm run test; fi"
 
 after_failure:

Core/Constants.php

@@ -225,6 +225,9 @@
 define('THIRDPARTY_DIR', FRAMEWORK_DIR . '/thirdparty');
 define('THIRDPARTY_PATH', BASE_PATH . '/' . THIRDPARTY_DIR);
 
+define('ADMIN_THIRDPARTY_DIR', FRAMEWORK_ADMIN_DIR . '/thirdparty');
+define('ADMIN_THIRDPARTY_PATH', BASE_PATH . '/' . ADMIN_THIRDPARTY_DIR);
+
 if(!defined('ASSETS_DIR')) {
 	define('ASSETS_DIR', 'assets');
 }

Dev/Install/client/src/styles/install.scss

@@ -106,7 +106,7 @@ body {
 		letter-spacing: -0.5px;
 	}
 	h1 {
-		background: transparent url(../../../admin/images/logo.gif) no-repeat left top;
+		background: transparent url(../images/logo.gif) no-repeat left top;
 		text-indent: -9999px;
 		height: 164px;
 		width: 161px;
@@ -173,7 +173,7 @@ body {
 		padding-left: 20px;
 		color: #666;
 		margin-top: 0;
-		background: transparent url(../../../admin/images/question.png) no-repeat left 1px;
+		background: transparent url(../images/question.png) no-repeat left 1px;
 		&.requirementsHelpText {
 			margin-top: 17px;
 		}
@@ -410,9 +410,9 @@ body {
 			text-decoration: none;
 			font-weight: normal;
 			padding-right: 21px;
-			background: transparent url(../../../admin/images/arrows.png) no-repeat right top;
+			background: transparent url(../images/arrows.png) no-repeat right top;
 			&:hover {
-				background: transparent url(../../../admin/images/arrows.png) no-repeat right -40px;
+				background: transparent url(../images/arrows.png) no-repeat right -40px;
 			}
 		}
 	}

Forms/AssetField.php

@@ -501,27 +501,6 @@ public function extraClass() {
 	}
 
 	public function Field($properties = array()) {
-		Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery.js');
-		Requirements::javascript(THIRDPARTY_DIR . '/jquery-ui/jquery-ui.js');
-		Requirements::javascript(THIRDPARTY_DIR . '/jquery-entwine/dist/jquery.entwine-dist.js');
-		Requirements::javascript(FRAMEWORK_ADMIN_DIR . '/client/dist/js/ssui.core.js');
-		Requirements::add_i18n_javascript(FRAMEWORK_DIR . '/client/lang');
-
-		Requirements::combine_files('uploadfield.js', array(
-			// @todo jquery templates is a project no longer maintained and should be retired at some point.
-			THIRDPARTY_DIR . '/javascript-templates/tmpl.js',
-			THIRDPARTY_DIR . '/javascript-loadimage/load-image.js',
-			THIRDPARTY_DIR . '/jquery-fileupload/jquery.iframe-transport.js',
-			THIRDPARTY_DIR . '/jquery-fileupload/cors/jquery.xdr-transport.js',
-			THIRDPARTY_DIR . '/jquery-fileupload/jquery.fileupload.js',
-			THIRDPARTY_DIR . '/jquery-fileupload/jquery.fileupload-ui.js',
-			FRAMEWORK_DIR . '/client/dist/js/UploadField_uploadtemplate.js',
-			FRAMEWORK_DIR . '/client/dist/js/UploadField_downloadtemplate.js',
-			FRAMEWORK_DIR . '/client/dist/js/UploadField.js',
-		));
-		Requirements::css(THIRDPARTY_DIR . '/jquery-ui-themes/smoothness/jquery-ui.css'); // TODO hmmm, remove it?
-		Requirements::css(FRAMEWORK_DIR . '/client/dist/styles/UploadField.css');
-
 		// Calculated config as per jquery.fileupload-ui.js
 		$config = array(
 			'allowedMaxFileNumber' => 1, // Only one file allowed for AssetField

Forms/CheckboxSetField.php

@@ -54,8 +54,6 @@ class CheckboxSetField extends MultiSelectField {
 	 * @return DBHTMLText
 	 */
 	public function Field($properties = array()) {
-		Requirements::css(FRAMEWORK_DIR . '/client/dist/styles/CheckboxSetField.css');
-
 		$properties = array_merge($properties, array(
 			'Options' => $this->getOptions()
 		));

Forms/ConfirmedPasswordField.php

@@ -12,6 +12,9 @@
  *
  * Optionally hides the fields by default and shows a link to toggle their
  * visibility.
+ *
+ * Caution: The form field does not include any JavaScript or CSS when used outside of the CMS context,
+ * since the required frontend dependencies are included through CMS bundling.
  */
 class ConfirmedPasswordField extends FormField {
 
@@ -54,6 +57,9 @@ class ConfirmedPasswordField extends FormField {
 	 * This behaviour works unobtrusively, without JavaScript enabled
 	 * the fields show, validate and save by default.
 	 *
+	 * Caution: The form field does not include any JavaScript or CSS when used outside of the CMS context,
+	 * since the required frontend dependencies are included through CMS bundling.
+	 *
 	 * @param boolean $showOnClick
 	 */
 	protected $showOnClick = false;
@@ -172,10 +178,6 @@ public function setTitle($title)
 	 * @return string
 	 */
 	public function Field($properties = array()) {
-		Requirements::javascript(FRAMEWORK_DIR . '/thirdparty/jquery/jquery.js');
-		Requirements::javascript(FRAMEWORK_DIR . '/client/dist/js/ConfirmedPasswordField.js');
-		Requirements::css(FRAMEWORK_DIR . '/client/dist/styles/ConfirmedPasswordField.css');
-
 		$content = '';
 
 		if($this->showOnClick) {

Forms/DateField.php

@@ -41,6 +41,9 @@
  * Example: <code>$myDateField->setConfig('jQueryUI.showWeek', true);</code>
  * See http://docs.jquery.com/UI/Datepicker for details.
  *
+ * Caution: The form field does not include any JavaScript or CSS when used outside of the CMS context,
+ * since the required frontend dependencies are included through CMS bundling.
+ *
  * # Localization
  *
  * The field will get its default locale from {@link i18n::get_locale()}, and set the `dateformat`

Forms/DateField_View_JQuery.php

@@ -85,16 +85,10 @@ public function onBeforeRender()
 	public function onAfterRender($html)
 	{
 		if ($this->getField()->getConfig('showcalendar')) {
-			Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery.js');
-			Requirements::css(THIRDPARTY_DIR . '/jquery-ui-themes/smoothness/jquery-ui.css');
-			Requirements::javascript(FRAMEWORK_DIR . '/thirdparty/jquery-ui/jquery-ui.js');
-
 			// Include language files (if required)
 			if ($this->jqueryLocaleFile) {
 				Requirements::javascript($this->jqueryLocaleFile);
 			}
-
-			Requirements::javascript(FRAMEWORK_DIR . "/client/dist/js/DateField.js");
 		}
 
 		return $html;

Forms/DatetimeField.php

@@ -118,7 +118,6 @@ public function FieldHolder($properties = array()) {
 	 * @return string
 	 */
 	public function Field($properties = array()) {
-		Requirements::css(FRAMEWORK_DIR . '/client/dist/styles/DatetimeField.css');
 		return parent::Field($properties);
 	}
 

Forms/GridField/GridField.php

@@ -33,6 +33,9 @@
  * $gridField = new GridField('ExampleGrid', 'Example grid', new DataList('Page'));
  * </code>
  *
+ * Caution: The form field does not include any JavaScript or CSS when used outside of the CMS context,
+ * since the required frontend dependencies are included through CMS bundling.
+ *
  * @see SS_List
  *
  * @property GridState_Data $State The gridstate of this object
@@ -306,16 +309,6 @@ public function getState($getData = true) {
 	 * @return string
 	 */
 	public function FieldHolder($properties = array()) {
-		Requirements::css(THIRDPARTY_DIR . '/jquery-ui-themes/smoothness/jquery-ui.css');
-		Requirements::css(FRAMEWORK_DIR . '/client/dist/styles/GridField.css');
-
-		Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery.js');
-		Requirements::javascript(FRAMEWORK_DIR . '/thirdparty/jquery-ui/jquery-ui.js');
-		Requirements::javascript(FRAMEWORK_DIR . '/client/dist/js/i18n.js');
-		Requirements::add_i18n_javascript(FRAMEWORK_DIR . '/client/lang');
-		Requirements::javascript(THIRDPARTY_DIR . '/jquery-entwine/dist/jquery.entwine-dist.js');
-		Requirements::javascript(FRAMEWORK_DIR . '/client/dist/js/GridField.js');
-
 		$columns = $this->getColumns();
 
 		$list = $this->getManipulatedList();

Forms/HTMLEditor/HTMLEditorField.php

@@ -12,6 +12,9 @@
 /**
  * A TinyMCE-powered WYSIWYG HTML editor field with image and link insertion and tracking capabilities. Editor fields
  * are created from <textarea> tags, which are then converted with JavaScript.
+ *
+ * Caution: The form field does not include any JavaScript or CSS when used outside of the CMS context,
+ * since the required frontend dependencies are included through CMS bundling.
  */
 class HTMLEditorField extends TextareaField {
 

Forms/HTMLEditor/HTMLEditorField_Embed.php

@@ -106,7 +106,7 @@ public function getPreviewURL()
 		}
 
 		// Default media
-		return FRAMEWORK_DIR . '/images/default_media.png';
+		return FRAMEWORK_ADMIN_DIR . '/client/dist/images/src/default_media.png';
 	}
 
 	public function getName()

Forms/HTMLEditor/HTMLEditorField_Toolbar.php

@@ -250,7 +250,7 @@ public function MediaForm()
 		$remoteURL->addExtraClass('remoteurl');
 		$fromWeb->addExtraClass('content ss-uploadfield htmleditorfield-from-web');
 
-		Requirements::css(FRAMEWORK_DIR . '/client/dist/styles/AssetUploadField.css');
+		Requirements::css(FRAMEWORK_ADMIN_DIR . '/client/dist/styles/AssetUploadField.css');
 		$computerUploadField = UploadField::create('AssetUploadField', '');
 		$computerUploadField->setConfig('previewMaxWidth', 40);
 		$computerUploadField->setConfig('previewMaxHeight', 30);

Forms/HTMLEditor/TinyMCEConfig.php

@@ -24,7 +24,7 @@ class TinyMCEConfig extends HTMLEditorConfig {
 	 * @config
 	 * @var string
 	 */
-	private static $base_dir = 'framework/thirdparty/tinymce';
+	private static $base_dir = 'framework/admin/thirdparty/tinymce';
 
 	/**
 	 * TinyMCE JS settings
@@ -448,13 +448,13 @@ public function getScriptURL() {
 		// If gzip is disabled just return core script url
 		$useGzip = HTMLEditorField::config()->get('use_gzip');
 		if(!$useGzip) {
-			return THIRDPARTY_DIR . '/tinymce/tinymce.min.js';
+			return ADMIN_THIRDPARTY_DIR . '/tinymce/tinymce.min.js';
 		}
 
 		// tinyMCE JS requirement
-		require_once THIRDPARTY_PATH . '/tinymce/tiny_mce_gzip.php';
+		require_once ADMIN_THIRDPARTY_PATH . '/tinymce/tiny_mce_gzip.php';
 		$tag = TinyMCE_Compressor::renderTag(array(
-			'url' => THIRDPARTY_DIR . '/tinymce/tiny_mce_gzip.php',
+			'url' => ADMIN_THIRDPARTY_DIR . '/tinymce/tiny_mce_gzip.php',
 			'plugins' => implode(',', $this->getInternalPlugins()),
 			'themes' => $this->getTheme(),
 			'languages' => $this->getOption('language')
@@ -464,16 +464,7 @@ public function getScriptURL() {
 	}
 
 	public function init() {
-		// These should be 'provides' by bundle-dist.js
-		Requirements::javascript(FRAMEWORK_DIR . "/thirdparty/jquery/jquery.js");
-		Requirements::javascript(THIRDPARTY_DIR . '/jquery-ui/jquery-ui.js');
-		Requirements::javascript(THIRDPARTY_DIR . '/jquery-entwine/dist/jquery.entwine-dist.js');
-		Requirements::javascript(FRAMEWORK_ADMIN_DIR . '/client/dist/js/ssui.core.js');
-
 		// include TinyMCE Javascript
 		Requirements::javascript($this->getScriptURL());
-		Requirements::javascript(FRAMEWORK_DIR ."/client/dist/js/HtmlEditorField.js");
-
-		Requirements::css(THIRDPARTY_DIR . '/jquery-ui-themes/smoothness/jquery-ui.css');
 	}
 }

Forms/InlineFormAction.php

@@ -6,14 +6,14 @@
 
 /**
  * Render a button that will submit the form its contained in through ajax.
- * If you want to add custom behaviour, please set {@link includeDefaultJS()} to FALSE
+ *
+ * Caution: The form field does not include any JavaScript or CSS when used outside of the CMS context,
+ * since the required frontend dependencies are included through CMS bundling.
  *
  * @see framework/client/dist/js/InlineFormAction.js
  */
 class InlineFormAction extends FormField {
 
-	protected $includeDefaultJS = true;
-
 	/**
 	 * Create a new action button.
 	 *
@@ -35,13 +35,6 @@ public function performReadonlyTransformation() {
 	 * @return string
 	 */
 	public function Field($properties = array()) {
-		if($this->includeDefaultJS) {
-			Requirements::javascriptTemplate(
-				FRAMEWORK_DIR . '/client/dist/js/InlineFormAction.js',
-				array('ID'=>$this->ID())
-			);
-		}
-
 		return FormField::create_tag('input', array(
 				'type' => 'submit',
 				'name' => sprintf('action_%s', $this->getName()),
@@ -54,14 +47,4 @@ public function Field($properties = array()) {
 	public function Title() {
 		return false;
 	}
-
-	/**
-	 * Optionally disable the default javascript include (framework/client/dist/js/InlineFormAction.js),
-	 * which routes to an "admin-custom"-URL.
-	 *
-	 * @param $bool boolean
-	 */
-	public function includeDefaultJS($bool) {
-		$this->includeDefaultJS = (bool)$bool;
-	}
 }

Forms/MemberDatetimeOptionsetField.php

@@ -25,7 +25,6 @@ class MemberDatetimeOptionsetField extends OptionsetField {
 	private $descriptionTemplate = '';
 
 	public function Field($properties = array()) {
-		Requirements::javascript(FRAMEWORK_ADMIN_DIR . '/client/dist/js/MemberDatetimeOptionsetField.js');
 		$options = array();
 		$odd = false;
 

Forms/SelectionGroup.php

@@ -27,6 +27,9 @@
  * );
  * $field = new SelectionGroup('MyGroup', $items);
  * </code>
+ *
+ * Caution: The form field does not include any JavaScript or CSS when used outside of the CMS context,
+ * since the required frontend dependencies are included through CMS bundling.
  */
 class SelectionGroup extends CompositeField {
 
@@ -118,10 +121,6 @@ public function hasData() {
 	}
 
 	public function FieldHolder($properties = array()) {
-		Requirements::javascript(THIRDPARTY_DIR .'/jquery/jquery.js');
-		Requirements::javascript(FRAMEWORK_DIR   . '/client/dist/js/SelectionGroup.js');
-		Requirements::css(FRAMEWORK_DIR . '/client/dist/styles/SelectionGroup.css');
-
 		return parent::FieldHolder($properties);
 	}
 }