dante-editor-seo 0.0.13

data/app/assets/javascripts/dante/tooltip_widgets/uploader.js.coffee

@@ -0,0 +1,248 @@
+utils = Dante.utils
+
+class Dante.View.TooltipWidget.Uploader extends Dante.View.TooltipWidget
+
+  initialize: (opts={})->
+    #super
+    #@name        = "menu-image"
+    @icon        = opts.icon  || "icon-image"
+    @title       = opts.title || "Add an image"
+    @action      = opts.action || "menu-image"
+    @current_editor = opts.current_editor
+
+  handleClick: (ev)->
+    @imageSelect(ev)
+
+  insertTemplate: ()->
+    "<figure contenteditable='false' class='graf graf--figure is-defaultValue' name='#{utils.generateUniqueName()}' tabindex='0'>
+      <div style='' class='aspectRatioPlaceholder is-locked'>
+        <div style='padding-bottom: 100%;' class='aspect-ratio-fill'></div>
+        <img src='' data-height='' data-width='' data-image-id='' class='graf-image' data-delayed-src=''>
+      </div>
+      <figcaption contenteditable='true' data-default-value='Type caption for image (optional)' class='imageCaption'>
+        <span class='defaultValue'>Type caption for image (optional)</span>
+        <br>
+      </figcaption>
+    </figure>"
+
+  #UPLOADER
+  #replace existing img tag , and wrap it in insertTamplate
+  #TODO: take the url and upload it
+  uploadExistentImage: (image_element, opts = {})->
+
+    utils.log ("process image here!")
+    tmpl = $(@insertTemplate())
+    tmpl.find("img").attr('src', @current_editor.default_loading_placeholder )
+    #is a child element or a first level element ?
+
+    if $(image_element).parents(".graf").length > 0
+      #return if its already wrapped in graf--figure
+      if $(image_element).parents(".graf").hasClass("graf--figure")
+        return
+      utils.log "UNO"
+      tmpl.insertBefore( $(image_element).parents(".graf") )
+      node = @current_editor.getNode()
+      if node
+        @current_editor.preCleanNode($(node))
+        @current_editor.addClassesToElement(node)
+    else
+      utils.log "DOS"
+      img = $(image_element).parentsUntil(".section-inner").first()
+      $(img).replaceWith(tmpl)
+
+    utils.log $("[name='#{tmpl.attr('name')}']").attr("name")
+    @replaceImg(image_element, $("[name='#{tmpl.attr('name')}']"))
+
+    #in case we found that graf--image is nested element, unwrap * nested times
+    n = $("[name='#{tmpl.attr('name')}']").parentsUntil(".section-inner").length
+    unless n is 0
+      for i in [0..n-1] by 1
+        $("[name='#{tmpl.attr('name')}']").unwrap()
+
+    utils.log "FIG"
+    #utils.log $("[name='#{tmpl.attr('name')}']").attr("name")
+
+  replaceImg: (image_element, figure)->
+    utils.log figure.attr("name")
+    utils.log figure
+    $(image_element).remove()
+    img = new Image()
+    img.src = image_element.src
+    self = this
+    img.onload = ()->
+      utils.log "replace image with loaded info"
+      utils.log figure.attr("name")
+      utils.log(this.width + 'x' + this.height);
+
+      ar = self.getAspectRatio(this.width, this.height)
+      #debugger
+      figure.find(".aspectRatioPlaceholder").css
+        'max-width': ar.width
+        'max-height': ar.height
+
+      figure.find(".graf-image").attr
+        "data-height": this.height
+        "data-width": this.width
+
+      figure.find(".aspect-ratio-fill").css
+        "padding-bottom": "#{ar.ratio}%"
+
+      #TODO: upload file to server
+      #@uploadFile file, replaced_node
+
+      figure.find("img").attr("src", image_element.src)
+
+  displayAndUploadImages: (file)->
+    @displayCachedImage file
+
+  imageSelect: (ev)->
+    $selectFile = $('<input type="file" multiple="multiple">').click()
+    self = @
+    $selectFile.change ()->
+      t = this
+      self.uploadFiles(t.files)
+
+  displayCachedImage: (file)->
+    @current_editor.tooltip_view.hide()
+
+    reader = new FileReader()
+    reader.onload = (e)=>
+      img = new Image
+      img.src = e.target.result
+      node = @current_editor.getNode()
+      self = this
+      img.onload = ()->
+        new_tmpl = $(self.insertTemplate())
+
+        replaced_node = $( new_tmpl ).insertBefore($(node))
+
+        img_tag = new_tmpl.find('img.graf-image').attr('src', e.target.result)
+        img_tag.height = this.height
+        img_tag.width  = this.width
+
+        utils.log "UPLOADED SHOW FROM CACHE"
+
+        ar = self.getAspectRatio(this.width, this.height)
+
+        replaced_node.find(".aspectRatioPlaceholder").css
+          'max-width': ar.width
+          'max-height': ar.height
+
+        replaced_node.find(".graf-image").attr
+          "data-height": this.height
+          "data-width": this.width
+
+        replaced_node.find(".aspect-ratio-fill").css
+          "padding-bottom": "#{ar.ratio}%"
+
+        self.uploadFile file, replaced_node
+
+    reader.readAsDataURL(file)
+
+  getAspectRatio: (w , h)->
+    maxWidth = 700
+    maxHeight = 700
+    ratio = 0
+    width = w # Current image width
+    height = h # Current image height
+
+    # Check if the current width is larger than the max
+    if width > maxWidth
+      ratio = maxWidth / width # get ratio for scaling image
+      height = height * ratio # Reset height to match scaled image
+      width = width * ratio # Reset width to match scaled image
+
+    # Check if current height is larger than max
+    else if height > maxHeight
+      ratio = maxHeight / height # get ratio for scaling image
+      width = width * ratio # Reset width to match scaled image
+      height = height * ratio # Reset height to match scaled image
+
+    fill_ratio = height / width * 100
+    result = { width: width, height: height, ratio: fill_ratio }
+    utils.log result
+    result
+
+  formatData: (file, upload_params)->
+    formData = new FormData()
+    formData.append('file', file)
+    formData.append('upload_params', upload_params)
+    return formData
+
+  uploadFiles: (files)=>
+    acceptedTypes =
+      "image/png": true
+      "image/jpeg": true
+      "image/gif": true
+
+    i = 0
+    while i < files.length
+      file = files[i]
+      if acceptedTypes[file.type] is true
+        $(@placeholder).append "<progress class=\"progress\" min=\"0\" max=\"100\" value=\"0\">0</progress>"
+        @displayAndUploadImages(file)
+      i++
+
+  uploadFile: (file, node)=>
+    n = node
+    handleUp = (jqxhr)=>
+      @uploadCompleted jqxhr, n
+
+    $.ajax
+      type: "post"
+      url: @current_editor.upload_url
+      xhr: =>
+        xhr = new XMLHttpRequest()
+        xhr.upload.onprogress = @updateProgressBar
+        xhr
+      cache: false
+      contentType: false
+
+      success: (response) =>
+        response = @current_editor.upload_callback(response) if @current_editor.upload_callback
+        handleUp(response)
+        return
+      error: (jqxhr)=>
+        utils.log("ERROR: got error uploading file #{jqxhr.responseText}")
+
+      processData: false
+      data: @formatData(file, @upload_params)
+
+  updateProgressBar: (e)=>
+    $progress = $('.progress:first', this.$el)
+    complete = ""
+
+    if (e.lengthComputable)
+      complete = e.loaded / e.total * 100
+      complete = complete ? complete : 0
+      #$progress.attr('value', complete)
+      #$progress.html(complete)
+      utils.log "complete"
+      utils.log complete
+
+  uploadCompleted: (url, node)=>
+    node.find("img").attr("src", url)
+    #return false
+
+  ###
+  # Handles the behavior of deleting images when using the backspace key
+  #
+  # @param {Event} e    - The backspace event that is being handled
+  # @param {Node}  node - The node the backspace was used in, assumed to be from te editor's getNode() function
+  #
+  # @return {Boolean} true if this function handled the backspace event, otherwise false
+  ###
+  handleBackspaceKey: (e, node) =>
+
+    #remove graf figure is is selected but not in range (not focus on caption)
+    if $(".is-selected").hasClass("graf--figure") && !anchor_node?
+      utils.log("Replacing selected node")
+      @current_editor.replaceWith("p", $(".is-selected"))
+
+      e.preventDefault() #without this line, the browser may interpret the backspace as a "go pack a page" command
+      
+      @current_editor.setRangeAt($(".is-selected")[0])
+      return true
+
+    return false
+  

