dante-editor 0.0.1

data/source/assets/javascripts/dante/utils.js.coffee

@@ -0,0 +1,235 @@
+String.prototype.killWhiteSpace = ()->
+  this.replace(/\s/g, '')
+
+String.prototype.reduceWhiteSpace = ()->
+  this.replace(/\s+/g, ' ')
+
+utils = {}
+window.Dante.utils = utils
+
+utils.log = (message, force) ->
+  if (window.debugMode || force)
+    #console.log('%cDANTE DEBUGGER: %c' + message, 'font-family:arial,sans-serif;color:#1abf89;line-height:2em;', 'font-family:cursor,monospace;color:#333;');
+    #console.log('%cDANTE DEBUGGER: %c', 'font-family:arial,sans-serif;color:#1abf89;line-height:2em;', 'font-family:cursor,monospace;color:#333;');
+    console.log( message );
+
+utils.getBase64Image = (img) ->
+  canvas = document.createElement("canvas")
+  canvas.width = img.width
+  canvas.height = img.height
+  ctx = canvas.getContext("2d")
+  ctx.drawImage img, 0, 0
+  dataURL = canvas.toDataURL("image/png")
+
+  # escape data:image prefix
+  # dataURL.replace /^data:image\/(png|jpg);base64,/, ""
+
+  # or just return dataURL
+  return dataURL
+
+utils.generateUniqueName = ()->
+  Math.random().toString(36).slice(8)
+
+#http://stackoverflow.com/questions/5605401/insert-link-in-contenteditable-element
+utils.saveSelection = ()->
+  if window.getSelection
+    sel = window.getSelection()
+    if sel.getRangeAt and sel.rangeCount
+      ranges = []
+      i = 0
+      len = sel.rangeCount
+
+      while i < len
+        ranges.push sel.getRangeAt(i)
+        ++i
+      return ranges
+  else return document.selection.createRange()  if document.selection and document.selection.createRange
+  null
+
+utils.restoreSelection = (savedSel) ->
+  if savedSel
+    if window.getSelection
+      sel = window.getSelection()
+      sel.removeAllRanges()
+      i = 0
+      len = savedSel.length
+
+      while i < len
+        sel.addRange savedSel[i]
+        ++i
+    else savedSel.select()  if document.selection and savedSel.select
+  return
+
+utils.getNode = ()->
+  range = undefined
+  sel = undefined
+  container = undefined
+  if document.selection and document.selection.createRange
+
+    # IE case
+    range = document.selection.createRange()
+    range.parentElement()
+  else if window.getSelection
+    sel = window.getSelection()
+    if sel.getRangeAt
+      range = sel.getRangeAt(0)  if sel.rangeCount > 0
+    else
+
+      # Old WebKit selection object has no getRangeAt, so
+      # create a range from other selection properties
+      range = document.createRange()
+      range.setStart sel.anchorNode, sel.anchorOffset
+      range.setEnd sel.focusNode, sel.focusOffset
+
+      # Handle the case when the selection was selected backwards (from the end to the start in the document)
+      if range.collapsed isnt sel.isCollapsed
+        range.setStart sel.focusNode, sel.focusOffset
+        range.setEnd sel.anchorNode, sel.anchorOffset
+    if range
+      container = range.commonAncestorContainer
+
+      # Check if the container is a text node and return its parent if so
+      (if container.nodeType is 3 then container.parentNode else container)
+
+#http://stackoverflow.com/questions/12603397/calculate-width-height-of-the-selected-text-javascript
+utils.getSelectionDimensions = ->
+  sel = document.selection
+  range = undefined
+  width = 0
+  height = 0
+  left = 0
+  top = 0
+  if sel
+    unless sel.type is "Control"
+      range = sel.createRange()
+      width = range.boundingWidth
+      height = range.boundingHeight
+  else if window.getSelection
+    sel = window.getSelection()
+    if sel.rangeCount
+      range = sel.getRangeAt(0).cloneRange()
+      if range.getBoundingClientRect
+        rect = range.getBoundingClientRect()
+        width = rect.right - rect.left
+        height = rect.bottom - rect.top
+
+  width: width
+  height: height
+  top: rect.top
+  left: rect.left
+
+#http://stackoverflow.com/questions/3972014/get-caret-position-in-contenteditable-div
+utils.getCaretPosition = (editableDiv) ->
+  caretPos = 0
+  containerEl = null
+  sel = undefined
+  range = undefined
+  if window.getSelection
+    sel = window.getSelection()
+    if sel.rangeCount
+      range = sel.getRangeAt(0)
+      caretPos = range.endOffset  if range.commonAncestorContainer.parentNode is editableDiv
+  else if document.selection and document.selection.createRange
+    range = document.selection.createRange()
+    if range.parentElement() is editableDiv
+      tempEl = document.createElement("span")
+      editableDiv.insertBefore tempEl, editableDiv.firstChild
+      tempRange = range.duplicate()
+      tempRange.moveToElementText tempEl
+      tempRange.setEndPoint "EndToEnd", range
+      caretPos = tempRange.text.length
+  caretPos
+
+#http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
+utils.isElementInViewport = (el) ->
+  #special bonus for those using jQuery
+  el = el[0]  if typeof jQuery is "function" and el instanceof jQuery
+  rect = el.getBoundingClientRect()
+  #or $(window).height()
+  rect.top >= 0 and rect.left >= 0 and rect.bottom <= (window.innerHeight or document.documentElement.clientHeight) and rect.right <= (window.innerWidth or document.documentElement.clientWidth) #or $(window).width()
+
+#http://brianmhunt.github.io/articles/taming-contenteditable/
+
+LINE_HEIGHT = 20
+
+is_caret_at_start_of_node = (node, range) ->
+  # See: http://stackoverflow.com/questions/7451468
+  pre_range = document.createRange()
+  pre_range.selectNodeContents(node)
+  pre_range.setEnd(range.startContainer, range.startOffset)
+  return pre_range.toString().trim().length == 0
+
+is_caret_at_end_of_node = (node, range) ->
+  post_range = document.createRange()
+  post_range.selectNodeContents(node)
+  post_range.setStart(range.endContainer, range.endOffset)
+  return post_range.toString().trim().length == 0
+
+$.fn.editableIsCaret = ->
+  return window.getSelection().type == 'Caret'
+  # alt test:
+  # return sel.rangeCount == 1 and sel.getRangeAt(0).collapsed
+
+$.fn.editableRange = ->
+  # Return the range for the selection
+  sel = window.getSelection()
+  return unless sel.rangeCount > 0
+  return sel.getRangeAt(0)
+
+$.fn.editableCaretRange = ->
+  return unless @editableIsCaret()
+  return @editableRange()
+
+$.fn.editableSetRange = (range) ->
+  sel = window.getSelection()
+  sel.removeAllRanges() if sel.rangeCount > 0
+  sel.addRange(range)
+
+$.fn.editableFocus = (at_start=true) ->
+  return unless @attr('contenteditable')
+  sel = window.getSelection()
+  sel.removeAllRanges() if sel.rangeCount > 0
+  range = document.createRange()
+  range.selectNodeContents(@[0])
+  range.collapse(at_start)
+  sel.addRange(range)
+
+$.fn.editableCaretAtStart = ->
+  range = @editableRange()
+  return false unless range
+  return is_caret_at_start_of_node(@[0], range)
+
+$.fn.editableCaretAtEnd = ->
+  range = @editableRange()
+  return false unless range
+  return is_caret_at_end_of_node(@[0], range)
+
+$.fn.editableCaretOnFirstLine = ->
+  range = @editableRange()
+  return false unless range
+  # At the start of a node, the getClientRects() is [], so we have to
+  # use the getBoundingClientRect (which seems to work).
+  if is_caret_at_start_of_node(@[0], range)
+    return true
+  else if is_caret_at_end_of_node(@[0], range)
+    ctop = @[0].getBoundingClientRect().bottom - LINE_HEIGHT
+  else
+    ctop = range.getClientRects()[0].top
+  etop = @[0].getBoundingClientRect().top
+  return ctop < etop + LINE_HEIGHT
+
+$.fn.editableCaretOnLastLine = ->
+  range = @editableRange()
+  return false unless range
+  if is_caret_at_end_of_node(@[0], range)
+    return true
+  else if is_caret_at_start_of_node(@[0], range)
+    # We are on the first line.
+    cbtm = @[0].getBoundingClientRect().top + LINE_HEIGHT
+  else
+    cbtm = range.getClientRects()[0].bottom
+  ebtm = @[0].getBoundingClientRect().bottom
+  return cbtm > ebtm - LINE_HEIGHT
+
+$.fn.exists = ->
+  @.length > 0

