dante-editor 0.0.2 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a52e2126d77969614fd8f182ae9f639362a0a9ce
-  data.tar.gz: b32b6c838894dba0f3ea145431e1f38593efcdfd
+  metadata.gz: 9d4df3156378b59b7396a2b87162436cb60557e3
+  data.tar.gz: 517e2d07d9f36c86a648e07123e534a97c57e025
 SHA512:
-  metadata.gz: 96f21f5f46e07dff4980e97be6a9475301c9def7a4114bc8575c13c41f30e5145021e6df6fdeff1324321567a0f952a1f9f2ca3799a892f083367378644480b1
-  data.tar.gz: f1f6924ff1d986e52ae25eb334945310461a7ecc26cb6f1d509c072e597bba74f950eaf7188e90f2c2138b19d829501199b62cfbb04348a755e423dc684e7bd8
+  metadata.gz: 67f9b45f3efd4dd05d92c9adf4eb0cf97d36996be5eb623cc47981d495be4b1546ea080aa948d366d0eaf356f574cc112ccc949b686e65afe7f117b8dc125f7e
+  data.tar.gz: da1cd87246a7167a9fa0c493ac4da218800b1bd89d58c54c74f4a0749d97bb55ed6ecc216ddd16209d676687b0e085e3af4cb1f1e0cff4621516cd6ec45d5d3e

data/.ruby-version

@@ -0,0 +1 @@
+2.1.0

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    dante-editor (0.0.2)
+    dante-editor (0.0.3)
 
 GEM
   remote: http://rubygems.org/

data/Procfile

@@ -1 +1 @@
-app: bundle exec rackup config.ru
+app: bundle exec rackup config.ru -p 4567

data/TODO.md

@@ -9,6 +9,8 @@
 
   + MENU
     + Filter inner tags (except a, b, i ... ) when convert to blockquote
+    + Reposicionar menu cuando se cambia el tamaño del elemento
+    + Quitar las opciones B/i cuando el elemento seleccionado es un header
 
   + DELETE
     + handle remove from PRE tag, it set rare span, just remove it
@@ -16,6 +18,7 @@
 
   + IMAGES:
     + upload, show progress, complete
+    + mantain image ratio
     + handle enter (linebreak) when selected in caption (build new P)
       + Fix problem in FF when linebreak or arrow down to new P , is typing backwards!! (could be a range 1 char problem ?)
 

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

@@ -32,7 +32,7 @@ class Dante.Editor extends Dante.View
 
     @store()
 
-    @title_placeholder    = "<span class='defaultValue defaultValue--root'>Title…</span><br>"
+    @title_placeholder    = "<span class='defaultValue defaultValue--root'>Title</span><br>"
     @body_placeholder     = "<span class='defaultValue defaultValue--root'>Tell your story…</span><br>"
     @embed_placeholder    = "<span class='defaultValue defaultValue--prompt'>Paste a YouTube, Vine, Vimeo, or other video link, and press Enter</span><br>"
     @extract_placeholder  = "<span class='defaultValue defaultValue--prompt'>Paste a link to embed content from another site (e.g. Twitter) and press Enter</span><br>"
@@ -73,7 +73,7 @@ class Dante.Editor extends Dante.View
 
       <div class='section-content'>
         <div class='section-inner'>
-          <p class='graf graf--h3'>#{@title_placeholder}</p>
+          <h3 class='graf graf--h3'>#{@title_placeholder}</h3>
           <p class='graf graf--p'>#{@body_placeholder}<p>
         </div>
       </div>
@@ -84,11 +84,11 @@ class Dante.Editor extends Dante.View
     "<p class='graf--p' name='#{utils.generateUniqueName()}'><br></p>"
 
   appendMenus: ()=>
-    $("<div id='dante-menu' class='dante-menu' style='opacity: 0;'></div>").insertAfter(@el)
-    $("<div class='inlineTooltip2 button-scalableGroup'></div>").insertAfter(@el)
+    $("<div id='dante-menu' class='dante-menu'></div>").insertAfter(@el)
+    $("<div class='inlineTooltip'></div>").insertAfter(@el)
     @editor_menu = new Dante.Editor.Menu(editor: @)
     @tooltip_view = new Dante.Editor.Tooltip(editor: @)
-    @tooltip_view.render()
+    @tooltip_view.render().hide()
 
   appendInitialContent: ()=>
     $(@el).find(".section-inner").html(@initial_html)
