Skip to content

Commit

Permalink
Close link toolbar on enter
Browse files Browse the repository at this point in the history
  • Loading branch information
Petro Salema committed Sep 10, 2014
1 parent 1c23a2e commit cf709a2
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 108 deletions.
97 changes: 65 additions & 32 deletions demo/aloha-ui/aloha-ui.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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; }
107 changes: 33 additions & 74 deletions demo/aloha-ui/aloha-ui.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
(function (aloha) {
'use strict';

var Fn = aloha.fn;
var Dom = aloha.dom;
var Keys = aloha.keys;
var Editor = aloha.editor;
Expand Down Expand Up @@ -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
*
Expand Down Expand Up @@ -163,7 +176,6 @@
}

function notAnchor(node) { return 'A' !== node.nodeName; }
function hasClass(className, node) { return Dom.hasClass(node, className); }

var LinksUI = {

Expand All @@ -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');
}
},

/**
Expand All @@ -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');
},

/**
Expand All @@ -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.
*
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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');
}

/**
Expand Down Expand Up @@ -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();
}
Expand All @@ -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)
);
}
Expand Down Expand Up @@ -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);
}
Expand Down
Loading

0 comments on commit cf709a2

Please sign in to comment.