Netsyms/easy-markdown-editor
2
0
Fork 0
mirror of https://github.com/Ionaru/easy-markdown-editor synced 2025-07-02 23:54:28 -06:00
Code Issues Releases Wiki Activity

@Ionaru 's review : disable actions on top of dropdown, add dropdown icon and open on clic

Browse Source
This commit is contained in:
firm1 2020-01-28 18:52:43 +01:00
parent 6f4225ccb2
commit 26d2da9e29
2 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/css/easymde.css
View File

@ -121,7 +121,6 @@
display: inline-block; display: inline-block;
text-align: center; text-align: center;
text-decoration: none !important; text-decoration: none !important;
width: 30px;
height: 30px; height: 30px;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -130,6 +129,10 @@
cursor: pointer; cursor: pointer;
} }
.editor-toolbar button {
width: 30px;
}
.editor-toolbar button.active, .editor-toolbar button.active,
.editor-toolbar button:hover { .editor-toolbar button:hover {
background: #fcfcfc; background: #fcfcfc;
@ -314,8 +317,9 @@
font-style: italic; font-style: italic;
} }
.easymde-dropdown { .editor-toolbar .easymde-dropdown {
position: relative; position: relative;
width: 45px;
} }
.easymde-dropdown-content { .easymde-dropdown-content {
@ -325,8 +329,21 @@
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 8px; padding: 8px;
z-index: 2; z-index: 2;
top: 30px;
} }
.easymde-dropdown:hover .easymde-dropdown-content { .easymde-dropdown:active .easymde-dropdown-content,
.easymde-dropdown:focus .easymde-dropdown-content{
display: block; display: block;
} }
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
border: solid #777;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 2px;
margin-left: 8px;
margin-bottom: 3px;
}

13
src/js/easymde.js
View File

@ -114,14 +114,17 @@ function fixShortcut(name) {
* Create dropdown block * Create dropdown block
*/ */
function createToolbarDropdown(options, enableTooltips, shortcuts, parent) { function createToolbarDropdown(options, enableTooltips, shortcuts, parent) {
var el = createToolbarButton(options, enableTooltips, shortcuts, 'div', parent); var el = createToolbarButton(options, false, enableTooltips, shortcuts, 'button', parent);
el.className += ' easymde-dropdown'; el.className += ' easymde-dropdown';
var content = document.createElement('div'); var content = document.createElement('div');
content.className = 'easymde-dropdown-content'; content.className = 'easymde-dropdown-content';
for (var childrenIndex = 0; childrenIndex < options.children.length; childrenIndex++) { for (var childrenIndex = 0; childrenIndex < options.children.length; childrenIndex++) {
var child = createToolbarButton(options.children[childrenIndex], enableTooltips, shortcuts, 'button', parent); var child = createToolbarButton(options.children[childrenIndex], true, enableTooltips, shortcuts, 'button', parent);
content.appendChild(child); content.appendChild(child);
} }
var dropIcon = document.createElement('i');
dropIcon.className = 'down';
el.appendChild(dropIcon);
el.appendChild(content); el.appendChild(content);
return el; return el;
} }
@ -129,7 +132,7 @@ function createToolbarDropdown(options, enableTooltips, shortcuts, parent) {
/** /**
* Create button element for toolbar. * Create button element for toolbar.
*/ */
function createToolbarButton(options, enableTooltips, shortcuts, markup, parent) { function createToolbarButton(options, enableActions, enableTooltips, shortcuts, markup, parent) {
options = options || {}; options = options || {};
var el = document.createElement(markup); var el = document.createElement(markup);
el.className = options.name; el.className = options.name;
@ -182,7 +185,7 @@ function createToolbarButton(options, enableTooltips, shortcuts, markup, parent)
} }
el.appendChild(icon); el.appendChild(icon);
if (options.action) { if (options.action && enableActions) {
if (typeof options.action === 'function') { if (typeof options.action === 'function') {
el.onclick = function (e) { el.onclick = function (e) {
e.preventDefault(); e.preventDefault();
@ -2285,7 +2288,7 @@ EasyMDE.prototype.createToolbar = function (items) {
} else if (item.children) { } else if (item.children) {
el = createToolbarDropdown(item, self.options.toolbarTips, self.options.shortcuts, self); el = createToolbarDropdown(item, self.options.toolbarTips, self.options.shortcuts, self);
} else { } else {
el = createToolbarButton(item, self.options.toolbarTips, self.options.shortcuts, 'button', self); el = createToolbarButton(item, true, self.options.toolbarTips, self.options.shortcuts, 'button', self);
} }