API Moved CMS-specific JavaScript to admin/thirdparty

The 'admin' module will be split off from 'framework',
where 'framework' only provides (mostly) frontend-agnostic PHP classes.
For example, HTMLEditorField.php has a TinyMCEConfig.php driver,
but doesn't come with its own JS includes.

Core/Constants.php

@@ -225,6 +225,9 @@ define('SAPPHIRE_ADMIN_PATH', FRAMEWORK_ADMIN_PATH);
 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');
 }

Forms/ConfirmedPasswordField.php

@@ -12,6 +12,9 @@ use SilverStripe\View\Requirements;
  *
  * 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;

Forms/DateField.php

@@ -41,6 +41,9 @@ require_once 'Zend/Date.php';
  * 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/GridField/GridField.php

@@ -33,6 +33,9 @@ use SilverStripe\View\Requirements;
  * $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

Forms/HTMLEditor/HTMLEditorField.php

@@ -12,6 +12,9 @@ use Exception;
 /**
  * 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_Toolbar.php

@@ -250,7 +250,7 @@ class HTMLEditorField_Toolbar extends RequestHandler
 		$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 @@ class TinyMCEConfig extends HTMLEditorConfig {
 		// 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')

Forms/InlineFormAction.php

@@ -7,6 +7,9 @@ use SilverStripe\View\Requirements;
 /**
  * Render a button that will submit the form its contained in through ajax.
  *
+ * 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 {

Forms/SelectionGroup.php

@@ -27,6 +27,9 @@ use SilverStripe\View\Requirements;
  * );
  * $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 {
 

Forms/TabSet.php

@@ -29,6 +29,9 @@ use InvalidArgumentException;
  * 	)
  * )
  * </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 TabSet extends CompositeField {
 

Forms/ToggleCompositeField.php

@@ -6,6 +6,9 @@ use SilverStripe\View\Requirements;
 
 /**
  * Allows visibility of a group of fields to be toggled.
+ *
+ * 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 ToggleCompositeField extends CompositeField {
 	/**

Forms/TreeDropdownField.php

@@ -44,6 +44,9 @@ use InvalidArgumentException;
  * This will generate a tree allowing the user to expand and contract subsections
  * to find the appropriate page to save to the field.
  *
+ * 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 TreeMultiselectField for the same implementation allowing multiple selections
  * @see DropdownField for a simple dropdown field.
  * @see CheckboxSetField for multiple selections through checkboxes.

Forms/UploadField.php

@@ -46,7 +46,8 @@ use Exception;
  * $UploadField->setAllowedMaxFileNumber(5);
  * </code>
  *
- * @author Zauberfisch
+ * 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 UploadField extends FileField {
 

Forms/UploadField_ItemHandler.php

@@ -147,7 +147,7 @@ class UploadField_ItemHandler extends RequestHandler
 			return $this->httpError(403);
 		}
 
-		Requirements::css(FRAMEWORK_DIR . '/client/dist/styles/UploadField.css');
+		Requirements::css(FRAMEWORK_ADMIN_DIR . '/client/dist/styles/UploadField.css');
 
 		return $this->customise(array(
 			'Form' => $this->EditForm()

admin/client/src/bundles/lib.js

@@ -12,7 +12,7 @@ require('expose?ReactRouterRedux!react-router-redux');
 
 // jQuery plugins require that the jQuery object is exposed as a global
 // webpack.ProvidePlugin is used to ensure that jQuery and $ are provided to all includes
-require('script!../../../../thirdparty/jquery/jquery.js');
+require('script!../../../thirdparty/jquery/jquery.js');
 require('expose?jQuery!jQuery');
 
 require('expose?ReactBootstrap!react-bootstrap-ss');
@@ -23,17 +23,17 @@ require('expose?BootstrapCollapse!bootstrap/dist/js/umd/collapse.js');
 require('i18n.js');
 
 require('babel-polyfill');
-require('../../../../thirdparty/jquery-ondemand/jquery.ondemand.js');
-require('../../../../thirdparty/jquery-entwine/dist/jquery.entwine-dist.js');
+require('../../../thirdparty/jquery-ondemand/jquery.ondemand.js');
+require('../../../thirdparty/jquery-entwine/dist/jquery.entwine-dist.js');
 require('../legacy/sspath.js');
 
-require('../../../../thirdparty/jquery-ui/jquery-ui.js');
+require('../../../thirdparty/jquery-ui/jquery-ui.js');
 // TODO Enable once https://github.com/webpack/extract-text-webpack-plugin/issues/179 is resolved. Included in bundle.scss for now.
-// require('../../../../thirdparty/jquery-ui-themes/smoothness/jquery-ui.css');
+// require('../../../thirdparty/jquery-ui-themes/smoothness/jquery-ui.css');
 
-require('../../../../thirdparty/jquery-cookie/jquery.cookie.js');
-require('../../../../thirdparty/jquery-query/jquery.query.js');
-require('../../../../thirdparty/jquery-form/jquery.form.js');
+require('../../../thirdparty/jquery-cookie/jquery.cookie.js');
+require('../../../thirdparty/jquery-query/jquery.query.js');
+require('../../../thirdparty/jquery-form/jquery.form.js');
 
 require('../../../thirdparty/jquery-notice/jquery.notice.js');
 // TODO Enable once https://github.com/webpack/extract-text-webpack-plugin/issues/179 is resolved. Included in bundle.scss for now.
@@ -43,19 +43,19 @@ require('jquery-sizes/lib/jquery.sizes.js');
 require('../../../thirdparty/jlayout/lib/jlayout.border.js');
 require('../../../thirdparty/jlayout/lib/jquery.jlayout.js');
 
-require('../../../../thirdparty/jstree/jquery.jstree.js');
+require('../../../thirdparty/jstree/jquery.jstree.js');
 // TODO Enable once https://github.com/webpack/extract-text-webpack-plugin/issues/179 is resolved. Included in bundle.scss for now.
-// require('../../../../thirdparty//jstree/themes/apple/style.css');
+// require('../../../thirdparty//jstree/themes/apple/style.css');
 
 require('../../../thirdparty/jquery-hoverIntent/jquery.hoverIntent.js');
-require('../../../../thirdparty/jquery-changetracker/lib/jquery.changetracker.js');
+require('../../../thirdparty/jquery-changetracker/lib/jquery.changetracker.js');
 require('../legacy/TreeDropdownField.js');
 
 require('../legacy/DateField.js');
 
 
 // TODO Move UploadField.js deps into the file once figuring out why uploads fail then
-require('../../../../thirdparty/jquery-ui/jquery-ui.js');
+require('../../../thirdparty/jquery-ui/jquery-ui.js');
 require('../legacy/ssui.core.js');
 require('imports?define=>false&this=>window!blueimp-load-image/load-image.js');
 require('blueimp-file-upload/jquery.iframe-transport.js');

admin/client/src/legacy/DateField.js

@@ -1,7 +1,7 @@
 import $ from 'jQuery';
 
 // entwine also required, but can't be included more than once without error
-require('../../../../thirdparty/jquery-ui/jquery-ui.js');
+require('../../../thirdparty/jquery-ui/jquery-ui.js');
 
 $.fn.extend({
 	ssDatepicker: function(opts) {

admin/client/src/legacy/GridField.js

@@ -1,8 +1,8 @@
 import $ from 'jQuery';
 import i18n from 'i18n';
 
-require('../../../../thirdparty/jquery-ui/jquery-ui.js');
-require('../../../../thirdparty/jquery-entwine/dist/jquery.entwine-dist.js');
+require('../../../thirdparty/jquery-ui/jquery-ui.js');
+require('../../../thirdparty/jquery-entwine/dist/jquery.entwine-dist.js');
 
 // TODO Enable once https://github.com/webpack/extract-text-webpack-plugin/issues/179 is resolved. Included in bundle.scss for now.
 // require('../styles/legacy/GridField.scss');

admin/client/src/legacy/TabSet.js

@@ -1,11 +1,11 @@
 import $ from 'jQuery';
 
-require('../../../../thirdparty/jquery-ui/jquery-ui.js');
-require('../../../../thirdparty/jquery-cookie/jquery.cookie.js');
-require('../../../../thirdparty/jquery-entwine/dist/jquery.entwine-dist.js');
+require('../../../thirdparty/jquery-ui/jquery-ui.js');
+require('../../../thirdparty/jquery-cookie/jquery.cookie.js');
+require('../../../thirdparty/jquery-entwine/dist/jquery.entwine-dist.js');
 
 // TODO Enable once https://github.com/webpack/extract-text-webpack-plugin/issues/179 is resolved. Included in bundle.scss for now.
-// require('../../../../thirdparty/jquery-ui-themes/smoothness/jquery-ui.css');
+// require('../../../thirdparty/jquery-ui-themes/smoothness/jquery-ui.css');
 
 $.entwine('ss', function($){
 	/**

admin/client/src/legacy/ToggleCompositeField.js

@@ -1,10 +1,10 @@
 import $ from 'jQuery';
 
 // entwine also required, but can't be included more than once without error
-require('../../../../thirdparty/jquery-ui/jquery-ui.js');
+require('../../../thirdparty/jquery-ui/jquery-ui.js');
 
 // TODO Enable once https://github.com/webpack/extract-text-webpack-plugin/issues/179 is resolved. Included in bundle.scss for now.
-// require('../../../../thirdparty/jquery-ui-themes/smoothness/jquery-ui.css');
+// require('../../../thirdparty/jquery-ui-themes/smoothness/jquery-ui.css');
 
 $.entwine('ss', function($){
 	$('.ss-toggle').entwine({

admin/client/src/legacy/TreeDropdownField.js

@@ -1,11 +1,11 @@
 import $ from 'jQuery';
 import i18n from 'i18n';
 
-require('../../../../thirdparty/jquery-entwine/dist/jquery.entwine-dist.js');
-require('../../../../thirdparty/jstree/jquery.jstree.js');
+require('../../../thirdparty/jquery-entwine/dist/jquery.entwine-dist.js');
+require('../../../thirdparty/jstree/jquery.jstree.js');
 
 // TODO Enable once https://github.com/webpack/extract-text-webpack-plugin/issues/179 is resolved. Included in bundle.scss for now.
-// require('../../../../thirdparty/jquery-ui-themes/smoothness/jquery-ui.css');
+// require('../../../thirdparty/jquery-ui-themes/smoothness/jquery-ui.css');
 // require('../styles/legacy/TreeDropdownField.scss');
 
 $.entwine('ss', function($){

admin/client/src/legacy/ssui.core.js

@@ -1,6 +1,6 @@
 import $ from 'jQuery';
 
-require('../../../../thirdparty/jquery-ui/jquery-ui.js');
+require('../../../thirdparty/jquery-ui/jquery-ui.js');
 
 /**
  * Allows icon definition via HTML5 data attrs for easier handling in PHP.

admin/client/src/styles/bundle.scss

@@ -7,8 +7,8 @@
 // Thirdparty
 @import "chosen";
 @import "../../../../node_modules/bootstrap/scss/bootstrap.scss";
-@import "../../../../thirdparty/jquery-ui-themes/smoothness/jquery-ui.css";
-@import "../../../../thirdparty/jstree/themes/apple/style.css";
+@import "../../../thirdparty/jquery-ui-themes/smoothness/jquery-ui.css";
+@import "../../../thirdparty/jstree/themes/apple/style.css";
 @import "../../../thirdparty/jquery-notice/jquery.notice.css";
 
 // Base

admin/client/src/styles/legacy/_style.scss

@@ -1583,7 +1583,7 @@ form.member-profile-form {
 
 // overlay for switching between CMS panes
 .cms .ui-widget-overlay-light {
-	background: #aaaaaa url(../../../../thirdparty/jquery-ui-themes/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
+	background: #aaaaaa url(../../../thirdparty/jquery-ui-themes/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
 	opacity: 0.3;
 }
 

admin/code/LeftAndMain.php

@@ -550,7 +550,7 @@ class LeftAndMain extends Controller implements PermissionProvider {
 
 		if (Director::isDev()) {
 			// TODO Confuses jQuery.ondemand through document.write()
-			Requirements::javascript(THIRDPARTY_DIR . '/jquery-entwine/src/jquery.entwine.inspector.js');
+			Requirements::javascript(ADMIN_THIRDPARTY_DIR . '/jquery-entwine/src/jquery.entwine.inspector.js');
 			Requirements::javascript(FRAMEWORK_ADMIN_DIR . '/client/dist/js/leaktools.js');
 		}
 

admin/thirdparty/tinymce/tiny_mce_gzip.php

@@ -9,7 +9,7 @@
  * Contributing: http://tinymce.moxiecode.com/contributing
  */
 
