dante-editor 0.0.3 → 0.0.4

data/app/assets/javascripts/dante/menu.js.coffee

@@ -5,7 +5,7 @@ class Dante.Editor.Menu extends Dante.View
 
   events:
     "mousedown li" : "handleClick"
-    #"click .dante-icon" : "handleClick"
+    "click .dante-menu-linkinput .dante-menu-button": "closeInput"
     "mouseenter" : "handleOver"
     "mouseleave" : "handleOut"
     "keypress input": "handleInputEnter"
@@ -69,6 +69,10 @@ class Dante.Editor.Menu extends Dante.View
 
     return false
 
+  closeInput: (e)->
+    $(@el).removeClass("dante-menu--linkmode")
+    false
+
   handleInputEnter: (e)=>
     if (e.which is 13)
       utils.restoreSelection(@savedSel)
@@ -123,6 +127,7 @@ class Dante.Editor.Menu extends Dante.View
       if $(n).parent().hasClass("section-inner")
         n = @current_editor.addClassesToElement(n)
         @current_editor.setElementName(n)
+      @current_editor.handleTextSelection(n)
     else
       utils.log "fail" + message, true
     return
@@ -151,7 +156,7 @@ class Dante.Editor.Menu extends Dante.View
     el = el or @current_editor.$el[0]
     while el isnt @current_editor.$el[0]
       if el.nodeName.match(@effectNodeReg)
-        nodes.push (if returnAsNodeName then el.nodeName.toUpperCase() else el)
+        nodes.push (if returnAsNodeName then el.nodeName.toLowerCase() else el)
       el = el.parentNode
     nodes
 
@@ -189,6 +194,12 @@ class Dante.Editor.Menu extends Dante.View
           tag = "indent"
           utils.log "nothing to select"
 
+      if tag.match /(?:h[1-6])/i
+        $(@el).find(".icon-bold, .icon-italic, .icon-blockquote")
+        .parent("li").remove()
+        #.parent("li").hide()
+        #.addClass("hidden")
+
       @highlight(tag)
 
   highlight: (tag)->

data/app/assets/javascripts/dante/tooltip.js.coffee

@@ -36,7 +36,7 @@ class Dante.Editor.Tooltip extends Dante.View
     "<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='375' data-width='600' data-image-id='' class='graf-image' data-delayed-src=''>
+        <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>
@@ -74,6 +74,7 @@ class Dante.Editor.Tooltip extends Dante.View
   toggleOptions: ()=>
     utils.log "Toggle Options!!"
     $(@el).toggleClass("is-active is-scaled")
+    return false
 
   move: (coords)->
     $(@el).offset(coords)
@@ -91,7 +92,7 @@ class Dante.Editor.Tooltip extends Dante.View
         @displayExtractPlaceHolder()
       when "inline-menu-hr"
         @splitSection()
-
+    return false
   #UPLOADER
 
   #replace existing img tag , and wrap it in insertTamplate
@@ -102,43 +103,63 @@ class Dante.Editor.Tooltip extends Dante.View
     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()
-      @current_editor.preCleanNode($(node))
-      @current_editor.addClassesToElement(node)
+      if node
+        @current_editor.preCleanNode($(node))
+        @current_editor.addClassesToElement(node)
     else
       utils.log "DOS"
-      $(image_element).replaceWith(tmpl)
+      img = $(image_element).parentsUntil(".section-inner").first()
+      $(img).replaceWith(tmpl)
 
-    utils.log tmpl.attr('name')
+    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)->
-    #set image dimensions
-    #TODO: maybe limit with default max-heigth ?
     utils.log figure.attr("name")
     utils.log figure
-
     $(image_element).remove()
-
     img = new Image()
+    img.src = image_element.src
+    self = this
     img.onload = ()->
