dante-editor 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 12b6c008cc84a81f332ce2b097e0def68fbff62f
-  data.tar.gz: 3153ed57f204d5830ce368f354a4bde3ebb3661b
+  metadata.gz: 6d08776410afefd181c71ec59fa2dbc0458973de
+  data.tar.gz: a105ed8c2e03468123e5414293119949ed48bdb0
 SHA512:
-  metadata.gz: f2e0d936ebb9e121109f6b2eb59fd3aa69d0a7456e6d9ace4ba7e505104454d023680a8a469da200ecc4001cd04dfebe0655cd357145e1f3dda36cd869d43cd8
-  data.tar.gz: d833dea6b440331f16b254e3ab7835b0460a604fd0ce11ce592033bc9c0cfff66ce090061fb3dadc8eb3a1dec271710ca81ab8d0623d337bc1aca5632e2f07ee
+  metadata.gz: a4fc6161e44ebe69f579ebdfa28e827441adab5a174e5a73295bff69eaf3c204a2423934f93039d25b7c92a984ef9492ab2caae4dc176e93c56717f95adf1510
+  data.tar.gz: edd4c306ca404776b250d6c43616ae287adafb4232391daa41b34ae6136f672705e7e985b0ac3bcd06d6923384ef1c20ea37ec51d16b7b2beb5c2d6167cb26c8

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

@@ -32,18 +32,22 @@ class Dante.Editor.Menu extends Dante.View
   default_config: ()->
     ###
     buttons: [
-        'blockquote', 'h2', 'h3', 'p', 'code', 'insertorderedlist', 'insertunorderedlist', 'inserthorizontalrule',
+        'blockquote', 'h3', 'h4', 'p', 'code', 'insertorderedlist', 'insertunorderedlist', 'inserthorizontalrule',
         'indent', 'outdent', 'bold', 'italic', 'underline', 'createlink'
       ]
     ###
 
-    buttons: ['bold', 'italic', 'h2', 'h3', 'h4', 'blockquote', 'createlink']
+    buttons: ['bold', 'italic', 'createlink', 'divider', 'h3', 'h4', 'blockquote']
 
   template: ()=>
-    html = "<div class='dante-menu-linkinput'><input class='dante-menu-input' placeholder='http://'><div class='dante-menu-button'>x</div></div>"
+    html = "<div class='dante-menu-linkinput'><input class='dante-menu-input' placeholder='Paste or type a link'><div class='dante-menu-button'>x</div></div>"
     html += "<ul class='dante-menu-buttons'>"
     _.each @config.buttons, (item)->
-      html += "<li class='dante-menu-button'><i class=\"dante-icon icon-#{item}\" data-action=\"#{item}\"></i></li>"
+      if item == "divider"
+        html += "<li class='dante-menu-divider'></li>"
+      else
+        html += "<li class='dante-menu-button'><i class=\"dante-icon icon-#{item}\" data-action=\"#{item}\"></i></li>"
+
     html += "</ul>"
     html
 
@@ -65,7 +69,11 @@ class Dante.Editor.Menu extends Dante.View
         $(@el).addClass("dante-menu--linkmode")
         input.focus()
     else
-      @menuApply action
+      if $(ev.currentTarget).hasClass("dante-menu-button--disabled")
+        utils.log "menu #{action} item blocked!"
+        ev.preventDefault()
+      else
+        @menuApply action
 
     return false
 
@@ -194,19 +202,19 @@ class Dante.Editor.Menu extends Dante.View
           utils.log "nothing to select"
 
       if tag.match /(?:h[1-6])/i
-        $(@el).find(".icon-bold, .icon-italic, .icon-blockquote")
-        .parent("li").remove()
+        @toggleMenuButtons(@el, ".icon-bold, .icon-italic")
+
       else if tag is "indent"
