app/assets/javascripts/mercury/regions/editable.js.coffee in mercury-rails-0.1.1 vs app/assets/javascripts/mercury/regions/editable.js.coffee in mercury-rails-0.1.2

- old
+ new

@@ -6,27 +6,27 @@ super build: -> # mozilla: set some initial content so everything works correctly - @html('&nbsp;') if $.browser.mozilla && @html() == '' + @content('&nbsp;') if jQuery.browser.mozilla && @content() == '' # set overflow just in case @element.data({originalOverflow: @element.css('overflow')}) @element.css({overflow: 'auto'}) # mozilla: there's some weird behavior when the element isn't a div - @specialContainer = $.browser.mozilla && @element.get(0).tagName != 'DIV' + @specialContainer = jQuery.browser.mozilla && @element.get(0).tagName != 'DIV' # make it editable # gecko: in this makes double clicking in textareas fail: https://bugzilla.mozilla.org/show_bug.cgi?id=490367 @element.get(0).contentEditable = true # make all snippets not editable, and set their versions to 1 for element in @element.find('.mercury-snippet') element.contentEditable = false - $(element).attr('data-version', '1') + jQuery(element).attr('data-version', '1') # add the basic editor settings to the document (only once) unless @document.mercuryEditing @document.execCommand('styleWithCSS', false, false) @document.execCommand('insertBROnReturn', false, true) @@ -44,11 +44,11 @@ setTimeout((=> @selection().forceSelection(@element.get(0))), 1) currentElement = @currentElement() if currentElement.length # setup the table editor if we're inside a table table = currentElement.closest('table', @element) - Mercury.tableEditor(table, currentElement) if table.length + Mercury.tableEditor(table, currentElement.closest('tr, td')) if table.length # display a tooltip if we're in an anchor anchor = currentElement.closest('a', @element) if anchor.length && anchor.attr('href') Mercury.tooltip(anchor, "<a href=\"#{anchor.attr('href')}\" target=\"_blank\">#{anchor.attr('href')}</a>", {position: 'below'}) else @@ -61,11 +61,11 @@ @element.bind 'dragover', (event) => return if @previewing event.preventDefault() if event.shiftKey event.originalEvent.dataTransfer.dropEffect = 'copy' - if $.browser.webkit + if jQuery.browser.webkit clearTimeout(@dropTimeout) @dropTimeout = setTimeout((=> @element.trigger('possible:drop')), 10) @element.bind 'drop', (event) => return if @previewing @@ -87,24 +87,24 @@ # read: http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html @element.bind 'possible:drop', (event) => return if @previewing if snippet = @element.find('img[data-snippet]').get(0) @focus() - Mercury.Snippet.displayOptionsFor($(snippet).data('snippet')) + Mercury.Snippet.displayOptionsFor(jQuery(snippet).data('snippet')) @document.execCommand('undo', false, null) # custom paste handling: we have to do some hackery to get the pasted content since it's not exposed normally # through a clipboard in firefox (heaven forbid), and to keep the behavior across all browsers, we manually detect # what was pasted by running a quick diff, removing it by calling undo, making our adjustments, and then putting the # content back. This is possible, so it doesn't make sense why it wouldn't be exposed in a sensible way. *sigh* @element.bind 'paste', => return if @previewing return unless Mercury.region == @ Mercury.changes = true - html = @html() + content = @content() event.preventDefault() if @specialContainer - setTimeout((=> @handlePaste(html)), 1) + setTimeout((=> @handlePaste(content)), 1) @element.focus => return if @previewing Mercury.region = @ setTimeout((=> @selection().forceSelection(@element.get(0))), 1) @@ -114,39 +114,38 @@ return if @previewing Mercury.trigger('region:blurred', {region: @}) Mercury.tooltip.hide() @element.click (event) => - $(event.target).closest('a').attr('target', '_top') if @previewing + jQuery(event.target).closest('a').attr('target', '_top') if @previewing @element.dblclick (event) => return if @previewing - image = $(event.target).closest('img', @element) + image = jQuery(event.target).closest('img', @element) if image.length @selection().selectNode(image.get(0), true) - Mercury.trigger('button', {action: 'insertmedia'}) + Mercury.trigger('button', {action: 'insertMedia'}) @element.mouseup => return if @previewing @pushHistory() Mercury.trigger('region:update', {region: @}) @element.keydown (event) => return if @previewing Mercury.changes = true switch event.keyCode - when 90 # undo / redo return unless event.metaKey event.preventDefault() if event.shiftKey then @execCommand('redo') else @execCommand('undo') return when 13 # enter - if $.browser.webkit && @selection().commonAncestor().closest('li, ul', @element).length == 0 + if jQuery.browser.webkit && @selection().commonAncestor().closest('li, ul', @element).length == 0 event.preventDefault() - @document.execCommand('insertlinebreak', false, null) + @document.execCommand('insertLineBreak', false, null) else if @specialContainer # mozilla: pressing enter in any elemeny besides a div handles strangely event.preventDefault() @document.execCommand('insertHTML', false, '<br/>') @@ -162,11 +161,10 @@ @execCommand('insertHTML', {value: '&nbsp; '}) unless handled if event.metaKey switch event.keyCode - when 66 # b @execCommand('bold') event.preventDefault() when 73 # i @@ -188,20 +186,20 @@ @element.focus() setTimeout((=> @selection().forceSelection(@element.get(0))), 1) Mercury.trigger('region:update', {region: @}) - html: (value = null, filterSnippets = true, includeMarker = false) -> + content: (value = null, filterSnippets = true, includeMarker = false) -> if value != null # sanitize the html before we insert it - container = $('<div>').appendTo(@document.createDocumentFragment()) + container = jQuery('<div>').appendTo(@document.createDocumentFragment()) container.html(value) # fill in the snippet contents for element in container.find('[data-snippet]') element.contentEditable = false - element = $(element) + element = jQuery(element) if snippet = Mercury.Snippet.find(element.data('snippet')) unless element.data('version') try version = parseInt(element.html().match(/\/(\d+)\]/)[1]) if version @@ -223,36 +221,36 @@ if includeMarker selection = @selection() selection.placeMarker() # sanitize the html before we return it - container = $('<div>').appendTo(@document.createDocumentFragment()) + container = jQuery('<div>').appendTo(@document.createDocumentFragment()) container.html(@element.html().replace(/^\s+|\s+$/g, '')) # replace snippet contents to be an identifier if filterSnippets then for element, index in container.find('[data-snippet]') - element = $(element) + element = jQuery(element) if snippet = Mercury.Snippet.find(element.data("snippet")) snippet.data = element.html() element.html("[#{element.data("snippet")}/#{element.data("version")}]") element.attr({contenteditable: null, 'data-version': null}) # get the html before removing the markers - html = container.html() + content = container.html() # remove the markers from the dom selection.removeMarker() if includeMarker - return html + return content togglePreview: -> if @previewing @element.get(0).contentEditable = true @element.css({overflow: 'auto'}) else - @html(@html()) + @content(@content()) @element.get(0).contentEditable = false @element.css({overflow: @element.data('originalOverflow')}) @element.blur() super @@ -263,11 +261,11 @@ # use a custom handler if there's one, otherwise use execCommand if handler = Mercury.config.behaviors[action] || Mercury.Regions.Editable.actions[action] handler.call(@, @selection(), options) else sibling = @element.get(0).previousSibling if action == 'indent' - options.value = $('<div>').html(options.value).html() if action == 'insertHTML' && options.value && options.value.get + options.value = jQuery('<div>').html(options.value).html() if action == 'insertHTML' && options.value && options.value.get try @document.execCommand(action, false, options.value) catch error # mozilla: indenting when there's no br tag handles strangely @element.prev().remove() if action == 'indent' && @element.prev() != sibling @@ -283,17 +281,17 @@ # clear any pushes to the history clearTimeout(@historyTimeout) # if the key code was return, delete, or backspace store now -- unless it was the same as last time if knownKeyCode >= 0 && knownKeyCode != @lastKnownKeyCode # || !keyCode - @history.push(@html(null, false, true)) + @history.push(@content(null, false, true)) else if keyCode # set a timeout for pushing to the history - @historyTimeout = setTimeout((=> @history.push(@html(null, false, true))), waitTime * 1000) + @historyTimeout = setTimeout((=> @history.push(@content(null, false, true))), waitTime * 1000) else # push to the history immediately - @history.push(@html(null, false, true)) + @history.push(@content(null, false, true)) @lastKnownKeyCode = knownKeyCode selection: -> @@ -313,103 +311,103 @@ element = selection.commonAncestor() element = element.parent() if element.get(0).nodeType == 3 return element - handlePaste: (prePasteHTML) -> - prePasteHTML = prePasteHTML.replace(/^\<br\>/, '') + handlePaste: (prePasteContent) -> + prePasteContent = prePasteContent.replace(/^\<br\>/, '') # remove any regions that might have been pasted @element.find('.mercury-region').remove() # handle pasting from ms office etc - html = @html() - if html.indexOf('<!--StartFragment-->') > -1 || html.indexOf('="mso-') > -1 || html.indexOf('<o:') > -1 || html.indexOf('="Mso') > -1 + content = @content() + if content.indexOf('<!--StartFragment-->') > -1 || content.indexOf('="mso-') > -1 || content.indexOf('<o:') > -1 || content.indexOf('="Mso') > -1 # clean out all the tags from the pasted contents - cleaned = prePasteHTML.singleDiff(@html()).sanitizeHTML() + cleaned = prePasteContent.singleDiff(@content()).sanitizeHTML() try # try to undo and put the cleaned html where the selection was @document.execCommand('undo', false, null) @execCommand('insertHTML', {value: cleaned}) catch error # remove the pasted html and load up the cleaned contents into a modal - @html(prePasteHTML) + @content(prePasteContent) Mercury.modal '/mercury/modals/sanitizer', { title: 'HTML Sanitizer (Starring Clippy)', afterLoad: -> @element.find('textarea').val(cleaned.replace(/<br\/>/g, '\n')) } else if Mercury.config.cleanStylesOnPaste # strip styles - pasted = prePasteHTML.singleDiff(@html()) + pasted = prePasteContent.singleDiff(@content()) - container = $('<div>').appendTo(@document.createDocumentFragment()).html(pasted) + container = jQuery('<div>').appendTo(@document.createDocumentFragment()).html(pasted) container.find('[style]').attr({style: null}) @document.execCommand('undo', false, null) @execCommand('insertHTML', {value: container.html()}) # Custom actions (eg. things that execCommand doesn't do, or doesn't do well) @actions: { - insertrowbefore: -> Mercury.tableEditor.addRow('before') + insertRowBefore: -> Mercury.tableEditor.addRow('before') - insertrowafter: -> Mercury.tableEditor.addRow('after') + insertRowAfter: -> Mercury.tableEditor.addRow('after') - insertcolumnbefore: -> Mercury.tableEditor.addColumn('before') + insertColumnBefore: -> Mercury.tableEditor.addColumn('before') - insertcolumnafter: -> Mercury.tableEditor.addColumn('after') + insertColumnAfter: -> Mercury.tableEditor.addColumn('after') - deletecolumn: -> Mercury.tableEditor.removeColumn() + deleteColumn: -> Mercury.tableEditor.removeColumn() - deleterow: -> Mercury.tableEditor.removeRow() + deleteRow: -> Mercury.tableEditor.removeRow() - increasecolspan: -> Mercury.tableEditor.increaseColspan() + increaseColspan: -> Mercury.tableEditor.increaseColspan() - decreasecolspan: -> Mercury.tableEditor.decreaseColspan() + decreaseColspan: -> Mercury.tableEditor.decreaseColspan() - increaserowspan: -> Mercury.tableEditor.increaseRowspan() + increaseRowspan: -> Mercury.tableEditor.increaseRowspan() - decreaserowspan: -> Mercury.tableEditor.decreaseRowspan() + decreaseRowspan: -> Mercury.tableEditor.decreaseRowspan() - undo: -> @html(@history.undo()) + undo: -> @content(@history.undo()) - redo: -> @html(@history.redo()) + redo: -> @content(@history.redo()) - removeformatting: (selection) -> selection.insertTextNode(selection.textContent()) + removeFormatting: (selection) -> selection.insertTextNode(selection.textContent()) - backcolor: (selection, options) -> selection.wrap("<span style=\"background-color:#{options.value.toHex()}\">", true) + backColor: (selection, options) -> selection.wrap("<span style=\"background-color:#{options.value.toHex()}\">", true) overline: (selection) -> selection.wrap('<span style="text-decoration:overline">', true) style: (selection, options) -> selection.wrap("<span class=\"#{options.value}\">", true) - replaceHTML: (selection, options) -> @html(options.value) + replaceHTML: (selection, options) -> @content(options.value) - insertImage: (selection, options) -> @execCommand('insertHTML', {value: $('<img/>', options.value)}) + insertImage: (selection, options) -> @execCommand('insertHTML', {value: jQuery('<img/>', options.value)}) insertLink: (selection, options) -> - anchor = $("<#{options.value.tagName}>").attr(options.value.attrs).html(options.value.content) + anchor = jQuery("<#{options.value.tagName}>").attr(options.value.attrs).html(options.value.content) selection.insertNode(anchor) replaceLink: (selection, options) -> - anchor = $("<#{options.value.tagName}>").attr(options.value.attrs).html(options.value.content) + anchor = jQuery("<#{options.value.tagName}>").attr(options.value.attrs).html(options.value.content) selection.selectNode(options.node) - html = $('<div>').html(selection.content()).find('a').html() - selection.replace($(anchor, selection.context).html(html)) + html = jQuery('<div>').html(selection.content()).find('a').html() + selection.replace(jQuery(anchor, selection.context).html(html)) - insertsnippet: (selection, options) -> + insertSnippet: (selection, options) -> snippet = options.value if (existing = @element.find("[data-snippet=#{snippet.identity}]")).length selection.selectNode(existing.get(0)) selection.insertNode(snippet.getHTML(@document)) - editsnippet: -> + editSnippet: -> return unless @snippet snippet = Mercury.Snippet.find(@snippet.data('snippet')) snippet.displayOptions() - removesnippet: -> + removeSnippet: -> @snippet.remove() if @snippet Mercury.trigger('hide:toolbar', {type: 'snippet', immediately: true}) } @@ -425,15 +423,15 @@ commonAncestor: (onlyTag = false) -> return null unless @range ancestor = @range.commonAncestorContainer ancestor = ancestor.parentNode if ancestor.nodeType == 3 && onlyTag - return $(ancestor) + return jQuery(ancestor) wrap: (element, replace = false) -> - element = $(element, @context).html(@fragment) + element = jQuery(element, @context).html(@fragment) @replace(element) if replace return element textContent: -> @@ -444,28 +442,30 @@ return @range.cloneContents() is: (elementType) -> content = @content() - return $(content.firstChild) if content.childNodes.length == 1 && $(content.firstChild).is(elementType) + return jQuery(content.firstChild) if content.childNodes.length == 1 && jQuery(content.firstChild).is(elementType) return false forceSelection: (element) -> - return unless $.browser.webkit + return unless jQuery.browser.webkit range = @context.createRange() + # todo: the \00 thing breaks when using uglifier, and is escapped to "0".. it's been fixed, but isn't available yet + # https://github.com/lautis/uglifier/issues/11 if @range if @commonAncestor(true).closest('.mercury-snippet').length - lastChild = @context.createTextNode('\00') + lastChild = @context.createTextNode(' ') #\00 element.appendChild(lastChild) else if element.lastChild && element.lastChild.nodeType == 3 && element.lastChild.textContent.replace(/^[\s+|\n+]|[\s+|\n+]$/, '') == '' lastChild = element.lastChild - element.lastChild.textContent = '\00' + element.lastChild.textContent = ' ' #\00 else - lastChild = @context.createTextNode('\00') + lastChild = @context.createTextNode(' ') #\00 element.appendChild(lastChild) if lastChild range.setStartBefore(lastChild) range.setEndBefore(lastChild) @@ -487,12 +487,12 @@ placeMarker: -> return unless @range - @startMarker = $('<em class="mercury-marker"/>', @context).get(0) - @endMarker = $('<em class="mercury-marker"/>', @context).get(0) + @startMarker = jQuery('<em class="mercury-marker"/>', @context).get(0) + @endMarker = jQuery('<em class="mercury-marker"/>', @context).get(0) # put a single marker (the end) rangeEnd = @range.cloneRange() rangeEnd.collapse(false) rangeEnd.insertNode(@endMarker) @@ -506,12 +506,12 @@ @selection.removeAllRanges() @selection.addRange(@range) removeMarker: -> - $(@startMarker).remove() - $(@endMarker).remove() + jQuery(@startMarker).remove() + jQuery(@endMarker).remove() insertTextNode: (string) -> node = @context.createTextNode(string) @range.extractContents() @@ -520,11 +520,11 @@ @selection.addRange(@range) insertNode: (element) -> element = element.get(0) if element.get - element = $(element, @context).get(0) if $.type(element) == 'string' + element = jQuery(element, @context).get(0) if jQuery.type(element) == 'string' @range.deleteContents() @range.insertNode(element) @range.selectNodeContents(element) @selection.addRange(@range) @@ -536,10 +536,10 @@ @selection.addRange(@range) replace: (element) -> element = element.get(0) if element.get - element = $(element, @context).get(0) if $.type(element) == 'string' + element = jQuery(element, @context).get(0) if jQuery.type(element) == 'string' @range.deleteContents() @range.insertNode(element) @range.selectNodeContents(element) @selection.addRange(@range)