Skip to content

Commit cf709a2

Browse files
author
Petro Salema
committed
Close link toolbar on enter
1 parent 1c23a2e commit cf709a2

File tree

3 files changed

+100
-108
lines changed

3 files changed

+100
-108
lines changed

‎demo/aloha-ui/aloha-ui.css‎

Lines changed: 65 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -19,63 +19,90 @@
1919
transform-style: preserve-3d;
2020
}
2121

22-
.aloha-ui.btn-toolbar { display: inline-block; }
2322
.aloha-ui.btn-toolbar,
24-
.aloha-ui.btn-toolbar .btn {
23+
.aloha-ui .btn-toolbar { display: inline-block; }
24+
25+
.aloha-ui.btn-toolbar,
26+
.aloha-ui.btn-toolbar .btn,
27+
.aloha-ui .btn,
28+
.aloha-ui .btn-toolbar {
2529
font-size: 18px;
2630
-moz-osx-font-smoothing: grayscale;
2731
-webkit-font-smoothing: antialiased;
2832
-moz-font-smoothing: antialiased;
2933
font-smoothing: antialiased;
3034
}
31-
.aloha-ui.btn-toolbar input { outline: 0; }
32-
.aloha-ui.btn-toolbar .btn {
35+
36+
.aloha-ui.btn-toolbar input,
37+
.aloha-ui .btn-toolbar input { outline: 0; }
38+
39+
.aloha-ui.btn-toolbar .btn,
40+
.aloha-ui .btn-toolbar .btn {
3341
outline: 0;
3442
width: 45px;
3543
height: 45px;
3644
margin-left: 0;
3745
}
38-
.aloha-ui.btn-toolbar .dropdown-toggle {
46+
47+
.aloha-ui.btn-toolbar .dropdown-toggle,
48+
.aloha-ui .btn-toolbar .dropdown-toggle {
3949
-webkit-transition: width 0.25s;
4050
-moz-transition: width 0.25s;
4151
-ms-transition: width 0.25s;
4252
transition: width 0.25s;
4353
}
44-
.aloha-ui.btn-toolbar .btn.dropdown-toggle::before {
45-
content: "";
54+
.aloha-ui.btn-toolbar .btn.dropdown-toggle::before,
55+
.aloha-ui .btn-toolbar .btn.dropdown-toggle::before {
56+
content: '';
4657
position: absolute;
4758
right: 0px;
4859
top: 0px;
4960
width: 50%;
5061
height: 100%;
51-
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6+ */
62+
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6+ */
5263
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+ */
53-
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */
54-
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Opera 11.10+ */
55-
background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* IE10+ */
56-
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* W3C */
64+
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */
65+
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Opera 11.10+ */
66+
background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* IE10+ */
67+
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* W3C */
5768
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
5869
}
70+
5971
.aloha-ui.btn-toolbar .btn.dropdown-toggle:hover,
60-
.aloha-ui.btn-toolbar .btn-group.open .btn.dropdown-toggle {
72+
.aloha-ui.btn-toolbar .btn-group.open .btn.dropdown-toggle,
73+
.aloha-ui .btn-toolbar .btn.dropdown-toggle:hover,
74+
.aloha-ui .btn-toolbar .btn-group.open .btn.dropdown-toggle {
6175
width: 135px;
6276
}
77+
6378
.aloha-ui.btn-toolbar .btn.dropdown-toggle:hover::before,
64-
.aloha-ui.btn-toolbar .btn-group.open .btn.dropdown-toggle::before {
79+
.aloha-ui.btn-toolbar .btn-group.open .btn.dropdown-toggle::before,
80+
.aloha-ui .btn-toolbar .btn.dropdown-toggle:hover::before,
81+
.aloha-ui .btn-toolbar .btn-group.open .btn.dropdown-toggle::before {
6582
display: none;
6683
}
67-
.aloha-ui.btn-toolbar .dropdown-menu {
84+
85+
.aloha-ui.btn-toolbar .dropdown-menu,
86+
.aloha-ui .btn-toolbar .dropdown-menu {
6887
border: 0;
6988
padding: 0;
7089
font-size: 16px;
7190
}
91+
7292
.aloha-ui.btn-toolbar,
7393
.aloha-ui.btn-toolbar a,
7494
.aloha-ui.btn-toolbar a:focus,
7595
.aloha-ui.btn-toolbar button,
7696
.aloha-ui.btn-toolbar button:focus,
77-
.aloha-ui.btn-toolbar .dropdown-menu a,
78-
.aloha-ui.btn-toolbar .dropdown-menu a:focus {
97+
.aloha-ui.btn-toolbar .dropdown-menu a,
98+
.aloha-ui.btn-toolbar .dropdown-menu a:focus,
99+
.aloha-ui .btn-toolbar,
100+
.aloha-ui .btn-toolbar a,
101+
.aloha-ui .btn-toolbar a:focus,
102+
.aloha-ui .btn-toolbar button,
103+
.aloha-ui .btn-toolbar button:focus,
104+
.aloha-ui .btn-toolbar .dropdown-menu a,
105+
.aloha-ui .btn-toolbar .dropdown-menu a:focus {
79106
border: 0;
80107
border-radius: 0;
81108
background: #3f3f3f;
@@ -86,24 +113,37 @@
86113
-ms-transition: text-shadow-color 0.25s;
87114
transition: text-shadow-color 0.25s;
88115
}
89-
.aloha-ui.btn-toolbar.btn-toolbar>.btn-group {
116+
117+
.aloha-ui.btn-toolbar.btn-toolbar>.btn-group,
118+
.aloha-ui .btn-toolbar.btn-toolbar>.btn-group {
90119
margin-left: 0;
91120
border-right: 1px solid white;
92121
}
122+
123+
.aloha-ui.btn-toolbar a
93124
.aloha-ui.btn-toolbar button,
94-
.aloha-ui.btn-toolbar a {
125+
.aloha-ui .btn-toolbar a
126+
.aloha-ui .btn-toolbar button {
95127
-webkit-transition: background-color 0.25s;
96128
-moz-transition: background-color 0.25s;
97129
-ms-transition: background-color 0.25s;
98130
transition: background-color 0.25s;
99131
}
100-
.aloha-ui.btn-toolbar a.active,
132+
101133
.aloha-ui.btn-toolbar a:hover,
102-
.aloha-ui.btn-toolbar button.active,
134+
.aloha-ui.btn-toolbar a.active,
103135
.aloha-ui.btn-toolbar button:hover,
136+
.aloha-ui.btn-toolbar button.active,
104137
.aloha-ui.btn-toolbar .dropdown-menu .active,
105138
.aloha-ui.btn-toolbar .dropdown-menu a:hover,
106-
.aloha-ui.btn-toolbar .btn-group.open .btn {
139+
.aloha-ui.btn-toolbar .btn-group.open .btn,
140+
.aloha-ui .btn-toolbar a:hover,
141+
.aloha-ui .btn-toolbar a.active,
142+
.aloha-ui .btn-toolbar button:hover,
143+
.aloha-ui .btn-toolbar button.active,
144+
.aloha-ui .btn-toolbar .dropdown-menu .active,
145+
.aloha-ui .btn-toolbar .dropdown-menu a:hover,
146+
.aloha-ui .btn-toolbar .btn-group.open .btn {
107147
color: #fff;
108148
background: #5daecc;
109149
text-shadow: -1px -1px 0px rgb(150,150,150);
@@ -156,7 +196,7 @@
156196
background: transparent;
157197
white-space: nowrap;
158198
}
159-
.aloha-3d.opened .aloha-link-toolbar {
199+
.aloha-3d.active .aloha-link-toolbar {
160200
display: block;
161201
-webkit-animation: flip-open .2s ease-out forwards;
162202
-moz-animation: flip-open .2s ease-out forwards;
@@ -184,16 +224,13 @@
184224
height: 45px;
185225
font-size: 18px;
186226
}
187-
.aloha-link-toolbar a.btn {
188-
padding-top: 10px;
189-
}
227+
.aloha-link-toolbar a.btn { padding-top: 10px; }
190228
.aloha-link-toolbar .aloha-action-follow { float: right; }
191229
.aloha-active,
192230
.aloha-active:hover {
193231
background: rgba(93, 174, 204, 0.15);
194232
outline: 3px solid rgba(93, 174, 204, 0.15);
195233
}
196-
197234
.aloha-arrow-up {
198235
width: 0;
199236
height: 0;
@@ -204,12 +241,8 @@
204241
border-right: 8px solid transparent;
205242
border-bottom: 8px solid rgb(90,90,90);
206243
}
207-
208244
.aloha-sticky-top-active {
209245
position: fixed;
210246
top: 0px;
211247
}
212-
213-
.menu-wrap {
214-
height: 45px;
215-
}
248+
.menu-wrap { height: 45px; }

‎demo/aloha-ui/aloha-ui.js‎

Lines changed: 33 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
(function (aloha) {
22
'use strict';
33

4-
var Fn = aloha.fn;
54
var Dom = aloha.dom;
65
var Keys = aloha.keys;
76
var Editor = aloha.editor;
@@ -89,6 +88,20 @@
8988
};
9089
})();
9190

91+
/**
92+
* Returns the element or its first ancestor that has a 'aloha-ui' class, if
93+
* any.
94+
*
95+
* @private
96+
* @param {!Element} element
97+
* @return {?Element}
98+
*/
99+
function closestUi(element) {
100+
return Dom.upWhile(element, function (node) {
101+
return !Dom.hasClass(node, 'aloha-ui');
102+
});
103+
}
104+
92105
/**
93106
* Executes an action based on the given parameters list
94107
*
@@ -163,7 +176,6 @@
163176
}
164177

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

168180
var LinksUI = {
169181

@@ -175,12 +187,18 @@
175187
*/
176188
open: function (toolbar, anchor) {
177189
var href = Dom.getAttr(anchor, 'href');
190+
var target = Dom.getAttr(anchor, 'target');
178191
$$('.aloha-active').removeClass('aloha-active');
179192
Dom.addClass(anchor, 'aloha-active');
180-
Dom.addClass(toolbar, 'opened');
193+
Dom.addClass(toolbar, 'active');
181194
positionToolbar(toolbar, anchor);
182195
toolbar.querySelector('input').value = href;
183196
$$('a.aloha-link-follow').setAttr('href', href);
197+
if ('_blank' === target) {
198+
$$('.aloha-action-target').addClass('active');
199+
} else {
200+
$$('.aloha-action-target').removeClass('active');
201+
}
184202
},
185203

186204
/**
@@ -190,20 +208,7 @@
190208
*/
191209
close: function(toolbar) {
192210
$$('.aloha-active').removeClass('aloha-active');
193-
Dom.removeClass(toolbar, 'opened');
194-
},
195-
196-
/**
197-
* Retrieves a toolbar element from the given document if one exists.
198-
*
199-
* @param {!Document} doc
200-
* @return {?Element}
201-
*/
202-
toolbar: function (doc) {
203-
var toolbar = doc.querySelector('.aloha-link-toolbar');
204-
return (toolbar && Dom.hasClass(toolbar.parentNode, 'aloha-3d'))
205-
? toolbar.parentNode
206-
: toolbar;
211+
Dom.removeClass(toolbar, 'active');
207212
},
208213

209214
/**
@@ -217,20 +222,6 @@
217222
return Dom.upWhile(cac, notAnchor);
218223
},
219224

220-
/**
221-
* Returns the element or its first ancestor that has a 'aloha-ui'
222-
* class, if any.
223-
*
224-
* @param {!Element} element
225-
* @return {?Element}
226-
*/
227-
closestToolbar: function (element) {
228-
var toolbar = Dom.upWhile(element, Fn.complement(Fn.partial(hasClass, 'aloha-ui')));
229-
return (toolbar && Dom.hasClass(toolbar.parentNode, 'aloha-3d'))
230-
? toolbar.parentNode
231-
: toolbar;
232-
},
233-
234225
/**
235226
* Handles user interaction on the context toolbar.
236227
*
@@ -291,7 +282,7 @@
291282
boundaries[1] = Boundaries.fromEndOfNode(boundaries[0])[0];
292283
}
293284
LinksUI.open(
294-
LinksUI.toolbar(document),
285+
closestUi($$('.aloha-link-toolbar').elements[0]),
295286
Boundaries.container(boundaries[0])
296287
);
297288
$$('.aloha-link-toolbar input[name=href]').elements[0].focus();
@@ -320,51 +311,25 @@
320311

321312
/**
322313
* Updates the ui according to any active anchor element.
314+
*
315+
* @param {Seletction} selection
323316
*/
324-
update: function () {
325-
var anchor = $$('a.aloha-active').elements[0];
326-
if (!anchor) {
327-
return;
328-
}
329-
var href = Dom.getAttr(anchor, 'href');
330-
var target = Dom.getAttr(anchor, 'target');
331-
$$('.aloha-link-toolbar input[name=href]').value = href;
332-
if ('_blank' === target) {
333-
$$('.aloha-action-target').addClass('active');
334-
} else {
335-
$$('.aloha-action-target').removeClass('active');
317+
update: function (selection) {
318+
var toolbar = closestUi($$('.aloha-link-toolbar').elements[0]);
319+
var anchor = LinksUI.anchor(selection.boundaries);
320+
if (toolbar && anchor) {
321+
LinksUI.open(toolbar, anchor);
336322
}
337323
}
338324
};
339325

340-
/**
341-
* Links-specific UI handling.
342-
*
343-
* @param {!Event} event
344-
* @return {Event}
345-
*/
346-
function handleLinks(event) {
347-
var anchor = LinksUI.anchor(event.selection.boundaries);
348-
var toolbar = LinksUI.toolbar(event.nativeEvent.target.ownerDocument);
349-
if (!toolbar) {
350-
return;
351-
}
352-
if (anchor) {
353-
return LinksUI.open(toolbar, anchor);
354-
}
355-
if (toolbar === LinksUI.closestToolbar(event.nativeEvent.target)) {
356-
return LinksUI.interact(toolbar, anchor, event);
357-
}
358-
return LinksUI.close(toolbar);
359-
}
360-
361326
/**
362327
* Deactivates all ui buttons.
363328
*
364329
* @private
365330
*/
366331
function resetUi() {
367-
$$('.aloha-ui .active').removeClass('active');
332+
$$('.aloha-ui .active, .aloha-ui.active').removeClass('active');
368333
}
369334

370335
/**
@@ -466,10 +431,7 @@
466431
if (eventLoop.inEditable) {
467432
return;
468433
}
469-
var ui = Dom.upWhile(event.target, function (node) {
470-
return !Dom.hasClass(node, 'aloha-ui');
471-
});
472-
if (!ui) {
434+
if (!closestUi(event.target)) {
473435
Editor.selection = null;
474436
resetUi();
475437
}
@@ -496,7 +458,7 @@
496458
$$('.aloha-link-toolbar input[name=href]').on('keyup', function (event) {
497459
if (Editor.selection) {
498460
LinksUI.interact(
499-
LinksUI.toolbar(event.target.ownerDocument),
461+
closestUi($$('.aloha-link-toolbar').elements[0]),
500462
LinksUI.anchor(Editor.selection.boundaries)
501463
);
502464
}
@@ -582,9 +544,6 @@
582544
if ('mouseup' === type || 'aloha.mouseup' === type) {
583545
eventLoop.inEditable = true;
584546
}
585-
if ('keyup' === type || 'click' === type) {
586-
handleLinks(event);
587-
}
588547
if ('keydown' === type || 'keyup' === type || 'click' === type) {
589548
updateUi(event.selection);
590549
}

0 commit comments

Comments
 (0)