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 Feb 27, 2014
1 parent a405e82 commit 1c629a4
Show file tree
Hide file tree
Showing 7 changed files with 182 additions and 29 deletions.
199 changes: 176 additions & 23 deletions vendor/assets/javascripts/medium-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ if (typeof module === 'object') {
this.elements[i].setAttribute('data-placeholder', this.options.placeholder);
}
this.elements[i].setAttribute('data-medium-element', true);
this.bindParagraphCreation(i).bindReturn(i).bindTab(i);
this.bindParagraphCreation(i).bindReturn(i).bindTab(i).bindAnchorPreview(i);
if (!this.options.disableToolbar && !this.elements[i].getAttribute('data-disable-toolbar')) {
addToolbar = true;
}
Expand Down Expand Up @@ -219,6 +219,7 @@ if (typeof module === 'object') {
}
}
});
return this;
},

buttonTemplate: function (btnType) {
Expand Down Expand Up @@ -318,6 +319,8 @@ if (typeof module === 'object') {
this.anchorForm = this.toolbar.querySelector('.medium-editor-toolbar-form-anchor');
this.anchorInput = this.anchorForm.querySelector('input');
this.toolbarActions = this.toolbar.querySelector('.medium-editor-toolbar-actions');
this.anchorPreview = this.createAnchorPreview();

return this;
},

Expand Down Expand Up @@ -353,6 +356,7 @@ if (typeof module === 'object') {
checkSelection: function () {
var newSelection,
selectionElement;

if (this.keepToolbarAlive !== true && !this.options.disableToolbar) {
newSelection = window.getSelection();
if (newSelection.toString().trim() === '' ||
Expand Down Expand Up @@ -447,6 +451,9 @@ if (typeof module === 'object') {
} else {
this.toolbar.style.left = defaultLeft + middleBoundary + 'px';
}

this.hideAnchorPreview();

return this;
},

Expand Down Expand Up @@ -598,13 +605,13 @@ if (typeof module === 'object') {
}, 100);
},

showAnchorForm: function () {
showAnchorForm: function (link_value) {
this.toolbarActions.style.display = 'none';
this.savedSelection = saveSelection();
this.anchorForm.style.display = 'block';
this.keepToolbarAlive = true;
this.anchorInput.focus();
this.anchorInput.value = '';
this.anchorInput.value = link_value || '';
},

bindAnchorForm: function () {
Expand All @@ -619,6 +626,11 @@ if (typeof module === 'object') {
self.createLink(this);
}
});
this.anchorInput.addEventListener('click', function (e) {
// make sure not to hide form when cliking into the input
e.stopPropagation();
self.keepToolbarAlive = true;
});
this.anchorInput.addEventListener('blur', function () {
self.keepToolbarAlive = false;
self.checkSelection();
Expand All @@ -631,6 +643,147 @@ if (typeof module === 'object') {
return this;
},


hideAnchorPreview: function() {
this.anchorPreview.classList.remove('medium-editor-anchor-preview-active');
},

// TODO: break method
showAnchorPreview: function (anchor_el) {
if (this.anchorPreview.classList.contains('medium-editor-anchor-preview-active')) {
return true;
}

var self = this,
buttonHeight = 40,
boundary = anchor_el.getBoundingClientRect(),
defaultLeft = (self.options.diffLeft) - (self.anchorPreview.offsetWidth / 2),
middleBoundary = (boundary.left + boundary.right) / 2,
halfOffsetWidth = self.anchorPreview.offsetWidth / 2,
timer;

clearTimeout(timer);
timer = setTimeout(function() {
if (!self.anchorPreview.classList.contains('medium-editor-anchor-preview-active')) {
self.anchorPreview.classList.add('medium-editor-anchor-preview-active');
}
}, 100);

self.anchorPreview.querySelector('i').innerHTML = anchor_el.href;
self.observeAnchorPreview(anchor_el);

self.anchorPreview.classList.add('medium-toolbar-arrow-over');
self.anchorPreview.classList.remove('medium-toolbar-arrow-under');
self.anchorPreview.style.top = Math.round(buttonHeight + boundary.bottom - self.options.diffTop + window.pageYOffset - self.anchorPreview.offsetHeight) + 'px';
if (middleBoundary < halfOffsetWidth) {
self.anchorPreview.style.left = defaultLeft + halfOffsetWidth + 'px';
} else if ((window.innerWidth - middleBoundary) < halfOffsetWidth) {
self.anchorPreview.style.left = window.innerWidth + defaultLeft - halfOffsetWidth + 'px';
} else {
self.anchorPreview.style.left = defaultLeft + middleBoundary + 'px';
}

return this;
},

// TODO: break method
observeAnchorPreview: function(anchorEl) {
var self = this,
lastOver = (new Date()).getTime(),
over = true,
stamp = function() {
lastOver = (new Date()).getTime();
over = true;
},
unstamp = function(e) {
if (!e.relatedTarget || !/anchor-preview/.test(e.relatedTarget.className)) {
over = false;
}
},
interval_timer = setInterval(function() {
if (over) {
return true;
}
var durr = (new Date()).getTime() - lastOver;
if (durr > 500) {
// hide the preview 1/2 second after mouse leaves the link
self.hideAnchorPreview();

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

}
}, 200);

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

createAnchorPreview: function () {
var self = this,
anchorPreview = document.createElement('div');
anchorPreview.id = 'medium-editor-anchor-preview-' + this.id;
anchorPreview.className = 'medium-editor-anchor-preview';
anchorPreview.innerHTML = this.anchorPreviewTemplate();
document.getElementsByTagName('body')[0].appendChild(anchorPreview);

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

return anchorPreview;
},

anchorPreviewTemplate: function () {
return '<div class="medium-editor-toolbar-anchor-preview" id="medium-editor-toolbar-anchor-preview">' +
' <i class="medium-editor-toolbar-anchor-preview-inner">http://google.com/</i>' +
'</div>';
},

anchorPreviewClickHandler: function(e) {
if (this.activeAnchor) {

var self = this,
range = document.createRange(),
sel = window.getSelection();

range.selectNodeContents(self.activeAnchor);
sel.removeAllRanges();
sel.addRange(range);
setTimeout(function() {
self.showAnchorForm(self.activeAnchor.href);
self.keepToolbarAlive = false;
}, 100);

}

this.hideAnchorPreview();
},

editorAnchorObserver: function(e) {
if (e.target && e.target.tagName.toLowerCase() === 'a') {
// only show when hovering on anchors
if (this.toolbar.classList.contains('medium-editor-toolbar-active')) {
// only show when toolbar is not present
return true;
}
this.activeAnchor = e.target;
this.showAnchorPreview(e.target);
}
},

bindAnchorPreview: function (index) {
var self = this;
this.elements[index].addEventListener('mouseover', function(e) {
self.editorAnchorObserver(e);
});
return this;
},

setTargetBlank: function () {
var el = getSelectionStart(),
i;
Expand Down Expand Up @@ -705,6 +858,7 @@ if (typeof module === 'object') {
for (i = 0; i < this.elements.length; i += 1) {
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');
}
},
Expand All @@ -713,30 +867,29 @@ if (typeof module === 'object') {
if (!this.options.forcePlainText) {
return this;
}
var i,
self = this,
pasteWrapper = function (e) {
var paragraphs,
html = '',
p;
this.classList.remove('medium-editor-placeholder');
if (e.clipboardData && e.clipboardData.getData) {
e.preventDefault();
if (!self.options.disableReturn) {
paragraphs = e.clipboardData.getData('text/plain').split(/[\r\n]/g);
for (p = 0; p < paragraphs.length; p += 1) {
if (paragraphs[p] !== '') {
html += '<p>' + paragraphs[p] + '</p>';
}
var i, self = this;
this.pasteWrapper = function (e) {
var paragraphs,
html = '',
p;
this.classList.remove('medium-editor-placeholder');
if (e.clipboardData && e.clipboardData.getData) {
e.preventDefault();
if (!self.options.disableReturn) {
paragraphs = e.clipboardData.getData('text/plain').split(/[\r\n]/g);
for (p = 0; p < paragraphs.length; p += 1) {
if (paragraphs[p] !== '') {
html += '<p>' + paragraphs[p] + '</p>';
}
document.execCommand('insertHTML', false, html);
} else {
document.execCommand('insertHTML', false, e.clipboardData.getData('text/plain'));
}
document.execCommand('insertHTML', false, html);
} else {
document.execCommand('insertHTML', false, e.clipboardData.getData('text/plain'));
}
};
}
};
for (i = 0; i < this.elements.length; i += 1) {
this.elements[i].addEventListener('paste', pasteWrapper);
this.elements[i].addEventListener('paste', this.pasteWrapper);
}
return this;
},
Expand Down
Loading

0 comments on commit 1c629a4

Please sign in to comment.