-      console.log "and here comes the water!"
-      console.log(figure)
-      console.log(this.width + 'x' + this.height);
+      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': this.width
-        'max-height': this.height
-        'height': this.height
-      figure.find("img").attr({'data-height': this.height, 'data-width': this.width})
-      figure.find("img").attr('src', image_element.src )
-    img.src = image_element.src
+        '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
@@ -151,32 +172,66 @@ class Dante.Editor.Tooltip extends Dante.View
       self.uploadFiles(t.files)
 
   displayCachedImage: (file)->
-    @node = @current_editor.getNode()
     @current_editor.tooltip_view.hide()
 
     reader = new FileReader()
     reader.onload = (e)=>
-      i = new Image
-      i.src = e.target.result
+      img = new Image
+      img.src = e.target.result
+      node = @current_editor.getNode()
+      self = this
+      img.onload = ()->
+        new_tmpl = $(self.insertTemplate())
 
-      new_tmpl = $(@insertTemplate())
+        replaced_node = $( new_tmpl ).insertBefore($(node))
 
-      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
 
-      img_tag = new_tmpl.find('img.graf-image').attr('src', e.target.result)
-      img_tag.height = i.height
-      img_tag.width  = i.width
-      unless i.width is 0 || i.height is 0
         utils.log "UPLOADED SHOW FROM CACHE"
 
+        ar = self.getAspectRatio(this.width, this.height)
+
         replaced_node.find(".aspectRatioPlaceholder").css
-          'max-width': i.width
-          'max-height': i.height
+          'max-width': ar.width
+          'max-height': ar.height
+
+        replaced_node.find(".graf-image").attr
+          "data-height": this.height
+          "data-width": this.width
 
-        @uploadFile file, replaced_node
+        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)->
     formData = new FormData()
     formData.append('file', file)

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

@@ -2,10 +2,9 @@
 
 @import "dante/variables";
 @import "dante/utilities";
-@import "dante/fonts";
 @import "dante/scaffold";
+@import "dante/fonts";
 @import "dante/animations";
-
 @import "dante/post";
 @import "dante/icons";
 @import "dante/menu";

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

@@ -1,4 +1,4 @@
-@if $debugger {
+//@if $debugger {
   .debug {
     .section-inner {
       .is-selected{
@@ -8,4 +8,4 @@
       }
     }
   }
-}
+//}

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

