flashgrid-ext 1.0.8 → 1.0.9

Sign up to get free protection for your applications and to get access to all the features.
@@ -5,7 +5,7 @@
5
5
 
6
6
  /* #Aside
7
7
  ================================================== */
8
- .modal.aside {
8
+ .aside {
9
9
  border-radius: 0;
10
10
  height: 100%;
11
11
  left: initial;
@@ -14,22 +14,24 @@
14
14
  top: 0;
15
15
  width: 420px;
16
16
  }
17
- .modal.aside.fade {
18
- right: -100%;
17
+ .aside.fade {
18
+ right: -100%;
19
19
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
20
20
  transition: opacity 0.3s linear, right 0.3s ease-out;
21
21
  top: 0;
22
22
  }
23
- .modal.aside.in {
24
- margin-top: -91px;
25
- right: 0;
26
- top: 0;
23
+ .aside.fade.in {
24
+ right: 0;
25
+ top: 0;
26
+ }
27
+ .aside .modal-body {
28
+ min-height: 375px;
29
+ max-height: 475px;
27
30
  }
28
- .modal.aside .modal-body {
29
- min-height: 475px;
30
- max-height: 475px;
31
+ .aside .modal-footer {
32
+ border-bottom: 1px solid rgba(227,232,235,1);
33
+ border-radius: 0;
31
34
  }
32
- .modal.aside .modal-footer { border-bottom: 1px solid rgba(227,232,235,1); }
33
35
  .modal-footer-btn,
34
36
  input[type="submit"].modal-footer-btn {
35
37
  border-bottom-left-radius: 0;
@@ -39,24 +41,22 @@ input[type="submit"].modal-footer-btn {
39
41
  /* #Media Queries
40
42
  ================================================== */
41
43
  @media only screen and (max-width: 767px) {
42
- .modal.aside {
44
+ .aside {
43
45
  margin-left: 0;
44
46
  width: 300px;
45
47
  }
46
- .modal.aside.in { margin-top: -79px; }
47
- .modal.aside .modal-body {
48
- min-height: 393px;
49
- max-height: 393px;
50
- }
48
+ .aside .modal-body {
49
+ min-height: 324px;
50
+ max-height: 393px;
51
+ }
51
52
  }
52
53
  @media only screen and (min-width: 480px) and (max-width: 767px) {
53
- .modal.aside {
54
+ .aside {
54
55
  margin-left: 0;
55
56
  width: 420px;
56
57
  }
57
- .modal.aside.in { margin-top: -47px; }
58
- .modal.aside .modal-body {
59
- min-height: 183px;
60
- max-height: 183px;
61
- }
58
+ .aside .modal-body {
59
+ min-height: 76px;
60
+ max-height: 184px;
61
+ }
62
62
  }
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: flashgrid-ext
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.0.8
4
+ version: 1.0.9
5
5
  platform: ruby
6
6
  authors:
7
7
  - Juan Gomez
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2014-02-16 00:00:00.000000000 Z
11
+ date: 2014-02-17 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
@@ -59,7 +59,6 @@ files:
59
59
  - vendor/assets/javascripts/carousel.js
60
60
  - vendor/assets/javascripts/editor.js
61
61
  - vendor/assets/javascripts/hoverdown.js
62
- - vendor/assets/javascripts/inline_editor.js
63
62
  - vendor/assets/javascripts/input_mask.js
64
63
  - vendor/assets/javascripts/moment.js
65
64
  - vendor/assets/javascripts/scrollspy.js
@@ -71,7 +70,6 @@ files:
71
70
  - vendor/assets/stylesheets/calendar.css.scss
72
71
  - vendor/assets/stylesheets/carousel.css.scss
73
72
  - vendor/assets/stylesheets/editor.css.scss
74
- - vendor/assets/stylesheets/inline_editor.css.scss
75
73
  - vendor/assets/stylesheets/sort.css.scss
76
74
  - vendor/assets/stylesheets/typeahead.css.scss
77
75
  homepage: http://flashgrid-ext.drexed.com
@@ -1,764 +0,0 @@
1
- function InlineEditor(elements, options) {
2
- 'use strict';
3
- return this.init(elements, options);
4
- }
5
-
6
- if (typeof module === 'object') {
7
- module.exports = InlineEditor;
8
- }
9
-
10
- (function (window, document) {
11
- 'use strict';
12
-
13
- function extend(b, a) {
14
- var prop;
15
- if (b === undefined) {
16
- return a;
17
- }
18
- for (prop in a) {
19
- if (a.hasOwnProperty(prop) && b.hasOwnProperty(prop) === false) {
20
- b[prop] = a[prop];
21
- }
22
- }
23
- return b;
24
- }
25
-
26
- // http://stackoverflow.com/questions/5605401/insert-link-in-contenteditable-element
27
- // by Tim Down
28
- function saveSelection() {
29
- var i,
30
- len,
31
- ranges,
32
- sel = window.getSelection();
33
- if (sel.getRangeAt && sel.rangeCount) {
34
- ranges = [];
35
- for (i = 0, len = sel.rangeCount; i < len; i += 1) {
36
- ranges.push(sel.getRangeAt(i));
37
- }
38
- return ranges;
39
- }
40
- return null;
41
- }
42
-
43
- function restoreSelection(savedSel) {
44
- var i,
45
- len,
46
- sel = window.getSelection();
47
- if (savedSel) {
48
- sel.removeAllRanges();
49
- for (i = 0, len = savedSel.length; i < len; i += 1) {
50
- sel.addRange(savedSel[i]);
51
- }
52
- }
53
- }
54
-
55
- // http://stackoverflow.com/questions/1197401/how-can-i-get-the-element-the-caret-is-in-with-javascript-when-using-contentedi
56
- // by You
57
- function getSelectionStart() {
58
- var node = document.getSelection().anchorNode,
59
- startNode = (node && node.nodeType === 3 ? node.parentNode : node);
60
- return startNode;
61
- }
62
-
63
- // http://stackoverflow.com/questions/4176923/html-of-selected-text
64
- // by Tim Down
65
- function getSelectionHtml() {
66
- var i,
67
- html = '',
68
- sel,
69
- len,
70
- container;
71
- if (window.getSelection !== undefined) {
72
- sel = window.getSelection();
73
- if (sel.rangeCount) {
74
- container = document.createElement('div');
75
- for (i = 0, len = sel.rangeCount; i < len; i += 1) {
76
- container.appendChild(sel.getRangeAt(i).cloneContents());
77
- }
78
- html = container.innerHTML;
79
- }
80
- } else if (document.selection !== undefined) {
81
- if (document.selection.type === 'Text') {
82
- html = document.selection.createRange().htmlText;
83
- }
84
- }
85
- return html;
86
- }
87
-
88
- InlineEditor.prototype = {
89
- defaults: {
90
- allowMultiParagraphSelection: true,
91
- anchorInputPlaceholder: 'Paste or type a link...',
92
- buttons: ['bold', 'italic', 'underline', 'anchor', 'header1', 'header2', 'quote'],
93
- buttonLabels: 'fontawesome',
94
- delay: 0,
95
- diffLeft: 0,
96
- diffTop: -10,
97
- disableReturn: false,
98
- disableToolbar: false,
99
- firstHeader: 'h3',
100
- forcePlainText: true,
101
- placeholder: 'Type your text...',
102
- secondHeader: 'h4',
103
- targetBlank: false
104
- },
105
-
106
- init: function (elements, options) {
107
- this.elements = typeof elements === 'string' ? document.querySelectorAll(elements) : elements;
108
- if (this.elements.length === 0) {
109
- return;
110
- }
111
- this.isActive = true;
112
- this.parentElements = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre'];
113
- this.id = document.querySelectorAll('.inline-editor-toolbar').length + 1;
114
- this.options = extend(options, this.defaults);
115
- return this.initElements()
116
- .bindSelect()
117
- .bindPaste()
118
- .setPlaceholders()
119
- .bindWindowActions();
120
- },
121
-
122
- initElements: function () {
123
- var i,
124
- addToolbar = false;
125
- for (i = 0; i < this.elements.length; i += 1) {
126
- this.elements[i].setAttribute('contentEditable', true);
127
- if (!this.elements[i].getAttribute('data-placeholder')) {
128
- this.elements[i].setAttribute('data-placeholder', this.options.placeholder);
129
- }
130
- this.elements[i].setAttribute('data-inline-editor-element', true);
131
- this.bindParagraphCreation(i).bindReturn(i).bindTab(i);
132
- if (!this.options.disableToolbar && !this.elements[i].getAttribute('data-disable-toolbar')) {
133
- addToolbar = true;
134
- }
135
- }
136
- // Init toolbar
137
- if (addToolbar) {
138
- this.initToolbar()
139
- .bindButtons()
140
- .bindAnchorForm();
141
- }
142
- return this;
143
- },
144
-
145
- serialize: function () {
146
- var i,
147
- elementid,
148
- content = {};
149
- for (i = 0; i < this.elements.length; i += 1) {
150
- elementid = (this.elements[i].id !== '') ? this.elements[i].id : 'element-' + i;
151
- content[elementid] = {
152
- value: this.elements[i].innerHTML.trim()
153
- };
154
- }
155
- return content;
156
- },
157
-
158
- bindParagraphCreation: function (index) {
159
- var self = this;
160
- this.elements[index].addEventListener('keyup', function (e) {
161
- var node = getSelectionStart(),
162
- tagName;
163
- if (node && node.getAttribute('data-inline-editor-element') && node.children.length === 0
164
- && !(self.options.disableReturn || node.getAttribute('data-disable-return'))) {
165
- document.execCommand('formatBlock', false, 'p');
166
- }
167
- if (e.which === 13 && !e.shiftKey) {
168
- node = getSelectionStart();
169
- tagName = node.tagName.toLowerCase();
170
- if (!(self.options.disableReturn || this.getAttribute('data-disable-return'))
171
- && tagName !== 'li' && !self.isListItemChild(node)) {
172
- document.execCommand('formatBlock', false, 'p');
173
- if (tagName === 'a') {
174
- document.execCommand('unlink', false, null);
175
- }
176
- }
177
- }
178
- });
179
- return this;
180
- },
181
-
182
- isListItemChild: function (node) {
183
- var parentNode = node.parentNode,
184
- tagName = parentNode.tagName.toLowerCase();
185
- while (this.parentElements.indexOf(tagName) === -1 && tagName !== 'div') {
186
- if (tagName === 'li') {
187
- return true;
188
- }
189
- parentNode = parentNode.parentNode;
190
- if (parentNode && parentNode.tagName) {
191
- tagName = parentNode.tagName.toLowerCase();
192
- } else {
193
- return false;
194
- }
195
- }
196
- return false;
197
- },
198
-
199
- bindReturn: function (index) {
200
- var self = this;
201
- this.elements[index].addEventListener('keypress', function (e) {
202
- if (e.which === 13) {
203
- if (self.options.disableReturn || this.getAttribute('data-disable-return')) {
204
- e.preventDefault();
205
- }
206
- }
207
- });
208
- return this;
209
- },
210
-
211
- bindTab: function (index) {
212
- this.elements[index].addEventListener('keydown', function (e) {
213
- if (e.which === 9) {
214
- // Override tab only for pre nodes
215
- var tag = getSelectionStart().tagName.toLowerCase();
216
- if (tag === "pre") {
217
- e.preventDefault();
218
- document.execCommand('insertHtml', null, ' ');
219
- }
220
- }
221
- });
222
- },
223
-
224
- buttonTemplate: function (btnType) {
225
- var buttonLabels = this.getButtonLabels(this.options.buttonLabels),
226
- buttonTemplates = {
227
- 'bold': '<li><button class="inline-editor-action inline-editor-action-bold" data-action="bold" data-element="b">' + buttonLabels.bold + '</button></li>',
228
- 'italic': '<li><button class="inline-editor-action inline-editor-action-italic" data-action="italic" data-element="i">' + buttonLabels.italic + '</button></li>',
229
- 'underline': '<li><button class="inline-editor-action inline-editor-action-underline" data-action="underline" data-element="u">' + buttonLabels.underline + '</button></li>',
230
- 'strikethrough': '<li><button class="inline-editor-action inline-editor-action-strikethrough" data-action="strikethrough" data-element="strike"><strike>A</strike></button></li>',
231
- 'superscript': '<li><button class="inline-editor-action inline-editor-action-superscript" data-action="superscript" data-element="sup">' + buttonLabels.superscript + '</button></li>',
232
- 'subscript': '<li><button class="inline-editor-action inline-editor-action-subscript" data-action="subscript" data-element="sub">' + buttonLabels.subscript + '</button></li>',
233
- 'anchor': '<li><button class="inline-editor-action inline-editor-action-anchor" data-action="anchor" data-element="a">' + buttonLabels.anchor + '</button></li>',
234
- 'header1': '<li><button class="inline-editor-action inline-editor-action-header1" data-action="append-' + this.options.firstHeader + '" data-element="' + this.options.firstHeader + '">' + buttonLabels.header1 + '</button></li>',
235
- 'header2': '<li><button class="inline-editor-action inline-editor-action-header2" data-action="append-' + this.options.secondHeader + '" data-element="' + this.options.secondHeader + '">' + buttonLabels.header2 + '</button></li>',
236
- 'quote': '<li><button class="inline-editor-action inline-editor-action-quote" data-action="append-blockquote" data-element="blockquote">' + buttonLabels.quote + '</button></li>',
237
- 'orderedlist': '<li><button class="inline-editor-action inline-editor-action-orderedlist" data-action="insertorderedlist" data-element="ol">' + buttonLabels.orderedlist + '</button></li>',
238
- 'unorderedlist': '<li><button class="inline-editor-action inline-editor-action-unorderedlist" data-action="insertunorderedlist" data-element="ul">' + buttonLabels.unorderedlist + '</button></li>',
239
- 'pre': '<li><button class="inline-editor-action inline-editor-action-pre" data-action="append-pre" data-element="pre">' + buttonLabels.pre + '</button></li>'
240
- };
241
- return buttonTemplates[btnType] || false;
242
- },
243
-
244
- // TODO: break method
245
- getButtonLabels: function (buttonLabelType) {
246
- var customButtonLabels,
247
- attrname,
248
- buttonLabels = {
249
- 'bold': '<b>B</b>',
250
- 'italic' : '<b><i>I</i></b>',
251
- 'underline': '<b><u>U</u></b>',
252
- 'superscript': '<b>x<sup>1</sup></b>',
253
- 'subscript': '<b>x<sub>1</sup></b>',
254
- 'anchor': '<b>#</b>',
255
- 'header1': '<b>H1</b>',
256
- 'header2': '<b>H2</b>',
257
- 'quote': '<b>&ldquo;</b>',
258
- 'orderedlist': '<b>1.</b>',
259
- 'unorderedlist': '<b>&bull;</b>',
260
- 'pre': '<b>0101</b>'
261
- };
262
- if (buttonLabelType === 'fontawesome') {
263
- customButtonLabels = {
264
- 'bold': '<i class="fa fa-bold"></i>',
265
- 'italic' : '<i class="fa fa-italic"></i>',
266
- 'underline': '<i class="fa fa-underline"></i>',
267
- 'superscript': '<i class="fa fa-superscript"></i>',
268
- 'subscript': '<i class="fa fa-subscript"></i>',
269
- 'anchor': '<i class="fa fa-link"></i>',
270
- 'quote': '<i class="fa fa-quote-right"></i>',
271
- 'orderedlist': '<i class="fa fa-list-ol"></i>',
272
- 'unorderedlist': '<i class="fa fa-list-ul"></i>',
273
- 'pre': '<i class="fa fa-code fa-lg"></i>'
274
- };
275
- } else if (typeof buttonLabelType === 'object') {
276
- customButtonLabels = buttonLabelType;
277
- }
278
- if (typeof customButtonLabels === 'object') {
279
- for (attrname in customButtonLabels) {
280
- if (customButtonLabels.hasOwnProperty(attrname)) {
281
- buttonLabels[attrname] = customButtonLabels[attrname];
282
- }
283
- }
284
- }
285
- return buttonLabels;
286
- },
287
-
288
- //TODO: actionTemplate
289
- toolbarTemplate: function () {
290
- var btns = this.options.buttons,
291
- html = '<ul id="inline-editor-toolbar-actions" class="inline-editor-toolbar-actions clearfix">',
292
- i,
293
- tpl;
294
-
295
- for (i = 0; i < btns.length; i += 1) {
296
- tpl = this.buttonTemplate(btns[i]);
297
- if (tpl) {
298
- html += tpl;
299
- }
300
- }
301
- html += '</ul>' +
302
- '<div class="inline-editor-toolbar-form-anchor" id="inline-editor-toolbar-form-anchor">' +
303
- ' <input type="text" value="" placeholder="' + this.options.anchorInputPlaceholder + '">' +
304
- ' <a href="#">&times;</a>' +
305
- '</div>';
306
- return html;
307
- },
308
-
309
- initToolbar: function () {
310
- if (this.toolbar) {
311
- return this;
312
- }
313
- this.toolbar = this.createToolbar();
314
- this.keepToolbarAlive = false;
315
- this.anchorForm = this.toolbar.querySelector('.inline-editor-toolbar-form-anchor');
316
- this.anchorInput = this.anchorForm.querySelector('input');
317
- this.toolbarActions = this.toolbar.querySelector('.inline-editor-toolbar-actions');
318
- return this;
319
- },
320
-
321
- createToolbar: function () {
322
- var toolbar = document.createElement('div');
323
- toolbar.id = 'inline-editor-toolbar-' + this.id;
324
- toolbar.className = 'inline-editor-toolbar';
325
- toolbar.innerHTML = this.toolbarTemplate();
326
- document.getElementsByTagName('body')[0].appendChild(toolbar);
327
- return toolbar;
328
- },
329
-
330
- bindSelect: function () {
331
- var self = this,
332
- timer = '',
333
- i;
334
- this.checkSelectionWrapper = function (e) {
335
- clearTimeout(timer);
336
- timer = setTimeout(function () {
337
- self.checkSelection();
338
- }, self.options.delay);
339
- };
340
-
341
- document.documentElement.addEventListener('mouseup', this.checkSelectionWrapper);
342
-
343
- for (i = 0; i < this.elements.length; i += 1) {
344
- this.elements[i].addEventListener('keyup', this.checkSelectionWrapper);
345
- this.elements[i].addEventListener('blur', this.checkSelectionWrapper);
346
- }
347
- return this;
348
- },
349
-
350
- checkSelection: function () {
351
- var i,
352
- newSelection,
353
- hasMultiParagraphs,
354
- selectionHtml,
355
- selectionElement;
356
- if (this.keepToolbarAlive !== true && !this.options.disableToolbar) {
357
- newSelection = window.getSelection();
358
- selectionHtml = getSelectionHtml();
359
- selectionHtml = selectionHtml.replace(/<[\S]+><\/[\S]+>/gim, '');
360
- // Check if selection is between multi paragraph <p>.
361
- hasMultiParagraphs = selectionHtml.match(/<(p|h[0-6]|blockquote)>([\s\S]*?)<\/(p|h[0-6]|blockquote)>/g);
362
- hasMultiParagraphs = hasMultiParagraphs ? hasMultiParagraphs.length : 0;
363
- if (newSelection.toString().trim() === ''
364
- || (this.options.allowMultiParagraphSelection === false && hasMultiParagraphs)) {
365
- this.hideToolbarActions();
366
- } else {
367
- selectionElement = this.getSelectionElement();
368
- if (!selectionElement || selectionElement.getAttribute('data-disable-toolbar')) {
369
- this.hideToolbarActions();
370
- } else {
371
- this.selection = newSelection;
372
- this.selectionRange = this.selection.getRangeAt(0);
373
- for (i = 0; i < this.elements.length; i += 1) {
374
- if (this.elements[i] === selectionElement) {
375
- this.setToolbarButtonStates()
376
- .setToolbarPosition()
377
- .showToolbarActions();
378
- return;
379
- }
380
- }
381
- this.hideToolbarActions();
382
- }
383
- }
384
- }
385
- return this;
386
- },
387
-
388
- getSelectionElement: function () {
389
- var selection = window.getSelection(),
390
- range = selection.getRangeAt(0),
391
- current = range.commonAncestorContainer,
392
- parent = current.parentNode,
393
- result,
394
- getInlineElement = function(e) {
395
- var parent = e;
396
- try {
397
- while (!parent.getAttribute('data-inline-editor-element')) {
398
- parent = parent.parentNode;
399
- }
400
- } catch (errb) {
401
- return false;
402
- }
403
- return parent;
404
- };
405
- // First try on current node
406
- try {
407
- if (current.getAttribute('data-inline-editor-element')) {
408
- result = current;
409
- } else {
410
- result = getInlineElement(parent);
411
- }
412
- // If not search in the parent nodes.
413
- } catch (err) {
414
- result = getInlineElement(parent);
415
- }
416
- return result;
417
- },
418
-
419
- setToolbarPosition: function () {
420
- var buttonHeight = 50,
421
- selection = window.getSelection(),
422
- range = selection.getRangeAt(0),
423
- boundary = range.getBoundingClientRect(),
424
- defaultLeft = (this.options.diffLeft) - (this.toolbar.offsetWidth / 2),
425
- middleBoundary = (boundary.left + boundary.right) / 2,
426
- halfOffsetWidth = this.toolbar.offsetWidth / 2;
427
- if (boundary.top < buttonHeight) {
428
- this.toolbar.classList.add('inline-toolbar-arrow-over');
429
- this.toolbar.classList.remove('inline-toolbar-arrow-under');
430
- this.toolbar.style.top = buttonHeight + boundary.bottom - this.options.diffTop + window.pageYOffset - this.toolbar.offsetHeight + 'px';
431
- } else {
432
- this.toolbar.classList.add('inline-toolbar-arrow-under');
433
- this.toolbar.classList.remove('inline-toolbar-arrow-over');
434
- this.toolbar.style.top = boundary.top + this.options.diffTop + window.pageYOffset - this.toolbar.offsetHeight + 'px';
435
- }
436
- if (middleBoundary < halfOffsetWidth) {
437
- this.toolbar.style.left = defaultLeft + halfOffsetWidth + 'px';
438
- } else if ((window.innerWidth - middleBoundary) < halfOffsetWidth) {
439
- this.toolbar.style.left = window.innerWidth + defaultLeft - halfOffsetWidth + 'px';
440
- } else {
441
- this.toolbar.style.left = defaultLeft + middleBoundary + 'px';
442
- }
443
- return this;
444
- },
445
-
446
- setToolbarButtonStates: function () {
447
- var buttons = this.toolbarActions.querySelectorAll('button'),
448
- i;
449
- for (i = 0; i < buttons.length; i += 1) {
450
- buttons[i].classList.remove('inline-editor-button-active');
451
- }
452
- this.checkActiveButtons();
453
- return this;
454
- },
455
-
456
- checkActiveButtons: function () {
457
- var parentNode = this.selection.anchorNode;
458
- if (!parentNode.tagName) {
459
- parentNode = this.selection.anchorNode.parentNode;
460
- }
461
- while (parentNode.tagName !== undefined && this.parentElements.indexOf(parentNode.tagName) === -1) {
462
- this.activateButton(parentNode.tagName.toLowerCase());
463
- parentNode = parentNode.parentNode;
464
- }
465
- },
466
-
467
- activateButton: function (tag) {
468
- var el = this.toolbar.querySelector('[data-element="' + tag + '"]');
469
- if (el !== null && el.className.indexOf('inline-editor-button-active') === -1) {
470
- el.className += ' inline-editor-button-active';
471
- }
472
- },
473
-
474
- bindButtons: function () {
475
- var buttons = this.toolbar.querySelectorAll('button'),
476
- i,
477
- self = this,
478
- triggerAction = function (e) {
479
- e.preventDefault();
480
- e.stopPropagation();
481
- if (self.selection === undefined) {
482
- self.checkSelection();
483
- }
484
- if (this.className.indexOf('inline-editor-button-active') > -1) {
485
- this.classList.remove('inline-editor-button-active');
486
- } else {
487
- this.className += ' inline-editor-button-active';
488
- }
489
- self.execAction(this.getAttribute('data-action'), e);
490
- };
491
- for (i = 0; i < buttons.length; i += 1) {
492
- buttons[i].addEventListener('click', triggerAction);
493
- }
494
- this.setFirstAndLastItems(buttons);
495
- return this;
496
- },
497
-
498
- setFirstAndLastItems: function (buttons) {
499
- buttons[0].className += ' inline-editor-button-first';
500
- buttons[buttons.length - 1].className += ' inline-editor-button-last';
501
- return this;
502
- },
503
-
504
- execAction: function (action, e) {
505
- if (action.indexOf('append-') > -1) {
506
- this.execFormatBlock(action.replace('append-', ''));
507
- this.setToolbarPosition();
508
- this.setToolbarButtonStates();
509
- } else if (action === 'anchor') {
510
- this.triggerAnchorAction(e);
511
- } else {
512
- document.execCommand(action, false, null);
513
- this.setToolbarPosition();
514
- }
515
- },
516
-
517
- triggerAnchorAction: function () {
518
- if (this.selection.anchorNode.parentNode.tagName.toLowerCase() === 'a') {
519
- document.execCommand('unlink', false, null);
520
- } else {
521
- if (this.anchorForm.style.display === 'block') {
522
- this.showToolbarActions();
523
- } else {
524
- this.showAnchorForm();
525
- }
526
- }
527
- return this;
528
- },
529
-
530
- execFormatBlock: function (el) {
531
- var selectionData = this.getSelectionData(this.selection.anchorNode);
532
- // FF handles blockquote differently on formatBlock
533
- // allowing nesting, we need to use outdent
534
- // https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla
535
- if (el === 'blockquote' && selectionData.el
536
- && selectionData.el.parentNode.tagName.toLowerCase() === 'blockquote') {
537
- return document.execCommand('outdent', false, null);
538
- }
539
- if (selectionData.tagName === el) {
540
- el = 'p';
541
- }
542
- return document.execCommand('formatBlock', false, el);
543
- },
544
-
545
- getSelectionData: function (el) {
546
- var tagName;
547
-
548
- if (el && el.tagName) {
549
- tagName = el.tagName.toLowerCase();
550
- }
551
-
552
- while (el && this.parentElements.indexOf(tagName) === -1) {
553
- el = el.parentNode;
554
- if (el && el.tagName) {
555
- tagName = el.tagName.toLowerCase();
556
- }
557
- }
558
-
559
- return {
560
- el: el,
561
- tagName: tagName
562
- };
563
- },
564
-
565
- getFirstChild: function (el) {
566
- var firstChild = el.firstChild;
567
- while (firstChild !== null && firstChild.nodeType !== 1) {
568
- firstChild = firstChild.nextSibling;
569
- }
570
- return firstChild;
571
- },
572
-
573
- bindElementToolbarEvents: function (el) {
574
- var self = this;
575
- el.addEventListener('mouseup', function (e) {
576
- self.checkSelection();
577
- });
578
- el.addEventListener('keyup', function (e) {
579
- self.checkSelection();
580
- });
581
- },
582
-
583
- hideToolbarActions: function () {
584
- this.keepToolbarAlive = false;
585
- this.toolbar.classList.remove('inline-editor-toolbar-active');
586
- },
587
-
588
- showToolbarActions: function () {
589
- var self = this,
590
- timer;
591
- this.anchorForm.style.display = 'none';
592
- this.toolbarActions.style.display = 'block';
593
- this.keepToolbarAlive = false;
594
- clearTimeout(timer);
595
- timer = setTimeout(function() {
596
- if (!self.toolbar.classList.contains('inline-editor-toolbar-active')) {
597
- self.toolbar.classList.add('inline-editor-toolbar-active');
598
- }
599
- }, 100);
600
- },
601
-
602
- showAnchorForm: function () {
603
- this.toolbarActions.style.display = 'none';
604
- this.savedSelection = saveSelection();
605
- this.anchorForm.style.display = 'block';
606
- this.keepToolbarAlive = true;
607
- this.anchorInput.focus();
608
- this.anchorInput.value = '';
609
- },
610
-
611
- bindAnchorForm: function () {
612
- var linkCancel = this.anchorForm.querySelector('a'),
613
- self = this;
614
- this.anchorForm.addEventListener('click', function (e) {
615
- e.stopPropagation();
616
- });
617
- this.anchorInput.addEventListener('keyup', function (e) {
618
- if (e.keyCode === 13) {
619
- e.preventDefault();
620
- self.createLink(this);
621
- }
622
- });
623
- this.anchorInput.addEventListener('blur', function (e) {
624
- self.keepToolbarAlive = false;
625
- self.checkSelection();
626
- });
627
- linkCancel.addEventListener('click', function (e) {
628
- e.preventDefault();
629
- self.showToolbarActions();
630
- restoreSelection(self.savedSelection);
631
- });
632
- return this;
633
- },
634
-
635
- setTargetBlank: function () {
636
- var el = getSelectionStart(),
637
- i;
638
- if (el.tagName.toLowerCase() === 'a') {
639
- el.target = '_blank';
640
- } else {
641
- el = el.getElementsByTagName('a');
642
- for (i = 0; i < el.length; i += 1) {
643
- el[i].target = '_blank';
644
- }
645
- }
646
- },
647
-
648
- createLink: function (input) {
649
- restoreSelection(this.savedSelection);
650
- document.execCommand('createLink', false, input.value);
651
- if (this.options.targetBlank) {
652
- this.setTargetBlank();
653
- }
654
- this.showToolbarActions();
655
- input.value = '';
656
- },
657
-
658
- bindWindowActions: function () {
659
- var timerResize,
660
- self = this;
661
- window.addEventListener('resize', function () {
662
- clearTimeout(timerResize);
663
- timerResize = setTimeout(function () {
664
- if (self.toolbar.classList.contains('inline-editor-toolbar-active')) {
665
- self.setToolbarPosition();
666
- }
667
- }, 100);
668
- });
669
- return this;
670
- },
671
-
672
- activate: function () {
673
- var i;
674
- if (this.isActive) {
675
- return;
676
- }
677
-
678
- if (this.toolbar !== undefined) {
679
- this.toolbar.style.display = 'block';
680
- }
681
-
682
- this.isActive = true;
683
- for (i = 0; i < this.elements.length; i += 1) {
684
- this.elements[i].setAttribute('contentEditable', true);
685
- }
686
- this.bindSelect();
687
- },
688
-
689
- deactivate: function () {
690
- var i;
691
- if (!this.isActive) {
692
- return;
693
- }
694
- this.isActive = false;
695
-
696
- if (this.toolbar !== undefined) {
697
- this.toolbar.style.display = 'none';
698
- }
699
-
700
- document.documentElement.removeEventListener('mouseup', this.checkSelectionWrapper);
701
-
702
- for (i = 0; i < this.elements.length; i += 1) {
703
- this.elements[i].removeEventListener('keyup', this.checkSelectionWrapper);
704
- this.elements[i].removeEventListener('blur', this.checkSelectionWrapper);
705
- this.elements[i].removeAttribute('contentEditable');
706
- }
707
- },
708
-
709
- bindPaste: function () {
710
- if (!this.options.forcePlainText) {
711
- return this;
712
- }
713
- var i,
714
- self = this,
715
- pasteWrapper = function (e) {
716
- var paragraphs,
717
- html = '',
718
- p;
719
- this.classList.remove('inline-editor-placeholder');
720
- if (e.clipboardData && e.clipboardData.getData) {
721
- e.preventDefault();
722
- if (!self.options.disableReturn) {
723
- paragraphs = e.clipboardData.getData('text/plain').split(/[\r\n]/g);
724
- for (p = 0; p < paragraphs.length; p += 1) {
725
- if (paragraphs[p] !== '') {
726
- html += '<p>' + paragraphs[p] + '</p>';
727
- }
728
- }
729
- document.execCommand('insertHTML', false, html);
730
- } else {
731
- document.execCommand('insertHTML', false, e.clipboardData.getData('text/plain'));
732
- }
733
- }
734
- };
735
- for (i = 0; i < this.elements.length; i += 1) {
736
- this.elements[i].addEventListener('paste', pasteWrapper);
737
- }
738
- return this;
739
- },
740
-
741
- setPlaceholders: function () {
742
- var i,
743
- activatePlaceholder = function (el) {
744
- if (el.textContent.replace(/^\s+|\s+$/g, '') === '') {
745
- el.classList.add('inline-editor-placeholder');
746
- }
747
- },
748
- placeholderWrapper = function (e) {
749
- this.classList.remove('inline-editor-placeholder');
750
- if (e.type !== 'keypress') {
751
- activatePlaceholder(this);
752
- }
753
- };
754
- for (i = 0; i < this.elements.length; i += 1) {
755
- activatePlaceholder(this.elements[i]);
756
- this.elements[i].addEventListener('blur', placeholderWrapper);
757
- this.elements[i].addEventListener('keypress', placeholderWrapper);
758
- }
759
- return this;
760
- }
761
-
762
- };
763
-
764
- }(window, document));