diff --git a/.gitignore b/.gitignore index 2385c03..166082c 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ bower_components build coverage node_modules +/lib +**/*.soy.js diff --git a/.jshintrc b/.jshintrc index fe0a07a..6262805 100644 --- a/.jshintrc +++ b/.jshintrc @@ -8,6 +8,7 @@ "evil": false, "forin": false, "globals": { + "IncrementalDOM": true, "soy": true, "soydata": true }, diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..70f93e9 --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,29 @@ +# Software License Agreement (BSD License) + +Copyright (c) 2014, Liferay Inc. +All rights reserved. + +Redistribution and use of this software in source and binary forms, with or without modification, are +permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above + copyright notice, this list of conditions and the + following disclaimer. + +* Redistributions in binary form must reproduce the above + copyright notice, this list of conditions and the + following disclaimer in the documentation and/or other + materials provided with the distribution. + +* The name of Liferay Inc. may not be used to endorse or promote products + derived from this software without specific prior + written permission of Liferay Inc. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED +WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A +PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR +ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR +TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF +ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. diff --git a/README.md b/README.md index 09039cf..66a10bf 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,27 @@ -# Alloy Modal +# metal-modal -Alloy's modal component. +Metal's modal component. + +## Setup + +1. Install NodeJS >= [v0.12.0](http://nodejs.org/dist/v0.12.0/), if you don't have it yet. + +2. Install global dependencies: + + ``` + [sudo] npm install -g gulp + ``` + +3. Install local dependencies: + + ``` + npm install + ``` + +4. Build the code: + + ``` + gulp build + ``` + +5. Open the demo at demos/index.html on your browser. diff --git a/bower.json b/bower.json deleted file mode 100644 index 0c4204a..0000000 --- a/bower.json +++ /dev/null @@ -1,32 +0,0 @@ -{ - "name": "alloy-modal", - "version": "0.1.0", - "homepage": "https://github.com/metal/alloy-modal", - "authors": [ - "Maira Bello " - ], - "description": "AlloyUI's modal component", - "main": "src/Modal.js", - "moduleType": [ - "es6" - ], - "keywords": [ - "alloy", - "alloyui", - "metal" - ], - "ignore": [ - "*", - "!src/**/*" - ], - "license": "MIT", - "dependencies": { - "soyutils": "2014.04.22", - "traceur": "~0.0.90", - "system.js": "~0.17.1", - "bootstrap": "~3.3.4", - "requirejs": "~2.1.18", - "metal": "~0.3.1", - "metal-jquery-adapter": "~0.0.1" - } -} diff --git a/demos/amd.html b/demos/amd.html deleted file mode 100644 index 58f1a6f..0000000 --- a/demos/amd.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - Demo: Modal - - - - - - - -

Modal

- - - diff --git a/demos/index.html b/demos/index.html index 1b97268..d65360a 100644 --- a/demos/index.html +++ b/demos/index.html @@ -2,21 +2,28 @@ + Demo: Modal - + -

Modal

+
+ diff --git a/demos/jquery.html b/demos/jquery.html deleted file mode 100644 index 5a085d5..0000000 --- a/demos/jquery.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - Demo: Modal - - - - - - - - -

Modal

- - - - diff --git a/demos/systemJsConfig.js b/demos/systemJsConfig.js deleted file mode 100644 index 2852e5a..0000000 --- a/demos/systemJsConfig.js +++ /dev/null @@ -1,10 +0,0 @@ -System.config({ - defaultJSExtensions: true, - baseURL: '../', - map: { - traceur: 'bower:traceur/traceur' - }, - paths: { - 'bower:*': 'bower_components/*' - } -}); diff --git a/demos/systemjs.html b/demos/systemjs.html deleted file mode 100644 index 5ad0d3c..0000000 --- a/demos/systemjs.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - Demo: Modal - - - - - - - - -

Modal