-        $(@el).find(".icon-h2, .icon-h3, .icon-h4, .icon-blockquote")
-        .parent("li").remove()
-        #.parent("li").hide()
-        #.addClass("hidden")
+        @toggleMenuButtons(@el, ".icon-h3, .icon-h4, .icon-blockquote")
 
       @highlight(tag)
 
   highlight: (tag)->
     $(".icon-#{tag}").parent("li").addClass("active")
 
+  toggleMenuButtons: (el,buttons)->
+    $(el).find(buttons).parent("li").addClass("dante-menu-button--disabled")
+
   show: ()->
     $(@el).addClass("dante-menu--active")
     @closeInput()

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

@@ -31,7 +31,7 @@ class Dante.Editor.Tooltip extends Dante.View
 
     _.find @widgets, (e)->
       e.action == name
-    
+
 
   render: ()=>
     $(@el).html(@template())
@@ -46,7 +46,7 @@ class Dante.Editor.Tooltip extends Dante.View
   move: (coords)->
     tooltip         = $(@el)
     control_width   = tooltip.find(".control").css("width")
-    control_spacing = tooltip.find(".inlineTooltip-menu").css("padding-left")
+    control_spacing = tooltip.find(".inlineTooltip-button").css("margin-right")
     pull_size       = parseInt(control_width.replace(/px/,"")) + parseInt(control_spacing.replace(/px/,""))
     coord_left      = coords.left - pull_size
     coord_top       = coords.top

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

@@ -1,28 +1,17 @@
 .imageCaption {
   & {
-    position: absolute;
-    left: -172px;
-    width: 150px;
     top: 0;
-    text-align: right;
+    text-align: center;
     margin-top: 0;
-    font-family: "freight-text-pro",Georgia,Cambria,"Times New Roman",Times,serif;
-    letter-spacing: 0.01rem;
+    font-family: "jaf-bernino-sans", "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+    letter-spacing: 0;
     font-weight: 400;
-    font-style: italic;
-    font-size: 14px;
+    font-size: 13px;
     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;
+    margin-top: 10px;
   }
 }
 @media (max-width: 1200px) {
@@ -34,9 +23,6 @@
     left: 0;
     margin-top: 10px;
   }
-  .imageCaption:before {
-    display: none;
-  }
 }
 
 figure.graf--layoutOutsetLeft {
@@ -48,9 +34,6 @@ figure.graf--layoutOutsetLeft {
     left: 0;
     margin-top: 10px;
   }
-  .imageCaption:before {
-    display: none;
-  }
 }
 
 figure.is-defaultValue .imageCaption,

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

@@ -12,9 +12,9 @@
   }
 }
 
-.icon-h2:before                   { content: "H1"; }
-.icon-h3:before                   { content: "H2"; }
-.icon-h4:before                   { content: "H3"; }
+.icon-h2:before                   { content: ""; }
+.icon-h3:before                   { content: "H1"; }
+.icon-h4:before                   { content: "H2"; }
 .icon-p:before                    { content:  "P"; }
 .icon-code:before                 { content: ""; }
 .icon-insertorderedlist:before    { content: ""; }

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

