diff options
Diffstat (limited to 'addons/web_editor/static/lib/summernote/src/js/Renderer.js')
| -rw-r--r-- | addons/web_editor/static/lib/summernote/src/js/Renderer.js | 529 |
1 files changed, 213 insertions, 316 deletions
diff --git a/addons/web_editor/static/lib/summernote/src/js/Renderer.js b/addons/web_editor/static/lib/summernote/src/js/Renderer.js index 922bd6a111c..07584edc453 100644 --- a/addons/web_editor/static/lib/summernote/src/js/Renderer.js +++ b/addons/web_editor/static/lib/summernote/src/js/Renderer.js @@ -1,12 +1,7 @@ define([ - 'summernote/core/agent', - 'summernote/core/dom', - 'summernote/core/func', - 'summernote/core/list' -], function (agent, dom, func, list) { + 'summernote/core/agent', 'summernote/core/dom', 'summernote/core/func' +], function (agent, dom, func) { /** - * @class Renderer - * * renderer * * rendering toolbar and editable @@ -15,15 +10,14 @@ define([ /** * bootstrap button template - * @private - * @param {String} label button name - * @param {Object} [options] button options - * @param {String} [options.event] data-event - * @param {String} [options.className] button's class name - * @param {String} [options.value] data-value - * @param {String} [options.title] button's title for popup - * @param {String} [options.dropdown] dropdown html - * @param {String} [options.hide] data-hide + * + * @param {String} label + * @param {Object} [options] + * @param {String} [options.event] + * @param {String} [options.value] + * @param {String} [options.title] + * @param {String} [options.dropdown] + * @param {String} [options.hide] */ var tplButton = function (label, options) { var event = options.event; @@ -33,11 +27,9 @@ define([ var dropdown = options.dropdown; var hide = options.hide; - return (dropdown ? '<div class="btn-group' + - (className ? ' ' + className : '') + '">' : '') + - '<button type="button"' + - ' class="btn btn-default btn-sm' + - ((!dropdown && className) ? ' ' + className : '') + + return '<button type="button"' + + ' class="btn btn-default btn-sm btn-small' + + (className ? ' ' + className : '') + (dropdown ? ' dropdown-toggle' : '') + '"' + (dropdown ? ' data-toggle="dropdown"' : '') + @@ -46,16 +38,15 @@ define([ (value ? ' data-value=\'' + value + '\'' : '') + (hide ? ' data-hide=\'' + hide + '\'' : '') + ' tabindex="-1">' + - label + - (dropdown ? ' <span class="caret"></span>' : '') + - '</button>' + - (dropdown || '') + - (dropdown ? '</div>' : ''); + label + + (dropdown ? ' <span class="caret"></span>' : '') + + '</button>' + + (dropdown || ''); }; /** * bootstrap icon button template - * @private + * * @param {String} iconClassName * @param {Object} [options] * @param {String} [options.event] @@ -70,28 +61,26 @@ define([ /** * bootstrap popover template - * @private + * * @param {String} className * @param {String} content */ var tplPopover = function (className, content) { - var $popover = $('<div class="' + className + ' popover bottom in" style="display: none;">' + + return '<div class="' + className + ' popover bottom in" style="display: none;">' + '<div class="arrow"></div>' + '<div class="popover-content">' + + content + '</div>' + - '</div>'); - - $popover.find('.popover-content').append(content); - return $popover; + '</div>'; }; /** * bootstrap dialog template * * @param {String} className - * @param {String} [title=''] + * @param {String} [title] * @param {String} body - * @param {String} [footer=''] + * @param {String} [footer] */ var tplDialog = function (className, title, body, footer) { return '<div class="' + className + ' modal" aria-hidden="false">' + @@ -103,60 +92,44 @@ define([ '<h4 class="modal-title">' + title + '</h4>' + '</div>' : '' ) + - '<div class="modal-body">' + body + '</div>' + - (footer ? - '<div class="modal-footer">' + footer + '</div>' : '' - ) + + '<form class="note-modal-form">' + + '<div class="modal-body">' + body + '</div>' + + (footer ? + '<div class="modal-footer">' + footer + '</div>' : '' + ) + + '</form>' + '</div>' + '</div>' + '</div>'; }; - /** - * bootstrap dropdown template - * - * @param {String|String[]} contents - * @param {String} [className=''] - * @param {String} [nodeName=''] - */ - var tplDropdown = function (contents, className, nodeName) { - var classes = 'dropdown-menu' + (className ? ' ' + className : ''); - nodeName = nodeName || 'ul'; - if (contents instanceof Array) { - contents = contents.join(''); - } - - return '<' + nodeName + ' class="' + classes + '">' + contents + '</' + nodeName + '>'; - }; - var tplButtonInfo = { - picture: function (lang, options) { - return tplIconButton(options.iconPrefix + options.icons.image.image, { + picture: function (lang) { + return tplIconButton('fa fa-picture-o', { event: 'showImageDialog', title: lang.image.image, hide: true }); }, - link: function (lang, options) { - return tplIconButton(options.iconPrefix + options.icons.link.link, { + link: function (lang) { + return tplIconButton('fa fa-link', { event: 'showLinkDialog', title: lang.link.link, hide: true }); }, - table: function (lang, options) { - var dropdown = [ - '<div class="note-dimension-picker">', - '<div class="note-dimension-picker-mousecatcher" data-event="insertTable" data-value="1x1"></div>', - '<div class="note-dimension-picker-highlighted"></div>', - '<div class="note-dimension-picker-unhighlighted"></div>', - '</div>', - '<div class="note-dimension-display"> 1 x 1 </div>' - ]; - - return tplIconButton(options.iconPrefix + options.icons.table.table, { + table: function (lang) { + var dropdown = '<ul class="note-table dropdown-menu">' + + '<div class="note-dimension-picker">' + + '<div class="note-dimension-picker-mousecatcher" data-event="insertTable" data-value="1x1"></div>' + + '<div class="note-dimension-picker-highlighted"></div>' + + '<div class="note-dimension-picker-unhighlighted"></div>' + + '</div>' + + '<div class="note-dimension-display"> 1 x 1 </div>' + + '</ul>'; + return tplIconButton('fa fa-table', { title: lang.table.table, - dropdown: tplDropdown(dropdown, 'note-table') + dropdown: dropdown }); }, style: function (lang, options) { @@ -170,54 +143,28 @@ define([ '</a></li>'; }, ''); - return tplIconButton(options.iconPrefix + options.icons.style.style, { + return tplIconButton('fa fa-magic', { title: lang.style.style, - dropdown: tplDropdown(items) + dropdown: '<ul class="dropdown-menu">' + items + '</ul>' }); }, fontname: function (lang, options) { - var realFontList = []; var items = options.fontNames.reduce(function (memo, v) { - if (!agent.isFontInstalled(v) && !list.contains(options.fontNamesIgnoreCheck, v)) { - return memo; - } - realFontList.push(v); - return memo + '<li><a data-event="fontName" href="#" data-value="' + v + '" style="font-family:\'' + v + '\'">' + - '<i class="' + options.iconPrefix + options.icons.misc.check + '"></i> ' + v + + if (!agent.isFontInstalled(v)) { return memo; } + return memo + '<li><a data-event="fontName" href="#" data-value="' + v + '">' + + '<i class="fa fa-check"></i> ' + v + '</a></li>'; }, ''); - - var hasDefaultFont = agent.isFontInstalled(options.defaultFontName); - var defaultFontName = (hasDefaultFont) ? options.defaultFontName : realFontList[0]; - var label = '<span class="note-current-fontname">' + - defaultFontName + + options.defaultFontName + '</span>'; return tplButton(label, { title: lang.font.name, - className: 'note-fontname', - dropdown: tplDropdown(items, 'note-check') - }); - }, - fontsize: function (lang, options) { - var items = options.fontSizes.reduce(function (memo, v) { - return memo + '<li><a data-event="fontSize" href="#" data-value="' + v + '">' + - '<i class="' + options.iconPrefix + options.icons.misc.check + '"></i> ' + v + - '</a></li>'; - }, ''); - - var label = '<span class="note-current-fontsize">11</span>'; - return tplButton(label, { - title: lang.font.size, - className: 'note-fontsize', - dropdown: tplDropdown(items, 'note-check') + dropdown: '<ul class="dropdown-menu">' + items + '</ul>' }); }, - color: function (lang, options) { - var colorButtonLabel = '<i class="' + - options.iconPrefix + options.icons.color.recent + - '" style="color:black;background-color:yellow;"></i>'; - + color: function (lang) { + var colorButtonLabel = '<i class="fa fa-font" style="color:black;background-color:yellow;"></i>'; var colorButton = tplButton(colorButtonLabel, { className: 'note-recent-color', title: lang.color.recent, @@ -225,168 +172,156 @@ define([ value: '{"backColor":"yellow"}' }); - var items = [ - '<li><div class="btn-group">', - '<div class="note-palette-title">' + lang.color.background + '</div>', - '<div class="note-color-reset" data-event="backColor"', - ' data-value="inherit" title="' + lang.color.transparent + '">' + lang.color.setTransparent + '</div>', - '<div class="note-color-palette" data-target-event="backColor"></div>', - '</div><div class="btn-group">', - '<div class="note-palette-title">' + lang.color.foreground + '</div>', - '<div class="note-color-reset" data-event="foreColor" data-value="inherit" title="' + lang.color.reset + '">', - lang.color.resetToDefault, - '</div>', - '<div class="note-color-palette" data-target-event="foreColor"></div>', - '</div></li>' - ]; + var dropdown = '<ul class="dropdown-menu">' + + '<li>' + + '<div class="btn-group">' + + '<div class="note-palette-title">' + lang.color.background + '</div>' + + '<div class="note-color-reset" data-event="backColor"' + + ' data-value="inherit" title="' + lang.color.transparent + '">' + + lang.color.setTransparent + + '</div>' + + '<div class="note-color-palette" data-target-event="backColor"></div>' + + '</div>' + + '<div class="btn-group">' + + '<div class="note-palette-title">' + lang.color.foreground + '</div>' + + '<div class="note-color-reset" data-event="foreColor" data-value="inherit" title="' + lang.color.reset + '">' + + lang.color.resetToDefault + + '</div>' + + '<div class="note-color-palette" data-target-event="foreColor"></div>' + + '</div>' + + '</li>' + + '</ul>'; var moreButton = tplButton('', { title: lang.color.more, - dropdown: tplDropdown(items) + dropdown: dropdown }); return colorButton + moreButton; }, - bold: function (lang, options) { - return tplIconButton(options.iconPrefix + options.icons.font.bold, { + bold: function (lang) { + return tplIconButton('fa fa-bold', { event: 'bold', title: lang.font.bold }); }, - italic: function (lang, options) { - return tplIconButton(options.iconPrefix + options.icons.font.italic, { + italic: function (lang) { + return tplIconButton('fa fa-italic', { event: 'italic', title: lang.font.italic }); }, - underline: function (lang, options) { - return tplIconButton(options.iconPrefix + options.icons.font.underline, { + underline: function (lang) { + return tplIconButton('fa fa-underline', { event: 'underline', title: lang.font.underline }); }, - strikethrough: function (lang, options) { - return tplIconButton(options.iconPrefix + options.icons.font.strikethrough, { - event: 'strikethrough', - title: lang.font.strikethrough - }); - }, - superscript: function (lang, options) { - return tplIconButton(options.iconPrefix + options.icons.font.superscript, { - event: 'superscript', - title: lang.font.superscript - }); - }, - subscript: function (lang, options) { - return tplIconButton(options.iconPrefix + options.icons.font.subscript, { - event: 'subscript', - title: lang.font.subscript - }); - }, - clear: function (lang, options) { - return tplIconButton(options.iconPrefix + options.icons.font.clear, { + clear: function (lang) { + return tplIconButton('fa fa-eraser', { event: 'removeFormat', title: lang.font.clear }); }, - ul: function (lang, options) { - return tplIconButton(options.iconPrefix + options.icons.lists.unordered, { + ul: function (lang) { + return tplIconButton('fa fa-list-ul', { event: 'insertUnorderedList', title: lang.lists.unordered }); }, - ol: function (lang, options) { - return tplIconButton(options.iconPrefix + options.icons.lists.ordered, { + ol: function (lang) { + return tplIconButton('fa fa-list-ol', { event: 'insertOrderedList', title: lang.lists.ordered }); }, - paragraph: function (lang, options) { - var leftButton = tplIconButton(options.iconPrefix + options.icons.paragraph.left, { + paragraph: function (lang) { + var leftButton = tplIconButton('fa fa-align-left', { title: lang.paragraph.left, event: 'justifyLeft' }); - var centerButton = tplIconButton(options.iconPrefix + options.icons.paragraph.center, { + var centerButton = tplIconButton('fa fa-align-center', { title: lang.paragraph.center, event: 'justifyCenter' }); - var rightButton = tplIconButton(options.iconPrefix + options.icons.paragraph.right, { + var rightButton = tplIconButton('fa fa-align-right', { title: lang.paragraph.right, event: 'justifyRight' }); - var justifyButton = tplIconButton(options.iconPrefix + options.icons.paragraph.justify, { + var justifyButton = tplIconButton('fa fa-align-justify', { title: lang.paragraph.justify, event: 'justifyFull' }); - var outdentButton = tplIconButton(options.iconPrefix + options.icons.paragraph.outdent, { + var outdentButton = tplIconButton('fa fa-outdent', { title: lang.paragraph.outdent, event: 'outdent' }); - var indentButton = tplIconButton(options.iconPrefix + options.icons.paragraph.indent, { + var indentButton = tplIconButton('fa fa-indent', { title: lang.paragraph.indent, event: 'indent' }); - var dropdown = [ - '<div class="note-align btn-group">', - leftButton + centerButton + rightButton + justifyButton, - '</div><div class="note-list btn-group">', - indentButton + outdentButton, - '</div>' - ]; + var dropdown = '<div class="dropdown-menu">' + + '<div class="note-align btn-group">' + + leftButton + centerButton + rightButton + justifyButton + + '</div>' + + '<div class="note-list btn-group">' + + indentButton + outdentButton + + '</div>' + + '</div>'; - return tplIconButton(options.iconPrefix + options.icons.paragraph.paragraph, { + return tplIconButton('fa fa-align-left', { title: lang.paragraph.paragraph, - dropdown: tplDropdown(dropdown, '', 'div') + dropdown: dropdown }); }, height: function (lang, options) { var items = options.lineHeights.reduce(function (memo, v) { return memo + '<li><a data-event="lineHeight" href="#" data-value="' + parseFloat(v) + '">' + - '<i class="' + options.iconPrefix + options.icons.misc.check + '"></i> ' + v + + '<i class="fa fa-check"></i> ' + v + '</a></li>'; }, ''); - return tplIconButton(options.iconPrefix + options.icons.font.height, { + return tplIconButton('fa fa-text-height', { title: lang.font.height, - dropdown: tplDropdown(items, 'note-check') + dropdown: '<ul class="dropdown-menu">' + items + '</ul>' }); }, - help: function (lang, options) { - return tplIconButton(options.iconPrefix + options.icons.options.help, { + help: function (lang) { + return tplIconButton('fa fa-question', { event: 'showHelpDialog', title: lang.options.help, hide: true }); }, - fullscreen: function (lang, options) { - return tplIconButton(options.iconPrefix + options.icons.options.fullscreen, { + fullscreen: function (lang) { + return tplIconButton('fa fa-arrows-alt', { event: 'fullscreen', title: lang.options.fullscreen }); }, - codeview: function (lang, options) { - return tplIconButton(options.iconPrefix + options.icons.options.codeview, { + codeview: function (lang) { + return tplIconButton('fa fa-code', { event: 'codeview', title: lang.options.codeview }); }, - undo: function (lang, options) { - return tplIconButton(options.iconPrefix + options.icons.history.undo, { + undo: function (lang) { + return tplIconButton('fa fa-undo', { event: 'undo', title: lang.history.undo }); }, - redo: function (lang, options) { - return tplIconButton(options.iconPrefix + options.icons.history.redo, { + redo: function (lang) { + return tplIconButton('fa fa-repeat', { event: 'redo', title: lang.history.redo }); }, - hr: function (lang, options) { - return tplIconButton(options.iconPrefix + options.icons.hr.insert, { + hr: function (lang) { + return tplIconButton('fa fa-minus', { event: 'insertHorizontalRule', title: lang.hr.insert }); @@ -395,12 +330,12 @@ define([ var tplPopovers = function (lang, options) { var tplLinkPopover = function () { - var linkButton = tplIconButton(options.iconPrefix + options.icons.link.edit, { + var linkButton = tplIconButton('fa fa-edit', { title: lang.link.edit, event: 'showLinkDialog', hide: true }); - var unlinkButton = tplIconButton(options.iconPrefix + options.icons.link.unlink, { + var unlinkButton = tplIconButton('fa fa-unlink', { title: lang.link.unlink, event: 'unlink' }); @@ -428,101 +363,89 @@ define([ value: '0.25' }); - var leftButton = tplIconButton(options.iconPrefix + options.icons.image.floatLeft, { + var leftButton = tplIconButton('fa fa-align-left', { title: lang.image.floatLeft, event: 'floatMe', value: 'left' }); - var rightButton = tplIconButton(options.iconPrefix + options.icons.image.floatRight, { + var rightButton = tplIconButton('fa fa-align-right', { title: lang.image.floatRight, event: 'floatMe', value: 'right' }); - var justifyButton = tplIconButton(options.iconPrefix + options.icons.image.floatNone, { + var justifyButton = tplIconButton('fa fa-align-justify', { title: lang.image.floatNone, event: 'floatMe', value: 'none' }); - var roundedButton = tplIconButton(options.iconPrefix + options.icons.image.shapeRounded, { + var roundedButton = tplIconButton('fa fa-square', { title: lang.image.shapeRounded, event: 'imageShape', value: 'img-rounded' }); - var circleButton = tplIconButton(options.iconPrefix + options.icons.image.shapeCircle, { + var circleButton = tplIconButton('fa fa-circle', { title: lang.image.shapeCircle, event: 'imageShape', value: 'img-circle' }); - var thumbnailButton = tplIconButton(options.iconPrefix + options.icons.image.shapeThumbnail, { + var thumbnailButton = tplIconButton('fa fa-picture-o', { title: lang.image.shapeThumbnail, event: 'imageShape', value: 'img-thumbnail' }); - var noneButton = tplIconButton(options.iconPrefix + options.icons.image.shapeNone, { + var noneButton = tplIconButton('fa fa-times', { title: lang.image.shapeNone, event: 'imageShape', value: '' }); - var removeButton = tplIconButton(options.iconPrefix + options.icons.image.remove, { + var removeButton = tplIconButton('fa fa-trash-o', { title: lang.image.remove, event: 'removeMedia', value: 'none' }); - var content = (options.disableResizeImage ? '' : '<div class="btn-group">' + fullButton + halfButton + quarterButton + '</div>') + - '<div class="btn-group">' + leftButton + rightButton + justifyButton + '</div><br>' + + var content = '<div class="btn-group">' + fullButton + halfButton + quarterButton + '</div>' + + '<div class="btn-group">' + leftButton + rightButton + justifyButton + '</div>' + '<div class="btn-group">' + roundedButton + circleButton + thumbnailButton + noneButton + '</div>' + '<div class="btn-group">' + removeButton + '</div>'; return tplPopover('note-image-popover', content); }; var tplAirPopover = function () { - var $content = $('<div />'); + var content = ''; for (var idx = 0, len = options.airPopover.length; idx < len; idx ++) { var group = options.airPopover[idx]; - - var $group = $('<div class="note-' + group[0] + ' btn-group">'); + content += '<div class="note-' + group[0] + ' btn-group">'; for (var i = 0, lenGroup = group[1].length; i < lenGroup; i++) { - var $button = $(tplButtonInfo[group[1][i]](lang, options)); - - $button.attr('data-name', group[1][i]); - - $group.append($button); + content += tplButtonInfo[group[1][i]](lang, options); } - $content.append($group); + content += '</div>'; } - return tplPopover('note-air-popover', $content.children()); + return tplPopover('note-air-popover', content); }; - var $notePopover = $('<div class="note-popover" />'); - - $notePopover.append(tplLinkPopover()); - $notePopover.append(tplImagePopover()); - - if (options.airMode) { - $notePopover.append(tplAirPopover()); - } - - return $notePopover; + return '<div class="note-popover">' + + tplLinkPopover() + + tplImagePopover() + + (options.airMode ? tplAirPopover() : '') + + '</div>'; }; - this.tplButtonInfo = tplButtonInfo; // ODOO: allow access for override - this.tplPopovers = tplPopovers; // ODOO: allow access for override + this.tplButtonInfo = tplButtonInfo; // odoo change for overwrite + this.tplPopovers = tplPopovers; // odoo change for overwrite - var tplHandles = function (options) { + var tplHandles = function () { return '<div class="note-handle">' + '<div class="note-control-selection">' + '<div class="note-control-selection-bg"></div>' + '<div class="note-control-holder note-control-nw"></div>' + '<div class="note-control-holder note-control-ne"></div>' + '<div class="note-control-holder note-control-sw"></div>' + - '<div class="' + - (options.disableResizeImage ? 'note-control-holder' : 'note-control-sizing') + - ' note-control-se"></div>' + - (options.disableResizeImage ? '' : '<div class="note-control-selection-info"></div>') + + '<div class="note-control-sizing note-control-se"></div>' + + '<div class="note-control-selection-info"></div>' + '</div>' + '</div>'; }; @@ -554,6 +477,7 @@ define([ { kbd: '⌘ + B', text: lang.font.bold }, { kbd: '⌘ + I', text: lang.font.italic }, { kbd: '⌘ + U', text: lang.font.underline }, + { kbd: '⌘ + ⇧ + S', text: lang.font.sdivikethrough }, { kbd: '⌘ + \\', text: lang.font.clear } ]; @@ -565,7 +489,7 @@ define([ { kbd: '⌘ + Z', text: lang.history.undo }, { kbd: '⌘ + ⇧ + Z', text: lang.history.redo }, { kbd: '⌘ + ]', text: lang.paragraph.indent }, - { kbd: '⌘ + [', text: lang.paragraph.outdent }, + { kbd: '⌘ + [', text: lang.paragraph.oudivent }, { kbd: '⌘ + ENTER', text: lang.hr.insert } ]; @@ -644,27 +568,27 @@ define([ imageLimitation = '<small>' + lang.image.maximumFileSize + ' : ' + readableSize + '</small>'; } - var body = '<div class="form-group row note-group-select-from-files">' + + var body = '<div class="form-group row-fluid note-group-select-from-files">' + '<label>' + lang.image.selectFromFiles + '</label>' + - '<input class="note-image-input form-control" type="file" name="files" accept="image/*" multiple="multiple" />' + + '<input class="note-image-input" type="file" name="files" accept="image/*" multiple="multiple" />' + imageLimitation + '</div>' + - '<div class="form-group row">' + + '<div class="form-group row-fluid">' + '<label>' + lang.image.url + '</label>' + - '<input class="note-image-url form-control col-md-12" type="text" />' + + '<input class="note-image-url form-control span12" type="text" />' + '</div>'; var footer = '<button href="#" class="btn btn-primary note-image-btn disabled" disabled>' + lang.image.insert + '</button>'; return tplDialog('note-image-dialog', lang.image.insert, body, footer); }, link: function (lang, options) { - var body = '<div class="form-group row">' + + var body = '<div class="form-group row-fluid">' + '<label>' + lang.link.textToDisplay + '</label>' + - '<input class="note-link-text form-control col-md-12" type="text" />' + + '<input class="note-link-text form-control span12" type="text" />' + '</div>' + - '<div class="form-group row">' + + '<div class="form-group row-fluid">' + '<label>' + lang.link.url + '</label>' + - '<input class="note-link-url form-control col-md-12" type="text" value="http://" />' + + '<input class="note-link-url form-control span12" type="text" />' + '</div>' + (!options.disableLinkTarget ? '<div class="checkbox">' + @@ -682,9 +606,9 @@ define([ '<div class="title">' + lang.shortcut.shortcuts + '</div>' + (agent.isMac ? tplShortcutTable(lang, options) : replaceMacKeys(tplShortcutTable(lang, options))) + '<p class="text-center">' + - '<a href="//summernote.org/" target="_blank">Summernote @VERSION</a> · ' + - '<a href="//github.com/summernote/summernote" target="_blank">Project</a> · ' + - '<a href="//github.com/summernote/summernote/issues" target="_blank">Issues</a>' + + '<a href="//hackerwins.github.io/summernote/" target="_blank">Summernote @VERSION</a> · ' + + '<a href="//github.com/HackerWins/summernote" target="_blank">Project</a> · ' + + '<a href="//github.com/HackerWins/summernote/issues" target="_blank">Issues</a>' + '</p>'; return tplDialog('note-help-dialog', '', body, ''); } @@ -772,7 +696,7 @@ define([ }); }; - this.createPalette = createPalette; // ODOO: allow access for override + this.createPalette = createPalette; // odoo change for overwrite /** * create summernote layout (air mode) @@ -785,25 +709,24 @@ define([ var keyMap = options.keyMap[agent.isMac ? 'mac' : 'pc']; var id = func.uniqueId(); - $holder.addClass('note-air-editor note-editable panel-body'); + $holder.addClass('note-air-editor note-editable'); $holder.attr({ - 'data-note-id': id, // ODOO: we use [data-note-id="{id}"] instead of [id="{id}"] - // 'id': 'note-editor-' + id, + 'data-note-id': id, 'contentEditable': true }); var body = document.body; // create Popover - var $popover = $(this.tplPopovers(langInfo, options)); // ODOO: user (maybe) overrided method + var $popover = $(this.tplPopovers(langInfo, options)); // odoo change for overwrite $popover.addClass('note-air-layout'); $popover.attr('id', 'note-popover-' + id); $popover.appendTo(body); createTooltip($popover, keyMap); - this.createPalette($popover, options); // ODOO: use (maybe) overrided method + this.createPalette($popover, options); // odoo change for overwrite // create Handle - var $handle = $(tplHandles(options)); + var $handle = $(tplHandles()); $handle.addClass('note-air-layout'); $handle.attr('id', 'note-handle-' + id); $handle.appendTo(body); @@ -828,7 +751,7 @@ define([ var langInfo = options.langInfo; //01. create Editor - var $editor = $('<div class="note-editor panel panel-default" />'); + var $editor = $('<div class="note-editor"></div>'); if (options.width) { $editor.width(options.width); } @@ -838,81 +761,70 @@ define([ $('<div class="note-statusbar">' + (options.disableResizeEditor ? '' : tplStatusbar()) + '</div>').prependTo($editor); } - //03 editing area - var $editingArea = $('<div class="note-editing-area" />'); - //03. create editable + //03. create Editable var isContentEditable = !$holder.is(':disabled'); - var $editable = $('<div class="note-editable panel-body" contentEditable="' + isContentEditable + '"></div>').prependTo($editingArea); - + var $editable = $('<div class="note-editable" contentEditable="' + isContentEditable + '"></div>') + .prependTo($editor); if (options.height) { $editable.height(options.height); } if (options.direction) { $editable.attr('dir', options.direction); } - var placeholder = $holder.attr('placeholder') || options.placeholder; - if (placeholder) { - $editable.attr('data-placeholder', placeholder); + if (options.placeholder) { + $editable.attr('data-placeholder', options.placeholder); } - $editable.html(dom.html($holder) || dom.emptyPara); + $editable.html(dom.html($holder)); //031. create codable - $('<textarea class="note-codable"></textarea>').prependTo($editingArea); - - //04. create Popover - var $popover = $(this.tplPopovers(langInfo, options)).prependTo($editingArea); // ODOO: use (maybe) overrided method - this.createPalette($popover, options); // ODOO: use (maybe) overrided method - createTooltip($popover, keyMap); - - //05. handle(control selection, ...) - $(tplHandles(options)).prependTo($editingArea); + $('<textarea class="note-codable"></textarea>').prependTo($editor); - $editingArea.prependTo($editor); - - //06. create Toolbar - var $toolbar = $('<div class="note-toolbar panel-heading" />'); + //04. create Toolbar + var toolbarHTML = ''; for (var idx = 0, len = options.toolbar.length; idx < len; idx ++) { var groupName = options.toolbar[idx][0]; var groupButtons = options.toolbar[idx][1]; - var $group = $('<div class="note-' + groupName + ' btn-group" />'); + toolbarHTML += '<div class="note-' + groupName + ' btn-group">'; for (var i = 0, btnLength = groupButtons.length; i < btnLength; i++) { var buttonInfo = tplButtonInfo[groupButtons[i]]; // continue creating toolbar even if a button doesn't exist if (!$.isFunction(buttonInfo)) { continue; } - - var $button = $(buttonInfo(langInfo, options)); - $button.attr('data-name', groupButtons[i]); // set button's alias, becuase to get button element from $toolbar - $group.append($button); + toolbarHTML += buttonInfo(langInfo, options); } - $toolbar.append($group); + toolbarHTML += '</div>'; } + toolbarHTML = '<div class="note-toolbar btn-toolbar">' + toolbarHTML + '</div>'; + + var $toolbar = $(toolbarHTML).prependTo($editor); var keyMap = options.keyMap[agent.isMac ? 'mac' : 'pc']; - this.createPalette($toolbar, options); // ODOO: use (maybe) overrided method + this.createPalette($toolbar, options); // odoo change for overwrite createTooltip($toolbar, keyMap, 'bottom'); - $toolbar.prependTo($editor); - //07. create Dropzone - $('<div class="note-dropzone"><div class="note-dropzone-message"></div></div>').prependTo($editor); + //05. create Popover + var $popover = $(this.tplPopovers(langInfo, options)).prependTo($editor); // odoo change for overwrite + this.createPalette($popover, options); // odoo change for overwrite + createTooltip($popover, keyMap); - //08. create Dialog - var $dialogContainer = options.dialogsInBody ? $(document.body) : $editor; - var $dialog = $(tplDialogs(langInfo, options)).prependTo($dialogContainer); + //06. handle(control selection, ...) + $(tplHandles()).prependTo($editor); + + //07. create Dialog + var $dialog = $(tplDialogs(langInfo, options)).prependTo($editor); $dialog.find('button.close, a.modal-close').click(function () { $(this).closest('.modal').modal('hide'); }); + //08. create Dropzone + $('<div class="note-dropzone"><div class="note-dropzone-message"></div></div>').prependTo($editor); + //09. Editor/Holder switch $editor.insertAfter($holder); $holder.hide(); }; - this.hasNoteEditor = function ($holder) { - return this.noteEditorFromHolder($holder).length > 0; - }; - this.noteEditorFromHolder = function ($holder) { if ($holder.hasClass('note-air-editor')) { return $holder; @@ -930,6 +842,10 @@ define([ * @param {Object} options */ this.createLayout = function ($holder, options) { + if (this.noteEditorFromHolder($holder).length) { + return; + } + if (options.airMode) { this.createLayoutByAirMode($holder, options); } else { @@ -941,18 +857,20 @@ define([ * returns layoutInfo from holder * * @param {jQuery} $holder - placeholder - * @return {Object} + * @returns {Object} */ this.layoutInfoFromHolder = function ($holder) { var $editor = this.noteEditorFromHolder($holder); - if (!$editor.length) { - return; - } - - // connect $holder to $editor - $editor.data('holder', $holder); + if (!$editor.length) { return; } - return dom.buildLayoutInfo($editor); + var layoutInfo = dom.buildLayoutInfo($editor); + // cache all properties. + for (var key in layoutInfo) { + if (layoutInfo.hasOwnProperty(key)) { + layoutInfo[key] = layoutInfo[key].call(); + } + } + return layoutInfo; }; /** @@ -966,29 +884,19 @@ define([ this.removeLayout = function ($holder, layoutInfo, options) { if (options.airMode) { $holder.removeClass('note-air-editor note-editable') - .removeAttr('contentEditable'); // ODOO: removed id 'id contentEditable' + .removeAttr('contentEditable'); - layoutInfo.popover().remove(); - layoutInfo.handle().remove(); - layoutInfo.dialog().remove(); + layoutInfo.popover.remove(); + layoutInfo.handle.remove(); + layoutInfo.dialog.remove(); } else { - $holder.html(layoutInfo.editable().html()); + $holder.html(layoutInfo.editable.html()); - if (options.dialogsInBody) { - layoutInfo.dialog().remove(); - } - layoutInfo.editor().remove(); + layoutInfo.editor.remove(); $holder.show(); } }; - /** - * - * @return {Object} - * @return {function(label, options=):string} return.button {@link #tplButton function to make text button} - * @return {function(iconClass, options=):string} return.iconButton {@link #tplIconButton function to make icon button} - * @return {function(className, title=, body=, footer=):string} return.dialog {@link #tplDialog function to make dialog} - */ this.getTemplate = function () { return { button: tplButton, @@ -997,21 +905,10 @@ define([ }; }; - /** - * add button information - * - * @param {String} name button name - * @param {Function} buttonInfo function to make button, reference to {@link #tplButton},{@link #tplIconButton} - */ this.addButtonInfo = function (name, buttonInfo) { tplButtonInfo[name] = buttonInfo; }; - /** - * - * @param {String} name - * @param {Function} dialogInfo function to make dialog, reference to {@link #tplDialog} - */ this.addDialogInfo = function (name, dialogInfo) { tplDialogInfo[name] = dialogInfo; }; |