-$frameworkPath = rtrim(dirname(dirname(dirname(__FILE__))), DIRECTORY_SEPARATOR);
+$frameworkPath = rtrim(dirname(dirname(dirname(dirname(__FILE__)))), DIRECTORY_SEPARATOR);
 $basePath = rtrim(dirname($frameworkPath), DIRECTORY_SEPARATOR);
 
 // require composers autoloader

docs/en/02_Developer_Guides/01_Templates/03_Requirements.md

@@ -265,7 +265,7 @@ One common example is to block the core `jquery.js` added by various form fields
 version in a custom location. This assumes you have tested your application with the newer version.
 
 	:::php
-	Requirements::block(THIRDPARTY_DIR . '/jquery/jquery.js');
+	Requirements::block(ADMIN_THIRDPARTY_DIR . '/jquery/jquery.js');
 
 <div class="alert" markdown="1">
 The CMS also uses the `Requirements` system, and its operation can be affected by `block()` calls. Avoid this by 
@@ -303,4 +303,4 @@ If the Javascript files are preferred to be placed in the `<head>` tag rather th
 ## API Documentation
 
  * [api:Requirements]
- * [CMS Architecture and Build Tooling](/developer_guides/customising_the_admin_interface/cms_architecture)
+ * [CMS Architecture and Build Tooling](/developer_guides/customising_the_admin_interface/cms_architecture)