data/source/assets/javascripts/dante/view.js.coffee

@@ -0,0 +1,56 @@
+#a very light backbone.view like version
+
+class Dante.View
+
+  constructor: (opts = {})->
+    @el = opts.el if opts.el
+    @._ensureElement()
+    @initialize.apply(@, arguments)
+    @._ensureEvents()
+
+  initialize: (opts={})->
+
+  events: ->
+
+  render: ()->
+    return @
+
+  remove: ()->
+    @._removeElement()
+    @.stopListening()
+    return @
+
+  _removeElement: ()->
+    @.$el.remove();
+
+  setElement: (element)->
+    #@.undelegateEvents()
+    @._setElement(element)
+    #@.delegateEvents()
+    return @
+
+  setEvent: (opts)->
+    if !_.isEmpty(opts)
+      _.each opts, (f, key)=>
+        key_arr = key.split(" ")
+
+        if _.isFunction(f)
+          func =  f
+        else if _.isString(f)
+          func = @[f]
+        else
+          throw "error event needs a function or string"
+
+        element = if key_arr.length > 1 then key_arr.splice(1 , 3).join(" ") else null
+
+        $( @el ).on( key_arr[0], element, _.bind(func, this) )
+
+  _ensureElement: ()->
+    @.setElement(_.result(@, 'el'))
+
+  _ensureEvents: ()->
+    @.setEvent(_.result(@, 'events'))
+
+  _setElement: (el)->
+    @.$el = if el instanceof $ then el else $(el)
+    @.el = @.$el[0]