- - - diff --git a/gulpfile.js b/gulpfile.js index b8c1174..784e335 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -5,6 +5,5 @@ var metal = require('gulp-metal'); metal.registerTasks({ bundleCssFileName: 'modal.css', bundleFileName: 'modal.js', - globalName: 'alloy', - moduleName: 'alloy-modal' + moduleName: 'metal-modal' }); diff --git a/karma.conf.js b/karma.conf.js deleted file mode 100644 index 91671dd..0000000 --- a/karma.conf.js +++ /dev/null @@ -1,44 +0,0 @@ -var isparta = require('isparta'); -var metal = require('gulp-metal'); - -var babelOptions = { - resolveModuleSource: metal.renameAlias, - sourceMap: 'both' -}; - -module.exports = function (config) { - config.set({ - frameworks: ['mocha', 'chai', 'source-map-support', 'commonjs'], - - files: [ - 'bower_components/soyutils/soyutils.js', - 'bower_components/metal/src/**/*.js', - 'src/**/*.js', - 'test/**/*.js' - ], - - preprocessors: { - 'src/!(*.soy).js': ['coverage', 'commonjs'], - 'src/*.soy.js': ['babel', 'commonjs'], - 'bower_components/metal/**/*.js': ['babel', 'commonjs'], - 'test/**/*.js': ['babel', 'commonjs'] - }, - - browsers: ['Chrome'], - - reporters: ['coverage', 'progress'], - - babelPreprocessor: {options: babelOptions}, - - coverageReporter: { - instrumenters: {isparta : isparta}, - instrumenter: {'**/*.js': 'isparta'}, - instrumenterOptions: {isparta: {babel: babelOptions}}, - reporters: [ - {type: 'html'}, - {type: 'lcov', subdir: 'lcov'}, - {type: 'text-summary'} - ] - } - }); -} diff --git a/package.json b/package.json index fad4873..099f46e 100644 --- a/package.json +++ b/package.json @@ -1,38 +1,45 @@ { - "name": "alloy-modal", - "version": "0.1.0", - "description": "Alloy's modal component", - "license": "MIT", - "repository": "metal/alloy-modal", + "name": "metal-modal", + "version": "2.0.3", + "description": "Metal's modal component", + "license": "BSD", + "repository": "metal/metal-modal", "author": { "name": "Maira Bello", "email": "maira.araujo@liferay.com" }, "engines": { - "node": ">=0.12.0" + "node": ">=0.12.0", + "npm": ">=3.0.0" }, + "jsnext:main": "src/Modal.js", + "main": "lib/Modal.js", + "files": [ + "lib", + "src", + "test" + ], "scripts": { + "compile": "babel --presets metal -d lib/ src/", + "prepublish": "gulp soy && npm run compile", "test": "gulp test" }, "keywords": [ - "alloy", - "alloyui", "metal", "modal" ], + "dependencies": { + "metal": "^2.0.0", + "metal-component": "^2.0.0", + "metal-dom": "^2.0.0", + "metal-events": "^2.0.0", + "metal-soy": "^2.0.0" + }, "devDependencies": { - "chai": "^2.3.0", + "bootstrap": "^3.3.6", + "babel-cli": "^6.4.5", + "babel-preset-metal": "^4.0.0", "gulp": "^3.8.11", - "gulp-metal": "^0.1.1", - "isparta": "^3.0.3", - "karma": "^0.12.31", - "karma-babel-preprocessor": "^5.2.1", - "karma-chai": "^0.1.0", - "karma-chrome-launcher": "^0.1.12", - "karma-commonjs": "0.0.13", - "karma-coverage": "^0.3.1", - "karma-mocha": "^0.1.10", - "karma-source-map-support": "^1.0.0", - "mocha": "^2.2.5" + "gulp-metal": "^1.0.0" } } diff --git a/src/Modal.js b/src/Modal.js index 6ebdf53..24863c5 100644 --- a/src/Modal.js +++ b/src/Modal.js @@ -1,20 +1,61 @@ 'use strict'; -import core from 'bower:metal/src/core'; -import dom from 'bower:metal/src/dom/dom'; -import ComponentRegistry from 'bower:metal/src/component/ComponentRegistry'; -import SoyComponent from 'bower:metal/src/soy/SoyComponent'; -import './Modal.soy'; +import core from 'metal'; +import dom from 'metal-dom'; +import { EventHandler } from 'metal-events'; +import templates from './Modal.soy.js'; +import Component from 'metal-component'; +import Soy from 'metal-soy'; /** * Modal component. */ -class Modal extends SoyComponent { +class Modal extends Component { /** * @inheritDoc */ - constructor(opt_config) { - super(opt_config); + created() { + this.eventHandler_ = new EventHandler(); + } + + /** + * @inheritDoc + */ + attached() { + this.autoFocus_(this.autoFocus); + } + + /** + * Automatically focuses the element specified by the given selector. + * @param {boolean|string} autoFocusSelector The selector, or false if no + * element should be automatically focused. + * @protected + */ + autoFocus_(autoFocusSelector) { + if (this.inDocument && this.visible && autoFocusSelector) { + var element = this.element.querySelector(autoFocusSelector); + if (element) { + element.focus(); + } + } + } + + /** + * @inheritDoc + */ + detached() { + super.detached(); + this.eventHandler_.removeAllListeners(); + } + + /** + * Adds a class to the body to disable body scrolling when modal is larger + * than window height. Allows modal to scroll + */ + disableBodyScroll() { + var body = document.querySelector('body'); + + dom.addClasses(body, 'modal-open'); } /** @@ -22,25 +63,93 @@ class Modal extends SoyComponent { */ disposeInternal() { dom.exitDocument(this.overlayElement); + this.unrestrictFocus_(); super.disposeInternal(); } /** - * Hides the modal, setting its `visible` attribute to false. + * Removes the "modal-open" class from the body, enabling it to scroll again + */ + enableBodyScroll() { + var body = document.querySelector('body'); + + dom.removeClasses(body, 'modal-open'); + } + + /** + * Handles a `focus` event on the document. If the focused element is + * outside the modal and an overlay is being used, focuses the modal back. + * @param {!Event} event + * @protected + */ + handleDocumentFocus_(event) { + if (this.overlay && !this.element.contains(event.target)) { + this.autoFocus_('.modal-dialog'); + } + } + + /** + * Handles document click in order to close the alert. + * @param {!Event} event + * @protected + */ + handleKeyup_(event) { + if (event.keyCode === 27) { + this.hide(); + } + } + + /** + * Hides the modal, setting its `visible` state key to false. */ hide() { this.visible = false; } /** - * Shows the modal, setting its `visible` attribute to true. + * Restricts focus to the modal while it's visible. + * @protected + */ + restrictFocus_() { + if (!this.restrictFocusHandle_) { + this.restrictFocusHandle_ = dom.on(document, 'focus', this.handleDocumentFocus_.bind(this), true); + } + } + + /** + * Shifts the focus back to the last element that had been focused before the + * modal was shown. + * @protected + */ + shiftFocusBack_() { + if (this.lastFocusedElement_) { + this.lastFocusedElement_.focus(); + this.lastFocusedElement_ = null; + } + } + + /** + * Shows the modal, setting its `visible` state key to true. */ show() { this.visible = true; } /** - * @inheritDoc + * Syncs the component according to the value of the `hideOnEscape` state key. + * @param {boolean} hideOnEscape + */ + syncHideOnEscape(hideOnEscape) { + if (hideOnEscape) { + this.eventHandler_.add(dom.on(document, 'keyup', this.handleKeyup_.bind(this))); + } else { + this.eventHandler_.removeAllListeners(); + } + } + + /** + * Syncs the component according to the value of the `overlay` state key. + * @param {boolean} overlay */ syncOverlay(overlay) { var willShowOverlay = overlay && this.visible; @@ -48,51 +157,115 @@ class Modal extends SoyComponent { } /** - * @inheritDoc + * Syncs the component according to the value of the `visible` state key. */ - syncVisible(visible) { - this.element.style.display = visible ? 'block' : ''; + syncVisible() { this.syncOverlay(this.overlay); + + if (this.visible) { + this.lastFocusedElement_ = this.lastFocusedElement_ || document.activeElement; + this.autoFocus_(this.autoFocus); + this.restrictFocus_(); + this.disableBodyScroll(); + } else { + this.unrestrictFocus_(); + this.shiftFocusBack_(); + this.enableBodyScroll(); + } } /** - * @inheritDoc + * Removes the handler that restricts focus to elements inside the modal. + * @protected + */ + unrestrictFocus_() { + if (this.restrictFocusHandle_) { + this.restrictFocusHandle_.removeListener(); + this.restrictFocusHandle_ = null; + } + } + + /** + * Defines the default value for the `overlayElement` state key. + * @protected */ valueOverlayElementFn_() { return dom.buildFragment('
').firstChild; } } -/** - * Default modal elementClasses. - * @default modal - * @type {String} - * @static - */ -Modal.ELEMENT_CLASSES = 'modal'; +Modal.STATE = { + /** + * A selector for the element that should be automatically focused when the modal + * becomes visible, or `false` if no auto focus should happen. Defaults to the + * modal's close button. + * @type {boolean|string} + */ + autoFocus: { + validator: val => val === false || core.isString(val), + value: '.close' + }, -Modal.ATTRS = { /** - * Content to be placed inside modal body. - * @type {string|SanitizedHtml} + * Content to be placed inside modal body. Can be either an html string or + * a function that calls incremental dom for rendeirng the body. + * @type {string|function()} */ body: { }, /** - * Content to be placed inside modal footer. - * @type {string|SanitizedHtml} + * The id used by the body element. + * @type {string} + */ + bodyId: { + valueFn: () => 'modal-body-' + core.getUid() + }, + + /** + * Content to be placed inside modal footer. Can be either an html string or + * a function that calls incremental dom for rendeirng the footer. + * @type {string|function()} */ footer: { }, /** - * Content to be placed inside modal header. - * @type {string|SanitizedHtml} + * The id used by the header element. + * @type {string} + */ + headerId: { + valueFn: () => 'modal-header-' + core.getUid() + }, + + /** + * Content to be placed inside modal header. Can be either an html string or + * a function that calls incremental dom for rendeirng the header. + * @type {string|function()} */ header: { }, + /** + * Whether modal should hide on esc. + * @type {boolean} + * @default true + */ + hideOnEscape: { + validator: core.isBoolean, + value: true + }, + + /** + * Flag indicating if the default "x" button for closing the modal should be + * added or not. + * @type {boolean} + * @default false + */ + noCloseButton: { + value: false + }, + /** * Whether overlay should be visible when modal is visible. * @type {boolean} @@ -110,10 +283,19 @@ Modal.ATTRS = { overlayElement: { initOnly: true, valueFn: 'valueOverlayElementFn_' + }, + + /** + * The ARIA role to be used for this modal. + * @type {string} + * @default 'dialog' + */ + role: { + validator: core.isString, + value: 'dialog' } }; -ComponentRegistry.register('Modal', Modal); +Soy.register(Modal, templates); export default Modal; - diff --git a/src/Modal.soy b/src/Modal.soy index fa99eb0..7a0578b 100644 --- a/src/Modal.soy +++ b/src/Modal.soy @@ -1,71 +1,49 @@ -{namespace Templates.Modal} +{namespace Modal} /** * This renders the main element. */ -{template .content} -
-
- {delcall Modal.header data="all" /} - {delcall Modal.body data="all" /} - {delcall Modal.footer data="all" /} +{template .render} + {@param? body: html|string} + {@param? bodyId: string} + {@param? elementClasses: string} + {@param? footer: html|string} + {@param? header: html|string} + {@param? headerId: string} + {@param? noCloseButton: bool} + {@param? role: string} + {@param? visible: bool} +
+
+
+
+ {if $header} + {if not $noCloseButton} + + {/if} +
{$header}
+ {/if} +
+
+ {if $body} + {$body} + {/if} +
+
+ {if $footer} + {$footer} + {/if} +
+
{/template} - -/** - * @param body - */ -{template .body} - {if $body} - {$body} - {/if} -{/template} - -/** - * @param footer - */ -{template .footer} - {if $footer} - {$footer} - {/if} -{/template} - -/** - * @param header - */ -{template .header} - {if $header} - - {$header} - {/if} -{/template} - -/** - * @param? elementContent - * @param id - * @param? surfaceId - */ -{deltemplate Modal.body variant="'element'"} -
{$elementContent}
-{/deltemplate} - -/** - * @param? elementContent - * @param id - * @param? surfaceId - */ -{deltemplate Modal.footer variant="'element'"} -
{$elementContent}
-{/deltemplate} - -/** - * @param? elementContent - * @param id - * @param? surfaceId - */ -{deltemplate Modal.header variant="'element'"} - -{/deltemplate} diff --git a/src/Modal.soy.js b/src/Modal.soy.js deleted file mode 100644 index cef032b..0000000 --- a/src/Modal.soy.js +++ /dev/null @@ -1,215 +0,0 @@ -/* jshint ignore:start */ -import ComponentRegistry from 'bower:metal/src/component/ComponentRegistry'; -var Templates = ComponentRegistry.Templates; -// This file was automatically generated from Modal.soy. -// Please don't edit this file by hand. - -/** - * @fileoverview Templates in namespace Templates.Modal. - * @hassoydeltemplate {Modal} - * @hassoydeltemplate {Modal.body} - * @hassoydeltemplate {Modal.footer} - * @hassoydeltemplate {Modal.header} - * @hassoydelcall {Modal} - * @hassoydelcall {Modal.body} - * @hassoydelcall {Modal.footer} - * @hassoydelcall {Modal.header} - */ - -if (typeof Templates.Modal == 'undefined') { Templates.Modal = {}; } - - -/** - * @param {Object.=} opt_data - * @param {(null|undefined)=} opt_ignored - * @param {Object.=} opt_ijData - * @return {!soydata.SanitizedHtml} - * @suppress {checkTypes} - */ -Templates.Modal.content = function(opt_data, opt_ignored, opt_ijData) { - return soydata.VERY_UNSAFE.ordainSanitizedHtml('
' + soy.$$getDelegateFn(soy.$$getDelTemplateId('Modal.header'), '', true)(opt_data, null, opt_ijData) + soy.$$getDelegateFn(soy.$$getDelTemplateId('Modal.body'), '', true)(opt_data, null, opt_ijData) + soy.$$getDelegateFn(soy.$$getDelTemplateId('Modal.footer'), '', true)(opt_data, null, opt_ijData) + '
'); -}; -if (goog.DEBUG) { - Templates.Modal.content.soyTemplateName = 'Templates.Modal.content'; -} - - -/** - * @param {Object.=} opt_data - * @param {(null|undefined)=} opt_ignored - * @param {Object.=} opt_ijData - * @return {!soydata.SanitizedHtml} - * @suppress {checkTypes} - */ -Templates.Modal.body = function(opt_data, opt_ignored, opt_ijData) { - return soydata.VERY_UNSAFE.ordainSanitizedHtml((opt_data.body) ? soy.$$escapeHtml(opt_data.body) : ''); -}; -if (goog.DEBUG) { - Templates.Modal.body.soyTemplateName = 'Templates.Modal.body'; -} - - -/** - * @param {Object.=} opt_data - * @param {(null|undefined)=} opt_ignored - * @param {Object.=} opt_ijData - * @return {!soydata.SanitizedHtml} - * @suppress {checkTypes} - */ -Templates.Modal.footer = function(opt_data, opt_ignored, opt_ijData) { - return soydata.VERY_UNSAFE.ordainSanitizedHtml((opt_data.footer) ? soy.$$escapeHtml(opt_data.footer) : ''); -}; -if (goog.DEBUG) { - Templates.Modal.footer.soyTemplateName = 'Templates.Modal.footer'; -} - - -/** - * @param {Object.=} opt_data - * @param {(null|undefined)=} opt_ignored - * @param {Object.=} opt_ijData - * @return {!soydata.SanitizedHtml} - * @suppress {checkTypes} - */ -Templates.Modal.header = function(opt_data, opt_ignored, opt_ijData) { - return soydata.VERY_UNSAFE.ordainSanitizedHtml((opt_data.header) ? '' + soy.$$escapeHtml(opt_data.header) : ''); -}; -if (goog.DEBUG) { - Templates.Modal.header.soyTemplateName = 'Templates.Modal.header'; -} - - -/** - * @param {Object.=} opt_data - * @param {(null|undefined)=} opt_ignored - * @param {Object.=} opt_ijData - * @return {!soydata.SanitizedHtml} - * @suppress {checkTypes} - */ -Templates.Modal.__deltemplate_s21_65c2d4d4 = function(opt_data, opt_ignored, opt_ijData) { - return soydata.VERY_UNSAFE.ordainSanitizedHtml('
' + soy.$$escapeHtml(opt_data.elementContent) + '
'); -}; -if (goog.DEBUG) { - Templates.Modal.__deltemplate_s21_65c2d4d4.soyTemplateName = 'Templates.Modal.__deltemplate_s21_65c2d4d4'; -} -soy.$$registerDelegateFn(soy.$$getDelTemplateId('Modal.body'), 'element', 0, Templates.Modal.__deltemplate_s21_65c2d4d4); - - -/** - * @param {Object.=} opt_data - * @param {(null|undefined)=} opt_ignored - * @param {Object.=} opt_ijData - * @return {!soydata.SanitizedHtml} - * @suppress {checkTypes} - */ -Templates.Modal.__deltemplate_s27_c9897a65 = function(opt_data, opt_ignored, opt_ijData) { - return soydata.VERY_UNSAFE.ordainSanitizedHtml('
' + soy.$$escapeHtml(opt_data.elementContent) + '
'); -}; -if (goog.DEBUG) { - Templates.Modal.__deltemplate_s27_c9897a65.soyTemplateName = 'Templates.Modal.__deltemplate_s27_c9897a65'; -} -soy.$$registerDelegateFn(soy.$$getDelTemplateId('Modal.footer'), 'element', 0, Templates.Modal.__deltemplate_s27_c9897a65); - - -/** - * @param {Object.=} opt_data - * @param {(null|undefined)=} opt_ignored - * @param {Object.=} opt_ijData - * @return {!soydata.SanitizedHtml} - * @suppress {checkTypes} - */ -Templates.Modal.__deltemplate_s33_499dc9aa = function(opt_data, opt_ignored, opt_ijData) { - return soydata.VERY_UNSAFE.ordainSanitizedHtml(''); -}; -if (goog.DEBUG) { - Templates.Modal.__deltemplate_s33_499dc9aa.soyTemplateName = 'Templates.Modal.__deltemplate_s33_499dc9aa'; -} -soy.$$registerDelegateFn(soy.$$getDelTemplateId('Modal.header'), 'element', 0, Templates.Modal.__deltemplate_s33_499dc9aa); - - -/** - * @param {Object.=} opt_data - * @param {(null|undefined)=} opt_ignored - * @param {Object.=} opt_ijData - * @return {!soydata.SanitizedHtml} - * @suppress {checkTypes} - */ -Templates.Modal.__deltemplate_s39_45b138fb = function(opt_data, opt_ignored, opt_ijData) { - opt_data = opt_data || {}; - return soydata.VERY_UNSAFE.ordainSanitizedHtml(soy.$$getDelegateFn(soy.$$getDelTemplateId('Modal'), 'element', true)({elementClasses: opt_data.elementClasses, elementContent: soydata.VERY_UNSAFE.$$ordainSanitizedHtmlForInternalBlocks('' + Templates.Modal.content(opt_data, null, opt_ijData)), id: opt_data.id}, null, opt_ijData)); -}; -if (goog.DEBUG) { - Templates.Modal.__deltemplate_s39_45b138fb.soyTemplateName = 'Templates.Modal.__deltemplate_s39_45b138fb'; -} -soy.$$registerDelegateFn(soy.$$getDelTemplateId('Modal'), '', 0, Templates.Modal.__deltemplate_s39_45b138fb); - - -/** - * @param {Object.=} opt_data - * @param {(null|undefined)=} opt_ignored - * @param {Object.=} opt_ijData - * @return {!soydata.SanitizedHtml} - * @suppress {checkTypes} - */ -Templates.Modal.__deltemplate_s45_df8ef55a = function(opt_data, opt_ignored, opt_ijData) { - opt_data = opt_data || {}; - return soydata.VERY_UNSAFE.ordainSanitizedHtml(''); -}; -if (goog.DEBUG) { - Templates.Modal.__deltemplate_s45_df8ef55a.soyTemplateName = 'Templates.Modal.__deltemplate_s45_df8ef55a'; -} -soy.$$registerDelegateFn(soy.$$getDelTemplateId('Modal'), 'element', 0, Templates.Modal.__deltemplate_s45_df8ef55a); - - -/** - * @param {Object.=} opt_data - * @param {(null|undefined)=} opt_ignored - * @param {Object.=} opt_ijData - * @return {!soydata.SanitizedHtml} - * @suppress {checkTypes} - */ -Templates.Modal.__deltemplate_s53_90747620 = function(opt_data, opt_ignored, opt_ijData) { - return soydata.VERY_UNSAFE.ordainSanitizedHtml(soy.$$getDelegateFn(soy.$$getDelTemplateId('Modal.body'), 'element', true)({elementContent: soydata.VERY_UNSAFE.$$ordainSanitizedHtmlForInternalBlocks('' + Templates.Modal.body(opt_data, null, opt_ijData)), id: opt_data.id}, null, opt_ijData)); -}; -if (goog.DEBUG) { - Templates.Modal.__deltemplate_s53_90747620.soyTemplateName = 'Templates.Modal.__deltemplate_s53_90747620'; -} -soy.$$registerDelegateFn(soy.$$getDelTemplateId('Modal.body'), '', 0, Templates.Modal.__deltemplate_s53_90747620); - - -/** - * @param {Object.=} opt_data - * @param {(null|undefined)=} opt_ignored - * @param {Object.=} opt_ijData - * @return {!soydata.SanitizedHtml} - * @suppress {checkTypes} - */ -Templates.Modal.__deltemplate_s58_231e36e7 = function(opt_data, opt_ignored, opt_ijData) { - return soydata.VERY_UNSAFE.ordainSanitizedHtml(soy.$$getDelegateFn(soy.$$getDelTemplateId('Modal.footer'), 'element', true)({elementContent: soydata.VERY_UNSAFE.$$ordainSanitizedHtmlForInternalBlocks('' + Templates.Modal.footer(opt_data, null, opt_ijData)), id: opt_data.id}, null, opt_ijData)); -}; -if (goog.DEBUG) { - Templates.Modal.__deltemplate_s58_231e36e7.soyTemplateName = 'Templates.Modal.__deltemplate_s58_231e36e7'; -} -soy.$$registerDelegateFn(soy.$$getDelTemplateId('Modal.footer'), '', 0, Templates.Modal.__deltemplate_s58_231e36e7); - - -/** - * @param {Object.=} opt_data - * @param {(null|undefined)=} opt_ignored - * @param {Object.=} opt_ijData - * @return {!soydata.SanitizedHtml} - * @suppress {checkTypes} - */ -Templates.Modal.__deltemplate_s63_b8354b7d = function(opt_data, opt_ignored, opt_ijData) { - return soydata.VERY_UNSAFE.ordainSanitizedHtml(soy.$$getDelegateFn(soy.$$getDelTemplateId('Modal.header'), 'element', true)({elementContent: soydata.VERY_UNSAFE.$$ordainSanitizedHtmlForInternalBlocks('' + Templates.Modal.header(opt_data, null, opt_ijData)), id: opt_data.id}, null, opt_ijData)); -}; -if (goog.DEBUG) { - Templates.Modal.__deltemplate_s63_b8354b7d.soyTemplateName = 'Templates.Modal.__deltemplate_s63_b8354b7d'; -} -soy.$$registerDelegateFn(soy.$$getDelTemplateId('Modal.header'), '', 0, Templates.Modal.__deltemplate_s63_b8354b7d); - -Templates.Modal.body.params = ["body"]; -Templates.Modal.footer.params = ["footer"]; -Templates.Modal.header.params = ["header"]; -export default Templates.Modal; -/* jshint ignore:end */ diff --git a/test/Modal.js b/test/Modal.js index e947e72..62c779c 100644 --- a/test/Modal.js +++ b/test/Modal.js @@ -1,36 +1,36 @@ 'use strict'; -import async from 'bower:metal/src/async/async'; -import dom from 'bower:metal/src/dom/dom'; +import { async } from 'metal'; +import dom from 'metal-dom'; import Modal from '../src/Modal'; -var modal; - describe('Modal', function() { + var modal; + afterEach(function() { if (modal) { modal.dispose(); } }); - it('should render with default attributes', function() { - modal = new Modal().render(); - var header = modal.getSurfaceElement('header').innerHTML; - var body = modal.getSurfaceElement('body').innerHTML; - var footer = modal.getSurfaceElement('footer').innerHTML; - assert.strictEqual('', header); - assert.strictEqual('', body); - assert.strictEqual('', footer); + it('should render with default state', function() { + modal = new Modal(); + var header = modal.element.querySelector('.modal-header'); + var body = modal.element.querySelector('.modal-body'); + var footer = modal.element.querySelector('.modal-footer'); + assert.strictEqual('', header.innerHTML); + assert.strictEqual('', body.innerHTML); + assert.strictEqual('', footer.innerHTML); assert.strictEqual('block', modal.element.style.display); }); it('should render with header only', function() { modal = new Modal({ header: 'header' - }).render(); - var headerElement = modal.getSurfaceElement('header'); - var body = modal.getSurfaceElement('body').innerHTML; - var footer = modal.getSurfaceElement('footer').innerHTML; + }); + var headerElement = modal.element.querySelector('.modal-header'); + var body = modal.element.querySelector('.modal-body').innerHTML; + var footer = modal.element.querySelector('.modal-footer').innerHTML; assert.strictEqual('header', headerElement.childNodes[1].textContent); assert.ok(dom.hasClass(headerElement.childNodes[0], 'close')); assert.strictEqual('', body); @@ -40,10 +40,10 @@ describe('Modal', function() { it('should render with body only', function() { modal = new Modal({ body: 'body' - }).render(); - var header = modal.getSurfaceElement('header').innerHTML; - var body = modal.getSurfaceElement('body').innerHTML; - var footer = modal.getSurfaceElement('footer').innerHTML; + }); + var header = modal.element.querySelector('.modal-header').innerHTML; + var body = modal.element.querySelector('.modal-body').innerHTML; + var footer = modal.element.querySelector('.modal-footer').innerHTML; assert.strictEqual('', header); assert.strictEqual('body', body); assert.strictEqual('', footer); @@ -52,51 +52,51 @@ describe('Modal', function() { it('should render with footer only', function() { modal = new Modal({ footer: 'footer' - }).render(); - var header = modal.getSurfaceElement('header').innerHTML; - var body = modal.getSurfaceElement('body').innerHTML; - var footer = modal.getSurfaceElement('footer').innerHTML; + }); + var header = modal.element.querySelector('.modal-header').innerHTML; + var body = modal.element.querySelector('.modal-body').innerHTML; + var footer = modal.element.querySelector('.modal-footer').innerHTML; assert.strictEqual('', header); assert.strictEqual('', body); assert.strictEqual('footer', footer); }); - it('should cause dom repaint when body attribute change', function(done) { - modal = new Modal().render(); + it('should cause dom repaint when body state changes', function(done) { + modal = new Modal(); modal.body = 'body'; async.nextTick(function() { - var body = modal.getSurfaceElement('body').innerHTML; + var body = modal.element.querySelector('.modal-body').innerHTML; assert.strictEqual('body', body); done(); }); }); - it('should cause dom repaint when header attribute change', function(done) { - modal = new Modal().render(); + it('should cause dom repaint when header state changes', function(done) { + modal = new Modal(); modal.header = 'header'; async.nextTick(function() { - var header = modal.getSurfaceElement('header'); + var header = modal.element.querySelector('.modal-header'); assert.strictEqual('header', header.childNodes[1].textContent); assert.ok(dom.hasClass(header.childNodes[0], 'close')); done(); }); }); - it('should cause dom repaint when footer attribute change', function(done) { - modal = new Modal().render(); + it('should cause dom repaint when footer state changes', function(done) { + modal = new Modal(); modal.footer = 'footer'; async.nextTick(function() { - var footer = modal.getSurfaceElement('footer').innerHTML; + var footer = modal.element.querySelector('.modal-footer').innerHTML; assert.strictEqual('footer', footer); done(); }); }); - it('should cause dom repaint when visible attribute change', function(done) { - modal = new Modal().render(); + it('should cause dom repaint when visible state changes', function(done) { + modal = new Modal(); modal.visible = false; async.nextTick(function() { - assert.strictEqual('', modal.element.style.display); + assert.strictEqual('none', modal.element.style.display); modal.visible = true; async.nextTick(function() { @@ -106,8 +106,8 @@ describe('Modal', function() { }); }); - it('should show and hide overlay when overlay attribute change', function(done) { - modal = new Modal().render(); + it('should show and hide overlay when overlay state changes', function(done) { + modal = new Modal(); modal.overlay = false; async.nextTick(function() { assert.ok(!modal.overlayElement.parentNode); @@ -122,7 +122,7 @@ describe('Modal', function() { it('should close on clicking close icon', function(done) { modal = new Modal({ header: 'header' - }).render(); + }); dom.triggerEvent(modal.element.querySelector('.close'), 'click'); async.nextTick(function() { assert.ok(!modal.visible); @@ -130,8 +130,36 @@ describe('Modal', function() { }); }); + it('should close modal when press the escape key', function(done) { + modal = new Modal(); + dom.triggerEvent(document, 'keyup'); + async.nextTick(function() { + assert.ok(modal.visible); + dom.triggerEvent(document, 'keyup', { + keyCode: 27 + }); + async.nextTick(function() { + assert.ok(!modal.visible); + done(); + }); + }); + }); + + it('should not close modal when press escape key and the hideOnEscape state is not true', function(done) { + modal = new Modal({ + hideOnEscape: false + }); + dom.triggerEvent(document, 'keyup', { + keyCode: 27 + }); + async.nextTick(function() { + assert.ok(modal.visible); + done(); + }); + }); + it('should close modal overlay when modal closes', function(done) { - modal = new Modal().render(); + modal = new Modal(); modal.hide(); async.nextTick(function() { assert.ok(!modal.overlayElement.parentNode); @@ -142,7 +170,7 @@ describe('Modal', function() { it('should only show modal overlay when modal is visible', function(done) { modal = new Modal({ visible: false - }).render(); + }); assert.ok(!modal.overlayElement.parentNode); modal.visible = true; async.nextTick(function() { @@ -151,64 +179,307 @@ describe('Modal', function() { }); }); + it('should set the "role" HTML attribute to "dialog" by default', function() { + modal = new Modal(); + assert.strictEqual('dialog', modal.element.childNodes[0].getAttribute('role')); + }); + + it('should set the "role" HTML attribute to value specified by the "role" state', function() { + modal = new Modal({ + role: 'alertdialog' + }); + assert.strictEqual('alertdialog', modal.element.childNodes[0].getAttribute('role')); + }); + + it('should set the header and body ids to values specified by the user', function() { + modal = new Modal({ + bodyId: 'body', + header: 'My Header', + headerId: 'header' + }); + assert.ok(modal.element.querySelector('#header')); + assert.ok(modal.element.querySelector('#body')); + }); + + describe('Automatic Focus', function() { + it('should automatically focus close button', function() { + modal = new Modal({ + header: 'My Header' + }); + assert.strictEqual(modal.element.querySelector('.close'), document.activeElement); + }); + + it('should not automatically focus any element if "autoFocus" state is set to "false"', function() { + var prevActiveElement = document.activeElement; + modal = new Modal({ + autoFocus: false, + header: 'My Header' + }); + assert.strictEqual(prevActiveElement, document.activeElement); + }); + + it('should automatically focus internal element that matches selector specified by "autoFocus" state', function() { + modal = new Modal({ + autoFocus: '.body-btn', + body: '' + }); + assert.strictEqual(modal.element.querySelector('.body-btn'), document.activeElement); + }); + + it('should not automatically focus "autoFocus" element if modal is rendered invisible', function() { + var prevActiveElement = document.activeElement; + modal = new Modal({ + autoFocus: '.body-btn', + body: '', + visible: false + }); + assert.strictEqual(prevActiveElement, document.activeElement); + }); + + it('should automatically focus "autoFocus" element when modal becomes visible', function(done) { + var element = document.createElement('button'); + dom.enterDocument(element); + modal = new Modal({ + autoFocus: '.body-btn', + body: '', + visible: false + }); + + modal.visible = true; + modal.once('stateChanged', function() { + assert.strictEqual(modal.element.querySelector('.body-btn'), document.activeElement); + dom.exitDocument(element); + done(); + }); + }); + }); + + describe('Refocus Last Element', function() { + it('should refocus the previously active element when modal is hidden', function(done) { + var element = document.createElement('button'); + dom.enterDocument(element); + element.focus(); + + modal = new Modal({ + header: 'My Header', + visible: false + }); + + modal.visible = true; + modal.once('stateChanged', function() { + assert.notStrictEqual(element, document.activeElement); + modal.visible = false; + modal.once('stateChanged', function() { + assert.strictEqual(element, document.activeElement); + dom.exitDocument(element); + done(); + }); + }); + }); + + it('should refocus the previously active element when modal is hidden and element changes', function(done) { + var element = document.createElement('button'); + dom.enterDocument(element); + element.focus(); + + modal = new Modal({ + header: 'My Header', + visible: false + }); + + modal.visible = true; + modal.once('stateChanged', function() { + assert.notStrictEqual(element, document.activeElement); + var oldElement = modal.element; + modal.element = document.createElement('div'); + dom.exitDocument(oldElement); + assert.notStrictEqual(element, document.activeElement); + + modal.visible = false; + modal.once('stateChanged', function() { + assert.strictEqual(element, document.activeElement); + dom.exitDocument(element); + done(); + }); + }); + }); + }); + + describe('Restrict Focus', function() { + var outsideElement; + + beforeEach(function() { + outsideElement = document.createElement('button'); + dom.enterDocument(outsideElement); + }); + + afterEach(function() { + dom.exitDocument(outsideElement); + }); + + it('should not allow focusing elements outside the modal while it\'s visible', function() { + modal = new Modal(); + + // Focus and call the `focus` event manually, since the test browser's window may not have + // focus at the moment, and it's not guaranteed that the event will fire autimatically. + outsideElement.focus(); + dom.triggerEvent(outsideElement, 'focus'); + assert.notStrictEqual(outsideElement, document.activeElement); + assert.strictEqual(modal.element.querySelector('.modal-dialog'), document.activeElement); + }); + + it('should not restrict focusing outside modal if not visible', function() { + modal = new Modal({ + visible: false + }); + + outsideElement.focus(); + dom.triggerEvent(outsideElement, 'focus'); + assert.strictEqual(outsideElement, document.activeElement); + }); + + it('should restrict/unrestrict focusing outside modal as visibility changes', function(done) { + modal = new Modal(); + + modal.visible = false; + modal.once('stateChanged', function() { + outsideElement.focus(); + dom.triggerEvent(outsideElement, 'focus'); + assert.strictEqual(outsideElement, document.activeElement); + + modal.visible = true; + modal.once('stateChanged', function() { + outsideElement.focus(); + dom.triggerEvent(outsideElement, 'focus'); + assert.notStrictEqual(outsideElement, document.activeElement); + assert.strictEqual(modal.element.querySelector('.modal-dialog'), document.activeElement); + done(); + }); + }); + }); + + it('should not restrict focusing outside modal if "overlay" is false', function() { + modal = new Modal({ + overlay: false + }); + + outsideElement.focus(); + dom.triggerEvent(outsideElement, 'focus'); + assert.strictEqual(outsideElement, document.activeElement); + }); + + it('should not restrict focusing inside modal', function() { + modal = new Modal({ + body: '', + }); + + var element = modal.element.querySelector('.body-btn'); + element.focus(); + dom.triggerEvent(element, 'focus'); + assert.strictEqual(element, document.activeElement); + }); + }); + it('should modal progressive enchance always as hidden', function() { - var markup = soy.$$getDelegateFn('Modal')({ + var data = { id: 'modal', - elementClasses: 'component centered', + elementClasses: 'centered', header: 'header', + headerId: 'header', body: 'body', + bodyId: 'header', footer: 'footer', - overlay: true - }, null); - - dom.append(document.body, markup.content); - var outerHTML = document.getElementById('modal').outerHTML; + overlay: true, + role: 'dialog' + }; + var element = document.createElement('div'); + IncrementalDOM.patch(element, () => Modal.TEMPLATE(data)); + var outerHTML = element.innerHTML; modal = new Modal({ - element: '#modal', + element: element.childNodes[0], + elementClasses: 'centered', header: 'header', + headerId: 'header', body: 'body', + bodyId: 'header', footer: 'footer', visible: false - }).decorate(); + }); assert.strictEqual(modal.element.outerHTML, outerHTML); }); it('should change to visible when decorated and visible is true', function() { - var markup = soy.$$getDelegateFn('Modal')({ + var data = { id: 'modal', - elementClasses: 'component centered', + elementClasses: 'centered', header: 'header', body: 'body', footer: 'footer', overlay: true - }, null); - - dom.append(document.body, markup.content); + }; + var element = document.createElement('div'); + IncrementalDOM.patch(element, () => Modal.TEMPLATE(data)); modal = new Modal({ - element: '#modal', + element: element.childNodes[0], header: 'header', body: 'body', footer: 'footer', visible: true - }).decorate(); + }); assert.ok(!dom.hasClass(modal.element, 'hidden')); }); - it('should set "visible" attr to false when "hide" method is called', function() { - modal = new Modal().render(); + it('should handle calling template without passing "elementClasses"', function() { + var data = { + header: 'header', + body: 'body', + footer: 'footer', + overlay: true + }; + var element = document.createElement('div'); + IncrementalDOM.patch(element, () => Modal.TEMPLATE(data)); + + element = element.childNodes[0]; + assert.strictEqual('modal', element.className); + }); + + it('should set "visible" state to false when "hide" method is called', function() { + modal = new Modal(); modal.hide(); assert.ok(!modal.visible); }); - it('should set "visible" attr to true when "show" method is called', function() { + it('should set "visible" state to true when "show" method is called', function() { modal = new Modal({ visible: false - }).render(); + }); modal.show(); assert.ok(modal.visible); }); + + describe('Scroll', function() { + it('should add "modal-open" class to body when "visible" is true', function() { + modal = new Modal({ + visible: true + }); + + var body = document.querySelector('body'); + + assert.ok(dom.hasClass(body, 'modal-open')); + }); + + it('should not add "modal-open" class to body when "visible" is set to false', function() { + modal = new Modal({ + visible: false + }); + + var body = document.querySelector('body'); + + assert.ok(!dom.hasClass(body, 'modal-open')); + }); + }); });