data/app/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/app/assets/javascripts/dante/view.js.coffee

@@ -0,0 +1,101 @@
+#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]
+
+
+# Helper function to correctly set up the prototype chain, for subclasses.
+# Similar to `goog.inherits`, but uses a hash of prototype properties and
+# class properties to be extended.
+
+# This is borrowed from Backbone .extend function
+
+extend = (protoProps, staticProps) ->
+  parent = this
+  child = undefined
+  # The constructor function for the new subclass is either defined by you
+  # (the "constructor" property in your `extend` definition), or defaulted
+  # by us to simply call the parent's constructor.
+  if protoProps and _.has(protoProps, 'constructor')
+    child = protoProps.constructor
+  else
+
+    child = ->
+      parent.apply this, arguments
+
+  # Add static properties to the constructor function, if supplied.
+  _.extend child, parent, staticProps
+  # Set the prototype chain to inherit from `parent`, without calling
+  # `parent`'s constructor function.
+
+  Surrogate = ->
+    @constructor = child
+    return
+
+  Surrogate.prototype = parent.prototype
+  child.prototype = new Surrogate
+  # Add prototype properties (instance properties) to the subclass,
+  # if supplied.
+  if protoProps
+    _.extend child.prototype, protoProps
+  # Set a convenience property in case the parent's prototype is needed
+  # later.
+  child.__super__ = parent.prototype
+  child
+
+  #Set up inheritance for the model, collection, router, view and history.
+  #Dante.View.extend = utils.extend;
+
+Dante.View.extend = extend