data/source/assets/javascripts/deps.js

@@ -0,0 +1,4 @@
+//TODO: move dependencies to another file
+//= require jquery/dist/jquery.js
+//= require sanitize.js/lib/sanitize.js
+//= require underscore/underscore.js

data/source/assets/javascripts/spec.js

@@ -0,0 +1,2 @@
+
+//= require_tree ./specs

data/source/assets/javascripts/specs/cleaner.js.coffee

@@ -0,0 +1,8 @@
+window.editor = new Dante.Editor
+  upload_url: "/images.json"
+  el: "#editor1"
+
+window.editor.start()
+
+QUnit.test "should initialize editor", ( assert )->
+  assert.ok( _.isObject(window.editor), "Passed!" )

data/source/assets/javascripts/specs/dante_view.js.coffee

@@ -0,0 +1,74 @@
+
+class TestView extends Dante.View
+
+class TestViewWithEl extends Dante.View
+  el: "#view"
+  initialize: ()->
+    @model = {foo: "bar"}
+    super
+
+class TestViewWithEvents extends Dante.View
+  el: "#view"
+  initialize: ->
+    @one = false
+    @two = false
+    @some_var = 1
+
+  events:
+    "click" : (ev)->
+      console.log("CLICKED ANYWHERE")
+      @anywhere = true
+      return false
+
+    "click .one" : (ev)->
+      @one = true
+      console.log("CLICKED .one YEAH, #{@one}")
+      return false
+
+    "click .two" : "handleClickTwo"
+
+  handleClickTwo: (ev)->
+    @two = true
+    console.log("CLICKED .two YEAH, #{@two}")
+    console.log(ev.currentTarget)
+
+    return false
+
+class TestViewOpts extends Dante.View
+  el: "#view"
+  initialize: (opts={})->
+
+    @model = opts.model
+
+window.view = new TestView
+
+window.view2 = new TestView(el: "#view")
+window.view3 = new TestViewWithEl
+
+window.event_view = new TestViewWithEvents
+window.opts_view = new TestViewOpts(model: 1234)
+
+QUnit.test "should initialize view without el", ( assert )->
+  assert.ok( _.isObject(view), "Passed!" )
+  assert.ok( _.isUndefined(view.el), "Passed!" )
+
+QUnit.test "should initialize view with el", ( assert )->
+  assert.ok( _.isElement(view2.el), "Passed!" )
+  assert.ok( _.isElement(view3.el), "Passed!" )
+
+QUnit.test "should initialize view with @model", ( assert )->
+  assert.ok( !_.isEmpty(view3.model), "Passed!" )
+
+QUnit.test "should set variable on click", ( assert )->
+  event_view.$el.find("a.one").trigger("click")
+  event_view.$el.find("a.two").trigger("click")
+  assert.ok( event_view.one, "Passed!" )
+  assert.ok( event_view.two, "Passed!" )
+
+QUnit.test "should set vars on initialize", ( assert )->
+  assert.ok( event_view.some_var is 1, "Passed!" )
+
+QUnit.test "should set windows.vars on initialize", ( assert )->
+  assert.ok( opts_view.model is 1234 , "Passed!" )
+
+