docs/en/04_Changelogs/4.0.0.md

@@ -150,6 +150,18 @@ configuration option used in `Requirements::add_i18n_javascript()`.
 SilverStripe core is moving away from `Requirements::combine_files` in favour of Webpack as of
 4.0. `Requirements::combine_files` is being considered for deprecation in future versions.
 
+All JavaScript thirdparty dependencies have either been moved to NPM (see `package.json`),
+or moved into the `framework/admin/thirdparty` folder. If you are hotlinking to any
+of these files, please consider packaging your own versions in your projects and modules.
+For CMS modules, you can also use many library globals which the core bundles already expose
+(see [Build Tooling](/contributing/build_tooling)).
+
+One commonly linked thirdparty dependency is `jquery.js` bundled with SilverStripe: 
+
+```
+framework/thirdparty/jquery/jquery.js => framework/admin/thirdparty/jquery/jquery.js
+```
+
 #### Explicit text casting is now enforced on all template variables
  
 Now whenever a `$Variable` is used in a template, regardless of whether any casts or methods are

tests/forms/HTMLEditorConfigTest.php

@@ -76,7 +76,7 @@ class HTMLEditorConfigTest extends SapphireTest {
 		// Plugin specified with standard location
 		$this->assertContains('plugin4', array_keys($plugins));
 		$this->assertEquals(
-			'http://mysite.com/subdir/framework/thirdparty/tinymce/plugins/plugin4/plugin.min.js',
+			'http://mysite.com/subdir/framework/admin/thirdparty/tinymce/plugins/plugin4/plugin.min.js',
 			$plugins['plugin4']
 		);
 
@@ -86,14 +86,14 @@ class HTMLEditorConfigTest extends SapphireTest {
 		// Test plugins included via gzip compresser
 		HTMLEditorField::config()->update('use_gzip', true);
 		$this->assertEquals(
-			'framework/thirdparty/tinymce/tiny_mce_gzip.php?js=1&plugins=plugin4,plugin5&themes=modern&languages=es&diskcache=true&src=true',
+			'framework/admin/thirdparty/tinymce/tiny_mce_gzip.php?js=1&plugins=plugin4,plugin5&themes=modern&languages=es&diskcache=true&src=true',
 			$c->getScriptURL()
 		);
 
 		// If gzip is disabled only the core plugin is loaded
 		HTMLEditorField::config()->remove('use_gzip');
 		$this->assertEquals(
-			'framework/thirdparty/tinymce/tinymce.min.js',
+			'framework/admin/thirdparty/tinymce/tinymce.min.js',
 			$c->getScriptURL()
 		);
 	}