Skip to content
This repository has been archived by the owner on Dec 14, 2021. It is now read-only.

Commit

Permalink
Update Medium Editor files
Browse files Browse the repository at this point in the history
  • Loading branch information
@marjinal1st
marjinal1st committed Nov 24, 2014
1 parent 8c242a1 commit c6b96b2
Show file tree
Hide file tree
Showing 6 changed files with 70 additions and 55 deletions.
106 changes: 63 additions & 43 deletions vendor/assets/javascripts/medium-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,11 +152,15 @@ else if (typeof define === 'function' && define.amd) {
return;
}
this.parentElements = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre'];
this.id = document.querySelectorAll('.medium-editor-toolbar').length + 1;
if (!this.options.elementsContainer) {
this.options.elementsContainer = document.body;
}
this.id = this.options.elementsContainer.querySelectorAll('.medium-editor-toolbar').length + 1;
return this.setup();
},

setup: function () {
this.events = [];
this.isActive = true;
this.initElements()
.bindSelect()
Expand All @@ -166,6 +170,28 @@ else if (typeof define === 'function' && define.amd) {
.passInstance();
},

on: function(target, event, listener, useCapture) {
target.addEventListener(event, listener, useCapture);
this.events.push([target, event, listener, useCapture]);
},

off: function(target, event, listener, useCapture) {
var index = this.events.indexOf([target, event, listener, useCapture]),
e;
if(index !== -1) {
e = this.events.splice(index, 1);
e[0].removeEventListener(e[1], e[2], e[3]);
}
},

removeAllEvents: function() {
var e = this.events.pop();
while(e) {
e[0].removeEventListener(e[1], e[2], e[3]);
e = this.events.pop();
}
},

initElements: function () {
this.updateElementList();
var i,
Expand All @@ -185,9 +211,6 @@ else if (typeof define === 'function' && define.amd) {
}
// Init toolbar
if (addToolbar) {
if (!this.options.elementsContainer) {
this.options.elementsContainer = document.body;
}
this.initToolbar()
.bindButtons()
.bindAnchorForm()
Expand Down Expand Up @@ -272,7 +295,7 @@ else if (typeof define === 'function' && define.amd) {

bindParagraphCreation: function (index) {
var self = this;
this.elements[index].addEventListener('keypress', function (e) {
this.on(this.elements[index], 'keypress', function (e) {
var node = getSelectionStart.call(self),
tagName;
if (e.which === 32) {
Expand All @@ -283,7 +306,7 @@ else if (typeof define === 'function' && define.amd) {
}
});

this.elements[index].addEventListener('keyup', function (e) {
this.on(this.elements[index], 'keyup', function (e) {
var node = getSelectionStart.call(self),
tagName,
editorElement;
Expand Down Expand Up @@ -329,7 +352,7 @@ else if (typeof define === 'function' && define.amd) {

bindReturn: function (index) {
var self = this;
this.elements[index].addEventListener('keypress', function (e) {
this.on(this.elements[index], 'keypress', function (e) {
if (e.which === 13) {
if (self.options.disableReturn || this.getAttribute('data-disable-return')) {
e.preventDefault();
Expand All @@ -346,7 +369,7 @@ else if (typeof define === 'function' && define.amd) {

bindTab: function (index) {
var self = this;
this.elements[index].addEventListener('keydown', function (e) {
this.on(this.elements[index], 'keydown', function (e) {
if (e.which === 9) {
// Override tab only for pre nodes
var tag = getSelectionStart.call(self).tagName.toLowerCase();
Expand Down Expand Up @@ -377,7 +400,7 @@ else if (typeof define === 'function' && define.amd) {
'bold': '<button class="medium-editor-action medium-editor-action-bold" data-action="bold" data-element="b">' + buttonLabels.bold + '</button>',
'italic': '<button class="medium-editor-action medium-editor-action-italic" data-action="italic" data-element="i">' + buttonLabels.italic + '</button>',
'underline': '<button class="medium-editor-action medium-editor-action-underline" data-action="underline" data-element="u">' + buttonLabels.underline + '</button>',
'strikethrough': '<button class="medium-editor-action medium-editor-action-strikethrough" data-action="strikethrough" data-element="strike"><strike>A</strike></button>',
'strikethrough': '<button class="medium-editor-action medium-editor-action-strikethrough" data-action="strikethrough" data-element="strike">' + buttonLabels.strikethrough +'</button>',
'superscript': '<button class="medium-editor-action medium-editor-action-superscript" data-action="superscript" data-element="sup">' + buttonLabels.superscript + '</button>',
'subscript': '<button class="medium-editor-action medium-editor-action-subscript" data-action="subscript" data-element="sub">' + buttonLabels.subscript + '</button>',
'anchor': '<button class="medium-editor-action medium-editor-action-anchor" data-action="anchor" data-element="a">' + buttonLabels.anchor + '</button>',
Expand Down Expand Up @@ -406,6 +429,7 @@ else if (typeof define === 'function' && define.amd) {
'bold': '<b>B</b>',
'italic': '<b><i>I</i></b>',
'underline': '<b><u>U</u></b>',
'strikethrough': '<s>A</s>',
'superscript': '<b>x<sup>1</sup></b>',
'subscript': '<b>x<sub>1</sub></b>',
'anchor': '<b>#</b>',
Expand All @@ -428,6 +452,7 @@ else if (typeof define === 'function' && define.amd) {
'bold': '<i class="fa fa-bold"></i>',
'italic': '<i class="fa fa-italic"></i>',
'underline': '<i class="fa fa-underline"></i>',
'strikethrough': '<i class="fa fa-strikethrough"></i>',
'superscript': '<i class="fa fa-superscript"></i>',
'subscript': '<i class="fa fa-subscript"></i>',
'anchor': '<i class="fa fa-link"></i>',
Expand Down Expand Up @@ -586,11 +611,11 @@ else if (typeof define === 'function' && define.amd) {
}, self.options.delay);
};

document.documentElement.addEventListener('mouseup', this.checkSelectionWrapper);
this.on(document.documentElement, 'mouseup', this.checkSelectionWrapper);

for (i = 0; i < this.elements.length; i += 1) {
this.elements[i].addEventListener('keyup', this.checkSelectionWrapper);
this.elements[i].addEventListener('blur', this.checkSelectionWrapper);
this.on(this.elements[i], 'keyup', this.checkSelectionWrapper);
this.on(this.elements[i], 'blur', this.checkSelectionWrapper);
}
return this;
},
Expand Down Expand Up @@ -772,7 +797,7 @@ else if (typeof define === 'function' && define.amd) {
}
};
for (i = 0; i < buttons.length; i += 1) {
buttons[i].addEventListener('click', triggerAction);
this.on(buttons[i], 'click', triggerAction);
}
this.setFirstAndLastItems(buttons);
return this;
Expand Down Expand Up @@ -934,12 +959,12 @@ else if (typeof define === 'function' && define.amd) {
linkSave = this.anchorForm.querySelector('a.medium-editor-toobar-anchor-save'),
self = this;

this.anchorForm.addEventListener('click', function (e) {
this.on(this.anchorForm, 'click', function (e) {
e.stopPropagation();
self.keepToolbarAlive = true;
});

this.anchorInput.addEventListener('keyup', function (e) {
this.on(this.anchorInput, 'keyup', function (e) {
var button = null,
target;

Expand All @@ -960,7 +985,7 @@ else if (typeof define === 'function' && define.amd) {
}
});

linkSave.addEventListener('click', function(e) {
this.on(linkSave, 'click', function(e) {
var button = null,
target;
e.preventDefault();
Expand All @@ -978,27 +1003,27 @@ else if (typeof define === 'function' && define.amd) {
self.createLink(self.anchorInput, target, button);
}, true);

this.anchorInput.addEventListener('click', function (e) {
this.on(this.anchorInput, 'click', function (e) {
// make sure not to hide form when cliking into the input
e.stopPropagation();
self.keepToolbarAlive = true;
});

// Hide the anchor form when focusing outside of it.
this.options.ownerDocument.body.addEventListener('click', function (e) {
this.on(this.options.ownerDocument.body, 'click', function (e) {
if (e.target !== self.anchorForm && !isDescendant(self.anchorForm, e.target) && !isDescendant(self.toolbarActions, e.target)) {
self.keepToolbarAlive = false;
self.checkSelection();
}
}, true);
this.options.ownerDocument.body.addEventListener('focus', function (e) {
this.on(this.options.ownerDocument.body, 'focus', function (e) {
if (e.target !== self.anchorForm && !isDescendant(self.anchorForm, e.target) && !isDescendant(self.toolbarActions, e.target)) {
self.keepToolbarAlive = false;
self.checkSelection();
}
}, true);

linkCancel.addEventListener('click', function (e) {
this.on(linkCancel, 'click', function (e) {
e.preventDefault();
self.showToolbarActions();
restoreSelection.call(self, self.savedSelection);
Expand Down Expand Up @@ -1078,18 +1103,18 @@ else if (typeof define === 'function' && define.amd) {

// cleanup
clearInterval(interval_timer);
self.anchorPreview.removeEventListener('mouseover', stamp);
self.anchorPreview.removeEventListener('mouseout', unstamp);
anchorEl.removeEventListener('mouseover', stamp);
anchorEl.removeEventListener('mouseout', unstamp);
self.off(self.anchorPreview, 'mouseover', stamp);
self.off(self.anchorPreview, 'mouseout', unstamp);
self.off(anchorEl, 'mouseover', stamp);
self.off(anchorEl, 'mouseout', unstamp);

}
}, 200);

self.anchorPreview.addEventListener('mouseover', stamp);
self.anchorPreview.addEventListener('mouseout', unstamp);
anchorEl.addEventListener('mouseover', stamp);
anchorEl.addEventListener('mouseout', unstamp);
this.on(self.anchorPreview, 'mouseover', stamp);
this.on(self.anchorPreview, 'mouseout', unstamp);
this.on(anchorEl, 'mouseover', stamp);
this.on(anchorEl, 'mouseout', unstamp);
},

createAnchorPreview: function () {
Expand All @@ -1101,7 +1126,7 @@ else if (typeof define === 'function' && define.amd) {
anchorPreview.innerHTML = this.anchorPreviewTemplate();
this.options.elementsContainer.appendChild(anchorPreview);

anchorPreview.addEventListener('click', function () {
this.on(anchorPreview, 'click', function () {
self.anchorPreviewClickHandler();
});

Expand Down Expand Up @@ -1142,7 +1167,7 @@ else if (typeof define === 'function' && define.amd) {
leaveAnchor = function () {
// mark the anchor as no longer hovered, and stop listening
overAnchor = false;
self.activeAnchor.removeEventListener('mouseout', leaveAnchor);
self.off(self.activeAnchor, 'mouseout', leaveAnchor);
};

if (e.target && e.target.tagName.toLowerCase() === 'a') {
Expand All @@ -1160,7 +1185,7 @@ else if (typeof define === 'function' && define.amd) {
return true;
}
this.activeAnchor = e.target;
this.activeAnchor.addEventListener('mouseout', leaveAnchor);
this.on(this.activeAnchor, 'mouseout', leaveAnchor);
// show the anchor preview according to the configured delay
// if the mouse has not left the anchor tag in that time
setTimeout(function () {
Expand All @@ -1179,7 +1204,7 @@ else if (typeof define === 'function' && define.amd) {
self.editorAnchorObserver(e);
};
for (i = 0; i < this.elements.length; i += 1) {
this.elements[i].addEventListener('mouseover', this.editorAnchorObserverWrapper);
this.on(this.elements[i], 'mouseover', this.editorAnchorObserverWrapper);
}
return this;
},
Expand All @@ -1196,6 +1221,7 @@ else if (typeof define === 'function' && define.amd) {
el.target = '_blank';
} else {
el = el.getElementsByTagName('a');

for (i = 0; i < el.length; i += 1) {
el[i].target = '_blank';
}
Expand Down Expand Up @@ -1268,7 +1294,7 @@ else if (typeof define === 'function' && define.amd) {
}
}, 100);
};
this.options.contentWindow.addEventListener('resize', this.windowResizeHandler);
this.on(this.options.contentWindow, 'resize', this.windowResizeHandler);
return this;
},

Expand All @@ -1295,18 +1321,12 @@ else if (typeof define === 'function' && define.amd) {
delete this.anchorPreview;
}

this.options.ownerDocument.documentElement.removeEventListener('mouseup', this.checkSelectionWrapper);
this.options.contentWindow.removeEventListener('resize', this.windowResizeHandler);

for (i = 0; i < this.elements.length; i += 1) {
this.elements[i].removeEventListener('mouseover', this.editorAnchorObserverWrapper);
this.elements[i].removeEventListener('keyup', this.checkSelectionWrapper);
this.elements[i].removeEventListener('blur', this.checkSelectionWrapper);
this.elements[i].removeEventListener('paste', this.pasteWrapper);
this.elements[i].removeAttribute('contentEditable');
this.elements[i].removeAttribute('data-medium-element');
}

this.removeAllEvents();
},

htmlEntities: function (str) {
Expand Down Expand Up @@ -1352,7 +1372,7 @@ else if (typeof define === 'function' && define.amd) {
}
};
for (i = 0; i < this.elements.length; i += 1) {
this.elements[i].addEventListener('paste', this.pasteWrapper);
this.on(this.elements[i], 'paste', this.pasteWrapper);
}
return this;
},
Expand All @@ -1374,8 +1394,8 @@ else if (typeof define === 'function' && define.amd) {
};
for (i = 0; i < this.elements.length; i += 1) {
activatePlaceholder(this.elements[i]);
this.elements[i].addEventListener('blur', placeholderWrapper);
this.elements[i].addEventListener('keypress', placeholderWrapper);
this.on(this.elements[i], 'blur', placeholderWrapper);
this.on(this.elements[i], 'keypress', placeholderWrapper);
}
return this;
},
Expand Down
6 changes: 2 additions & 4 deletions vendor/assets/stylesheets/medium-editor/medium-editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,7 @@
font-size: 14px;
line-height: 1.33;
text-decoration: none;
-moz-box-sizing: border-box;
box-sizing: border-box; }
box-sizing: border-box; }
.medium-editor-toolbar li .medium-editor-action-underline, .medium-editor-anchor-preview li .medium-editor-action-underline {
text-decoration: underline; }
.medium-editor-toolbar li .medium-editor-action-pre, .medium-editor-anchor-preview li .medium-editor-action-pre {
Expand Down Expand Up @@ -140,8 +139,7 @@
width: 316px;
border: none;
font-size: 14px;
-moz-box-sizing: border-box;
box-sizing: border-box; }
box-sizing: border-box; }
.medium-editor-toolbar-form-anchor .medium-editor-toolbar-anchor-input:focus, .medium-editor-toolbar-form-anchor label:focus {
outline: 0;
border: none;
Expand Down
3 changes: 1 addition & 2 deletions vendor/assets/stylesheets/medium-editor/themes/bootstrap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@
border-right: 1px solid #357ebd;
background-color: transparent;
color: #fff;
-moz-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background-color 0.2s ease-in, color 0.2s ease-in;
transition: background-color 0.2s ease-in, color 0.2s ease-in; }
.medium-editor-toolbar li button:hover {
Expand Down
3 changes: 1 addition & 2 deletions vendor/assets/stylesheets/medium-editor/themes/default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,7 @@
height: 50px;
background: #242424;
color: #ccc;
-moz-box-sizing: border-box;
box-sizing: border-box; }
box-sizing: border-box; }
.medium-editor-toolbar-form-anchor a {
color: #fff; }

Expand Down
4 changes: 2 additions & 2 deletions vendor/assets/stylesheets/medium-editor/themes/flat.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@
min-width: 60px;
height: 60px;
border: none;
border-right: 1px solid #9ccea5;
border-right: 1px solid #9ccea6;
background-color: transparent;
color: #fff;
-webkit-transition: background-color 0.2s ease-in, color 0.2s ease-in;
transition: background-color 0.2s ease-in, color 0.2s ease-in; }
.medium-editor-toolbar li button:hover {
background-color: #346a3e;
background-color: #346a3f;
color: #fff; }
.medium-editor-toolbar li .medium-editor-button-active {
background-color: #23482a;
Expand Down
3 changes: 1 addition & 2 deletions vendor/assets/stylesheets/medium-editor/themes/mani.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,7 @@
height: 50px;
background: #dee7f0;
color: #40648a;
-moz-box-sizing: border-box;
box-sizing: border-box; }
box-sizing: border-box; }
.medium-editor-toolbar-form-anchor a {
color: #40648a; }

Expand Down

0 comments on commit c6b96b2

Please sign in to comment.