@@ -243,10 +243,11 @@ class Dante.Editor extends Dante.View
       @.displayMenu()
 
   relocateMenu: (position)->
-    padd = @editor_menu.$el.width() / 2
-    top = position.top + $(window).scrollTop() - 43
-    l = position.left + (position.width / 2) - padd
-    @editor_menu.$el.offset({left: l , top: top  })
+    height = @editor_menu.$el.outerHeight()
+    padd   = @editor_menu.$el.width() / 2
+    top    = position.top + $(window).scrollTop() - height
+    left   = position.left + (position.width / 2) - padd
+    @editor_menu.$el.offset({ left: left , top: top })
 
   hidePlaceholder: (element)->
     $(element).find("span.defaultValue").remove().html("<br>")
@@ -598,7 +599,6 @@ class Dante.Editor extends Dante.View
         @displayTooltipAt($(@el).find(".is-selected"))
       , 2
 
-
     #delete key
     if (e.which == 8)
       @tooltip_view.hide()
@@ -608,11 +608,7 @@ class Dante.Editor extends Dante.View
       #return false if !anchor_node or anchor_node.nodeType is 3
       utils.log("pass initial validations")
       anchor_node = @getNode()
-      utils.log "anchor_node"
-      utils.log anchor_node
-      utils.log "UTILS anchor_node"
       utils_anchor_node = utils.getNode()
-      utils.log utils_anchor_node
 
       if $(utils_anchor_node).hasClass("section-content") || $(utils_anchor_node).hasClass("graf--first")
         utils.log "SECTION DETECTED FROM KEYDOWN #{_.isEmpty($(utils_anchor_node).text())}"
@@ -646,6 +642,10 @@ class Dante.Editor extends Dante.View
       @handleArrowForKeyDown(e)
       #return false
 
+    #hides tooltip if anchor_node text is empty
+    if anchor_node
+      @tooltip_view.hide() unless _.isEmpty($(anchor_node).text())
+
   handleKeyUp: (e , node)->
     utils.log "KEYUP"
 
@@ -710,7 +710,7 @@ class Dante.Editor extends Dante.View
     return unless _.isEmpty( $(element).text() )
     @position = $(element).offset()
     @tooltip_view.render()
-    @tooltip_view.move(left: @position.left - 60 , top: @position.top - 5 )
+    @tooltip_view.move(left: @position.left - 60, top: @position.top - 1 )
 
   #mark the current row as selected
   markAsSelected: (element)->
@@ -733,7 +733,7 @@ class Dante.Editor extends Dante.View
     n = element
     name = n.nodeName.toLowerCase()
     switch name
-      when "p", "h2", "h3", "pre", "div"
+      when "p", "h1", "h2", "h3", "h4", "h5", "h6", "pre", "div"
         #utils.log n
         unless $(n).hasClass("graf--mixtapeEmbed")
           $(n).removeClass().addClass("graf graf--#{name}")

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

@@ -4,7 +4,7 @@ class Dante.Editor.Menu extends Dante.View
   el: "#dante-menu"
 
   events:
-    "mousedown i" : "handleClick"
+    "mousedown li" : "handleClick"
     #"click .dante-icon" : "handleClick"
     "mouseenter" : "handleOver"
     "mouseleave" : "handleOut"
@@ -39,12 +39,14 @@ class Dante.Editor.Menu extends Dante.View
       ]
     ###
 
-    buttons: ['blockquote', 'h2', 'h3', 'bold', 'italic', 'createlink']
+    buttons: ['bold', 'italic', 'h2', 'h3', 'h4', 'blockquote', 'createlink']
 
   template: ()=>
-    html = "<input class='dante-input' placeholder='http://' style='display: none;'>"
+    html = "<div class='dante-menu-linkinput'><input class='dante-menu-input' placeholder='http://'><div class='dante-menu-button'>x</div></div>"
+    html += "<ul class='dante-menu-buttons'>"
     _.each @config.buttons, (item)->
-      html += "<i class=\"dante-icon icon-#{item}\" data-action=\"#{item}\"></i>"
+      html += "<li class='dante-menu-button'><i class=\"dante-icon icon-#{item}\" data-action=\"#{item}\"></i></li>"
+    html += "</ul>"
     html
 
   render: ()=>
@@ -53,14 +55,14 @@ class Dante.Editor.Menu extends Dante.View
     #@delegateEvents()
 
   handleClick: (ev)->
