';
-
- return markup;
- }
- });
-
- /**
- * Handles key input.
- *
- * Fires a callback function with either return the key that was pressed in
- * the event.key property, or, if the key is a control key or does not match
- * a supplied pattern, then null as the event.key value.
- *
- * @param Regex event.data.pattern
- * - A regular expression that filters allowed key input. Only keys matching
- * the expression will be returned. All other keys return null.
- *
- * @param Function event.data.callback
- * - A callback function to be invoked after a key is processed. Any
- * variadic parameters supplied to keyManager are passed through as well.
- *
- * @param Array event.data.controls
- * - An Array of char codes that should be ignored as control keys.
- */
- var keyManager = function (event) {
- event.data = event.data || {};
- var pattern = event.data.pattern || undefined;
- var callback = event.data.callback || undefined;
- var controls = event.data.controls || [
- 8, // Delete.
- 13, // Enter.
- 37, // Left.
- 38, // Up.
- 39, // Right.
- 40 // Down.
- ];
- // Get the key from its keyCode.
- var key = mapKeyToChar(event.shiftKey, event.keyCode);
- // Prevent default if:
- // (1) mapKeyToChar did not produce a key and the key is not a control key.
- // (2) mapKeyToChar produced a key and the pattern does not match.
- if ((!key && $.inArray(event.keyCode, controls) === -1) ||
- (key && (pattern && typeof pattern === 'object' && 'exec' in pattern && !pattern.exec(key)))) {
- event.preventDefault();
- }
- // Provide the key as the mapped character in the event object.
- event.key = (key) ? key : null;
- // The callback function should check for isDefaultPrevented() to know if
- // the keyManager validated this key.
- if (callback && typeof callback === 'function') {
- callback.apply(this, arguments);
- }
- }
-
- /**
- * Maps keyCode to Strings, taking the shift key state into account.
- *
- * @param Boolean isShifted
- * - A Boolean representing if the shift key was pressed (true) or not
- * (false)
- *
- * @param Number keyCode
- * - The numeric code of the key that was pressed.
- *
- * @return String
- * - A single character corresponding to the keyCode or null if no
- * correspondence is found.
- */
- var mapKeyToChar = function (isShifted, keyCode) {
- if (keyCode === 27
- || keyCode === 8
- || keyCode === 9
- || keyCode === 20
- || keyCode === 16
- || keyCode === 17
- || keyCode === 91
- || keyCode === 13
- || keyCode === 92
- || keyCode === 18) {
- return false;
- }
- if (typeof isShifted != "boolean" || typeof keyCode != "number") {
- return false;
- }
- var charMap = [];
- charMap[192] = "~";
- charMap[49] = "!";
- charMap[50] = "@";
- charMap[51] = "#";
- charMap[52] = "$";
- charMap[53] = "%";
- charMap[54] = "^";
- charMap[55] = "&";
- charMap[56] = "*";
- charMap[57] = "(";
- charMap[48] = ")";
- charMap[109] = "_";
- charMap[107] = "+";
- charMap[219] = "{";
- charMap[221] = "}";
- charMap[220] = "|";
- charMap[59] = ":";
- charMap[222] = "\"";
- charMap[188] = "<";
- charMap[190] = ">";
- charMap[191] = "?";
- charMap[32] = " ";
- var character = "";
- if (isShifted) {
- if (keyCode >= 65 && keyCode <= 90) {
- character = String.fromCharCode(keyCode);
- }
- else {
- character = charMap[keyCode];
- }
- }
- else {
- if (keyCode >= 65 && keyCode <= 90) {
- character = String.fromCharCode(keyCode).toLowerCase();
- }
- else {
- character = String.fromCharCode(keyCode);
- }
- }
- return character;
- }
-
- /**
- * Parses a String representing a media query into usable values.
- *
- * @param String mq
- * - A String representing a media query e.g. 'all and (min-width: 800px)'
- */
- var parseMediaQuery = function (mq) {
- return {
- media : mq.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/) && RegExp.$2 || "all",
- hasquery: mq.indexOf("(") > -1,
- minw : mq.match(/\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/) && parseFloat(RegExp.$1) + (RegExp.$2 || ""),
- maxw : mq.match(/\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/) && parseFloat(RegExp.$1) + (RegExp.$2 || "")
- }
- }
-}(Drupal, jQuery));
diff --git a/core/modules/layout/js/layout.preview.js b/core/modules/layout/js/layout.preview.js
new file mode 100644
index 0000000..9ce0c92
--- /dev/null
+++ b/core/modules/layout/js/layout.preview.js
@@ -0,0 +1,741 @@
+(function (Drupal, $) {
+
+ Drupal.layout = Drupal.layout || {};
+
+ var $toolbarTab = $();
+ var size; // The width of the preview container.
+ var handles = []; // The values of the jQuery UI Slider handles.
+ var leftOffset; // The left value of the iframe containing the previewed page.
+ var $frame; // The iframe that contains the previewed page.
+ var iframeDocument; // The document of the iframe that contains the preview.
+ var $slider; // The jQuery UI Slider widget that adjusts the iframed preview.
+ var $container; // The container of the page preview component.
+ var $controls;
+ var $sizeInput; // The input element that display the width of the preview.
+ var breakpoints = {}; // A list of breakpoints, keyed by configuration string.
+ var $breakpointView; // The container of the breakpoint views.
+ var edgeTolerance = 60;
+
+ Drupal.behaviors.layout = {
+ attach: function (context, settings) {
+ var $body = $(window.top.document.body).once('layout-preview');
+
+ if ($body.length) {
+ // Append the selector to the preview container.
+ $toolbarTab = $('.layout-preview-toolbar-tab')
+ .on('click.layout', '#layout-previewer', toggleConfigurationOptions)
+ .on('mouseleave.layout', '.layout-previewer-options', {open: false}, toggleConfigurationOptions)
+ .on('click.layout', '.layout-previewer-options .layout-preview-device', {open: false}, toggleConfigurationOptions)
+ .on('click.layout', '.layout-preview-device', loadDevicePreview)
+ .on('click.layout', '#layout-preview-ruler-trigger', toggleControls);
+ // Register a handler on window resize to reposition the tab dropdown.
+ $(window.top)
+ .on('resize.layout.tab', handleWindowToolbarResize)
+ .trigger('resize.layout.tab');
+ }
+ // Remove administrative elements in the document inside the iframe.
+ if (window.top !== window.self) {
+ var $frameBody = $(window.self.document.body).once('layout-preview');
+ if ($frameBody.length > 0) {
+ $frameBody.get(0).className += ' layout-preview-frame';
+ }
+ }
+ }
+ };
+
+ /**
+ *
+ */
+ var toggleConfigurationOptions = function (event) {
+ event.preventDefault();
+ var open = (event.data && typeof event.data.open === 'boolean') ? event.data.open : undefined;
+ $(event.delegateTarget)
+ .toggleClass('open', open)
+ .find('.layout-previewer-options')
+ .drupalLayout('correctEdgeCollisions');
+ };
+
+ /**
+ *
+ */
+ var toggleControls = function (event) {
+ event.preventDefault();
+ var $this = $(this);
+ $controls.toggleClass('active');
+ if ($controls.hasClass('active')) {
+ $this.text(Drupal.t('Hide developer ruler'));
+ }
+ else {
+ $this.text(Drupal.t('Show developer ruler'));
+ }
+ }
+
+ /**
+ * Toggles the layout preview component on or off.
+ *
+ * When first toggled on, the layout preview component is built. All
+ * subsequent toggles hide or show the build component.
+ *
+ * @param Object Event
+ * - jQuery Event object.
+ */
+ var toggleLayoutPreview = function (event, activate) {
+ event.preventDefault();
+ // Build the previewer if it doesn't exist.
+ if (!$container) {
+ // Initialize the handle positions.
+ handles = (handles.length) ? handles : [0, document.documentElement.clientWidth];
+ buildPreviewer();
+ // Size is the width of the iframe.
+ updateDimensions({width: (size || window.top.document.documentElement.clientWidth)});
+ }
+ $container
+ .toggleClass('active', activate)
+ $('body')
+ .toggleClass('layout-preview-active', activate);
+ };
+
+ /**
+ * Assembles a layout previewer.
+ */
+ var buildPreviewer = function () {
+ $(window.top.document.body).once('layout-preview-container', function (index, element) {
+ $container = $(Drupal.theme('layoutContainer'));
+ // Build the previewer controls.
+ $controls = $(Drupal.theme('layoutControls'));
+ // Slider.
+ $slider = $(Drupal.theme('layoutSlider'))
+ .filter('#frame-slider')
+ .slider({
+ 'animate': 'fast',
+ 'range': true,
+ 'max': document.documentElement.clientWidth,
+ 'min': 0,
+ 'values': handles,
+ 'slide': handleSlide
+ })
+ .appendTo($controls);
+
+ // Load the breakpoints for the current theme.
+ if ('breakpoints' in Drupal.settings.layout.routes) {
+ $.ajax(Drupal.settings.layout.routes.breakpoints)
+ .success(breakpointsCallback);
+ }
+ // Width label.
+ $sizeInput = $(Drupal.theme('layoutSizeInput'))
+ .appendTo($controls);
+
+ // Attach the controls.
+ $container.append($controls);
+
+ // Add a close button.
+ $container
+ .append(Drupal.theme('layoutClose'));
+
+ // Attach the frame that will hold the preview.
+ $frame = $(Drupal.theme('layoutFrame'))
+ .css({
+ 'width': size
+ })
+ .appendTo($container);
+
+ // Append the container to the window.
+ $container.appendTo(window.top.document.body);
+ // Displace the top of the container.
+ $container
+ .css({
+ top: getDisplacement('top'),
+ })
+ .attr('data-offset-top', getDisplacement('top'));
+
+ // The contentDocument property is not supported in IE until IE8.
+ iframeDocument = $frame[0].contentDocument || $frame[0].contentWindow.document;
+
+ $container
+ .on('click.layout', '#layout-preview-close', {activate: false}, toggleLayoutPreview)
+ .on('keypress.layout', '#layout-size-input', {pattern: /^[0-9\.]$/, callback: handleSizeInputChange}, keyManager)
+ .on('sizeUpdate.layout', refreshPreviewSizing);
+
+ // Trigger a resize to kick off some initial placements.
+ $(window.top)
+ .on('resize.layout', handleWindowResize)
+ .trigger('resize.layout');
+
+ // Load the current page URI into the preview iframe.
+ // @todo, are there any security implications to loading a page like this?
+ iframeDocument.location.href = Drupal.settings.basePath + Drupal.settings.currentPath;
+ });
+ };
+
+ /**
+ * Responds to a jQuery UI Slider slide event.
+ *
+ * @param Object Event
+ * - jQuery Event object.
+ *
+ * @param Object ui
+ * - jQuery Slider widget state information resulting from a slide event.
+ */
+ var handleSlide = function (event, ui) {
+ // Layout will control the placement of the handles.
+ event.preventDefault();
+ var delta = 0;
+ var vals = [];
+ var handle, split, width;
+ // Get the delta of the original value of the handles and the new value.
+ for (var i = ui.values.length - 1; i >= 0; i--) {
+ // Get the original handle value.
+ var handle = handles[i];
+ // The new handle value.
+ var value = ui.values[i];
+ // If the original and the new values are not equal, adjust the handles.
+ if (handle !== value) {
+ var max = $slider.slider('option', 'max');
+ var otherHandle = (i === 0) ? 1 : 0;
+ vals[i] = value;
+ // The value of the other handle is the inverse of the percentage of the
+ // active handle.
+ vals[otherHandle] = max * (1 - (value / max));
+ // Get the updated width of the viewport.
+ width = Math.abs(vals[i] - vals[otherHandle]);
+ // Update the dimension variables in the closure.
+ updateDimensions({width: width});
+ // Only one handle moves at a time, so if a handle-move was processed,
+ // then break;
+ break;
+ }
+ }
+ };
+
+ /**
+ * Responds to keypress events from the frame size input.
+ *
+ * @param Object Event
+ * - jQuery Event object.
+ */
+ var handleSizeInputChange = function (event) {
+ var newSize;
+ if (event.isDefaultPrevented()) {
+ return false;
+ }
+ if (event.key) {
+ newSize = $sizeInput.find('input').val();
+ // If the key is a '.' and the value already contains one then
+ // prevent default.
+ if (event.key == '.' && newSize.indexOf('.') > -1) {
+ event.preventDefault();
+ }
+ }
+ // Process the press of the enter key.
+ if (event.keyCode === 13) {
+ var newSize = parseFloat($sizeInput.find('input').val());
+ if (newSize > 0) {
+ // Update the dimensions variables in the closure.
+ updateDimensions({width: newSize}, 250);
+ }
+ }
+ };
+
+ /**
+ * Updates the dimension variables of the previewer components.
+ *
+ * @param Array values
+ * - An array that contains the position values of the handles of the jQuery
+ * UI slider.
+ *
+ * @param max
+ * - The maximum width of the previewer. Often this is just the width of the
+ * client.
+ *
+ * @param speed
+ * - A number representing time in milliseconds or a jQuery speed keyword.
+ * Determines the speed at which animations between changes dimension values
+ * should take place. Defaults to zero.
+ */
+ var updateDimensions = function (dimensions, speed) {
+ var width = dimensions.width || NaN;
+ var height = dimensions.height || NaN;
+ // Calculate the handle placements.
+ var max = $slider.slider('option', 'max');
+ var values = [];
+ var gutterPercent = (1 - (width / max)) / 2;
+ values[0] = gutterPercent * max;
+ // The gutters must be at least the width of the edgeTolerance
+ values[0] = (values[0] < edgeTolerance) ? edgeTolerance : values[0];
+ // The frame width must fit within the different of the gutters and the page
+ // width.
+ width = (max - (values[0] * 2) < width) ? max - (values[0] * 2) : width;
+ values[1] = values[0] + width;
+ // Store the new values of the handles.
+ handles = [values[0], values[1]];
+ // Set the new size of the frame.
+ size = Math.round((max * ((values[1] - values[0]) / max)) * 10) / 10;
+ // Set the left offset of the frame.
+ leftOffset = max * (values[0] / max);
+ // Trigger a dimension change.
+ $container.trigger('sizeUpdate.layout', speed);
+ };
+
+ /**
+ *
+ */
+ var handleWindowToolbarResize = function (event) {
+ var options = $toolbarTab
+ .find('.layout-previewer-options')
+ // Move the list back onto the screen.
+ .drupalLayout('correctEdgeCollisions')
+ .find('.layout-preview-device')
+ // Hide layout options that are wider than the current screen
+ .drupalLayout('prunePreviewChoices', {tolerance: edgeTolerance})
+ // The lis will be toggled. Assign them to options.
+ .parent('li');
+
+ $toolbarTab.toggle(options.not('.element-hidden').length > 0);
+ };
+
+ /**
+ * Responds to window resize events.
+ *
+ * @param Object Event
+ * - jQuery Event object.
+ */
+ var handleWindowResize = function (event) {
+ var doc = this.document.documentElement;
+ var docWidth = doc.clientWidth;
+ var framePercent = size / docWidth;
+ var gutterPercent = (1 - framePercent) / 2;
+ // Adjust the parameters of the slider.
+ $slider
+ // The new max of the slider is the width of the document.
+ .slider('option', 'max', docWidth)
+ // Update the position values of the slider handles.
+ .slider('values', [(gutterPercent * docWidth), ((gutterPercent + framePercent) * docWidth)]);
+ // If the window has been reduced below the width of the frame, reduce the
+ // width of the frame.
+ updateDimensions({width: ((docWidth < size) ? docWidth : size)});
+ // Adjust the parameters of the frame.
+ $frame.css({
+ 'left': gutterPercent * docWidth,
+ 'width': size
+ });
+ // Adjust the position of the size input.
+ var inputPercent = $sizeInput.width() / docWidth;
+ gutterPercent = (1 - inputPercent) / 2;
+ $container.find('#layout-size-input').css({
+ 'left': gutterPercent * docWidth
+ });
+ // Update the size input value.
+ $sizeInput.find('input').val(size);
+ };
+
+ /**
+ *
+ */
+ $.fn.drupalLayout = (function () {
+
+ /**
+ *
+ */
+ function correct () {
+ // Clear any previous corrections.
+ clear.apply(this);
+ // Go through each element and correct edge collisions.
+ return this.each(function (index, element) {
+ var $this = $(this);
+ var width = $this.width();
+ var height = $this.height();
+ var clientW = document.documentElement.clientWidth;
+ var clientH = document.documentElement.clientHeight;
+ var collisions = {
+ 'top': null,
+ 'right': null,
+ 'bottom': null,
+ 'left': null
+ };
+ // Determine if the element is too big for the document. Resize to fit.
+ if (width > clientW) {
+ $this.width(clientW);
+ // If the element is too wide, it will collide on both left and right.
+ collisions.left = true;
+ collisions.right = true;
+ }
+ if (height > clientH) {
+ $this.height(clientH);
+ // If the element is too high, it will collide on both top and bottom.
+ collisions.top = true;
+ collisions.bottom = true;
+ }
+ // Check each edge for a collision.
+ if (!collisions.top && $this.offset().top < 0) {
+ collisions.top = true;
+ }
+ if (!collisions.right && (($this.offset().left + width) > clientW)) {
+ collisions.right = true;
+ }
+ if (!collisions.bottom && (($this.offset().top + height) > clientH)) {
+ collisions.bottom = true;
+ }
+ if (!collisions.left && $this.offset().left < 0) {
+ collisions.left = true;
+ }
+ // Set the offset to zero for any collision on an edge.
+ for (var edge in collisions) {
+ if (collisions.hasOwnProperty(edge)) {
+ if (collisions[edge]) {
+ $this.css(edge, 0);
+ }
+ }
+ }
+ });
+ }
+
+ /**
+ *
+ */
+ function clear () {
+ var edges = ['top', 'right', 'bottom', 'left'];
+ return this.each(function (index, element) {
+ for (var i = 0; i < edges.length; i++) {
+ this.style[edges[i]] = "";
+ }
+ });
+ }
+
+ /**
+ *
+ */
+ function prune (options) {
+ var docWidth = document.documentElement.clientWidth;
+ var tolerance = (options && 'tolerance' in options && typeof options.tolerance === 'number' && options.tolerance > 0) ? options.tolerance : 0;
+ return this.each(function () {
+ var $this = $(this);
+ var width = parseInt($this.data('layout-width'));
+ var fits = ((width + (tolerance * 2)) < docWidth);
+ $this.parent('li').toggleClass('element-hidden', !fits);
+ });
+ }
+
+ /**
+ *
+ */
+ var methods = {
+ 'correctEdgeCollisions': correct,
+ 'prunePreviewChoices': prune
+ };
+
+ return function (method) {
+ // Method calling logic
+ if (methods[method]) {
+ return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+ }
+ else {
+ $.error(Drupal.t('Method @method does not exist in this plugin.', {'@method': method}));
+ }
+ };
+
+ }());
+
+ /**
+ * Renders breakpoint configuration to an HTML view.
+ *
+ * @param Object data
+ * - Breakpoint configuration data. The keys of the object correspond to the
+ * keys of theme-configured breakpoints. The value of each key is a string
+ * that represents a media query.
+ *
+ * @param String textStatus
+ * - The status of the AJAX request.
+ *
+ * @param Object jqXHR
+ * - A jQuery XMLHttpRequest object.
+ */
+ var breakpointsCallback = function (data, textStatus, jqXHR) {
+ $breakpointView = $(Drupal.theme('layoutBreakpointView'));
+ var $item, options;
+ for (var bp in data) {
+ if (data.hasOwnProperty(bp)) {
+ breakpoints[bp] = parseMediaQuery(data[bp]);
+ // Append a representation of each breakpoint to the frame slider.
+ if (breakpoints[bp].hasquery) {
+ options = breakpoints[bp];
+ options.id = 'layout-bp-' + bp.replace(/\./g, '-');
+ options.label = bp;
+ $item = $(Drupal.theme('layoutBreakpointItemView', options));
+ $breakpointView.prepend($item);
+ }
+ }
+ }
+ if ($breakpointView.children().length) {
+ // @todo, These breakpoints should be sorted by minw eventually. For now
+ // we assume they are listed from small to largest.
+ $container.find('#layout-previewer-controls').append($breakpointView);
+ }
+ };
+
+ /**
+ *
+ */
+ function loadDefaultPreview (event) {
+ event.preventDefault();
+ toggleLayoutPreview(event);
+ updateDimensions({width: document.documentElement.clientWidth}, 250);
+ }
+
+ /**
+ *
+ */
+ function loadDevicePreview (event) {
+ event.preventDefault();
+ toggleLayoutPreview(event, true);
+ var $link = $(event.target);
+ var width = $link.data('layout-width')
+ updateDimensions({width: width}, 250);
+ }
+
+ /**
+ * Redraws the layout preview component based on the stored dimensions.
+ *
+ * @param Object event
+ * - A jQuery event object.
+ *
+ * @param Number/String speed
+ * - A number representing time in milliseconds or a jQuery speed keyword.
+ * Determines the speed at which animations between changes dimension values
+ * should take place. Defaults to zero.
+ */
+ var refreshPreviewSizing = function (event, speed) {
+ speed = speed || 0;
+ // Adjust the frame.
+ $slider.slider('option', 'values', [handles[0], handles[1]]);
+ $frame.animate({
+ left: leftOffset,
+ width: size
+ }, speed);
+ // Update the size input value.
+ $sizeInput.find('input').val(size);
+ // Reposition the close button.
+ $('#layout-preview-close')
+ .css('left', (leftOffset + size));
+ };
+
+ /**
+ * Get the total displacement of given region.
+ *
+ * @param String region
+ * Region name. Either "top" or "bottom".
+ *
+ * @return
+ * The total displacement of given region in pixels.
+ */
+ var getDisplacement = function (region) {
+ var displacement = 0;
+ var lastDisplaced = $('[data-offset-' + region + ']');
+ if (lastDisplaced.length) {
+ displacement = parseInt(lastDisplaced.attr('data-offset-' + region));
+ }
+ return displacement;
+ };
+
+ $.extend(Drupal.theme, {
+ /**
+ * Returns the preview container element.
+ */
+ layoutContainer: function () {
+ return '
';
+ },
+
+ /**
+ *
+ */
+ layoutClose: function () {
+ return '';
+ },
+
+ /**
+ * Returns an overlay iframe element.
+ */
+ layoutFrame: function (url) {
+ return '';
+ },
+
+ /**
+ * Returns the HTML for the jQuery UI Slider attachment.
+ */
+ layoutSlider: function () {
+ return '';
+ },
+
+ /**
+ *
+ */
+ layoutControls: function () {
+ return '';
+ },
+
+ /**
+ * Returns the input element for changing the preview width.
+ */
+ layoutSizeInput: function () {
+ return '