diff --git a/core/misc/drupal.js b/core/misc/drupal.js index d509795b86..894d6dc782 100644 --- a/core/misc/drupal.js +++ b/core/misc/drupal.js @@ -1,583 +1 @@ -/** - * @file - * Defines the Drupal JavaScript API. - */ - -/** - * A jQuery object, typically the return value from a `$(selector)` call. - * - * Holds an HTMLElement or a collection of HTMLElements. - * - * @typedef {object} jQuery - * - * @prop {number} length=0 - * Number of elements contained in the jQuery object. - */ - -/** - * Variable generated by Drupal that holds all translated strings from PHP. - * - * Content of this variable is automatically created by Drupal when using the - * Interface Translation module. It holds the translation of strings used on - * the page. - * - * This variable is used to pass data from the backend to the frontend. Data - * contained in `drupalSettings` is used during behavior initialization. - * - * @global - * - * @var {object} drupalTranslations - */ - -/** - * Global Drupal object. - * - * All Drupal JavaScript APIs are contained in this namespace. - * - * @global - * - * @namespace - */ -window.Drupal = {behaviors: {}, locale: {}}; - -// JavaScript should be made compatible with libraries other than jQuery by -// wrapping it in an anonymous closure. -(function (Drupal, drupalSettings, drupalTranslations) { - - 'use strict'; - - /** - * Helper to rethrow errors asynchronously. - * - * This way Errors bubbles up outside of the original callstack, making it - * easier to debug errors in the browser. - * - * @param {Error|string} error - * The error to be thrown. - */ - Drupal.throwError = function (error) { - setTimeout(function () { throw error; }, 0); - }; - - /** - * Custom error thrown after attach/detach if one or more behaviors failed. - * Initializes the JavaScript behaviors for page loads and Ajax requests. - * - * @callback Drupal~behaviorAttach - * - * @param {HTMLDocument|HTMLElement} context - * An element to detach behaviors from. - * @param {?object} settings - * An object containing settings for the current context. It is rarely used. - * - * @see Drupal.attachBehaviors - */ - - /** - * Reverts and cleans up JavaScript behavior initialization. - * - * @callback Drupal~behaviorDetach - * - * @param {HTMLDocument|HTMLElement} context - * An element to attach behaviors to. - * @param {object} settings - * An object containing settings for the current context. - * @param {string} trigger - * One of `'unload'`, `'move'`, or `'serialize'`. - * - * @see Drupal.detachBehaviors - */ - - /** - * @typedef {object} Drupal~behavior - * - * @prop {Drupal~behaviorAttach} attach - * Function run on page load and after an Ajax call. - * @prop {Drupal~behaviorDetach} detach - * Function run when content is serialized or removed from the page. - */ - - /** - * Holds all initialization methods. - * - * @namespace Drupal.behaviors - * - * @type {Object.} - */ - - /** - * Defines a behavior to be run during attach and detach phases. - * - * Attaches all registered behaviors to a page element. - * - * Behaviors are event-triggered actions that attach to page elements, - * enhancing default non-JavaScript UIs. Behaviors are registered in the - * {@link Drupal.behaviors} object using the method 'attach' and optionally - * also 'detach'. - * - * {@link Drupal.attachBehaviors} is added below to the `jQuery.ready` event - * and therefore runs on initial page load. Developers implementing Ajax in - * their solutions should also call this function after new page content has - * been loaded, feeding in an element to be processed, in order to attach all - * behaviors to the new content. - * - * Behaviors should use `var elements = - * $(context).find(selector).once('behavior-name');` to ensure the behavior is - * attached only once to a given element. (Doing so enables the reprocessing - * of given elements, which may be needed on occasion despite the ability to - * limit behavior attachment to a particular element.) - * - * @example - * Drupal.behaviors.behaviorName = { - * attach: function (context, settings) { - * // ... - * }, - * detach: function (context, settings, trigger) { - * // ... - * } - * }; - * - * @param {HTMLDocument|HTMLElement} [context=document] - * An element to attach behaviors to. - * @param {object} [settings=drupalSettings] - * An object containing settings for the current context. If none is given, - * the global {@link drupalSettings} object is used. - * - * @see Drupal~behaviorAttach - * @see Drupal.detachBehaviors - * - * @throws {Drupal~DrupalBehaviorError} - */ - Drupal.attachBehaviors = function (context, settings) { - context = context || document; - settings = settings || drupalSettings; - var behaviors = Drupal.behaviors; - // Execute all of them. - for (var i in behaviors) { - if (behaviors.hasOwnProperty(i) && typeof behaviors[i].attach === 'function') { - // Don't stop the execution of behaviors in case of an error. - try { - behaviors[i].attach(context, settings); - } - catch (e) { - Drupal.throwError(e); - } - } - } - }; - - /** - * Detaches registered behaviors from a page element. - * - * Developers implementing Ajax in their solutions should call this function - * before page content is about to be removed, feeding in an element to be - * processed, in order to allow special behaviors to detach from the content. - * - * Such implementations should use `.findOnce()` and `.removeOnce()` to find - * elements with their corresponding `Drupal.behaviors.behaviorName.attach` - * implementation, i.e. `.removeOnce('behaviorName')`, to ensure the behavior - * is detached only from previously processed elements. - * - * @param {HTMLDocument|HTMLElement} [context=document] - * An element to detach behaviors from. - * @param {object} [settings=drupalSettings] - * An object containing settings for the current context. If none given, - * the global {@link drupalSettings} object is used. - * @param {string} [trigger='unload'] - * A string containing what's causing the behaviors to be detached. The - * possible triggers are: - * - `'unload'`: The context element is being removed from the DOM. - * - `'move'`: The element is about to be moved within the DOM (for example, - * during a tabledrag row swap). After the move is completed, - * {@link Drupal.attachBehaviors} is called, so that the behavior can undo - * whatever it did in response to the move. Many behaviors won't need to - * do anything simply in response to the element being moved, but because - * IFRAME elements reload their "src" when being moved within the DOM, - * behaviors bound to IFRAME elements (like WYSIWYG editors) may need to - * take some action. - * - `'serialize'`: When an Ajax form is submitted, this is called with the - * form as the context. This provides every behavior within the form an - * opportunity to ensure that the field elements have correct content - * in them before the form is serialized. The canonical use-case is so - * that WYSIWYG editors can update the hidden textarea to which they are - * bound. - * - * @throws {Drupal~DrupalBehaviorError} - * - * @see Drupal~behaviorDetach - * @see Drupal.attachBehaviors - */ - Drupal.detachBehaviors = function (context, settings, trigger) { - context = context || document; - settings = settings || drupalSettings; - trigger = trigger || 'unload'; - var behaviors = Drupal.behaviors; - // Execute all of them. - for (var i in behaviors) { - if (behaviors.hasOwnProperty(i) && typeof behaviors[i].detach === 'function') { - // Don't stop the execution of behaviors in case of an error. - try { - behaviors[i].detach(context, settings, trigger); - } - catch (e) { - Drupal.throwError(e); - } - } - } - }; - - /** - * Encodes special characters in a plain-text string for display as HTML. - * - * @param {string} str - * The string to be encoded. - * - * @return {string} - * The encoded string. - * - * @ingroup sanitization - */ - Drupal.checkPlain = function (str) { - str = str.toString() - .replace(/&/g, '&') - .replace(/"/g, '"') - .replace(//g, '>'); - return str; - }; - - /** - * Replaces placeholders with sanitized values in a string. - * - * @param {string} str - * A string with placeholders. - * @param {object} args - * An object of replacements pairs to make. Incidences of any key in this - * array are replaced with the corresponding value. Based on the first - * character of the key, the value is escaped and/or themed: - * - `'!variable'`: inserted as is. - * - `'@variable'`: escape plain text to HTML ({@link Drupal.checkPlain}). - * - `'%variable'`: escape text and theme as a placeholder for user- - * submitted content ({@link Drupal.checkPlain} + - * `{@link Drupal.theme}('placeholder')`). - * - * @return {string} - * The formatted string. - * - * @see Drupal.t - */ - Drupal.formatString = function (str, args) { - // Keep args intact. - var processedArgs = {}; - // Transform arguments before inserting them. - for (var key in args) { - if (args.hasOwnProperty(key)) { - switch (key.charAt(0)) { - // Escaped only. - case '@': - processedArgs[key] = Drupal.checkPlain(args[key]); - break; - - // Pass-through. - case '!': - processedArgs[key] = args[key]; - break; - - // Escaped and placeholder. - default: - processedArgs[key] = Drupal.theme('placeholder', args[key]); - break; - } - } - } - - return Drupal.stringReplace(str, processedArgs, null); - }; - - /** - * Replaces substring. - * - * The longest keys will be tried first. Once a substring has been replaced, - * its new value will not be searched again. - * - * @param {string} str - * A string with placeholders. - * @param {object} args - * Key-value pairs. - * @param {Array|null} keys - * Array of keys from `args`. Internal use only. - * - * @return {string} - * The replaced string. - */ - Drupal.stringReplace = function (str, args, keys) { - if (str.length === 0) { - return str; - } - - // If the array of keys is not passed then collect the keys from the args. - if (!Array.isArray(keys)) { - keys = []; - for (var k in args) { - if (args.hasOwnProperty(k)) { - keys.push(k); - } - } - - // Order the keys by the character length. The shortest one is the first. - keys.sort(function (a, b) { return a.length - b.length; }); - } - - if (keys.length === 0) { - return str; - } - - // Take next longest one from the end. - var key = keys.pop(); - var fragments = str.split(key); - - if (keys.length) { - for (var i = 0; i < fragments.length; i++) { - // Process each fragment with a copy of remaining keys. - fragments[i] = Drupal.stringReplace(fragments[i], args, keys.slice(0)); - } - } - - return fragments.join(args[key]); - }; - - /** - * Translates strings to the page language, or a given language. - * - * See the documentation of the server-side t() function for further details. - * - * @param {string} str - * A string containing the English text to translate. - * @param {Object.} [args] - * An object of replacements pairs to make after translation. Incidences - * of any key in this array are replaced with the corresponding value. - * See {@link Drupal.formatString}. - * @param {object} [options] - * Additional options for translation. - * @param {string} [options.context=''] - * The context the source string belongs to. - * - * @return {string} - * The formatted string. - * The translated string. - */ - Drupal.t = function (str, args, options) { - options = options || {}; - options.context = options.context || ''; - - // Fetch the localized version of the string. - if (typeof drupalTranslations !== 'undefined' && drupalTranslations.strings && drupalTranslations.strings[options.context] && drupalTranslations.strings[options.context][str]) { - str = drupalTranslations.strings[options.context][str]; - } - - if (args) { - str = Drupal.formatString(str, args); - } - return str; - }; - - /** - * Returns the URL to a Drupal page. - * - * @param {string} path - * Drupal path to transform to URL. - * - * @return {string} - * The full URL. - */ - Drupal.url = function (path) { - return drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix + path; - }; - - /** - * Returns the passed in URL as an absolute URL. - * - * @param {string} url - * The URL string to be normalized to an absolute URL. - * - * @return {string} - * The normalized, absolute URL. - * - * @see https://github.com/angular/angular.js/blob/v1.4.4/src/ng/urlUtils.js - * @see https://grack.com/blog/2009/11/17/absolutizing-url-in-javascript - * @see https://github.com/jquery/jquery-ui/blob/1.11.4/ui/tabs.js#L53 - */ - Drupal.url.toAbsolute = function (url) { - var urlParsingNode = document.createElement('a'); - - // Decode the URL first; this is required by IE <= 6. Decoding non-UTF-8 - // strings may throw an exception. - try { - url = decodeURIComponent(url); - } - catch (e) { - // Empty. - } - - urlParsingNode.setAttribute('href', url); - - // IE <= 7 normalizes the URL when assigned to the anchor node similar to - // the other browsers. - return urlParsingNode.cloneNode(false).href; - }; - - /** - * Returns true if the URL is within Drupal's base path. - * - * @param {string} url - * The URL string to be tested. - * - * @return {bool} - * `true` if local. - * - * @see https://github.com/jquery/jquery-ui/blob/1.11.4/ui/tabs.js#L58 - */ - Drupal.url.isLocal = function (url) { - // Always use browser-derived absolute URLs in the comparison, to avoid - // attempts to break out of the base path using directory traversal. - var absoluteUrl = Drupal.url.toAbsolute(url); - var protocol = location.protocol; - - // Consider URLs that match this site's base URL but use HTTPS instead of HTTP - // as local as well. - if (protocol === 'http:' && absoluteUrl.indexOf('https:') === 0) { - protocol = 'https:'; - } - var baseUrl = protocol + '//' + location.host + drupalSettings.path.baseUrl.slice(0, -1); - - // Decoding non-UTF-8 strings may throw an exception. - try { - absoluteUrl = decodeURIComponent(absoluteUrl); - } - catch (e) { - // Empty. - } - try { - baseUrl = decodeURIComponent(baseUrl); - } - catch (e) { - // Empty. - } - - // The given URL matches the site's base URL, or has a path under the site's - // base URL. - return absoluteUrl === baseUrl || absoluteUrl.indexOf(baseUrl + '/') === 0; - }; - - /** - * Formats a string containing a count of items. - * - * This function ensures that the string is pluralized correctly. Since - * {@link Drupal.t} is called by this function, make sure not to pass - * already-localized strings to it. - * - * See the documentation of the server-side - * \Drupal\Core\StringTranslation\TranslationInterface::formatPlural() - * function for more details. - * - * @param {number} count - * The item count to display. - * @param {string} singular - * The string for the singular case. Please make sure it is clear this is - * singular, to ease translation (e.g. use "1 new comment" instead of "1 - * new"). Do not use @count in the singular string. - * @param {string} plural - * The string for the plural case. Please make sure it is clear this is - * plural, to ease translation. Use @count in place of the item count, as in - * "@count new comments". - * @param {object} [args] - * An object of replacements pairs to make after translation. Incidences - * of any key in this array are replaced with the corresponding value. - * See {@link Drupal.formatString}. - * Note that you do not need to include @count in this array. - * This replacement is done automatically for the plural case. - * @param {object} [options] - * The options to pass to the {@link Drupal.t} function. - * - * @return {string} - * A translated string. - */ - Drupal.formatPlural = function (count, singular, plural, args, options) { - args = args || {}; - args['@count'] = count; - - var pluralDelimiter = drupalSettings.pluralDelimiter; - var translations = Drupal.t(singular + pluralDelimiter + plural, args, options).split(pluralDelimiter); - var index = 0; - - // Determine the index of the plural form. - if (typeof drupalTranslations !== 'undefined' && drupalTranslations.pluralFormula) { - index = count in drupalTranslations.pluralFormula ? drupalTranslations.pluralFormula[count] : drupalTranslations.pluralFormula['default']; - } - else if (args['@count'] !== 1) { - index = 1; - } - - return translations[index]; - }; - - /** - * Encodes a Drupal path for use in a URL. - * - * For aesthetic reasons slashes are not escaped. - * - * @param {string} item - * Unencoded path. - * - * @return {string} - * The encoded path. - */ - Drupal.encodePath = function (item) { - return window.encodeURIComponent(item).replace(/%2F/g, '/'); - }; - - /** - * Generates the themed representation of a Drupal object. - * - * All requests for themed output must go through this function. It examines - * the request and routes it to the appropriate theme function. If the current - * theme does not provide an override function, the generic theme function is - * called. - * - * @example - * To retrieve the HTML for text that should be emphasized and - * displayed as a placeholder inside a sentence. - * Drupal.theme('placeholder', text); - * - * @namespace - * - * @param {function} func - * The name of the theme function to call. - * @param {...args} - * Additional arguments to pass along to the theme function. - * - * @return {string|object|HTMLElement|jQuery} - * Any data the theme function returns. This could be a plain HTML string, - * but also a complex object. - */ - Drupal.theme = function (func) { - var args = Array.prototype.slice.apply(arguments, [1]); - if (func in Drupal.theme) { - return Drupal.theme[func].apply(this, args); - } - }; - - /** - * Formats text for emphasized display in a placeholder inside a sentence. - * - * @param {string} str - * The text to format (plain-text). - * - * @return {string} - * The formatted text (html). - */ - Drupal.theme.placeholder = function (str) { - return '' + Drupal.checkPlain(str) + ''; - }; - -})(Drupal, window.drupalSettings, window.drupalTranslations); +window.Drupal={behaviors:{},locale:{}},function(c,d,f){c.throwError=function(g){setTimeout(function(){throw g},0)},c.attachBehaviors=function(g,h){g=g||document,h=h||d;var j=c.behaviors;for(var l in j)if(j.hasOwnProperty(l)&&'function'==typeof j[l].attach)try{j[l].attach(g,h)}catch(m){c.throwError(m)}},c.detachBehaviors=function(g,h,j){g=g||document,h=h||d,j=j||'unload';var l=c.behaviors;for(var m in l)if(l.hasOwnProperty(m)&&'function'==typeof l[m].detach)try{l[m].detach(g,h,j)}catch(n){c.throwError(n)}},c.checkPlain=function(g){return g=g.toString().replace(/&/g,'&').replace(/"/g,'"').replace(//g,'>'),g},c.formatString=function(g,h){var j={};for(var l in h)if(h.hasOwnProperty(l))switch(l.charAt(0)){case'@':j[l]=c.checkPlain(h[l]);break;case'!':j[l]=h[l];break;default:j[l]=c.theme('placeholder',h[l]);}return c.stringReplace(g,j,null)},c.stringReplace=function(g,h,j){if(0===g.length)return g;if(!Array.isArray(j)){for(var n in j=[],h)h.hasOwnProperty(n)&&j.push(n);j.sort(function(n,o){return n.length-o.length})}if(0===j.length)return g;var l=j.pop(),m=g.split(l);if(j.length)for(var n=0;n'+c.checkPlain(g)+''}}(Drupal,window.drupalSettings,window.drupalTranslations); \ No newline at end of file diff --git a/core/package.json b/core/package.json index b20516db94..aa4d06ba1d 100644 --- a/core/package.json +++ b/core/package.json @@ -4,15 +4,16 @@ "license": "GPL-2.0", "private": true, "scripts": { - "build:js": "node ./scripts/js/babel-es6-build.js", + "build:js": "BABEL_ENV=production node ./scripts/js/babel-es6-build.js", "watch:js": "node ./scripts/js/babel-es6-watch.js", "lint:core-js": "node ./node_modules/eslint/bin/eslint.js --ext=.es6.js . --fix || exit 0" }, "devDependencies": { - "babel-core": "6.24.0", - "babel-preset-es2015": "6.16.0", + "babel-core": "^6.24.1", + "babel-preset-babili": "0.0.12", + "babel-preset-env": "1.4.0", "chokidar": "1.6.1", - "eslint": "3.18.0", + "eslint": "3.19.0", "eslint-config-airbnb": "14.1.0", "eslint-plugin-import": "2.2.0", "eslint-plugin-jsx-a11y": "4.0.0", @@ -21,7 +22,25 @@ }, "babel": { "presets": [ - "es2015" - ] + [ + "env", + { + "modules": false, + "targets": { + "browsers": [ + "last 2 versions", + "ie >= 11" + ] + } + } + ] + ], + "env": { + "production": { + "presets": [ + "babili" + ] + } + } } } diff --git a/core/scripts/js/babel-es6-build.js b/core/scripts/js/babel-es6-build.js index e073f6a431..589f64d5e3 100644 --- a/core/scripts/js/babel-es6-build.js +++ b/core/scripts/js/babel-es6-build.js @@ -11,44 +11,23 @@ const fs = require('fs'); const path = require('path'); -const babel = require('babel-core'); const glob = require('glob'); -// Logging human-readable timestamp. -const log = function (message) { - // eslint-disable-next-line no-console - console.log(`[${new Date().toTimeString().slice(0, 8)}] ${message}`); -}; - -function addSourceMappingUrl(code, loc) { - return code + '\n\n//# sourceMappingURL=' + path.basename(loc); -} - -const changedOrAdded = (filePath) => { - babel.transformFile(filePath, { - sourceMaps: true, - comments: false - }, function (err, result) { - const fileName = filePath.slice(0, -7); - // we've requested for a sourcemap to be written to disk - let mapLoc = `${fileName}.js.map`; - - fs.writeFile(mapLoc, JSON.stringify(result.map)); - fs.writeFile(`${fileName}.js`, addSourceMappingUrl(result.code, mapLoc)); - - log(`'${filePath}' is being processed.`); - }); -}; +const changeOrAdded = require('./changeOrAdded'); +const log = require('./log'); +// Match only on .es6.js files. const fileMatch = './**/*.es6.js'; +// Ignore everything in node_modules const globOptions = { - ignore: 'node_modules/**' + ignore: './node_modules/**' }; const processFiles = (error, filePaths) => { if (error) { process.exitCode = 1; } - filePaths.forEach(changedOrAdded); + // Process all the found files. + filePaths.forEach(changeOrAdded); }; glob(fileMatch, globOptions, processFiles); process.exitCode = 0; diff --git a/core/scripts/js/babel-es6-watch.js b/core/scripts/js/babel-es6-watch.js index d614774f29..9b49482236 100644 --- a/core/scripts/js/babel-es6-watch.js +++ b/core/scripts/js/babel-es6-watch.js @@ -11,50 +11,29 @@ const fs = require('fs'); const path = require('path'); -const babel = require('babel-core'); const chokidar = require('chokidar'); -// Logging human-readable timestamp. -const log = function log(message) { - // eslint-disable-next-line no-console - console.log(`[${new Date().toTimeString().slice(0, 8)}] ${message}`); -}; - -function addSourceMappingUrl(code, loc) { - return `${code}\n\n//# sourceMappingURL=${path.basename(loc)}`; -} +const changeOrAdded = require('./changeOrAdded'); +const log = require('./log'); +// Match only on .es6.js files. const fileMatch = './**/*.es6.js'; +// Ignore everything in node_modules const watcher = chokidar.watch(fileMatch, { ignoreInitial: true, - ignored: 'node_modules/**' + ignored: './node_modules/**' }); -const changedOrAdded = (filePath) => { - babel.transformFile(filePath, { - sourceMaps: true, - comments: false - }, (err, result) => { - const fileName = filePath.slice(0, -7); - // we've requested for a sourcemap to be written to disk - const mapLoc = `${fileName}.js.map`; - - fs.writeFileSync(mapLoc, JSON.stringify(result.map)); - fs.writeFileSync(`${fileName}.js`, addSourceMappingUrl(result.code, mapLoc)); - - log(`'${filePath}' has been changed.`); - }); -}; - const unlinkHandler = (err) => { if (err) { log(err); } }; +// Watch for filesystem changes. watcher - .on('add', filePath => changedOrAdded(filePath)) - .on('change', filePath => changedOrAdded(filePath)) + .on('add', changeOrAdded) + .on('change', changeOrAdded) .on('unlink', (filePath) => { const fileName = filePath.slice(0, -7); fs.stat(`${fileName}.js`, () => { diff --git a/core/scripts/js/changeOrAdded.js b/core/scripts/js/changeOrAdded.js new file mode 100644 index 0000000000..0938b108d8 --- /dev/null +++ b/core/scripts/js/changeOrAdded.js @@ -0,0 +1,25 @@ +const fs = require('fs'); +const babel = require('babel-core'); + +const log = require('./log'); + +module.exports = (filePath) => { + const moduleName = filePath.slice(0, -7); + log(`'${filePath}' is being processed.`); + // Transform the file. + // Check process.env.BABEL_ENV to see if we should create sourcemaps. + babel.transformFile( + filePath, + { + sourceMaps: process.env.BABEL_ENV ? false : 'inline', + comments: false + }, + (err, result) => { + const fileName = filePath.slice(0, -7); + // Write the result to the filesystem. + fs.writeFile(`${fileName}.js`, result.code, () => { + log(`'${filePath}' is finished.`); + }); + } + ); +} diff --git a/core/scripts/js/log.js b/core/scripts/js/log.js new file mode 100644 index 0000000000..08349b3ae3 --- /dev/null +++ b/core/scripts/js/log.js @@ -0,0 +1,4 @@ +module.exports = (message) => { + // Logging human-readable timestamp. + console.log(`[${new Date().toTimeString().slice(0, 8)}] ${message}`); +}