-    element = $(ev.currentTarget)
-    action = element.data("action")
-    input = $(@el).find("input.dante-input")
+    element   = $(ev.currentTarget).find('.dante-icon')
+    action    = element.data("action")
+    input     = $(@el).find("input.dante-menu-input")
     utils.log("menu #{action} item clicked!")
     @savedSel = utils.saveSelection()
 
     if /(?:createlink)/.test(action)
-      input.show()
+      $(@el).addClass("dante-menu--linkmode")
       input.focus()
     else
       @menuApply action
@@ -73,7 +75,7 @@ class Dante.Editor.Menu extends Dante.View
       return @createlink( $(e.target) )
 
   createlink: (input) =>
-    input.hide()
+    $(@el).removeClass("dante-menu--linkmode")
     if input.val()
       inputValue = input.val()
       .replace(@strReg.whiteSpace, "")
@@ -149,7 +151,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.toLowerCase() else el)
+        nodes.push (if returnAsNodeName then el.nodeName.toUpperCase() else el)
       el = el.parentNode
     nodes
 
@@ -190,13 +192,11 @@ class Dante.Editor.Menu extends Dante.View
       @highlight(tag)
 
   highlight: (tag)->
-    $(".icon-#{tag}").addClass("active")
+    $(".icon-#{tag}").parent("li").addClass("active")
 
   show: ()->
-    $(@el).css("opacity", 1)
-    $(@el).css('visibility', 'visible')
+    $(@el).addClass("dante-menu--active")
     @displayHighlights()
 
   hide: ()->
-    $(@el).css("opacity", 0)
-    $(@el).css('visibility', 'hidden')
+    $(@el).removeClass("dante-menu--active")

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

@@ -1,18 +1,18 @@
 utils = Dante.utils
 
 class Dante.Editor.Tooltip extends Dante.View
-  el: ".inlineTooltip2"
+  el: ".inlineTooltip"
 
   events:
-    "click .button--inlineTooltipControl" : "toggleOptions"
-    "click .inlineTooltip2-menu .button" : "handleClick"
+    "click .inlineTooltip-button.control" : "toggleOptions"
+    "click .inlineTooltip-menu button" : "handleClick"
 
   initialize: (opts = {})=>
     @current_editor = opts.editor
     @buttons = [
       {icon: "fa-camera", title: "Add an image", action: "image"},
-      {icon: "fa-play", title: "Add a video", action: "embed"},
-      {icon: "fa-code", title: "Add an embed", action: "embed-extract"}
+      {icon: "fa-play",   title: "Add a video",  action: "embed"},
+      {icon: "fa-code",   title: "Add an embed", action: "embed-extract"}
     ]
     #TODO: include section splitter
     #icon: "fa-minus", title: "Add a new part", action: "hr"
@@ -21,14 +21,14 @@ class Dante.Editor.Tooltip extends Dante.View
     menu = ""
     _.each @buttons, (b)->
       data_action_value = if b.action_value then "data-action-value='#{b.action_value}'" else  ""
-      menu += "<button class='button button--small button--circle button--neutral button--scale u-transitionSeries' title='#{b.title}' data-action='inline-menu-#{b.action}' #{data_action_value}>
+      menu += "<button class='inlineTooltip-button scale' title='#{b.title}' data-action='inline-menu-#{b.action}' #{data_action_value}>
         <span class='fa #{b.icon}'></span>
       </button>"
 
-    "<button class='button button--small button--circle button--neutral button--inlineTooltipControl' title='Close Menu' data-action='inline-menu'>
+    "<button class='inlineTooltip-button control' title='Close Menu' data-action='inline-menu'>
         <span class='fa fa-plus'></span>
     </button>
-    <div class='inlineTooltip2-menu'>
+    <div class='inlineTooltip-menu'>
       #{menu}
     </div>"
 

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/_debug.scss