@@ -1,79 +1,152 @@
-.graf {
+.graf--h2,
+.graf--h3,
+.graf--h4,
+.graf--h5,
+.graf--h6,
+.graf--h7,
+.postList,
+.graf--figure,
+.graf--blockquote,
+.graf--pullquote,
+.graf--p,
+.graf--pre {
+  margin: 0;
+}
 
-  &--p,
-  &--blockquote,
-  &--pullquote {
-    margin-bottom: 30px;
-  }
+.graf--h2 {
+  font-family: $sans;
+  font-size: 60px;
+  font-style: normal;
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  line-height: 1;
+  margin-bottom: 8px;
+  margin-left: -3px;
+  margin-top: 40px;
+  padding-top: 0;
+}
+.graf--h3 {
+  font-family: $sans;
+  letter-spacing: -0.02em;
+  font-weight: 700;
+  font-style: normal;
+  font-size: 36px;
+  margin-left: -1.8px;
+  line-height: 1.2;
+  margin-top: 40px;
+  margin-bottom: 4px;
+}
+.graf--h4 {
+  font-family: $sans;
+  letter-spacing: -0.02em;
+  font-weight: 300;
+  font-style: normal;
+  font-size: 30px;
+  margin-left: -1.5px;
+  line-height: 1.2;
+  color: rgba(0,0,0,0.44);
+  margin-top: 40px;
+  margin-bottom: 2px;
+}
 
-  &--h2 {
-    font-family: $sans;
-    font-size: 60px;
-    font-style: normal;
-    font-weight: 700;
-    letter-spacing: -0.04em;
-    line-height: 1;
-    margin-bottom: 8px;
-    margin-left: -3px;
-    margin-top: 40px;
-    padding-top: 0;
-  }
-  &--h3 {
-    letter-spacing: -0.02em;
-    font-weight: 700;
-    font-style: normal;
+.graf--h2 + .graf--h3,
+.graf--h2 + .graf--h4 {
+  margin-top: -6px;
+}
+
+.graf--h3 + .graf--h2,
+.graf--h4 + .graf--h2 {
+  margin-top: 2px;
+}
+
+.graf--h3 + .graf--h4,
+.graf--h4 + .graf--h3 {
+  margin-top: -2px;
+}
+
+.graf--h2 + .graf--p.graf--empty + .graf--h3,
+.graf--h3 + .graf--p.graf--empty + .graf--h3,
+.graf--h2 + .graf--p.graf--empty + .graf--h4,
+.graf--h3 + .graf--p.graf--empty + .graf--h4,
+.graf--h4 + .graf--p.graf--empty + .graf--h4 {
+  margin-top: -8px;
+}
+
+.graf--h4 + .graf--figure,
+.graf--h3 + .graf--figure,
+.graf--h2 + .graf--figure {
+  margin-top: 15px;
+}
+
+.graf--p,
+.graf--blockquote,
+.graf--pullquote {
+  margin-bottom: 30px;
+}
+
+.graf--pre {
+  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.05);
+  font-family: Monaco,"Courier New","Courier",monospace;
+  font-size: 16px;
+  margin-bottom: 20px;
+  padding: 20px;
+  white-space: pre-wrap;
+}
+.graf--pre + .graf--pre {
+  margin-top: -20px;
+}
+
+.graf--blockquote {
+  border-left: 3px solid rgba(0, 0, 0, 0.8);
+  font-family: $serif;
+  font-style: italic;
+  font-weight: 400;
+  letter-spacing: 0.01rem;
+  margin-left: -23px;
+  padding-bottom: 3px;
+  padding-left: 20px;
+}
+.graf--blockquote + .graf--blockquote {
+  margin-top: -30px;
+  padding-top: 30px;
+}
+
+.graf--figure {
+  box-sizing: border-box;
+  clear: both;
+  margin-bottom: 30px;
+  outline: medium none;
+  position: relative;
+}
+
+.graf--first {
+  margin-top: 0;
+  padding-top: 0;
+}
+.graf--empty {
+  margin-bottom: -7px;
+  margin-top: -7px;
+}
+
+@media (max-width: 500px) {
+
+  .graf--h2 {
     font-size: 36px;
-    margin-left: -1.8px;
+    line-height: 1.1;
+    padding-top: 12px;
+    margin-bottom: 6px;
+  }
+  .graf--h3 {
+    font-size: 26px;
     line-height: 1.2;
-    margin-top: 40px;
+    margin-top: 18px;
     margin-bottom: 4px;
   }
-  &--h4 {
-    color: rgba(0, 0, 0, 0.44);
-    font-family: $sans;
-    font-size: 30px;
-    font-style: normal;
-    font-weight: 300;
-    letter-spacing: -0.02em;
+  .graf--h4 {
+    font-size: 24px;
     line-height: 1.2;
+    margin-top: 18px;
     margin-bottom: 2px;
-    margin-left: -1.5px;
-    margin-top: 40px;
-  }
-
-  &--pre {
-    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.05);
-    font-family: Monaco,"Courier New","Courier",monospace;
-    font-size: 16px;
-    margin-bottom: 20px;
-    padding: 20px;
-    white-space: pre-wrap;
-  }
-  &--pre + &--pre {
-    margin-top: -20px;
-  }
-
-  &--blockquote {
-    border-left: 3px solid rgba(0, 0, 0, 0.8);
-    font-family: $serif;
-    font-style: italic;
-    font-weight: 400;
-    letter-spacing: 0.01rem;
-    margin-left: -23px;
-    padding-bottom: 3px;
-    padding-left: 20px;
-  }
-  &--blockquote + &--blockquote {
-    margin-top: -30px;
-    padding-top: 30px;
-  }
-
-  &--figure {
-    box-sizing: border-box;
-    clear: both;
-    margin-bottom: 30px;
-    outline: medium none;
-    position: relative;
   }
 
 }