From e0efd053be717e89452b07f7dd1e04b284a48410 Mon Sep 17 00:00:00 2001 From: Olivier Meunier Date: Mon, 2 Jun 2014 12:44:38 +0200 Subject: [PATCH] Moved image and oembed controls from inline to media module. --- src/lib/controls/inline.js | 101 --------------------------------- src/lib/controls/media.js | 112 +++++++++++++++++++++++++++++++++++++ src/lib/editor.js | 7 ++- 3 files changed, 116 insertions(+), 104 deletions(-) create mode 100644 src/lib/controls/media.js diff --git a/src/lib/controls/inline.js b/src/lib/controls/inline.js index ca802ff..1987ac0 100644 --- a/src/lib/controls/inline.js +++ b/src/lib/controls/inline.js @@ -243,104 +243,3 @@ exports.Link = Class(Button, { return node; } }); - - -var ImageDialog = Class(Dialog, { - show: function(node) { - var control = this.control, - editor = this.toolbar.editor, - selection = rangy.saveSelection(); - - editor.showDialog(function() { - input.focus(); - }); - - var input = this.addTextField('URL: ', { - escape: function() { - editor.restoreSelection(selection); - }, - enter: function(evt) { - editor.restoreSelection(selection); - control.saveImage(node, evt.target.value); - } - }); - - this.addButton('Save', { - fontAwesomeID: 'check', - click: function(evt) { - evt.stopImmediatePropagation(); - editor.restoreSelection(selection); - control.saveImage(node, input.value); - } - }); - - if (node) { - input.value = node.getAttribute('src'); - } - } -}); - -exports.Image = Class(Button, { - defaults: extend({}, Button.prototype.defaults, { - label: 'IMG', - title: 'Image', - fontAwesomeID: 'picture-o' - }), - - init: function() { - Button.prototype.init.apply(this, arguments); - - // Select image when clicked - var editor = this.toolbar.editor; - editor.on('click', function(evt) { - if (evt.target.tagName.toLowerCase() === 'img') { - editor.setRange(evt.target); - editor.showToolbar(); - } - }); - }, - - isHighlighted: function() { - return this.toolbar.editor.filterTopNodeNames('img').length > 0; - }, - - click: function() { - var editor = this.toolbar.editor, - node = editor.filterTopNodeNames('img'); - - node = node.length === 0 ? null : node[0]; - (new ImageDialog(this)).show(node); - }, - - saveImage: function(node, url) { - var editor = this.toolbar.editor, - range = editor.getRange(); - - if (node && url) { - node.setAttribute('src', url); - editor.setRange(node); - } else if (url) { - node = document.createElement('img'); - node.setAttribute('src', url); - range.deleteContents(); - range.insertNode(node); - editor.cleanBlock(node.parentNode); - editor.setRange(node); - } - editor.showToolbar(); - return node; - } -}); - - -exports.Oembed = Class(Button, { - defaults: extend({}, Button.prototype.defaults, { - label: 'Embeded', - title: 'Embeded content', - fontAwesomeID: 'youtube-play' - }), - - click: function() { - window.alert('No implemented yet :)'); - } -}); diff --git a/src/lib/controls/media.js b/src/lib/controls/media.js new file mode 100644 index 0000000..443d8ca --- /dev/null +++ b/src/lib/controls/media.js @@ -0,0 +1,112 @@ +/* jshint newcap:false */ +/* global exports, require */ + +var _util = require('../util'), + _controls = require('../controls'), + rangy = require('../../vendor/rangy/core').api, + + Class = _util.Class, + extend = _util.extend, + Button = _controls.Button, + Dialog = _controls.Dialog; + + +var ImageDialog = Class(Dialog, { + show: function(node) { + var control = this.control, + editor = this.toolbar.editor, + selection = rangy.saveSelection(); + + editor.showDialog(function() { + input.focus(); + }); + + var input = this.addTextField('URL: ', { + escape: function() { + editor.restoreSelection(selection); + }, + enter: function(evt) { + editor.restoreSelection(selection); + control.saveImage(node, evt.target.value); + } + }); + + this.addButton('Save', { + fontAwesomeID: 'check', + click: function(evt) { + evt.stopImmediatePropagation(); + editor.restoreSelection(selection); + control.saveImage(node, input.value); + } + }); + + if (node) { + input.value = node.getAttribute('src'); + } + } +}); + +exports.Image = Class(Button, { + defaults: extend({}, Button.prototype.defaults, { + label: 'IMG', + title: 'Image', + fontAwesomeID: 'picture-o' + }), + + init: function() { + Button.prototype.init.apply(this, arguments); + + // Select image when clicked + var editor = this.toolbar.editor; + editor.on('click', function(evt) { + if (evt.target.tagName.toLowerCase() === 'img') { + editor.setRange(evt.target); + editor.showToolbar(); + } + }); + }, + + isHighlighted: function() { + return this.toolbar.editor.filterTopNodeNames('img').length > 0; + }, + + click: function() { + var editor = this.toolbar.editor, + node = editor.filterTopNodeNames('img'); + + node = node.length === 0 ? null : node[0]; + (new ImageDialog(this)).show(node); + }, + + saveImage: function(node, url) { + var editor = this.toolbar.editor, + range = editor.getRange(); + + if (node && url) { + node.setAttribute('src', url); + editor.setRange(node); + } else if (url) { + node = document.createElement('img'); + node.setAttribute('src', url); + range.deleteContents(); + range.insertNode(node); + editor.cleanBlock(node.parentNode); + editor.setRange(node); + } + editor.showToolbar(); + return node; + } +}); + + +exports.Oembed = Class(Button, { + defaults: extend({}, Button.prototype.defaults, { + label: 'Embeded', + title: 'Embeded content', + fontAwesomeID: 'youtube-play' + }), + + click: function() { + window.alert('No implemented yet :)'); + } +}); diff --git a/src/lib/editor.js b/src/lib/editor.js index 519b98a..db762fe 100644 --- a/src/lib/editor.js +++ b/src/lib/editor.js @@ -361,7 +361,8 @@ exports.Editor = Editor; var controls = { Menu: require('./controls').Menu, inline: require('./controls/inline'), - block: require('./controls/block') + block: require('./controls/block'), + media: require('./controls/media') }; exports.simpleEditor = Class(Editor, { @@ -394,7 +395,7 @@ exports.simpleEditor = Class(Editor, { this.toolbar.addControl(controls.inline.Underline, 'underline'); this.toolbar.addControl(controls.inline.StrikeThrough, 'strike'); this.toolbar.addControl(controls.inline.Link, 'link'); - this.toolbar.addControl(controls.inline.Image, 'image'); - this.toolbar.addControl(controls.inline.Oembed, 'oembed'); + this.toolbar.addControl(controls.media.Image, 'image'); + this.toolbar.addControl(controls.media.Oembed, 'oembed'); } });