data/source/assets/javascripts/specs/editor.js.coffee

@@ -0,0 +1,57 @@
+
+
+window.editor = new Dante.Editor
+  upload_url: "/images.json"
+  el: "#editor1"
+
+window.editor.start()
+
+window.editor2 = new Dante.Editor
+  el: "#editor2"
+
+window.editor2.start()
+
+
+
+QUnit.test "should initialize editor", ( assert )->
+  assert.ok( _.isObject(window.editor), "Passed!" )
+
+QUnit.test "should init editor defaults", ( assert )->
+  assert.ok( !_.isEmpty(window.editor.title_placeholder), "Passed!" )
+  assert.ok( !_.isEmpty(window.editor.body_placeholder), "Passed!" )
+  assert.ok( !_.isEmpty(window.editor.embed_placeholder), "Passed!" )
+  assert.ok( !_.isEmpty(window.editor.extract_placeholder), "Passed!" )
+
+  assert.ok( !_.isEmpty(window.editor.upload_url), "Passed!" )
+  assert.ok( !_.isEmpty(window.editor.oembed_url), "Passed!" )
+  assert.ok( !_.isEmpty(window.editor.extract_url), "Passed!" )
+
+QUnit.test "should init editor", ( assert )->
+  assert.ok( !_.isEmpty(window.editor), "Passed!" )
+  assert.ok( _.isObject(window.editor.tooltip_view), "Passed!" )
+  assert.ok( _.isObject(window.editor.editor_menu), "Passed!" )
+
+QUnit.test "should build tooltip & menu", ( assert )->
+  assert.ok( !_.isEmpty( $(".inlineTooltip2") ), "Passed!" )
+  assert.ok( !_.isEmpty( $("#editor-menu") ), "Passed!" )
+
+QUnit.test "should display placeholders when empty content", (assert)->
+  assert.ok $(editor.el).find("span.defaultValue").length is 2 , "Passed!"
+
+##CLEANER
+
+QUnit.test "should clean spans", (assert)->
+  assert.ok !$(editor2.el).find("a:first span").exists(), "Passed!"
+  assert.ok !$(editor2.el).find(".section-inner div.class").exists(), "Passed!"
+  assert.ok !$(editor2.el).find(".section-inner span:not(.defaultValue)").exists(), "Passed!"
+  assert.ok !$(editor2.el).find(".section-inner p span").exists() , "Passed!"
+
+QUnit.test "should detect existing images", (assert)->
+  fig = $(editor2.el).find(".section-inner figure")
+
+  assert.ok $(fig).exists() , "generate figure.graf--figure"
+  assert.ok $(fig).find("img").exists() , "figure have image"
+  assert.ok !_.isEmpty($(fig).find("img").attr('src')) , "and image src"
+
+  assert.ok $(fig).find("figcaption").exists() , "and caption"
+  assert.ok $(fig).find("figcaption span.defaultValue").exists() , "and caption span"

data/source/assets/stylesheets/all.css.scss

@@ -0,0 +1,4 @@
+@charset "utf-8";
+
+@import "normalize";
+@import "dante";