data/app/assets/javascripts/dante.js

@@ -0,0 +1,12 @@
+//Editor components
+//= require dante/dante
+//= require dante/utils
+//= require dante/view
+//= require dante/editor
+//= require dante/tooltip_widget
+//= require dante/tooltip_widgets/uploader
+//= require dante/tooltip_widgets/embed
+//= require dante/tooltip_widgets/extract
+//= require dante/tooltip
+//= require dante/popover
+//= require dante/menu

data/app/assets/stylesheets/dante/_animations.scss

@@ -0,0 +1,54 @@
+@-webkit-keyframes pop-upwards {
+  0% {
+    -webkit-transform: matrix(.97, 0, 0, 1, 0, 12);
+            transform: matrix(.97, 0, 0, 1, 0, 12);
+    opacity: 0;
+  }
+  20% {
+    -webkit-transform: matrix(.99, 0, 0, 1, 0, 2);
+            transform: matrix(.99, 0, 0, 1, 0, 2);
+    opacity: .7;
+  }
+  40% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
+            transform: matrix(1, 0, 0, 1, 0, -1);
+    opacity: 1;
+  }
+  70% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
+            transform: matrix(1, 0, 0, 1, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
+            transform: matrix(1, 0, 0, 1, 0, 0);
+    opacity: 1;
+  }
+}
+@keyframes pop-upward {
+  0% {
+    -webkit-transform: matrix(.97, 0, 0, 1, 0, 12);
+            transform: matrix(.97, 0, 0, 1, 0, 12);
+    opacity: 0;
+  }
+  20% {
+    -webkit-transform: matrix(.99, 0, 0, 1, 0, 2);
+            transform: matrix(.99, 0, 0, 1, 0, 2);
+    opacity: .7;
+  }
+  40% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
+            transform: matrix(1, 0, 0, 1, 0, -1);
+    opacity: 1;
+  }
+  70% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
+            transform: matrix(1, 0, 0, 1, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
+            transform: matrix(1, 0, 0, 1, 0, 0);
+    opacity: 1;
+  }
+}

data/app/assets/stylesheets/dante/_caption.scss

@@ -0,0 +1,52 @@
+.imageCaption {
+  & {
+    position: absolute;
+    left: -172px;
+    width: 150px;
+    top: 0;
+    text-align: right;
+    margin-top: 0;
+    font-family: "freight-text-pro",Georgia,Cambria,"Times New Roman",Times,serif;
+    letter-spacing: 0.01rem;
+    font-weight: 400;
+    font-style: italic;
+    font-size: 14px;
+    line-height: 1.4;
+    color: rgba(0,0,0,0.6);
+    outline: 0;
+    z-index: 300;
+  }
+  &:before {
+    width: 25%;
+    margin-left: 75%;
+    border-top: 1px solid rgba(0,0,0,0.15);
+    display: block;
+    content: "";
+    margin-bottom: 10px;
+  }
+}
+@media (max-width: 1200px) {
+  .imageCaption,
+  .postField--outsetCenterImage > .imageCaption {
+    position: relative;
+    width: 100%;
+    text-align: center;
+    left: 0;
+    margin-top: 10px;
+  }
+  .imageCaption:before {
+    display: none;
+  }
+}
+
+figure.is-defaultValue .imageCaption,
+.graf--sectionCaption.is-defaultValue {
+  display: none;
+}
+
+.graf--figure.is-mediaFocused .imageCaption,
+.graf--figure.is-defaultValue.is-selected .imageCaption,
+section.is-mediaFocused .graf--sectionCaption,
+.graf--sectionCaption.is-defaultValue.is-selected {
+  display: block;
+}