diff --git a/demo/aloha-ui/aloha-ui.css b/demo/aloha-ui/aloha-ui.css index 3b679b2621..0e36e66dd2 100644 --- a/demo/aloha-ui/aloha-ui.css +++ b/demo/aloha-ui/aloha-ui.css @@ -19,63 +19,90 @@ transform-style: preserve-3d; } -.aloha-ui.btn-toolbar { display: inline-block; } .aloha-ui.btn-toolbar, -.aloha-ui.btn-toolbar .btn { +.aloha-ui .btn-toolbar { display: inline-block; } + +.aloha-ui.btn-toolbar, +.aloha-ui.btn-toolbar .btn, +.aloha-ui .btn, +.aloha-ui .btn-toolbar { font-size: 18px; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-smoothing: antialiased; } -.aloha-ui.btn-toolbar input { outline: 0; } -.aloha-ui.btn-toolbar .btn { + +.aloha-ui.btn-toolbar input, +.aloha-ui .btn-toolbar input { outline: 0; } + +.aloha-ui.btn-toolbar .btn, +.aloha-ui .btn-toolbar .btn { outline: 0; width: 45px; height: 45px; margin-left: 0; } -.aloha-ui.btn-toolbar .dropdown-toggle { + +.aloha-ui.btn-toolbar .dropdown-toggle, +.aloha-ui .btn-toolbar .dropdown-toggle { -webkit-transition: width 0.25s; -moz-transition: width 0.25s; -ms-transition: width 0.25s; transition: width 0.25s; } -.aloha-ui.btn-toolbar .btn.dropdown-toggle::before { - content: ""; +.aloha-ui.btn-toolbar .btn.dropdown-toggle::before, +.aloha-ui .btn-toolbar .btn.dropdown-toggle::before { + content: ''; position: absolute; right: 0px; top: 0px; width: 50%; height: 100%; - background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6+ */ + background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.5))); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* IE10+ */ - background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* W3C */ + background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* IE10+ */ + background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */ } + .aloha-ui.btn-toolbar .btn.dropdown-toggle:hover, -.aloha-ui.btn-toolbar .btn-group.open .btn.dropdown-toggle { +.aloha-ui.btn-toolbar .btn-group.open .btn.dropdown-toggle, +.aloha-ui .btn-toolbar .btn.dropdown-toggle:hover, +.aloha-ui .btn-toolbar .btn-group.open .btn.dropdown-toggle { width: 135px; } + .aloha-ui.btn-toolbar .btn.dropdown-toggle:hover::before, -.aloha-ui.btn-toolbar .btn-group.open .btn.dropdown-toggle::before { +.aloha-ui.btn-toolbar .btn-group.open .btn.dropdown-toggle::before, +.aloha-ui .btn-toolbar .btn.dropdown-toggle:hover::before, +.aloha-ui .btn-toolbar .btn-group.open .btn.dropdown-toggle::before { display: none; } -.aloha-ui.btn-toolbar .dropdown-menu { + +.aloha-ui.btn-toolbar .dropdown-menu, +.aloha-ui .btn-toolbar .dropdown-menu { border: 0; padding: 0; font-size: 16px; } + .aloha-ui.btn-toolbar, .aloha-ui.btn-toolbar a, .aloha-ui.btn-toolbar a:focus, .aloha-ui.btn-toolbar button, .aloha-ui.btn-toolbar button:focus, -.aloha-ui.btn-toolbar .dropdown-menu a, -.aloha-ui.btn-toolbar .dropdown-menu a:focus { +.aloha-ui.btn-toolbar .dropdown-menu a, +.aloha-ui.btn-toolbar .dropdown-menu a:focus, +.aloha-ui .btn-toolbar, +.aloha-ui .btn-toolbar a, +.aloha-ui .btn-toolbar a:focus, +.aloha-ui .btn-toolbar button, +.aloha-ui .btn-toolbar button:focus, +.aloha-ui .btn-toolbar .dropdown-menu a, +.aloha-ui .btn-toolbar .dropdown-menu a:focus { border: 0; border-radius: 0; background: #3f3f3f; @@ -86,24 +113,37 @@ -ms-transition: text-shadow-color 0.25s; transition: text-shadow-color 0.25s; } -.aloha-ui.btn-toolbar.btn-toolbar>.btn-group { + +.aloha-ui.btn-toolbar.btn-toolbar>.btn-group, +.aloha-ui .btn-toolbar.btn-toolbar>.btn-group { margin-left: 0; border-right: 1px solid white; } + +.aloha-ui.btn-toolbar a .aloha-ui.btn-toolbar button, -.aloha-ui.btn-toolbar a { +.aloha-ui .btn-toolbar a +.aloha-ui .btn-toolbar button { -webkit-transition: background-color 0.25s; -moz-transition: background-color 0.25s; -ms-transition: background-color 0.25s; transition: background-color 0.25s; } -.aloha-ui.btn-toolbar a.active, + .aloha-ui.btn-toolbar a:hover, -.aloha-ui.btn-toolbar button.active, +.aloha-ui.btn-toolbar a.active, .aloha-ui.btn-toolbar button:hover, +.aloha-ui.btn-toolbar button.active, .aloha-ui.btn-toolbar .dropdown-menu .active, .aloha-ui.btn-toolbar .dropdown-menu a:hover, -.aloha-ui.btn-toolbar .btn-group.open .btn { +.aloha-ui.btn-toolbar .btn-group.open .btn, +.aloha-ui .btn-toolbar a:hover, +.aloha-ui .btn-toolbar a.active, +.aloha-ui .btn-toolbar button:hover, +.aloha-ui .btn-toolbar button.active, +.aloha-ui .btn-toolbar .dropdown-menu .active, +.aloha-ui .btn-toolbar .dropdown-menu a:hover, +.aloha-ui .btn-toolbar .btn-group.open .btn { color: #fff; background: #5daecc; text-shadow: -1px -1px 0px rgb(150,150,150); @@ -156,7 +196,7 @@ background: transparent; white-space: nowrap; } -.aloha-3d.opened .aloha-link-toolbar { +.aloha-3d.active .aloha-link-toolbar { display: block; -webkit-animation: flip-open .2s ease-out forwards; -moz-animation: flip-open .2s ease-out forwards; @@ -184,16 +224,13 @@ height: 45px; font-size: 18px; } -.aloha-link-toolbar a.btn { - padding-top: 10px; -} +.aloha-link-toolbar a.btn { padding-top: 10px; } .aloha-link-toolbar .aloha-action-follow { float: right; } .aloha-active, .aloha-active:hover { background: rgba(93, 174, 204, 0.15); outline: 3px solid rgba(93, 174, 204, 0.15); } - .aloha-arrow-up { width: 0; height: 0; @@ -204,12 +241,8 @@ border-right: 8px solid transparent; border-bottom: 8px solid rgb(90,90,90); } - .aloha-sticky-top-active { position: fixed; top: 0px; } - -.menu-wrap { - height: 45px; -} +.menu-wrap { height: 45px; } diff --git a/demo/aloha-ui/aloha-ui.js b/demo/aloha-ui/aloha-ui.js index d2acfc6a71..7656356cea 100644 --- a/demo/aloha-ui/aloha-ui.js +++ b/demo/aloha-ui/aloha-ui.js @@ -1,7 +1,6 @@ (function (aloha) { 'use strict'; - var Fn = aloha.fn; var Dom = aloha.dom; var Keys = aloha.keys; var Editor = aloha.editor; @@ -89,6 +88,20 @@ }; })(); + /** + * Returns the element or its first ancestor that has a 'aloha-ui' class, if + * any. + * + * @private + * @param {!Element} element + * @return {?Element} + */ + function closestUi(element) { + return Dom.upWhile(element, function (node) { + return !Dom.hasClass(node, 'aloha-ui'); + }); + } + /** * Executes an action based on the given parameters list * @@ -163,7 +176,6 @@ } function notAnchor(node) { return 'A' !== node.nodeName; } - function hasClass(className, node) { return Dom.hasClass(node, className); } var LinksUI = { @@ -175,12 +187,18 @@ */ open: function (toolbar, anchor) { var href = Dom.getAttr(anchor, 'href'); + var target = Dom.getAttr(anchor, 'target'); $$('.aloha-active').removeClass('aloha-active'); Dom.addClass(anchor, 'aloha-active'); - Dom.addClass(toolbar, 'opened'); + Dom.addClass(toolbar, 'active'); positionToolbar(toolbar, anchor); toolbar.querySelector('input').value = href; $$('a.aloha-link-follow').setAttr('href', href); + if ('_blank' === target) { + $$('.aloha-action-target').addClass('active'); + } else { + $$('.aloha-action-target').removeClass('active'); + } }, /** @@ -190,20 +208,7 @@ */ close: function(toolbar) { $$('.aloha-active').removeClass('aloha-active'); - Dom.removeClass(toolbar, 'opened'); - }, - - /** - * Retrieves a toolbar element from the given document if one exists. - * - * @param {!Document} doc - * @return {?Element} - */ - toolbar: function (doc) { - var toolbar = doc.querySelector('.aloha-link-toolbar'); - return (toolbar && Dom.hasClass(toolbar.parentNode, 'aloha-3d')) - ? toolbar.parentNode - : toolbar; + Dom.removeClass(toolbar, 'active'); }, /** @@ -217,20 +222,6 @@ return Dom.upWhile(cac, notAnchor); }, - /** - * Returns the element or its first ancestor that has a 'aloha-ui' - * class, if any. - * - * @param {!Element} element - * @return {?Element} - */ - closestToolbar: function (element) { - var toolbar = Dom.upWhile(element, Fn.complement(Fn.partial(hasClass, 'aloha-ui'))); - return (toolbar && Dom.hasClass(toolbar.parentNode, 'aloha-3d')) - ? toolbar.parentNode - : toolbar; - }, - /** * Handles user interaction on the context toolbar. * @@ -291,7 +282,7 @@ boundaries[1] = Boundaries.fromEndOfNode(boundaries[0])[0]; } LinksUI.open( - LinksUI.toolbar(document), + closestUi($$('.aloha-link-toolbar').elements[0]), Boundaries.container(boundaries[0]) ); $$('.aloha-link-toolbar input[name=href]').elements[0].focus(); @@ -320,51 +311,25 @@ /** * Updates the ui according to any active anchor element. + * + * @param {Seletction} selection */ - update: function () { - var anchor = $$('a.aloha-active').elements[0]; - if (!anchor) { - return; - } - var href = Dom.getAttr(anchor, 'href'); - var target = Dom.getAttr(anchor, 'target'); - $$('.aloha-link-toolbar input[name=href]').value = href; - if ('_blank' === target) { - $$('.aloha-action-target').addClass('active'); - } else { - $$('.aloha-action-target').removeClass('active'); + update: function (selection) { + var toolbar = closestUi($$('.aloha-link-toolbar').elements[0]); + var anchor = LinksUI.anchor(selection.boundaries); + if (toolbar && anchor) { + LinksUI.open(toolbar, anchor); } } }; - /** - * Links-specific UI handling. - * - * @param {!Event} event - * @return {Event} - */ - function handleLinks(event) { - var anchor = LinksUI.anchor(event.selection.boundaries); - var toolbar = LinksUI.toolbar(event.nativeEvent.target.ownerDocument); - if (!toolbar) { - return; - } - if (anchor) { - return LinksUI.open(toolbar, anchor); - } - if (toolbar === LinksUI.closestToolbar(event.nativeEvent.target)) { - return LinksUI.interact(toolbar, anchor, event); - } - return LinksUI.close(toolbar); - } - /** * Deactivates all ui buttons. * * @private */ function resetUi() { - $$('.aloha-ui .active').removeClass('active'); + $$('.aloha-ui .active, .aloha-ui.active').removeClass('active'); } /** @@ -466,10 +431,7 @@ if (eventLoop.inEditable) { return; } - var ui = Dom.upWhile(event.target, function (node) { - return !Dom.hasClass(node, 'aloha-ui'); - }); - if (!ui) { + if (!closestUi(event.target)) { Editor.selection = null; resetUi(); } @@ -496,7 +458,7 @@ $$('.aloha-link-toolbar input[name=href]').on('keyup', function (event) { if (Editor.selection) { LinksUI.interact( - LinksUI.toolbar(event.target.ownerDocument), + closestUi($$('.aloha-link-toolbar').elements[0]), LinksUI.anchor(Editor.selection.boundaries) ); } @@ -582,9 +544,6 @@ if ('mouseup' === type || 'aloha.mouseup' === type) { eventLoop.inEditable = true; } - if ('keyup' === type || 'click' === type) { - handleLinks(event); - } if ('keydown' === type || 'keyup' === type || 'click' === type) { updateUi(event.selection); } diff --git a/demo/aloha-ui/index.html b/demo/aloha-ui/index.html index 8b5462bff4..137cfe18d7 100644 --- a/demo/aloha-ui/index.html +++ b/demo/aloha-ui/index.html @@ -57,8 +57,8 @@

Aloha Editor UI



-
-