@@ -1,3 +1,5 @@
+// Base styles
+
 .dante-menu {
 
   // MENU
@@ -12,36 +14,51 @@
   display:block;
   white-space: nowrap;
 
-  height: $menu-height;
-  background: $menu-background;
-  border: $menu-border;
-  border-radius: $menu-border-radius;
-  box-shadow: $menu-shadow;
+  height: $dante-menu-height;
+  background: $dante-menu-background;
+  color: $dante-menu-color;
+
+  @if $dante-menu-border-width {
+    border: $dante-menu-border-width;
+  }
+  @if $dante-menu-border-radius {
+    border-radius: $dante-menu-border-radius;
+  }
+  @if $dante-menu-box-shadow {
+    box-shadow: $dante-menu-box-shadow;
+  }
 
 
   // CARET
-  //&:before,
-  &:after {
-    content: "";
-    height: 0;
-    width: 0;
-    position: absolute;
-    left: 50%;
-    pointer-events: none;
-    border: $menu-caret-size solid transparent;
-    margin-left: -($menu-caret-size/2);
-  }
-  //&:before {
-  //  border-top-color: $menu-border-color;
-  //  bottom: -($menu-caret-size*2);
-  //}
-  &:after {
-    border-top-color: $menu-caret-color;
-    bottom: -(($menu-caret-size*2)-1);
+  // &:before -> Borde
+  // &:after  -> Triangulo
+  @if $dante-menu-caret-size {
+    //&:before,
+    &:after {
+      content: "";
+      height: 0;
+      width: 0;
+      position: absolute;
+      left: 50%;
+      pointer-events: none;
+      border: $dante-menu-caret-size solid transparent;
+      margin-left: -($dante-menu-caret-size/2);
+    }
+    //&:before {
+    //  border-top-color: $menu-border-color;
+    //  bottom: -($dante-menu-caret-size*2);
+    //}
+    &:after {
+      border-top-color: $dante-menu-background;
+      bottom: -(($dante-menu-caret-size*2)-1);
+    }
   }
 
 }
 
+
+// Visible
+
 .dante-menu--active {
   display: inline-block;
   visibility: visible;
@@ -49,6 +66,9 @@
   animation: pop-upwards 180ms forwards linear;
 }
 
+
+// Link mode
+
 .dante-menu--linkmode {
   .dante-menu-buttons {
     visibility: hidden;
@@ -62,13 +82,29 @@
   }
 }
 
+
 // BUTONS
+
 .dante-menu-buttons {
   list-style: none;
   margin: 0;
   padding: 0;
   line-height: 0;
 }
+.dante-menu-divider {
+  width: 1px;
+  height: $dante-menu-height - 18px;
+  margin: 9px 2px;
+  background: rgba($dante-menu-color,.2);
+  display: inline-block;
+  overflow: hidden;
+  cursor: default;
+  line-height: $dante-menu-height;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
 .dante-menu-button {
   & {
     min-width: 20px;
@@ -77,11 +113,11 @@
     padding-right: 10px;
     overflow: hidden;
     text-align: center;
-    color: $menu-color;
+    color: $dante-menu-icon-color;
     cursor: pointer;
-    font-size: 16px;
-    line-height: $menu-button-height;
-    height: $menu-button-height;
+    font-size: $dante-menu-icon-size;
+    line-height: $dante-menu-height;
+    //height: $menu-button-height;
     -webkit-user-select: none;
        -moz-user-select: none;
         -ms-user-select: none;
@@ -91,22 +127,34 @@
     // nada
   }
   &.active{
-    color: $menu-color-active;
+    color: $dante-menu-icon-accent;
   }
 
-  &:first-child {
-    border-top-left-radius: $menu-border-radius;
-    border-bottom-left-radius: $menu-border-radius;
-    padding-left: 18px;
-  }
-  &:last-child {
-    border-top-right-radius: $menu-border-radius;
-    border-bottom-right-radius: $menu-border-radius;
-    padding-right: 18px;
+  @if $dante-menu-border-radius {
+    &:first-child {
+      border-top-left-radius: $dante-menu-border-radius;
+      border-bottom-left-radius: $dante-menu-border-radius;
+      padding-left: 18px;
+    }
+    &:last-child {
+      border-top-right-radius: $dante-menu-border-radius;
+      border-bottom-right-radius: $dante-menu-border-radius;
+      padding-right: 18px;
+    }
   }
 }
 
+.dante-menu-button--disabled {
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+      -ms-user-select: none !important;
+          user-select: none !important;
+          opacity: .3;
+}
+
+
 // LINK
+
 .dante-menu-linkinput {
   & {
     display: none;
@@ -135,12 +183,12 @@
   color: $menu-color;
   border: none;
   outline: none;
-  font-size: 16px;
+  font-size: 14px;
   box-sizing: border-box;
   border-radius: $menu-border-radius;
   appearance: none;
   text-align: left;
-  font-family: $font-family-serif;
+  font-family: $font-family-sans;
   letter-spacing: 0.01rem;
   font-weight: 400;
   font-style: normal;

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

@@ -37,10 +37,8 @@
   letter-spacing: 0.01rem;
   font-weight: 400;
   font-style: normal;
-  //font-size: 22px;
-  //line-height: 1.5;
-  font-size: 19px;
-  line-height: 1.69;
+  font-size: $dante-editor-font-size;
+  line-height: $dante-editor-line-height;
 }
 
 .postField {

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

@@ -18,7 +18,6 @@
     pointer-events: auto;
   }
   &.is-scaled {
-    width: $tooltip-size-expanded;
     -webkit-transition-delay: 0;
     transition-delay: 0;
   }
@@ -27,8 +26,7 @@
 // MENU
 .inlineTooltip-menu {
   & {
-    display: inline-block;
-    padding-left: $tooltip-menu-spacing;
+    width: $tooltip-size-expanded;
   }
   button {
     margin-right: $tooltip-button-spacing;
@@ -40,6 +38,8 @@
 
   // BASE
   & {
+    float: left;
+    margin-right: $tooltip-menu-spacing;
     display: inline-block;
     position: relative;
     outline: 0;
@@ -93,17 +93,13 @@
       -webkit-transition: -webkit-#{$tooltip-backward-transition}, $tooltip-default-transition;
               transition: $tooltip-backward-transition, $tooltip-default-transition;
     }
-    &: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;
+
+    @while $tooltip-items > 0 {
+      &:nth-child(#{$tooltip-items + 1}) {
+        -webkit-transition-delay: #{$tooltip-item-delay * $tooltip-items + "ms"};
+                transition-delay: #{$tooltip-item-delay * $tooltip-items + "ms"};
+      }
+      $tooltip-items: $tooltip-items - 1;
     }
   }
 

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

@@ -1,3 +1,45 @@
+// NEW VARIABLES
+
+// General
+
+$dante-visual-debugger:        false !default;
+
+$dante-text-color:             #000000 !default;
+$dante-inversed-color:         #FFFFFF !default;
+$dante-accent-color:           #5BD974 !default;
+$dante-control-color:          #333333 !default;
+$dante-popover-color:          #FFFFFF !default;
+
+// Editor
+$dante-editor-font-size:       18px !default;
+$dante-editor-line-height:     1.9 !default;
+
+// Menu
+$dante-menu-height:            42px !default;
+$dante-menu-background:        $dante-control-color !default;
+$dante-menu-color:             $dante-inversed-color !default;
+
+$dante-menu-border-radius:     5px !default;
+$dante-menu-box-shadow:        1px 2px 3px -2px #222 !default;
+
+$dante-menu-icon-size:         16px !default;
+$dante-menu-icon-color:        $dante-inversed-color !default;
+$dante-menu-icon-accent:       $dante-accent-color !default;
+
+$dante-menu-border-width:      0px !default;
+$dante-menu-border-color:      none !default;
+
+$dante-menu-caret-size:        8px !default;
+
+
+// Tooltip
+
+// Popover
+
+
+
+// OLD VARIABLES
+
 $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-mono:              Menlo, Monaco, Consolas, "Courier New", "Courier", monospace;
@@ -6,23 +48,26 @@ $font-family-base:              $font-family-sans;
 $font-size-base:                14px;
 $line-height-base:              1.428571429; // 20/14
 
-$active-color:                  #5BD974;
+/* DEPRECATED */ $active-color: $dante-accent-color;
+
+/* DEPRECATED */ $menu-tone: $dante-menu-background;
+/* DEPRECATED */ $menu-factor: 5%;
+/* DEPRECATED */ $menu-background: $dante-menu-background;
+/* DEPRECATED */ $menu-shadow: $dante-menu-box-shadow;
+/* DEPRECATED */ $menu-border-width: $dante-menu-border-width;
+/* DEPRECATED */ $menu-border-color: $dante-menu-border-color;
+/* DEPRECATED */ $menu-border-radius: $dante-menu-border-radius;
+
+/* DEPRECATED */ $menu-border:                   $menu-border-width solid $menu-border-color;
+/* DEPRECATED */ $menu-color:                    $dante-menu-icon-color;
+/* DEPRECATED */ $menu-color-active:             $dante-menu-icon-accent;
+
+/* DEPRECATED */ $menu-caret-size:               $dante-menu-caret-size;
+/* DEPRECATED */ $menu-caret-color:              darken($menu-tone,$menu-factor);
 
-$menu-tone:                     #333;
-$menu-factor:                   5%;
-$menu-background:               linear-gradient(to bottom, $menu-tone, darken($menu-tone,$menu-factor)) repeat scroll 0 0 $menu-tone;
-$menu-shadow:                   1px 2px 3px -2px #222;
-$menu-border-width:             0px;
-$menu-border-color:             darken($menu-tone,$menu-factor);
-$menu-border-radius:            5px;
-$menu-border:                   $menu-border-width solid $menu-border-color;
-$menu-color:                    #FFFFFF;
-$menu-color-active:             $active-color;
-$menu-caret-size:               8px;
-$menu-caret-color:              darken($menu-tone,$menu-factor);
 
 
-$menu-height:                   42px;
+/* DEPRECATED */ $menu-height: $dante-menu-height;
 $menu-button-height:            $menu-height - ($menu-border-width * 2);
 
 $tooltip-color:                 black;
@@ -36,6 +81,7 @@ $tooltip-button-spacing:        9px;
 $tooltip-menu-spacing:          22px;
 
 $tooltip-items:                 3;
+$tooltip-item-delay:            30;
 $tooltip-size:                  32px;
 $tooltip-line-height:           $tooltip-size;
 
@@ -47,4 +93,4 @@ $tooltip-default-transition:    100ms border-color, 100ms color;
 $tooltip-forward-transition:    transform 100ms;
 $tooltip-backward-transition:   transform 250ms;
 
-$debugger:                      true;
+/* DEPRECATED */ $debugger: $dante-visual-debugger;

data/bower.json

@@ -2,7 +2,7 @@
   "name" : "dante",
   "description": "Just another Medium editor clone.",
   "homepage": "michelson.github.io/Dante/",
-  "version" : "0.1.1",
+  "version" : "0.1.2",
   "keywords": [
     "css",
     "sass",

data/dist/css/dante-editor.css

@@ -1,4 +1,19 @@
 @charset "UTF-8";
+/* DEPRECATED */
+/* DEPRECATED */
+/* DEPRECATED */
+/* DEPRECATED */
+/* DEPRECATED */
+/* DEPRECATED */
+/* DEPRECATED */
+/* DEPRECATED */
+/* DEPRECATED */
+/* DEPRECATED */
+/* DEPRECATED */
+/* DEPRECATED */
+/* DEPRECATED */
+/* DEPRECATED */
+/* DEPRECATED */
 @import url("//fonts.googleapis.com/css?family=Merriweather:400,700,400italic,700italic|Open+Sans:400,300,800");
 @keyframes spinner {
   to {
@@ -144,8 +159,8 @@
   letter-spacing: 0.01rem;
   font-weight: 400;
   font-style: normal;
-  font-size: 19px;
-  line-height: 1.69; }
+  font-size: 18px;
+  line-height: 1.9; }
 
 .postField, .postField:focus {
   outline: 0;
@@ -187,13 +202,13 @@
   text-transform: none; }
 
 .icon-h2:before {
-  content: "H1"; }
+  content: ""; }
 
 .icon-h3:before {
-  content: "H2"; }
+  content: "H1"; }
 
 .icon-h4:before {
-  content: "H3"; }
+  content: "H2"; }
 
 .icon-p:before {
   content: "P"; }
@@ -283,8 +298,9 @@
   display: block;
   white-space: nowrap;
   height: 42px;
-  background: linear-gradient(to bottom, #333, #262626) repeat scroll 0 0 #333;
-  border: 0px solid #262626;
+  background: #333333;
+  color: #FFFFFF;
+  border: 0px;
   border-radius: 5px;
   box-shadow: 1px 2px 3px -2px #222; }
   .dante-menu:after {
@@ -297,7 +313,7 @@
     border: 8px solid transparent;
     margin-left: -4px; }
   .dante-menu:after {
-    border-top-color: #262626;
+    border-top-color: #333333;
     bottom: -15px; }
 
 .dante-menu--active {
@@ -320,6 +336,20 @@
   padding: 0;
   line-height: 0; }
 
+.dante-menu-divider {
+  width: 1px;
+  height: 24px;
+  margin: 9px 2px;
+  background: rgba(255, 255, 255, 0.2);
+  display: inline-block;
+  overflow: hidden;
+  cursor: default;
+  line-height: 42px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none; }
+
 .dante-menu-button {
   min-width: 20px;
   display: inline-block;
@@ -331,7 +361,6 @@
   cursor: pointer;
   font-size: 16px;
   line-height: 42px;
-  height: 42px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -347,6 +376,13 @@
   border-bottom-right-radius: 5px;
   padding-right: 18px; }
 
+.dante-menu-button--disabled {
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+  user-select: none !important;
+  opacity: .3; }
+
 .dante-menu-linkinput {
   display: none;
   position: absolute;
@@ -369,12 +405,12 @@
   color: #FFFFFF;
   border: none;
   outline: none;
-  font-size: 16px;
+  font-size: 14px;
   box-sizing: border-box;
   border-radius: 5px;
   appearance: none;
   text-align: left;
-  font-family: "freight-text-pro", "Merriweather", Georgia, Cambria, "Times New Roman", Times, serif;
+  font-family: "jaf-bernino-sans", "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
   letter-spacing: 0.01rem;
   font-weight: 400;
   font-style: normal;
@@ -398,17 +434,17 @@
     opacity: 1;
     pointer-events: auto; }
   .inlineTooltip.is-scaled {
-    width: 178px;
     -webkit-transition-delay: 0;
     transition-delay: 0; }
 
 .inlineTooltip-menu {
-  display: inline-block;
-  padding-left: 22px; }
+  width: 178px; }
 .inlineTooltip-menu button {
   margin-right: 9px; }
 
 .inlineTooltip-button {
+  float: left;
+  margin-right: 22px;
   display: inline-block;
   position: relative;
   outline: 0;
@@ -454,15 +490,15 @@
   transform: scale(1);
   -webkit-transition: -webkit-transform 250ms, 100ms border-color, 100ms color;
   transition: transform 250ms, 100ms border-color, 100ms color; }
-.inlineTooltip-button.scale:nth-child(2) {
-  -webkit-transition-delay: 30ms;
-  transition-delay: 30ms; }
-.inlineTooltip-button.scale:nth-child(3) {
-  -webkit-transition-delay: 60ms;
-  transition-delay: 60ms; }
 .inlineTooltip-button.scale:nth-child(4) {
   -webkit-transition-delay: 90ms;
   transition-delay: 90ms; }
+.inlineTooltip-button.scale:nth-child(3) {
+  -webkit-transition-delay: 60ms;
+  transition-delay: 60ms; }
+.inlineTooltip-button.scale:nth-child(2) {
+  -webkit-transition-delay: 30ms;
+  transition-delay: 30ms; }
 .inlineTooltip-button.control {
   -webkit-transition: -webkit-transform 100ms, 100ms border-color, 100ms color;
   transition: transform 100ms, 100ms border-color, 100ms color;
@@ -514,7 +550,7 @@
 .popover--tooltip {
   pointer-events: none; }
 .popover--tooltip .popover-inner {
-  background: #333;
+  background: #333333;
   border-radius: 4px;
   color: #fff; }
 
@@ -529,7 +565,7 @@
 
 .popover--Aligntooltip .popover-inner {
   padding: 0;
-  background: #333;
+  background: #333333;
   color: #fff; }
 
 .popover--typeahead .popover-inner {
@@ -561,7 +597,7 @@
   position: absolute; }
 
 .popover-arrow:after {
-  background-color: #333; }
+  background-color: #333333; }
 
 .popover--top .popover-arrow,
 .popover--bottom .popover-arrow {
@@ -592,25 +628,25 @@
   -webkit-transform: rotate(45deg) translate(-5px, -5px);
   -ms-transform: rotate(45deg) translate(-5px, -5px);
   transform: rotate(45deg) translate(-5px, -5px);
-  box-shadow: 1px 1px 1px -1px #333; }
+  box-shadow: 1px 1px 1px -1px #333333; }
 
 .popover--right .popover-arrow:after {
   -webkit-transform: rotate(45deg) translate(6px, -6px);
   -ms-transform: rotate(45deg) translate(6px, -6px);
   transform: rotate(45deg) translate(6px, -6px);
-  box-shadow: -1px 1px 1px -1px #333; }
+  box-shadow: -1px 1px 1px -1px #333333; }
 
 .popover--bottom .popover-arrow:after {
   -webkit-transform: rotate(45deg) translate(6px, 6px);
   -ms-transform: rotate(45deg) translate(6px, 6px);
   transform: rotate(45deg) translate(6px, 6px);
-  box-shadow: -1px -1px 1px -1px #333; }
+  box-shadow: -1px -1px 1px -1px #333333; }
 
 .popover--left .popover-arrow:after {
   -webkit-transform: rotate(45deg) translate(-6px, 6px);
   -ms-transform: rotate(45deg) translate(-6px, 6px);
   transform: rotate(45deg) translate(-6px, 6px);
-  box-shadow: 1px -1px 1px -1px #333; }
+  box-shadow: 1px -1px 1px -1px #333333; }
 
 .graf--h2,
 .graf--h3,
@@ -847,28 +883,18 @@ p[data-align="center"],
   max-width: 100%; }
 
 .imageCaption {
-  position: absolute;
-  left: -172px;
-  width: 150px;
   top: 0;
-  text-align: right;
+  text-align: center;
   margin-top: 0;
-  font-family: "freight-text-pro",Georgia,Cambria,"Times New Roman",Times,serif;
-  letter-spacing: 0.01rem;
+  font-family: "jaf-bernino-sans", "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+  letter-spacing: 0;
   font-weight: 400;
-  font-style: italic;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 1.4;
   color: rgba(0, 0, 0, 0.6);
   outline: 0;
-  z-index: 300; }
-.imageCaption:before {
-  width: 25%;
-  margin-left: 75%;
-  border-top: 1px solid rgba(0, 0, 0, 0.15);
-  display: block;
-  content: "";
-  margin-bottom: 10px; }
+  z-index: 300;
+  margin-top: 10px; }
 
 @media (max-width: 1200px) {
   .imageCaption,
@@ -877,10 +903,7 @@ p[data-align="center"],
     width: 100%;
     text-align: center;
     left: 0;
-    margin-top: 10px; }
-
-  .imageCaption:before {
-    display: none; } }
+    margin-top: 10px; } }
 figure.graf--layoutOutsetLeft .imageCaption,
 figure.graf--layoutOutsetLeft .postField--outsetCenterImage > .imageCaption {
   position: relative;
@@ -888,8 +911,6 @@ figure.graf--layoutOutsetLeft .postField--outsetCenterImage > .imageCaption {
   text-align: center;
   left: 0;
   margin-top: 10px; }
-figure.graf--layoutOutsetLeft .imageCaption:before {
-  display: none; }
 
 figure.is-defaultValue .imageCaption,
 .graf--sectionCaption.is-defaultValue {
@@ -1162,8 +1183,3 @@ a[rel=token], .markup--query {
   margin-right: 30px;
   padding-top: 10px;
   padding-bottom: 10px; }
-
-.debug .section-inner .is-selected {
-  outline-color: #55b6b3;
-  outline-width: thin;
-  outline-style: dotted; }

data/dist/js/dante-editor.js

@@ -8,7 +8,7 @@
     defaults: {
       image_placeholder: '../images/dante/media-loading-placeholder.png'
     },
-    version: "0.1.1"
+    version: "0.1.2"
   };
 
 }).call(this);
@@ -2850,7 +2850,7 @@
       var control_spacing, control_width, coord_left, coord_top, pull_size, tooltip;
       tooltip = $(this.el);
       control_width = tooltip.find(".control").css("width");
-      control_spacing = tooltip.find(".inlineTooltip-menu").css("padding-left");
+      control_spacing = tooltip.find(".inlineTooltip-button").css("margin-right");
       pull_size = parseInt(control_width.replace(/px/, "")) + parseInt(control_spacing.replace(/px/, ""));
       coord_left = coords.left - pull_size;
       coord_top = coords.top;
@@ -3379,20 +3379,24 @@
 
         /*
         buttons: [
-            'blockquote', 'h2', 'h3', 'p', 'code', 'insertorderedlist', 'insertunorderedlist', 'inserthorizontalrule',
+            'blockquote', 'h3', 'h4', 'p', 'code', 'insertorderedlist', 'insertunorderedlist', 'inserthorizontalrule',
             'indent', 'outdent', 'bold', 'italic', 'underline', 'createlink'
           ]
          */
-        buttons: ['bold', 'italic', 'h2', 'h3', 'h4', 'blockquote', 'createlink']
+        buttons: ['bold', 'italic', 'createlink', 'divider', 'h3', 'h4', 'blockquote']
       };
     };
 
     Menu.prototype.template = function() {
       var html;
-      html = "<div class='dante-menu-linkinput'><input class='dante-menu-input' placeholder='http://'><div class='dante-menu-button'>x</div></div>";
+      html = "<div class='dante-menu-linkinput'><input class='dante-menu-input' placeholder='Paste or type a link'><div class='dante-menu-button'>x</div></div>";
       html += "<ul class='dante-menu-buttons'>";
       _.each(this.config.buttons, function(item) {
-        return html += "<li class='dante-menu-button'><i class=\"dante-icon icon-" + item + "\" data-action=\"" + item + "\"></i></li>";
+        if (item === "divider") {
+          return html += "<li class='dante-menu-divider'></li>";
+        } else {
+          return html += "<li class='dante-menu-button'><i class=\"dante-icon icon-" + item + "\" data-action=\"" + item + "\"></i></li>";
+        }
       });
       html += "</ul>";
       return html;
@@ -3418,7 +3422,12 @@
           input.focus();
         }
       } else {
-        this.menuApply(action);
+        if ($(ev.currentTarget).hasClass("dante-menu-button--disabled")) {
+          utils.log("menu " + action + " item blocked!");
+          ev.preventDefault();
+        } else {
+          this.menuApply(action);
+        }
       }
       return false;
     };
@@ -3579,9 +3588,9 @@
               utils.log("nothing to select");
           }
           if (tag.match(/(?:h[1-6])/i)) {
-            $(_this.el).find(".icon-bold, .icon-italic, .icon-blockquote").parent("li").remove();
+            _this.toggleMenuButtons(_this.el, ".icon-bold, .icon-italic");
           } else if (tag === "indent") {
-            $(_this.el).find(".icon-h2, .icon-h3, .icon-h4, .icon-blockquote").parent("li").remove();
+            _this.toggleMenuButtons(_this.el, ".icon-h3, .icon-h4, .icon-blockquote");
           }
           return _this.highlight(tag);
         };
@@ -3592,6 +3601,10 @@
       return $(".icon-" + tag).parent("li").addClass("active");
     };
 
+    Menu.prototype.toggleMenuButtons = function(el, buttons) {
+      return $(el).find(buttons).parent("li").addClass("dante-menu-button--disabled");
+    };
+
     Menu.prototype.show = function() {
       $(this.el).addClass("dante-menu--active");
       this.closeInput();

data/lib/dante-editor/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dante-editor
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Miguel Michelson