166 lines
5.3 KiB
JavaScript
166 lines
5.3 KiB
JavaScript
var ColorPicker, DefaultTheme, Picker, SnowTheme, dom, _,
|
|
__hasProp = {}.hasOwnProperty,
|
|
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
|
|
|
|
_ = require('lodash');
|
|
|
|
ColorPicker = require('../../lib/color-picker');
|
|
|
|
DefaultTheme = require('../default');
|
|
|
|
dom = require('../../lib/dom');
|
|
|
|
Picker = require('../../lib/picker');
|
|
|
|
SnowTheme = (function(_super) {
|
|
__extends(SnowTheme, _super);
|
|
|
|
SnowTheme.COLORS = ["#000000", "#e60000", "#ff9900", "#ffff00", "#008A00", "#0066cc", "#9933ff", "#ffffff", "#facccc", "#ffebcc", "#ffffcc", "#cce8cc", "#cce0f5", "#ebd6ff", "#bbbbbb", "#f06666", "#ffc266", "#ffff66", "#66b966", "#66a3e0", "#c285ff", "#888888", "#a10000", "#b26b00", "#b2b200", "#006100", "#0047b2", "#6b24b2", "#444444", "#5c0000", "#663d00", "#666600", "#003700", "#002966", "#3d1466"];
|
|
|
|
SnowTheme.OPTIONS = {
|
|
'multi-cursor': {
|
|
template: '<span class="cursor-flag"> <span class="cursor-triangle top"></span> <span class="cursor-name"></span> <span class="cursor-triangle bottom"></span> </span> <span class="cursor-caret"></span>'
|
|
}
|
|
};
|
|
|
|
SnowTheme.STYLES = {
|
|
'.snow .image-tooltip-container a': {
|
|
'border': '1px solid #06c'
|
|
},
|
|
'.snow .image-tooltip-container a.insert': {
|
|
'background-color': '#06c',
|
|
'color': '#fff'
|
|
},
|
|
'.snow .cursor-name': {
|
|
'border-radius': '4px',
|
|
'font-size': '11px',
|
|
'font-family': 'Arial',
|
|
'margin-left': '-50%',
|
|
'padding': '4px 10px'
|
|
},
|
|
'.snow .cursor-triangle': {
|
|
'border-left': '4px solid transparent',
|
|
'border-right': '4px solid transparent',
|
|
'height': '0px',
|
|
'margin-left': '-3px',
|
|
'width': '0px'
|
|
},
|
|
'.snow .cursor.left .cursor-name': {
|
|
'margin-left': '-8px'
|
|
},
|
|
'.snow .cursor.right .cursor-flag': {
|
|
'right': 'auto'
|
|
},
|
|
'.snow .cursor.right .cursor-name': {
|
|
'margin-left': '-100%',
|
|
'margin-right': '-8px'
|
|
},
|
|
'.snow .cursor-triangle.bottom': {
|
|
'border-top': '4px solid transparent',
|
|
'display': 'block',
|
|
'margin-bottom': '-1px'
|
|
},
|
|
'.snow .cursor-triangle.top': {
|
|
'border-bottom': '4px solid transparent',
|
|
'display': 'none',
|
|
'margin-top': '-1px'
|
|
},
|
|
'.snow .cursor.top .cursor-triangle.bottom': {
|
|
'display': 'none'
|
|
},
|
|
'.snow .cursor.top .cursor-triangle.top': {
|
|
'display': 'block'
|
|
},
|
|
'.snow a': {
|
|
'color': '#06c'
|
|
},
|
|
'.snow .tooltip': {
|
|
'border': '1px solid #ccc',
|
|
'box-shadow': '0px 0px 5px #ddd',
|
|
'color': '#222'
|
|
},
|
|
'.snow .tooltip a': {
|
|
'color': '#06c'
|
|
},
|
|
'.snow .tooltip .input': {
|
|
'border': '1px solid #ccc',
|
|
'margin': '0px',
|
|
'padding': '5px'
|
|
},
|
|
'.snow .image-tooltip-container .preview': {
|
|
'border-color': '#ccc',
|
|
'color': '#ccc'
|
|
},
|
|
'.snow .link-tooltip-container a, .snow .link-tooltip-container span': {
|
|
'display': 'inline-block',
|
|
'line-height': '25px'
|
|
}
|
|
};
|
|
|
|
function SnowTheme(quill) {
|
|
this.quill = quill;
|
|
SnowTheme.__super__.constructor.apply(this, arguments);
|
|
this.quill.addStyles(SnowTheme.STYLES);
|
|
this.pickers = [];
|
|
this.quill.on(this.quill.constructor.events.SELECTION_CHANGE, (function(_this) {
|
|
return function(range) {
|
|
if (range != null) {
|
|
return _.invoke(_this.pickers, 'close');
|
|
}
|
|
};
|
|
})(this));
|
|
dom(this.quill.root.ownerDocument.body).addClass('snow');
|
|
this.quill.onModuleLoad('multi-cursor', _.bind(this.extendMultiCursor, this));
|
|
this.quill.onModuleLoad('toolbar', _.bind(this.extendToolbar, this));
|
|
}
|
|
|
|
SnowTheme.prototype.extendMultiCursor = function(module) {
|
|
return module.on(module.constructor.events.CURSOR_ADDED, function(cursor) {
|
|
var bottomTriangle, topTriangle;
|
|
bottomTriangle = cursor.elem.querySelector('.cursor-triangle.bottom');
|
|
topTriangle = cursor.elem.querySelector('.cursor-triangle.top');
|
|
return bottomTriangle.style.borderTopColor = topTriangle.style.borderBottomColor = cursor.color;
|
|
});
|
|
};
|
|
|
|
SnowTheme.prototype.extendToolbar = function(module) {
|
|
_.each(['color', 'background', 'font', 'size', 'align'], (function(_this) {
|
|
return function(format) {
|
|
var picker, select;
|
|
select = module.container.querySelector(".ql-" + format);
|
|
if (select == null) {
|
|
return;
|
|
}
|
|
switch (format) {
|
|
case 'font':
|
|
case 'size':
|
|
case 'align':
|
|
picker = new Picker(select);
|
|
break;
|
|
case 'color':
|
|
case 'background':
|
|
picker = new ColorPicker(select);
|
|
_.each(picker.container.querySelectorAll('.ql-picker-item'), function(item, i) {
|
|
if (i < 7) {
|
|
return dom(item).addClass('ql-primary-color');
|
|
}
|
|
});
|
|
}
|
|
if (picker != null) {
|
|
return _this.pickers.push(picker);
|
|
}
|
|
};
|
|
})(this));
|
|
return _.each(dom(module.container).textNodes(), function(node) {
|
|
if (dom(node).text().trim().length === 0) {
|
|
return dom(node).remove();
|
|
}
|
|
});
|
|
};
|
|
|
|
return SnowTheme;
|
|
|
|
})(DefaultTheme);
|
|
|
|
module.exports = SnowTheme;
|