18 | <%= f.buttons do %>
19 | <%= f.commit_button 'Insert Snippet' %>
20 | <% end %>
21 |
22 |
23 | <% end %>
24 |
--------------------------------------------------------------------------------
/src/scripts/palette.coffee:
--------------------------------------------------------------------------------
1 | class @Mercury.Palette extends Mercury.Dialog
2 |
3 | constructor: (@url, @name, @options = {}) ->
4 | super
5 |
6 |
7 | build: ->
8 | @element = jQuery('', {class: "mercury-palette mercury-#{@name}-palette loading", style: 'display:none'})
9 | @element.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
10 |
11 |
12 | bindEvents: ->
13 | Mercury.bind 'hide:dialogs', (event, dialog) =>
14 | @hide() unless dialog == @
15 | super
16 |
17 |
18 | position: (keepVisible) ->
19 | @element.css({top: 0, left: 0, display: 'block', visibility: 'hidden'})
20 | position = @button.offset()
21 | width = @element.width()
22 |
23 | position.left = position.left - width + @button.width() if position.left + width > jQuery(window).width()
24 |
25 | @element.css {
26 | top: position.top + @button.height()
27 | left: position.left
28 | display: if keepVisible then 'block' else 'none'
29 | visibility: 'visible'
30 | }
31 |
--------------------------------------------------------------------------------
/src/demo/out/style.css:
--------------------------------------------------------------------------------
1 | body, td {
2 | font: normal normal normal 100%/normal 'Helvetica Neue', Helvetica, Arial, sans-serif;
3 | }
4 | h1 {
5 | color: #09F;
6 | margin: 20px 0 0 0;
7 | font-weight: 200;
8 | }
9 | h2 {
10 | font-weight: 200;
11 | margin: 15px 0 0 0;
12 | border-bottom: 1px solid #CCC;
13 | }
14 | #content {
15 | min-width: 500px;
16 | width: 70%;
17 | margin: 20px auto;
18 | }
19 | #controls {
20 | position: absolute;
21 | top: 20px;
22 | left: 20px;
23 | padding: 10px;
24 | margin: 0;
25 | border: 1px solid #999;
26 | background: rgba(255, 255, 255, 0.8);
27 | border-radius: 3px;
28 | -moz-border-radius: 3px;
29 | -webkit-border-radius: 3px;
30 | list-style-type: none;
31 | }
32 | #controls a {
33 | color: #333;
34 | text-transform: lowercase;
35 | text-decoration: none;
36 | }
37 | .mercury-snippet {
38 | background: rgba(0, 0, 0, 0.5);
39 | color: #FFF;
40 | width: 300px;
41 | height: 100px;
42 | margin: 1px 0;
43 | border-radius: 3px;
44 | -moz-border-radius: 3px;
45 | -webkit-border-radius: 3px;
46 | }
47 | #snippetable1 {
48 | float: left;
49 | width: 100%;
50 | margin-bottom: 20px;
51 | }
52 | #snippetable1 .mercury-snippet {
53 | float: left;
54 | width: 33%;
55 | border: 1px solid #000;
56 | }
--------------------------------------------------------------------------------
/src/demo/src/style.less:
--------------------------------------------------------------------------------
1 | body, td {
2 | font: normal normal normal 100%/normal 'Helvetica Neue', Helvetica, Arial, sans-serif;
3 | }
4 | h1 {
5 | color: #09F;
6 | margin: 20px 0 0 0;
7 | font-weight: 200;
8 | }
9 | h2 {
10 | font-weight: 200;
11 | margin: 15px 0 0 0;
12 | border-bottom: 1px solid #CCC;
13 | }
14 | #content {
15 | min-width: 500px;
16 | width: 70%;
17 | margin: 20px auto;
18 | }
19 | #controls {
20 | position: absolute;
21 | top: 20px;
22 | left: 20px;
23 | padding: 10px;
24 | margin: 0;
25 | border: 1px solid #999;
26 | background: rgba(255, 255, 255, 0.8);
27 | border-radius: 3px;
28 | -moz-border-radius: 3px;
29 | -webkit-border-radius: 3px;
30 | list-style-type: none;
31 | }
32 | #controls a {
33 | color: #333;
34 | text-transform: lowercase;
35 | text-decoration: none;
36 | }
37 | .mercury-snippet {
38 | background: rgba(0, 0, 0, 0.5);
39 | color: #FFF;
40 | width: 300px;
41 | height: 100px;
42 | margin: 1px 0;
43 | border-radius: 3px;
44 | -moz-border-radius: 3px;
45 | -webkit-border-radius: 3px;
46 | }
47 | #snippetable1 {
48 | float: left;
49 | width: 100%;
50 | margin-bottom: 20px;
51 | }
52 | #snippetable1 .mercury-snippet {
53 | float: left;
54 | width: 33%;
55 | border: 1px solid #000;
56 | }
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | Mercury Editor is a Coffeescript and jQuery based WYSIWYG editor.
2 |
3 | Documentation and other useful information can be found at
4 | https://github.com/jejacks0n/mercury
5 |
6 | Copyright (c) 2011 Jeremy Jackson
7 |
8 | Permission is hereby granted, free of charge, to any person obtaining
9 | a copy of this software and associated documentation files (the
10 | "Software"), to deal in the Software without restriction, including
11 | without limitation the rights to use, copy, modify, merge, publish,
12 | distribute, sublicense, and/or sell copies of the Software, and to
13 | permit persons to whom the Software is furnished to do so, subject to
14 | the following conditions:
15 |
16 | The above copyright notice and this permission notice shall be
17 | included in all copies or substantial portions of the Software.
18 |
19 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
20 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
21 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
22 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
23 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
24 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
25 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mercury",
3 | "version": "0.2.0",
4 | "description": "A fully featured HTML5 WYSIWYG editor written in CoffeeScript",
5 | "homepage": "https://github.com/balupton/mercury",
6 | "keywords": [
7 | "contenteditable",
8 | "wysiwyg",
9 | "wyriwyg",
10 | "wywiwyg"
11 | ],
12 | "author": {
13 | "name": "Jeremy Jackson",
14 | "email": "jeremy@factorylabs.com",
15 | "web": "https://github.com/jejacks0n"
16 | },
17 | "maintainers": [
18 | {
19 | "name": "Jeremy Jackson",
20 | "email": "jeremy@factorylabs.com",
21 | "web": "https://github.com/jejacks0n"
22 | },
23 | {
24 | "name": "Benjamin Lupton",
25 | "email": "b@lupton.cc",
26 | "web": "https://github.com/balupton"
27 | }
28 | ],
29 | "contributors": [
30 | {
31 | "name": "Benjamin Lupton",
32 | "email": "b@lupton.cc",
33 | "web": "https://github.com/balupton"
34 | }
35 | ],
36 | "bugs": {
37 | "web": "https://github.com/balupton/mercury/issues"
38 | },
39 | "licenses": [
40 | {
41 | "type": "MIT",
42 | "url": "http://creativecommons.org/licenses/MIT/"
43 | }
44 | ],
45 | "repository" : {
46 | "type" : "git",
47 | "url" : "http://github.com/balupton/mercury.git"
48 | },
49 | "dependencies": {
50 | "coffee-script": "=1.1.1",
51 | "buildr": "=0.6.4",
52 | "simple-server": "=0.4.0"
53 | },
54 | "engines" : {
55 | "node": ">=0.4.0"
56 | },
57 | "directories": {
58 | "lib": "src"
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/scripts/toolbar.button_group.coffee:
--------------------------------------------------------------------------------
1 | class @Mercury.Toolbar.ButtonGroup
2 |
3 | constructor: (@name, @options = {}) ->
4 | @build()
5 | @bindEvents()
6 | @regions = @options._regions
7 | return @element
8 |
9 |
10 | build: ->
11 | @element = jQuery('
', {class: "mercury-button-group mercury-#{@name}-group"})
12 | if @options._context || @options._regions
13 | @element.addClass('disabled')
14 |
15 |
16 | bindEvents: ->
17 | Mercury.bind 'region:update', (event, options) =>
18 | context = Mercury.Toolbar.ButtonGroup.contexts[@name]
19 | if context
20 | if options.region && jQuery.type(options.region.currentElement) == 'function'
21 | element = options.region.currentElement()
22 | if element.length && context.call(@, element, options.region.element)
23 | @element.removeClass('disabled')
24 | else
25 | @element.addClass('disabled')
26 |
27 | Mercury.bind 'region:focused', (event, options) =>
28 | if @regions && options.region && options.region.type
29 | if @regions.indexOf(options.region.type) > -1
30 | @element.removeClass('disabled') unless @options._context
31 | else
32 | @element.addClass('disabled')
33 |
34 | Mercury.bind 'region:blurred', (event, options) =>
35 | @element.addClass('disabled') if @options.regions
36 |
37 |
38 |
39 | # ButtonGroup contexts
40 | @Mercury.Toolbar.ButtonGroup.contexts =
41 |
42 | table: (node, region) -> !!node.closest('table', region).length
43 |
--------------------------------------------------------------------------------
/src/scripts/native_extensions.coffee:
--------------------------------------------------------------------------------
1 | String::titleize = ->
2 | @[0].toUpperCase() + @slice(1)
3 |
4 |
5 | String::toHex = ->
6 | # todo: we should handle alpha as well
7 | return @ if @[0] == '#'
8 | @replace /rgba?\((\d+)[\s|\,]?\s(\d+)[\s|\,]?\s(\d+)\)/gi, (a, r, g, b) ->
9 | "##{parseInt(r).toHex()}#{parseInt(g).toHex()}#{parseInt(b).toHex()}"
10 |
11 |
12 | String::singleDiff = (that) ->
13 | diff = ''
14 | for char, index in that
15 | break if char == 'each'
16 | if char != @[index]
17 | re = new RegExp(@substr(index).regExpEscape().replace(/^\s+|^( )+/g, '') + '$', 'm')
18 | diff = that.substr(index).replace(re, '')
19 | break
20 | return diff
21 |
22 |
23 | String::regExpEscape = ->
24 | specials = ['/','.','*','+','?','|','(',')','[',']','{','}','\\']
25 | escaped = new RegExp('(\\' + specials.join('|\\') + ')', 'g')
26 | return @replace(escaped, '\\$1')
27 |
28 |
29 | String::sanitizeHTML = ->
30 | element = jQuery('
').html(@.toString())
31 | element.find('style').remove()
32 | content = element.text()
33 | content = content.replace(/\n+/g, '
').replace(/.*/g, '').replace(/^(
)+|(
\s*)+$/g, '')
34 | return content
35 |
36 |
37 | Number::toHex = ->
38 | result = @toString(16).toUpperCase()
39 | return if result[1] then result else "0#{result}"
40 |
41 |
42 | Number::toBytes = ->
43 | bytes = parseInt(@)
44 | i = 0
45 | while 1023 < bytes
46 | bytes /= 1024
47 | i += 1
48 | return if i then "#{bytes.toFixed(2)}#{['', ' kb', ' Mb', ' Gb', ' Tb', ' Pb', ' Eb'][i]}" else "#{bytes} bytes"
49 |
--------------------------------------------------------------------------------
/src/scripts/select.coffee:
--------------------------------------------------------------------------------
1 | class @Mercury.Select extends Mercury.Dialog
2 |
3 | constructor: (@url, @name, @options = {}) ->
4 | super
5 |
6 |
7 | build: ->
8 | @element = jQuery('
', {class: "mercury-select mercury-#{@name}-select loading", style: 'display:none'})
9 | @element.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
10 |
11 |
12 | bindEvents: ->
13 | Mercury.bind 'hide:dialogs', (event, dialog) => @hide() unless dialog == @
14 |
15 | @element.mousedown (event) => event.preventDefault()
16 |
17 | super
18 |
19 |
20 | position: (keepVisible) ->
21 | @element.css({top: 0, left: 0, display: 'block', visibility: 'hidden'})
22 | position = @button.offset()
23 | elementWidth = @element.width()
24 | elementHeight = @element.height()
25 | documentHeight = jQuery(document).height()
26 |
27 | # Inline
28 | if Mercury.displayRect.height is Mercury.displayRect.fullHeight
29 | top = position.top + @button.height() - jQuery(document).scrollTop()
30 | # Iframe
31 | else
32 | top = position.top + (@button.height() / 2) - (elementHeight / 2)
33 | top = position.top - 100 if top < position.top - 100
34 | top = 20 if top < 20
35 |
36 | height = if @loaded then 'auto' else elementHeight
37 | height = documentHeight - top - 20 if top + elementHeight >= documentHeight - 20
38 |
39 | left = position.left
40 | left = left - elementWidth + @button.width() if left + elementWidth > jQuery(window).width()
41 |
42 | @element.css {
43 | top: top
44 | left: left
45 | height: height
46 | display: if keepVisible then 'block' else 'none'
47 | visibility: 'visible'
48 | }
49 |
--------------------------------------------------------------------------------
/src/scripts/tooltip.coffee:
--------------------------------------------------------------------------------
1 | @Mercury.tooltip = (forElement, content, options = {}) ->
2 | Mercury.tooltip.show(forElement, content, options)
3 | return Mercury.tooltip
4 |
5 | jQuery.extend Mercury.tooltip, {
6 |
7 | show: (@forElement, @content, @options = {}) ->
8 | @document = jQuery(@forElement.get(0).ownerDocument)
9 | @initialize()
10 | if @visible then @update() else @appear()
11 |
12 |
13 | initialize: ->
14 | return if @initialized
15 | @build()
16 | @bindEvents()
17 | @initialized = true
18 |
19 |
20 | build: ->
21 | @element = jQuery('
', {class: 'mercury-tooltip'})
22 | @element.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
23 |
24 |
25 | bindEvents: ->
26 | Mercury.bind 'resize', => @position() if @visible
27 | @document.scroll => @position() if @visible
28 | @element.mousedown (event) ->
29 | event.preventDefault()
30 | event.stopPropagation()
31 |
32 |
33 | appear: ->
34 | @update()
35 |
36 | @element.show()
37 | @element.animate {opacity: 1}, 200, 'easeInOutSine', =>
38 | @visible = true
39 |
40 |
41 | update: ->
42 | @element.html(@content)
43 | @position()
44 |
45 |
46 | position: ->
47 | offset = @forElement.offset()
48 | width = @element.width()
49 |
50 | top = offset.top + @forElement.outerHeight()
51 | left = offset.left - jQuery(@document).scrollLeft()
52 |
53 | # Iframe
54 | unless Mercury.displayRect.height is Mercury.displayRect.fullHeight
55 | top += Mercury.displayRect.top - jQuery(@document).scrollTop()
56 |
57 | left = left - (left + width + 25) - Mercury.displayRect.width if (left + width + 25) > Mercury.displayRect.width
58 | left = if left <= 0 then 0 else left
59 |
60 | @element.css {
61 | top: top
62 | left: left
63 | }
64 |
65 |
66 | hide: ->
67 | return unless @initialized
68 | @element.hide()
69 | @visible = false
70 |
71 | }
72 |
--------------------------------------------------------------------------------
/src/scripts/regions/plain.coffee:
--------------------------------------------------------------------------------
1 | class @Mercury.Regions.Plain extends @Mercury.Regions.Basic
2 | type = 'plain'
3 |
4 | constructor: (@element, @window, @options = {}) ->
5 | super
6 | @type = 'plain'
7 |
8 | execCommand: (action, options = {}) ->
9 | console.log action
10 | unless action in ['redo','undo','insertHTML']
11 | return false
12 |
13 | # use a custom handler if there's one, otherwise use execCommand
14 | if handler = Mercury.config.behaviors[action] || @actions[action]
15 | handler.call(@, @selection(), options)
16 | else
17 | sibling = @element.get(0).previousSibling if action == 'indent'
18 | options.value = jQuery('
').html(options.value).html() if action == 'insertHTML' && options.value && options.value.get
19 | try
20 | @document.execCommand(action, false, options.value)
21 | catch error
22 | # mozilla: indenting when there's no br tag handles strangely
23 | # todo: mozilla: trying to justify the first line of any contentEditable fails
24 | @element.prev().remove() if action == 'indent' && @element.prev() != sibling
25 |
26 | handlePaste: (prePasteContent) ->
27 | prePasteContent = prePasteContent.replace(/^\
/, '')
28 |
29 | # remove any regions that might have been pasted
30 | @element.find('.mercury-region').remove()
31 |
32 | # handle pasting from ms office etc
33 | content = @content()
34 |
35 | # strip styles
36 | pasted = prePasteContent.singleDiff(@content())
37 |
38 | container = jQuery('').appendTo(@document.createDocumentFragment()).html(pasted)
39 | container.find('[style]').attr({style: null})
40 |
41 | @document.execCommand('undo', false, null)
42 | @execCommand('insertHTML', {value: container.text()})
43 |
44 | # Custom actions (eg. things that execCommand doesn't do, or doesn't do well)
45 | actions: {
46 | undo: -> @content(@history.undo())
47 | redo: -> @content(@history.redo())
48 | }
49 |
--------------------------------------------------------------------------------
/src/scripts/toolbar.expander.coffee:
--------------------------------------------------------------------------------
1 | class @Mercury.Toolbar.Expander extends Mercury.Palette
2 |
3 | constructor: (@name, @options) ->
4 | @container = @options.for
5 | @containerWidth = @container.outerWidth()
6 | super(null, @name, @options)
7 | return @element
8 |
9 |
10 | build: ->
11 | @container.css({whiteSpace: 'normal'})
12 | @trigger = jQuery('
', {class: 'mercury-toolbar-expander'}).appendTo(jQuery(@options.appendTo).get(0) ? 'body')
13 | @element = jQuery('
', {class: "mercury-palette mercury-expander mercury-#{@name}-expander", style: 'display:none'})
14 | @windowResize()
15 |
16 |
17 | bindEvents: ->
18 | Mercury.bind 'hide:dialogs', (event, dialog) => @hide() unless dialog == @
19 | Mercury.bind 'resize', => @windowResize()
20 |
21 | super
22 |
23 | @trigger.click (event) =>
24 | event.stopPropagation()
25 | hiddenButtons = []
26 | for button in @container.find('.mercury-button')
27 | button = jQuery(button)
28 | hiddenButtons.push(button.data('expander')) if button.position().top > 5
29 |
30 | @loadContent(hiddenButtons.join(''))
31 | @toggle()
32 |
33 | @element.click (event) =>
34 | buttonName = jQuery(event.target).closest('[data-button]').data('button')
35 | button = @container.find(".mercury-#{buttonName}-button")
36 | button.click()
37 |
38 |
39 | windowResize: ->
40 | if @containerWidth > jQuery(window).width() then @trigger.show() else @trigger.hide()
41 | @hide()
42 |
43 |
44 | position: (keepVisible) ->
45 | @element.css({top: 0, left: 0, display: 'block', visibility: 'hidden'})
46 | position = @trigger.offset()
47 | width = @element.width()
48 |
49 | position.left = position.left - width + @trigger.width() if position.left + width > jQuery(window).width()
50 |
51 | @element.css {
52 | top: position.top + @trigger.height()
53 | left: position.left
54 | display: if keepVisible then 'block' else 'none'
55 | visibility: 'visible'
56 | }
57 |
--------------------------------------------------------------------------------
/src/scripts/dialog.coffee:
--------------------------------------------------------------------------------
1 | class @Mercury.Dialog
2 |
3 | constructor: (@url, @name, @options = {}) ->
4 | @button = @options.for
5 |
6 | @build()
7 | @bindEvents()
8 | @preload()
9 |
10 |
11 | build: ->
12 | @element = jQuery('
', {class: "mercury-dialog mercury-#{@name}-dialog loading", style: 'display:none'})
13 | @element.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
14 |
15 |
16 | bindEvents: ->
17 | @element.mousedown (event) -> event.stopPropagation()
18 |
19 |
20 | preload: ->
21 | @load() if @options.preload
22 |
23 |
24 | toggle: (element) ->
25 | if @visible then @hide() else @show()
26 |
27 |
28 | resize: ->
29 | @show()
30 |
31 |
32 | show: ->
33 | Mercury.trigger('hide:dialogs', @)
34 | @visible = true
35 | if @loaded
36 | @element.css({width: 'auto', height: 'auto'})
37 | @position(@visible)
38 | @appear()
39 | else
40 | @position()
41 | @appear()
42 |
43 |
44 | position: (keepVisible) ->
45 |
46 |
47 | appear: ->
48 | @element.css({display: 'block', opacity: 0})
49 | @element.animate {opacity: 0.95}, 200, 'easeInOutSine', =>
50 | @load(=> @resize()) unless @loaded
51 |
52 |
53 | hide: ->
54 | @element.hide()
55 | @visible = false
56 |
57 |
58 | load: (callback) ->
59 | return unless @url
60 | if Mercury.preloadedViews[@url]
61 | @loadContent(Mercury.preloadedViews[@url])
62 | Mercury.dialogHandlers[@name].call(@) if Mercury.dialogHandlers[@name]
63 | callback() if callback
64 | else
65 | jQuery.ajax @url, {
66 | success: (data) =>
67 | @loadContent(data)
68 | Mercury.dialogHandlers[@name].call(@) if Mercury.dialogHandlers[@name]
69 | callback() if callback
70 | error: =>
71 | @hide()
72 | @button.removeClass('pressed') if @button
73 | alert("Mercury was unable to load #{@url} for the #{@name} dialog.")
74 | }
75 |
76 |
77 | loadContent: (data) ->
78 | @loaded = true
79 | @element.removeClass('loading')
80 | @element.html(data)
81 |
--------------------------------------------------------------------------------
/src/scripts/snippet_toolbar.coffee:
--------------------------------------------------------------------------------
1 | class @Mercury.SnippetToolbar extends Mercury.Toolbar
2 |
3 | constructor: (@document, @options = {}) ->
4 | super(@options)
5 |
6 |
7 | build: ->
8 | @element = jQuery('
', {class: 'mercury-toolbar mercury-snippet-toolbar', style: 'display:none'})
9 | @element.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
10 |
11 | for own buttonName, options of Mercury.config.toolbars.snippetable
12 | button = @buildButton(buttonName, options)
13 | button.appendTo(@element) if button
14 |
15 |
16 | bindEvents: ->
17 | Mercury.bind 'show:toolbar', (event, options) =>
18 | return unless options.snippet
19 | options.snippet.mouseout => @hide()
20 | @show(options.snippet)
21 |
22 | Mercury.bind 'hide:toolbar', (event, options) =>
23 | return unless options.type && options.type == 'snippet'
24 | @hide(options.immediately)
25 |
26 | jQuery(@document).scroll => @position() if @visible
27 |
28 | @element.mousemove => clearTimeout(@hideTimeout)
29 | @element.mouseout => @hide()
30 |
31 |
32 | show: (@snippet) ->
33 | Mercury.tooltip.hide()
34 | @position()
35 | @appear()
36 |
37 |
38 | position: ->
39 | offset = @snippet.offset()
40 |
41 | top = offset.top + Mercury.displayRect.top - jQuery(@document).scrollTop() - @height() + 10
42 | left = offset.left - jQuery(@document).scrollLeft()
43 |
44 | @element.css {
45 | top: top
46 | left: left
47 | }
48 |
49 |
50 | appear: ->
51 | clearTimeout(@hideTimeout)
52 | return if @visible
53 | @visible = true
54 | @element.css({display: 'block', opacity: 0})
55 | @element.stop().animate({opacity: 1}, 200, 'easeInOutSine')
56 |
57 |
58 | hide: (immediately = false) ->
59 | clearTimeout(@hideTimeout)
60 | if immediately
61 | @element.hide()
62 | @visible = false
63 | else
64 | @hideTimeout = setTimeout((=>
65 | @element.stop().animate {opacity: 0}, 300, 'easeInOutSine', =>
66 | @element.hide()
67 | @visible = false
68 | ), 500)
69 |
70 |
--------------------------------------------------------------------------------
/src/scripts/modals/inserttable.coffee:
--------------------------------------------------------------------------------
1 | @Mercury.modalHandlers.insertTable = ->
2 | table = @element.find('#table_display table')
3 |
4 | # make td's selectable
5 | table.click (event) =>
6 | cell = jQuery(event.target)
7 | table = cell.closest('table')
8 | table.find('.selected').removeClass('selected')
9 | cell.addClass('selected')
10 | Mercury.tableEditor(table, cell, ' ')
11 |
12 | # select the first td
13 | firstCell = table.find('td, th').first()
14 | firstCell.addClass('selected')
15 | Mercury.tableEditor(table, firstCell, ' ')
16 |
17 | # make the buttons work
18 | @element.find('input.action').click (event) =>
19 | action = jQuery(event.target).attr('name')
20 | switch action
21 | when 'insertRowBefore' then Mercury.tableEditor.addRow('before')
22 | when 'insertRowAfter' then Mercury.tableEditor.addRow('after')
23 | when 'deleteRow' then Mercury.tableEditor.removeRow()
24 | when 'insertColumnBefore' then Mercury.tableEditor.addColumn('before')
25 | when 'insertColumnAfter' then Mercury.tableEditor.addColumn('after')
26 | when 'deleteColumn' then Mercury.tableEditor.removeColumn()
27 | when 'increaseColspan' then Mercury.tableEditor.increaseColspan()
28 | when 'decreaseColspan' then Mercury.tableEditor.decreaseColspan()
29 | when 'increaseRowspan' then Mercury.tableEditor.increaseRowspan()
30 | when 'decreaseRowspan' then Mercury.tableEditor.decreaseRowspan()
31 |
32 | # set the alignment
33 | @element.find('#table_alignment').change =>
34 | table.attr({align: @element.find('#table_alignment').val()})
35 |
36 | # set the border
37 | @element.find('#table_border').keyup =>
38 | table.attr({border: parseInt(@element.find('#table_border').val())})
39 |
40 | # set the cellspacing
41 | @element.find('#table_spacing').keyup =>
42 | table.attr({cellspacing: parseInt(@element.find('#table_spacing').val())})
43 |
44 | # build the table on form submission
45 | @element.find('form').submit (event) =>
46 | event.preventDefault()
47 | table.find('.selected').removeClass('selected')
48 | table.find('td, th').html(' ')
49 |
50 | html = jQuery('
').html(table).html()
51 | value = html.replace(/^\s+|\n/gm, '').replace(/(<\/.*?>|
||)/g, '$1\n')
52 |
53 | Mercury.trigger('action', {action: 'insertHTML', value: value})
54 | @hide()
55 |
56 |
--------------------------------------------------------------------------------
/src/scripts/editors/inline.coffee:
--------------------------------------------------------------------------------
1 | class @Mercury.InlineEditor extends @Mercury.Editor
2 |
3 | # options
4 | # saveStyle: 'form', or 'json' (defaults to json)
5 | # ignoredLinks: an array containing classes for links to ignore (eg. lightbox or accordian controls)
6 | constructor: (@saveUrl = null, @options = {}) ->
7 | super
8 |
9 | throw "Mercury.PageEditor is unsupported in this client. Supported browsers are chrome 10+, firefix 4+, and safari 5+." unless Mercury.supported
10 | throw "Mercury.PageEditor can only be instantiated once." if window.mercuryInstance
11 |
12 | window.mercuryInstance = @
13 | @regions = []
14 | @initializeInterface()
15 | Mercury.csrfToken = token if token = $('meta[name="csrf-token"]').attr('content')
16 |
17 | $ ->
18 | $('body').createPromiseEvent('mercury-ready').trigger('mercury-ready')
19 |
20 | initializeInterface: ->
21 | super
22 |
23 | @initializeEditor()
24 |
25 | initializeEditor: ->
26 | super
27 |
28 | @document = $(document)
29 | @toolbar = new Mercury.Toolbar(@options)
30 | @statusbar = new Mercury.Statusbar(@options)
31 |
32 | $('body').addClass('mercury-inline').addClass('mercury-hidden')
33 |
34 | $("
138 |
139 | image next to content wrapped in an anchor
140 | 
link for #bookmark1
141 |
142 | snippet that's pre-loaded
143 | snippet1
144 |
145 | bookmark links
146 | Bookmark1
Bookmark2
147 |
148 |
149 | Additional content not wrapped in anything
150 |
151 | youtube and vimeo iframes with content surrounding it
152 | 123123321
153 | 123
154 |
155 |
156 | Markupable region (with markdown)
157 |
158 | ## notes ##
159 | **whitespace** in markupable regions is _important_.
160 |
161 | ## ordered list ##
162 | 1. list item 1
163 | 2. list item 2
164 |
165 | ## unordered list ##
166 | - list item 1
167 | - list item 2
168 |
169 | ## horizontal rule ##
170 | - - -
171 |
172 | ## anchor ##
173 | [this is a link](foo 'optional title')
174 |
175 | ## image ##
176 | 
177 |
178 | ## snippet that's pre-loaded ##
179 | [--snippet_2--]
180 |
181 | ## code ##
182 |
this html will not be escaped
183 | and whitespace will be retained
184 |
185 | ## blockquote ##
186 | > this is indented one level
187 |
188 | ## paragraph with bold, italics, etc. ##
189 | Turkey corned beef ham, chuck ham hock **venison _drumstick_ ** tongue ribeye. Beef tongue pancetta, short ribs meatball headcheese jowl bacon swine t-bone shoulder venison. Hamburger short loin turkey flank short ribs tail. Chicken tri-tip sausage, bresaola sirloin turkey hamburger
headcheese shank rump. Pork ground round t-bone, ham hock sirloin biltong chicken fatback pork belly pastrami pancetta jowl tail. Cow ribeye pork chop, flank sirloin tail short loin pork loin chicken boudin pastrami. Boudin chuck shankle, spare ribs pancetta
fatback bresaola.
190 |
Snippetable region
193 |
194 |
snippet3
195 |
snippet4
196 |
snippet5
197 |
snippet6
198 |
snippet7
199 |
snippet8
200 |
snippet9
201 |
snippet10
202 |
Editable region (single snippet and no content)
205 |
208 |
209 | Editable region (fixed width/height and overflow)
210 |
211 | wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
212 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
213 |
214 |
215 | Snippetable region (iframe snippet that contains flash)
216 |
217 |
snippet12
218 |
snippet13
219 |
220 |
8 |