diff --git a/dist/css/medium.editor.css b/dist/css/medium.editor.css index c9de40067..86db9cdbd 100644 --- a/dist/css/medium.editor.css +++ b/dist/css/medium.editor.css @@ -1 +1 @@ -.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:" ";font-size:0}.medium-editor-toolbar{position:absolute;top:0;left:0;z-index:10;display:none;background:#242424;font-family:HelveticaNeue, Helvetica, Arial, sans-serif;font-size:16px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 0 3px #000;-moz-box-shadow:0 0 3px #000;box-shadow:0 0 3px #000}.medium-editor-toolbar:before{content:"";display:block;position:absolute;top:50px;left:50%;margin-left:-8px;width:0;height:0;border-width:8px 8px 0 8px;border-color:#242424 transparent transparent transparent;border-style:solid}.medium-editor-toolbar ul{margin:0;padding:0}.medium-editor-toolbar li{float:left;list-style:none}.medium-editor-toolbar li button{display:block;padding:15px;box-sizing:border-box;height:50px;width:50px;background:#242424;color:#fff;border:0;border-right:1px solid #000;border-left:1px solid #333;border-left:1px solid rgba(255,255,255,0.1);font-weight:bold;text-decoration:none;text-transform:uppercase;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3);-moz-box-shadow:0 2px 2px rgba(0,0,0,0.3);box-shadow:0 2px 2px rgba(0,0,0,0.3);-webkit-transition:background-color 0.2s ease-in;-moz-transition:background-color 0.2s ease-in;-o-transition:background-color 0.2s ease-in;transition:background-color 0.2s ease-in}.medium-editor-toolbar li button:hover{color:yellow;background-color:#000}.medium-editor-toolbar li .medium-editor-button-first{-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-top-left-radius:5px;-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px}.medium-editor-toolbar li .medium-editor-button-last{-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px}.medium-editor-toolbar li .medium-editor-button-active{background-color:#000;color:#fff}.medium-editor-toolbar li .medium-editor-action-underline{text-decoration:underline}.medium-editor-action-bold{font-weight:bolder}.medium-editor-action-italic{font-style:italic}.medium-editor-toolbar-form-anchor{display:none;color:#999}.medium-editor-toolbar-form-anchor input,.medium-editor-toolbar-form-anchor a{font-family:HelveticaNeue, Helvetica, Arial, sans-serif}.medium-editor-toolbar-form-anchor input{box-sizing:border-box;padding:6px;height:50px;width:316px;background:#242424;border:none;color:#ccc}.medium-editor-toolbar-form-anchor input:focus{outline:0;-moz-appearance:none;-webkit-appearance:none}.medium-editor-toolbar-form-anchor a{color:#fff;font-weight:bolder;font-size:24px;display:inline-block;margin:0 10px;text-decoration:none} +.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:" ";font-size:0}.medium-toolbar-arrow,.medium-toolbar-arrow-under:after,.medium-toolbar-arrow-over:before{content:"";display:block;position:absolute;left:50%;margin-left:-8px;width:0;height:0;border-style:solid}.medium-toolbar-arrow-under:after{top:50px;border-width:8px 8px 0 8px;border-color:#242424 transparent transparent transparent}.medium-toolbar-arrow-over:before{top:-8px;border-width:0 8px 8px 8px;border-color:transparent transparent #242424 transparent}.medium-editor-toolbar{position:absolute;top:0;left:0;z-index:10;display:none;background:#242424;font-family:HelveticaNeue, Helvetica, Arial, sans-serif;font-size:16px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 0 3px #000;-moz-box-shadow:0 0 3px #000;box-shadow:0 0 3px #000}.medium-editor-toolbar ul{margin:0;padding:0}.medium-editor-toolbar li{float:left;list-style:none}.medium-editor-toolbar li button{display:block;padding:15px;box-sizing:border-box;height:50px;width:50px;background:#242424;color:#fff;border:0;border-right:1px solid #000;border-left:1px solid #333;border-left:1px solid rgba(255,255,255,0.1);font-weight:bold;text-decoration:none;text-transform:uppercase;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3);-moz-box-shadow:0 2px 2px rgba(0,0,0,0.3);box-shadow:0 2px 2px rgba(0,0,0,0.3);-webkit-transition:background-color 0.2s ease-in;-moz-transition:background-color 0.2s ease-in;-o-transition:background-color 0.2s ease-in;transition:background-color 0.2s ease-in}.medium-editor-toolbar li button:hover{color:yellow;background-color:#000}.medium-editor-toolbar li .medium-editor-button-first{-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-top-left-radius:5px;-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px}.medium-editor-toolbar li .medium-editor-button-last{-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px}.medium-editor-toolbar li .medium-editor-button-active{background-color:#000;color:#fff}.medium-editor-toolbar li .medium-editor-action-underline{text-decoration:underline}.medium-editor-action-bold{font-weight:bolder}.medium-editor-action-italic{font-style:italic}.medium-editor-toolbar-form-anchor{display:none;color:#999}.medium-editor-toolbar-form-anchor input,.medium-editor-toolbar-form-anchor a{font-family:HelveticaNeue, Helvetica, Arial, sans-serif}.medium-editor-toolbar-form-anchor input{box-sizing:border-box;padding:6px;height:50px;width:316px;background:#242424;border:none;color:#ccc}.medium-editor-toolbar-form-anchor input:focus{outline:0;-moz-appearance:none;-webkit-appearance:none}.medium-editor-toolbar-form-anchor a{color:#fff;font-weight:bolder;font-size:24px;display:inline-block;margin:0 10px;text-decoration:none} diff --git a/dist/js/medium.editor.js b/dist/js/medium.editor.js index 915e0f2f3..a7fd4cfca 100644 --- a/dist/js/medium.editor.js +++ b/dist/js/medium.editor.js @@ -189,10 +189,19 @@ function MediumEditor(elements, options) { }, setToolbarPosition: function () { - var selection = window.getSelection(), + var buttonHeight = 50, + selection = window.getSelection(), range = selection.getRangeAt(0), boundary = range.getBoundingClientRect(); - this.toolbar.style.top = boundary.top + this.options.diffTop + window.pageYOffset - this.toolbar.offsetHeight + 'px'; + if (boundary.top < buttonHeight) { + this.toolbar.classList.add('medium-toolbar-arrow-over'); + this.toolbar.classList.remove('medium-toolbar-arrow-under'); + this.toolbar.style.top = buttonHeight + boundary.bottom - this.options.diffTop + window.pageYOffset - this.toolbar.offsetHeight + 'px'; + } else { + this.toolbar.classList.add('medium-toolbar-arrow-under'); + this.toolbar.classList.remove('medium-toolbar-arrow-over'); + this.toolbar.style.top = boundary.top + this.options.diffTop + window.pageYOffset - this.toolbar.offsetHeight + 'px'; + } this.toolbar.style.left = ((boundary.left + boundary.right) / 2) - (this.toolbar.offsetWidth / 2) + (this.options.diffLeft) + 'px'; return this; }, diff --git a/dist/js/medium.editor.min.js b/dist/js/medium.editor.min.js index 16e1f4434..331e8a5c7 100644 --- a/dist/js/medium.editor.min.js +++ b/dist/js/medium.editor.min.js @@ -1 +1 @@ -function MediumEditor(a,b){"use strict";return this.init(a,b)}!function(a,b){"use strict";function c(a,b){var c;if(void 0===a)return b;for(c in b)b.hasOwnProperty(c)&&a.hasOwnProperty(c)===!1&&(a[c]=b[c]);return a}function d(){var b,c,d,e=a.getSelection();if(e.getRangeAt&&e.rangeCount){for(d=[],b=0,c=e.rangeCount;c>b;b+=1)d.push(e.getRangeAt(b));return d}return null}function e(b){var c,d,e=a.getSelection();if(b)for(e.removeAllRanges(),c=0,d=b.length;d>c;c+=1)e.addRange(b[c])}function f(c){var d=a.getSelection(),e=b.createRange();e.selectNodeContents(c),d.removeAllRanges(),d.addRange(e)}function g(){var a=b.getSelection().anchorNode,c=a&&3===a.nodeType?a.parentNode:a;return c}MediumEditor.prototype={defaults:{anchorInputPlaceholder:"Paste or type a link",delay:0,diffLeft:0,diffTop:-10,excludedActions:[],firstHeader:"h3",forcePlainText:!0,secondHeader:"h4"},init:function(a,d){return this.elements="string"==typeof a?b.querySelectorAll(a):a,0!==this.elements.length?(this.isActive=!0,this.parentElements=["p","h1","h2","h3","h4","h5","h6","q"],this.id=b.querySelectorAll(".medium-editor-toolbar").length+1,this.options=c(d,this.defaults),this.initElements().initToolbar().bindSelect().bindButtons().bindAnchorForm().bindPaste().bindWindowActions()):void 0},initElements:function(){var a;for(a=0;a
    • '+'
    • '+'
    • '+""+'
    '+' ×'+"
    "},initToolbar:function(){return this.toolbar=this.createToolbar(),this.keepToolbarAlive=!1,this.anchorForm=this.toolbar.querySelector(".medium-editor-toolbar-form-anchor"),this.toolbarActions=this.toolbar.querySelector(".medium-editor-toolbar-actions"),this},createToolbar:function(){var a=b.createElement("div");return a.id="medium-editor-toolbar-"+this.id,a.className="medium-editor-toolbar",a.innerHTML=this.toolbarTemplate(),b.getElementsByTagName("body")[0].appendChild(a),a},bindSelect:function(){var a,b=this,c="";for(this.checkSelectionWrapper=function(a){clearTimeout(c),setTimeout(function(){b.checkSelection(a)},b.options.delay)},a=0;a-1?"none":"block"},checkActiveButtons:function(){var a=this.selection.anchorNode;for(a.tagName||(a=this.selection.anchorNode.parentNode);void 0!==a.tagName&&-1===this.parentElements.indexOf(a.tagName);)this.activateButton(a.tagName.toLowerCase()),a=a.parentNode},activateButton:function(a){var b=this.toolbar.querySelector('[data-element="'+a+'"]');null!==b&&-1===b.className.indexOf("medium-editor-button-active")&&(b.className+=" medium-editor-button-active")},bindButtons:function(){var a,b=this.toolbar.querySelectorAll("button"),c=this,d=function(a){a.preventDefault(),a.stopPropagation(),void 0===c.selection&&c.checkSelection(a),this.className.indexOf("medium-editor-button-active")>-1?this.className=this.className.replace(/medium-editor-button-active/g,"").replace(/\s{2}/g," "):this.className+=" medium-editor-button-active",c.execAction(this.getAttribute("data-action"),a)};for(a=0;a-1?(this.appendEl(a.replace("append-","")),this.setToolbarButtonStates()):"anchor"===a?this.triggerAnchorAction(c):(b.execCommand(a,null,!1),this.setToolbarPosition())},triggerAnchorAction:function(){return"a"===this.selection.anchorNode.parentNode.tagName.toLowerCase()?b.execCommand("unlink",null,!1):"block"===this.anchorForm.style.display?this.showToolbarActions():this.showAnchorForm(),this},appendEl:function(a){var c,d=this.selection.anchorNode;for(d&&d.tagName&&(c=d.tagName.toLowerCase());-1===this.parentElements.indexOf(c);)d=d.parentNode,c=d.tagName.toLowerCase();c===a&&(a="p"),a=b.createElement(a),this.transferAttributes(d,a),a.innerHTML=d.innerHTML,d.parentNode.replaceChild(a,d),f(a),this.bindElementToolbarEvents(a),this.setToolbarPosition()},transferAttributes:function(a,b){Array.prototype.slice.call(a.attributes).forEach(function(a){b.setAttribute(a.name,a.value)})},getFirstChild:function(a){for(var b=a.firstChild;null!==b&&1!==b.nodeType;)b=b.nextSibling;return b},bindElementToolbarEvents:function(a){var b=this;a.addEventListener("mouseup",function(a){b.checkSelection(a)}),a.addEventListener("keyup",function(a){b.checkSelection(a)})},showToolbarActions:function(){var a,c=this;this.anchorForm.style.display="none",this.toolbarActions.style.display="block",this.keepToolbarAlive=!1,clearTimeout(a),a=setTimeout(function(){b.addEventListener("click",function(){c.keepToolbarAlive=!1,c.toolbar.style.display="none",b.removeEventListener("click",this)})},300)},showAnchorForm:function(){var a=this.anchorForm.querySelector("input");this.toolbarActions.style.display="none",this.savedSelection=d(),this.anchorForm.style.display="block",this.keepToolbarAlive=!0,a.focus(),a.value=""},bindAnchorForm:function(){var a=this.anchorForm.querySelector("input"),b=this.anchorForm.querySelector("a"),c=this;return this.anchorForm.addEventListener("click",function(a){a.stopPropagation()}),a.addEventListener("keyup",function(a){13===a.keyCode&&(a.preventDefault(),c.createLink(this))}),b.addEventListener("click",function(){c.showToolbarActions(),e(c.savedSelection)}),this},createLink:function(a){e(this.savedSelection),b.execCommand("CreateLink",!1,a.value),this.showToolbarActions(),a.value=""},bindWindowActions:function(){var b,c=this;return a.addEventListener("resize",function(){clearTimeout(b),b=setTimeout(function(){c.setToolbarPosition()},100)}),this},activate:function(){var a;if(!this.isActive){for(this.isActive=!0,a=0;a")))};for(a=0;ab;b+=1)d.push(e.getRangeAt(b));return d}return null}function e(b){var c,d,e=a.getSelection();if(b)for(e.removeAllRanges(),c=0,d=b.length;d>c;c+=1)e.addRange(b[c])}function f(c){var d=a.getSelection(),e=b.createRange();e.selectNodeContents(c),d.removeAllRanges(),d.addRange(e)}function g(){var a=b.getSelection().anchorNode,c=a&&3===a.nodeType?a.parentNode:a;return c}MediumEditor.prototype={defaults:{anchorInputPlaceholder:"Paste or type a link",delay:0,diffLeft:0,diffTop:-10,excludedActions:[],firstHeader:"h3",forcePlainText:!0,secondHeader:"h4"},init:function(a,d){return this.elements="string"==typeof a?b.querySelectorAll(a):a,0!==this.elements.length?(this.isActive=!0,this.parentElements=["p","h1","h2","h3","h4","h5","h6","q"],this.id=b.querySelectorAll(".medium-editor-toolbar").length+1,this.options=c(d,this.defaults),this.initElements().initToolbar().bindSelect().bindButtons().bindAnchorForm().bindPaste().bindWindowActions()):void 0},initElements:function(){var a;for(a=0;a
    • '+'
    • '+'
    • '+""+'
    '+' ×'+"
    "},initToolbar:function(){return this.toolbar=this.createToolbar(),this.keepToolbarAlive=!1,this.anchorForm=this.toolbar.querySelector(".medium-editor-toolbar-form-anchor"),this.toolbarActions=this.toolbar.querySelector(".medium-editor-toolbar-actions"),this},createToolbar:function(){var a=b.createElement("div");return a.id="medium-editor-toolbar-"+this.id,a.className="medium-editor-toolbar",a.innerHTML=this.toolbarTemplate(),b.getElementsByTagName("body")[0].appendChild(a),a},bindSelect:function(){var a,b=this,c="";for(this.checkSelectionWrapper=function(a){clearTimeout(c),setTimeout(function(){b.checkSelection(a)},b.options.delay)},a=0;a-1?"none":"block"},checkActiveButtons:function(){var a=this.selection.anchorNode;for(a.tagName||(a=this.selection.anchorNode.parentNode);void 0!==a.tagName&&-1===this.parentElements.indexOf(a.tagName);)this.activateButton(a.tagName.toLowerCase()),a=a.parentNode},activateButton:function(a){var b=this.toolbar.querySelector('[data-element="'+a+'"]');null!==b&&-1===b.className.indexOf("medium-editor-button-active")&&(b.className+=" medium-editor-button-active")},bindButtons:function(){var a,b=this.toolbar.querySelectorAll("button"),c=this,d=function(a){a.preventDefault(),a.stopPropagation(),void 0===c.selection&&c.checkSelection(a),this.className.indexOf("medium-editor-button-active")>-1?this.className=this.className.replace(/medium-editor-button-active/g,"").replace(/\s{2}/g," "):this.className+=" medium-editor-button-active",c.execAction(this.getAttribute("data-action"),a)};for(a=0;a-1?(this.appendEl(a.replace("append-","")),this.setToolbarButtonStates()):"anchor"===a?this.triggerAnchorAction(c):(b.execCommand(a,null,!1),this.setToolbarPosition())},triggerAnchorAction:function(){return"a"===this.selection.anchorNode.parentNode.tagName.toLowerCase()?b.execCommand("unlink",null,!1):"block"===this.anchorForm.style.display?this.showToolbarActions():this.showAnchorForm(),this},appendEl:function(a){var c,d=this.selection.anchorNode;for(d&&d.tagName&&(c=d.tagName.toLowerCase());-1===this.parentElements.indexOf(c);)d=d.parentNode,c=d.tagName.toLowerCase();c===a&&(a="p"),a=b.createElement(a),this.transferAttributes(d,a),a.innerHTML=d.innerHTML,d.parentNode.replaceChild(a,d),f(a),this.bindElementToolbarEvents(a),this.setToolbarPosition()},transferAttributes:function(a,b){Array.prototype.slice.call(a.attributes).forEach(function(a){b.setAttribute(a.name,a.value)})},getFirstChild:function(a){for(var b=a.firstChild;null!==b&&1!==b.nodeType;)b=b.nextSibling;return b},bindElementToolbarEvents:function(a){var b=this;a.addEventListener("mouseup",function(a){b.checkSelection(a)}),a.addEventListener("keyup",function(a){b.checkSelection(a)})},showToolbarActions:function(){var a,c=this;this.anchorForm.style.display="none",this.toolbarActions.style.display="block",this.keepToolbarAlive=!1,clearTimeout(a),a=setTimeout(function(){b.addEventListener("click",function(){c.keepToolbarAlive=!1,c.toolbar.style.display="none",b.removeEventListener("click",this)})},300)},showAnchorForm:function(){var a=this.anchorForm.querySelector("input");this.toolbarActions.style.display="none",this.savedSelection=d(),this.anchorForm.style.display="block",this.keepToolbarAlive=!0,a.focus(),a.value=""},bindAnchorForm:function(){var a=this.anchorForm.querySelector("input"),b=this.anchorForm.querySelector("a"),c=this;return this.anchorForm.addEventListener("click",function(a){a.stopPropagation()}),a.addEventListener("keyup",function(a){13===a.keyCode&&(a.preventDefault(),c.createLink(this))}),b.addEventListener("click",function(){c.showToolbarActions(),e(c.savedSelection)}),this},createLink:function(a){e(this.savedSelection),b.execCommand("CreateLink",!1,a.value),this.showToolbarActions(),a.value=""},bindWindowActions:function(){var b,c=this;return a.addEventListener("resize",function(){clearTimeout(b),b=setTimeout(function(){c.setToolbarPosition()},100)}),this},activate:function(){var a;if(!this.isActive){for(this.isActive=!0,a=0;a")))};for(a=0;a