@@ -0,0 +1,11 @@
+@if $debugger {
+  .debug {
+    .section-inner {
+      .is-selected{
+        outline-color: rgb(85, 182, 179);
+        outline-width: thin;
+        outline-style: dotted;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+@font-face {
+  font-family: 'dante';
+  src: font-url('fontello.eot?370dad08');
+  src: font-url('fontello.eot?370dad08#iefix') format('embedded-opentype'),
+  font-url('fontello.woff?370dad08') format('woff'),
+  font-url('fontello.ttf?370dad08') format('truetype'),
+  font-url('fontello.svg?370dad08#fontello') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@import url(http://fonts.googleapis.com/css?family=Merriweather:400,700,400italic,700italic|Open+Sans:400,300,800);

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

@@ -0,0 +1,79 @@
+.graf {
+
+  &--p,
+  &--blockquote,
+  &--pullquote {
+    margin-bottom: 30px;
+  }
+
+  &--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;
+    font-size: 36px;
+    margin-left: -1.8px;
+    line-height: 1.2;
+    margin-top: 40px;
+    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;
+    line-height: 1.2;
+    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;
+  }
+
+}

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

@@ -0,0 +1,38 @@
+.dante-icon {
+  &:before {
+    display: inline-block;
+    font-family: "dante";
+    font-style: normal;
+    font-variant: normal;
+    font-weight: normal;
+    line-height: 1em;
+    text-align: center;
+    text-decoration: inherit;
+    text-transform: none;
+  }
+}
+
+.icon {
+  &-h2:before                   { content: "H1"; }
+  &-h3:before                   { content: "H2"; }
+  &-h4:before                   { content: "H3"; }
+  &-p:before                    { content:  "P"; }
+  &-code:before                 { content: ""; }
+  &-insertorderedlist:before    { content: ""; }
+  &-insertunorderedlist:before  { content: ""; }
+  &-inserthorizontalrule:before { content: ""; }
+  &-indent:before               { content: ""; }
+  &-outdent:before              { content: ""; }
+  &-bold:before                 { content: ""; }
+  &-italic:before               { content: ""; }
+  &-underline:before            { content: ""; }
+  &-createlink:before           { content: ""; }
+  &-blockquote:before           { content: ""; }
+}
+.icon {
+  &-h2:before,
+  &-h3:before,
+  &-h4:before {
+    font-weight: bold;
+  }
+}

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

@@ -0,0 +1,149 @@
+.dante-menu {
+
+  // MENU
+  & {
+    position: absolute;
+    visibility: hidden;
+    z-index: 1000;
+    -webkit-transition: none;
+    transition: none;
+    display: none;
+    top: 0;
+    left: 0;
+    display:block;
+    white-space: nowrap;
+
+    height: $menu-height;
+    background: $menu-background;
+    border: $menu-border;
+    border-radius: $menu-border-radius;
+    box-shadow: $menu-shadow;
+  }
+  &--active {
+    display: inline-block;
+    visibility: visible;
+    -webkit-animation: pop-upwards 180ms forwards linear;
+    animation: pop-upwards 180ms forwards linear;
+  }
+
+  &--linkmode {
+    .dante-menu-buttons {
+      visibility: hidden;
+    }
+    .dante-menu-linkinput {
+      display: block;
+    }
+    .dante-menu-input {
+      -webkit-animation: pop-upwards 180ms forwards linear;
+              animation: pop-upwards 180ms forwards linear;
+    }
+  }
+
+  // CARET
+  &:after,
+  &:before {
+    content: "";
+    height: 0;
+    width: 0;
+    position: absolute;
+    left: 50%;
+    pointer-events: none;
+    border: $menu-caret-size solid transparent;
+    margin-left: -($menu-caret-size/2);
+  }
+  &:after {
+    border-top-color: $menu-tone;
+    bottom: -(($menu-caret-size*2)-1);
+  }
+  &:before {
+    border-top-color: $menu-border-color;
+    bottom: -($menu-caret-size*2);
+  }
+
+  // BUTONS
+  &-buttons {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    line-height: 0;
+  }
+  &-button {
+    & {
+      min-width: 20px;
+      display: inline-block;
+      padding: 0 10px;
+      overflow: hidden;
+      text-align: center;
+      color: $menu-color;
+      cursor: pointer;
+      font-size: 16px;
+      line-height: $menu-height - 2;
+      -webkit-user-select: none;
+         -moz-user-select: none;
+          -ms-user-select: none;
+              user-select: none;
+    }
+    &:hover{
+      // nada
+    }
+    &.active{
+      color: $menu-color-active;
+    }
+
+    &:first-of-type{
+      border-top-left-radius: $menu-border-radius;
+      border-bottom-left-radius: $menu-border-radius;
+      padding-left: 18px;
+    }
+    &:last-of-type{
+      border-top-right-radius: $menu-border-radius;
+      border-bottom-right-radius: $menu-border-radius;
+      padding-right: 18px;
+    }
+  }
+
+  // LINK
+  &-linkinput {
+    & {
+      display: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+    .dante-menu-button {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  }
+
+  &-input {
+    //height: $menu-height - 2;
+    //line-height: 20px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: rgba(0,0,0,0);
+    width: 100%;
+    padding: 13px 40px 13px 10px;
+    color: $menu-color;
+    border: none;
+    outline: none;
+    font-size: 16px;
+    box-sizing: border-box;
+    border-radius: $menu-border-radius;
+    appearance: none;
+    text-align: left;
+    font-family: $font-family-serif;
+    letter-spacing: 0.01rem;
+    font-weight: 400;
+    font-style: normal;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -moz-font-feature-settings: "liga" on;
+  }
+
+}

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

@@ -0,0 +1,201 @@
+
+.markup--anchor,
+.graf--sectionCaption {
+    cursor: text;
+}
+
+.markup--anchor {
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 50%);
+    background-position: 0 24px;
+    background-repeat: repeat-x;
+    background-size: 2px 2px;
+    text-decoration: none;
+    color: rgba(0, 0, 0, 1);
+}
+
+
+
+.aspectRatioPlaceholder {
+    margin: 0 auto;
+    position: relative;
+    width: 100%;
+}
+
+.is-postEditMode .graf-image:before,
+.is-postEditMode .iframeContainer:before {
+    bottom: 0;
+    content: "";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 500;
+}
+
+.graf--figure.is-mediaFocused .graf-image,
+.graf--figure.is-mediaFocused iframe {
+    box-shadow: 0 0 0 3px #57ad68;
+}
+
+.aspectRatioPlaceholder.is-locked .graf-image,
+.aspectRatioPlaceholder.is-locked .graf-imageAnchor {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+
+.graf-image,
+.graf-imageAnchor,
+.iframeContainer > iframe,
+.iframeContainer {
+    box-sizing: border-box;
+    display: block;
+    margin: auto;
+    max-width: 100%;
+}
+
+.is-postEditMode iframe {
+    border: 3px solid rgba(255, 255, 255, 0);
+}
+
+.graf--mixtapeEmbed {
+    border-color: rgba(0, 0, 0, 0.15);
+    border-radius: 5px;
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    color: rgba(0, 0, 0, 0.6);
+    font-family: $sans;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 300;
+    letter-spacing: -0.02em;
+    margin-bottom: 40px;
+    margin-top: 40px;
+    max-height: 310px;
+    max-width: 700px;
+    overflow: hidden;
+    padding: 30px;
+    position: relative;
+}
+
+.mixtapeImage {
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    float: right;
+    height: 310px;
+    margin: -30px -30px 0 25px;
+    width: 310px;
+}
+
+.mixtapeImage--empty {
+    height: 0;
+    width: 0;
+}
+
+.graf--mixtapeEmbed {
+    color: rgba(0, 0, 0, 0.6);
+    font-family: $sans;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 300;
+    letter-spacing: -0.02em;
+}
+
+.markup--mixtapeEmbed-strong {
+    color: #000;
+    display: block;
+    font-family: $sans;
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 300;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+    margin-bottom: 0px;
+}
+
+.markup--mixtapeEmbed-em {
+    display: block;
+    font-size: 16px;
+    font-style: normal;
+    margin-bottom: 10px;
+    max-height: 120px;
+    overflow: hidden;
+}
+
+/*CAPTION*/
+
+.imageCaption:before {
+    border-top: 1px solid rgba(0, 0, 0, 0.15);
+    content: "";
+    display: block;
+    margin-bottom: 10px;
+    margin-left: 75%;
+    width: 25%;
+}
+
+.imageCaption {
+    color: rgba(0, 0, 0, 0.6);
+    font-family: $serif;
+    font-size: 14px;
+    font-style: italic;
+    font-weight: 400;
+    left: -172px;
+    letter-spacing: 0.01rem;
+    line-height: 1.4;
+    margin-top: 0;
+    outline: 0 none;
+    position: absolute;
+    text-align: right;
+    top: 0;
+    width: 150px;
+    z-index: 300;
+}
+
+.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;
+}
+
+figure.is-defaultValue .imageCaption,
+.graf--sectionCaption.is-defaultValue {
+    display: none;
+}
+
+.editor a {
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+.defaultValue {
+  color: rgba(0,0,0,0.3);
+}
+
+section:first-child > .section-divider,
+section.is-backgrounded + section > .section-divider {
+    display: none;
+}
+.postArticle .layoutSingleColumn,
+.postFooter--loggedOut .layoutSingleColumn {
+    width: 700px;
+}
+
+.layoutSingleColumn {
+    margin: 0 auto;
+    width: 640px;
+}
+
+.defaultValue--prompt {
+    font-family: $sans;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: -0.02em;
+}

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

@@ -0,0 +1,30 @@
+.postContent {
+  font-family: $font-family-serif;
+  letter-spacing: 0.01rem;
+  font-weight: 400;
+  font-style: normal;
+  //font-size: 22px;
+  font-size: 19px;
+  line-height: 1.4;
+}
+
+.notesSource {
+  position: relative;
+}
+
+.postField {
+  &, &:focus {
+    outline: 0;
+    word-break: break-word;
+    word-wrap: break-word;
+  }
+
+  &--body {
+    @include clearfix;
+    margin-bottom: 30px;
+  }
+}
+
+.section-content {
+  @include clearfix;
+}

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

@@ -0,0 +1,24 @@
+// Set box-sizing globally to handle padding and border widths
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  font-size: 100%;
+  height: 100%; // Must be 100% for off canvas to work
+}
+
+// Default body styles
+body {
+  padding: 0;
+  margin: 0;
+  position: relative;
+  font-family: $font-family-sans;
+  color: rgba(0,0,0,0.8);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

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

@@ -0,0 +1,126 @@
+.inlineTooltip {
+
+  // BASE
+  & {
+    position: absolute;
+    z-index: 900;
+    overflow: hidden;
+    display: none;
+    width: 33px;
+    height: 33px;
+    -webkit-transition: opacity 100ms, width 0 linear 250ms;
+    transition: opacity 100ms, width 0 linear 250ms;
+    padding: 0;
+  }
+  &.is-active {
+    display: block;
+    width: 220px;
+    -webkit-transition-delay: 0;
+    transition-delay: 0;
+  }
+
+  // MENU
+  &-menu {
+    & {
+      display: inline-block;
+      padding-left: 22px;
+    }
+    button {
+      margin-right: 9px;
+    }
+  }
+
+  // BUTTON
+  &-button {
+
+    // BASE
+    & {
+      display: inline-block;
+      position: relative;
+      outline: 0;
+      padding: 0;
+      vertical-align: bottom;
+      box-sizing: border-box;
+      border-radius: 999em;
+      cursor: pointer;
+      font-size: 14px;
+      text-decoration: none;
+      font-family: $font-family-sans;
+      letter-spacing: -0.02em;
+      font-weight: 400;
+      font-style: normal;
+      white-space: nowrap;
+      text-rendering: auto;
+      text-align: center;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      -moz-font-feature-settings: "liga" on;
+      width: $tooltip-size;
+      height: $tooltip-size;
+      line-height: $tooltip-size - 2;
+      -webkit-transition: 100ms border-color, 100ms color;
+      transition: 100ms border-color, 100ms color;
+      background: rgba(0,0,0,0);
+      border: 1px solid rgba(0,0,0,0.15);
+      color: rgba(0,0,0,0.44);
+    }
+
+    &:hover {
+      border-color: rgba(0,0,0,0.9);
+      color: rgba(0,0,0,0.9);
+    }
+
+    // SCALE
+    &.scale {
+      & {
+        -webkit-transform: scale(0);
+        -ms-transform: scale(0);
+        transform: scale(0);
+        -webkit-transition-property: -webkit-transform;
+        transition-property: transform;
+        -webkit-transition-duration: 100ms;
+        transition-duration: 100ms;
+      }
+      .is-scaled & {
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+        -webkit-transition-duration: 200ms;
+        transition-duration: 200ms;
+      }
+      &:nth-child(2) {
+        -webkit-transition-delay: 30ms;
+        transition-delay: 30ms;
+      }
+      &:nth-child(3) {
+        -webkit-transition-delay: 60ms;
+        transition-delay: 60ms;
+      }
+      &:nth-child(4) {
+        -webkit-transition-delay: 90ms;
+        transition-delay: 90ms;
+      }
+    }
+
+    // CONTROL
+    &.control {
+      & {
+        -webkit-transition: -webkit-transform 100ms;
+                transition: transform 100ms;
+         -webkit-transform: rotate(0);
+             -ms-transform: rotate(0);
+                 transform: rotate(0);
+      }
+      .is-active & {
+        -webkit-transition: -webkit-transform 250ms;
+                transition: transform 250ms;
+         -webkit-transform: rotate(45deg);
+             -ms-transform: rotate(45deg);
+                 transform: rotate(45deg);
+      }
+    }
+
+  }
+
+}

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

@@ -0,0 +1,21 @@
+@mixin clearfix {
+  &:before, &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+  & {
+    *zoom: 1;
+  }
+}
+
+
+@mixin box-sizing {
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+}

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

@@ -0,0 +1,28 @@
+$font-family-sans:        'jaf-bernino-sans', 'Open Sans', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+$font-family-serif:       'freight-text-pro', 'Merriweather', Georgia,Cambria, "Times New Roman", Times,serif;
+$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
+
+$font-family-base:        $font-family-sans;
+$font-size-base:          14px;
+$line-height-base:        1.428571429; // 20/14
+//$line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
+
+$debugger:           false;
+
+$menu-height:        45px;
+$menu-tone:          #333;
+$menu-factor:        5%;
+$menu-background:    linear-gradient(to bottom, darken($menu-tone,$menu-factor), $menu-tone) repeat scroll 0 0 $menu-tone;
+$menu-shadow:        1px 2px 3px -2px #222;
+$menu-border-color:  darken($menu-tone,$menu-factor);
+$menu-border:        1px solid $menu-border-color;
+$menu-border-radius: 5px;
+$menu-color:         #FFFFFF;
+$menu-color-active:  #1ABF89;
+$menu-caret-size:    8px;
+
+$tooltip-size:       32px;
+
+// Legacy
+$serif: $font-family-serif;
+$sans:  $font-family-sans;

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

@@ -1,3 +1,16 @@
+@charset "utf-8";
+
+@import "dante/variables";
+@import "dante/utilities";
 @import "dante/fonts";
-@import "dante/base";
-@import "dante/editor";
+@import "dante/scaffold";
+@import "dante/animations";
+
+@import "dante/post";
+@import "dante/icons";
+@import "dante/menu";
+@import "dante/tooltip";
+@import "dante/graf";
+@import "dante/needsorder";
+
+@import "dante/debug";

data/dante-editor.gemspec

@@ -6,8 +6,8 @@ require 'dante-editor/version'
 Gem::Specification.new do |gem|
   gem.name          = "dante-editor"
   gem.version       = DanteEditor::VERSION
-  gem.authors       = ["Miguel Michelson"]
-  gem.email         = ["miguelmichelson@gmail.com"]
+  gem.authors       = ["Miguel Michelson", "Cristian Ferrari"]
+  gem.email         = ["miguelmichelson@gmail.com", "cristianferrarig@gmail.com"]
   gem.description   = %q{dante-editor yet another Medium editor clone.}
   gem.summary       = %q{dante-editor yet another Medium editor clone.}
   gem.homepage      = "http://michelson.github.io/Dante/"

data/lib/dante-editor/version.rb

@@ -1,5 +1,5 @@
 require "dante-editor/version"
 
 module DanteEditor
-  VERSION = "0.0.2"
+  VERSION = "0.0.3"
 end

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

@@ -32,7 +32,7 @@ QUnit.test "should init editor", ( assert )->
   assert.ok( _.isObject(window.editor.editor_menu), "Passed!" )
 
 QUnit.test "should build tooltip & menu", ( assert )->
-  assert.ok( !_.isEmpty( $(".inlineTooltip2") ), "Passed!" )
+  assert.ok( !_.isEmpty( $(".inlineTooltip") ), "Passed!" )
   assert.ok( !_.isEmpty( $("#editor-menu") ), "Passed!" )
 
 QUnit.test "should display placeholders when empty content", (assert)->

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

@@ -1,4 +1,34 @@
 @charset "utf-8";
 
-@import "normalize";
-@import "dante";
+header{
+  width: 100%;
+  border-top: 3px solid #1abf89;
+  margin-bottom: 40px;
+
+  img{
+    display: block;
+    float: left;
+    margin: -34px 7px 11px 25px;
+    position: absolute;
+    left: 0;
+    top: 28px;
+  }
+  h1 {
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 300;
+    letter-spacing: -0.04em;
+    line-height: 1;
+    margin-bottom: 8px;
+    margin-right: 91px;
+    margin-top: 25px;
+    padding-top: 0;
+    text-align: right;
+  }
+}
+
+#editor{
+  margin: 0 auto;
+  //width: 70%;
+  width: 700px;
+}

data/source/index.html.erb

@@ -8,11 +8,19 @@ title: Dante Editor example
     <h1 class="main-title">Dante Wysiwyg</h1>
   </header>
 
+  <article>
+    <div class="postContent">
+      <div class="notesSource">
 
-  <div id="editor" class="postField postField--body editable smart-media-plugin">
-    <% partial "partials/example_1" %>
-    <% partial "partials/example_2" %>
-  </div>
+        <div id="editor" class="postField postField--body editable smart-media-plugin">
+          <% partial "partials/content" %>
+          <% partial "partials/example_1" %>
+          <% partial "partials/example_2" %>
+        </div>
+
+      </div>
+    </div>
+  </article>
 
 </div>
 

data/source/layouts/layout.erb

@@ -2,11 +2,10 @@
 <html>
   <head>
     <meta charset="utf-8">
-
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
     <title><%= current_page.data.title || "The Middleman" %></title>
     <%= stylesheet_link_tag "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" %>
-    <%= stylesheet_link_tag "normalize", "editor" %>
+    <%= stylesheet_link_tag "normalize", "all", "editor" %>
     <%= javascript_include_tag  "deps", "editor" %>
   </head>
 

data/source/layouts/spec.html.erb

@@ -4,11 +4,10 @@
     <meta charset="utf-8">
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
     <title>Dante Wysiwyg Specs</title>
-   <link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.15.0.css">
-   <%= stylesheet_link_tag "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" %>
-    <%= stylesheet_link_tag "normalize", "all" %>
-   <%= javascript_include_tag  "all" %>
-
+    <link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.15.0.css">
+    <%= stylesheet_link_tag "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" %>
+    <%= stylesheet_link_tag "normalize", "all", "editor" %>
+    <%= javascript_include_tag  "deps", "editor" %>
   </head>
 
   <body class="<%= page_classes %>">

data/source/partials/_content.erb

@@ -0,0 +1,3 @@
+<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+<p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis.</p>
+<p>Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

metadata

@@ -1,23 +1,26 @@
 --- !ruby/object:Gem::Specification
 name: dante-editor
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - Miguel Michelson
+- Cristian Ferrari
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-11-17 00:00:00.000000000 Z
+date: 2014-11-18 00:00:00.000000000 Z
 dependencies: []
 description: dante-editor yet another Medium editor clone.
 email:
 - miguelmichelson@gmail.com
+- cristianferrarig@gmail.com
 executables: []
 extensions: []
 extra_rdoc_files: []
 files:
 - ".gitignore"
+- ".ruby-version"
 - ".travis.yml"
 - Gemfile
 - Gemfile.lock
@@ -37,9 +40,21 @@ files:
 - app/assets/javascripts/dante/utils.js.coffee
 - app/assets/javascripts/dante/view.js.coffee
 - app/assets/stylesheets/dante.css.scss
-- app/assets/stylesheets/dante/base.css.scss
-- app/assets/stylesheets/dante/editor.css.scss
-- app/assets/stylesheets/dante/fonts.css.scss
+- app/assets/stylesheets/dante/_animations.scss
+- app/assets/stylesheets/dante/_debug.scss
+- app/assets/stylesheets/dante/_fonts.scss
+- app/assets/stylesheets/dante/_graf.scss
+- app/assets/stylesheets/dante/_icons.scss
+- app/assets/stylesheets/dante/_menu.scss
+- app/assets/stylesheets/dante/_needsorder.scss
+- app/assets/stylesheets/dante/_post.scss
+- app/assets/stylesheets/dante/_scaffold.scss
+- app/assets/stylesheets/dante/_tooltip.scss
+- app/assets/stylesheets/dante/_utilities.scss
+- app/assets/stylesheets/dante/_variables.scss
+- app/assets/stylesheets/old/base.css.scss
+- app/assets/stylesheets/old/editor.css.scss
+- app/assets/stylesheets/old/fonts.css.scss
 - bower.json
 - config.rb
 - config.ru
@@ -64,6 +79,7 @@ files:
 - source/index.html.erb
 - source/layouts/layout.erb
 - source/layouts/spec.html.erb
+- source/partials/_content.erb
 - source/partials/_example_1.erb
 - source/partials/_example_2.erb
 - source/partials/_example_3.erb