character_editor 0.0.9 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e9ead82356a9f7446f9a612643dca791b865b2aa
-  data.tar.gz: f69a8651fdeed67516b651cd7d6f22bda7531c7d
+  metadata.gz: a28ae915e435aff9c7c4b42efa95dcbddd8e2b55
+  data.tar.gz: 567065cb629ca416769396e391657318295d41f8
 SHA512:
-  metadata.gz: 30d2bb4d3b1039e35a4a722c4bb1b11af61fc8356d80417be9a3475c6d262c948939aa94c03d93b83786b81500eed30baadefb5506653376215e8300dccbb8e1
-  data.tar.gz: ef4c68f4aedb47bea73fab5cae920edf1a5d4cde3fc223f1854643ea4f6eef470fc5dc0889bd7dab5b007b8fdffc83ef3ca1345e8f307a860d3f3659cfdc6ca1
+  metadata.gz: 6d00e2832a413ae65a4d3feaea248d8f4485b2e7ebd3e0265f2419a5e4d6df2734d68f66dcf0ef50c40a7959f080a77847bd75645fbc4966d4dd76e0df6b9e22
+  data.tar.gz: 67543b68ee242101e2f8d06d3fa3d5e9b3c30e3627547092451782f47d0d7057a6aca4e796d4c9bead7e7d024f73b6fabe1856067bf9642bff98fad994d3e44a

data/README.md

@@ -5,7 +5,12 @@ Based on [MediumEditor](https://github.com/daviferreira/medium-editor) — Mediu
 ## TODO:
  - fix copy/paste in the editor (test Safari/Chrome/FF, might be related to span issue)
  - pre tag is not removed when unset
- - insert images (integrate with Character assets plugin)
+ - buttons for image settings
+ - fix placeholder
+ - fix insert image after pre
+ - figure out default buttons
+ - hotkeys
+ - improve toolbar performance (no DOM changes)
 
 ### Span Issue: happens only in Chrome
 

data/app/assets/javascripts/character_editor/insert/_insert.coffee

@@ -0,0 +1,97 @@
+#= require_self
+
+window.delay = (ms, fnc) -> setTimeout(fnc, ms)
+
+@CharacterEditor.Insert =
+  init: (options, elem) ->
+    @options = $.extend({}, @options, options)
+
+    @$elem = $("<div id=character_editor_insert_button class='character-editor-insert'><i class='chr-icon icon-plus-alt'></i></div>")
+    $(@options.viewSelector).append(@$elem)
+
+    @_build()
+    @_bind()
+    @
+
+  options: {}
+
+  _build: ->
+
+  _hide: ->
+    delay 50, => if not @stayVisible then @$elem.removeClass('visible')
+
+  _show: ($editorElement, offsetY=0) ->
+    # TODO: it looks like we don't need live recalculations, rather can have just a table of positions
+    delay 50, =>
+      if @stayVisible
+        offsetX  = -($(@options.viewSelector).offset().left - $editorElement.offset().left) - 5 # '+' moves to the right
+        offsetY += Math.floor($editorElement.offset().top + $(@options.viewSelector).scrollTop() - $(@options.viewSelector).offset().top)
+        @$elem.css({ top: offsetY, 'margin-left': offsetX }).addClass('visible')
+
+  _bind: ->
+    @_bindOnHover()
+    @_bindImage()
+
+  _bindOnHover: ->
+    @$elem.on 'mouseenter', (e) => @stayVisible = true
+    @$elem.on 'mouseleave', (e) => @stayVisible = false ; @_hide()
+    @_bindMousemove()
+    #$(document).on 'mouseleave', '.character-editor-insert-enabled', => @stayVisible = false ; @_hide()
+
+  _bindMousemove: ->
+    $(document).on 'mousemove', '.character-editor-insert-enabled', (e) =>
+      # TODO: block this while scrolling is not stopped
+      $editorElement = $(e.currentTarget)
+      currentEditor  = $editorElement.data('editor')
+
+      if currentEditor.options.disableInsert
+        return
+
+      if e.currentTarget == e.target # no child block is hovered
+        offsetY   = 0
+        editorTop = $editorElement.offset().top
+
+        if $editorElement.children().length > 0
+          paddingTop = $editorElement.children().first().offset().top - editorTop
+        else
+          paddingTop = parseInt($editorElement.css('padding-top'))
+
+        if e.offsetY <= paddingTop # beginning of the editor
+          if $editorElement.children().length > 0
+            offsetY = paddingTop - @$elem.height()
+
+          @$insertAfterBlock = false
+          @$activeEditor = $editorElement
+
+        else # cursor in between blocks
+          $editorElement.children().each (i, el) =>
+            $block = $(el)
+            y = $block.offset().top - editorTop + $block.height()
+
+            if y < e.offsetY
+              @$insertAfterBlock = $block
+              offsetY = y
+
+        @stayVisible  = true
+        @_show($editorElement, offsetY)
+
+      else
+        @stayVisible = false
+        @_hide()
+
+  _bindImage: ->
+    $('#character_editor_insert_button').on 'click', (e) =>
+      chr.execute 'showImages', true, (images) =>
+        _.each images.reverse(), (model) =>
+          @_insertImage(model.get('image'))
+
+  _insertImage: (data) ->
+    imageUrl = data.image.regular.url
+    $el = $("""<figure class='character-image' contenteditable='false'><img src='#{ imageUrl }'></figure>""")
+    if @$insertAfterBlock then $el.insertAfter(@$insertAfterBlock) else $el.prependTo(@$activeEditor)
+
+  destroy: ->
+    $('#character_editor_insert_button').off 'click'
+    $(document).off 'mousemove', '.character-editor-insert-enabled'
+    @$elem.off 'mouseenter, mouseleave'
+    @$elem.remove()

data/app/assets/javascripts/character_editor/toolbar/_templates.coffee

@@ -13,19 +13,19 @@
 
   l =
     bold:           '<i class="fa fa-bold"></i>'
-    italic :        '<i class="fa fa-italic"></i>'
+    italic:         '<i class="fa fa-italic"></i>'
     underline:      '<i class="fa fa-underline"></i>'
     strikethrough:  '<i class="fa fa-strikethrough"></i>'
-    superscript:    '<i class="fa fa-superscript"></i>'
-    subscript:      '<i class="fa fa-subscript"></i>'
     anchor:         '<i class="fa fa-link"></i>'
-    image:          '<i class="fa fa-picture-o"></i>'
     quote:          '<i class="fa fa-quote-right"></i>'
     orderedlist:    '<i class="fa fa-list-ol"></i>'
     unorderedlist:  '<i class="fa fa-list-ul"></i>'
     pre:            '<i class="fa fa-code fa-lg"></i>'
     header1:        "<b>#{ options.firstHeader.toUpperCase() }</b>"
     header2:        "<b>#{ options.secondHeader.toUpperCase() }</b>"
+    #image:          '<i class="fa fa-picture-o"></i>'
+    #superscript:    '<i class="fa fa-superscript"></i>'
+    #subscript:      '<i class="fa fa-subscript"></i>'
 
   templates =
     bold:           "<li><button class='#{classPrefix} #{classPrefix}-bold'
@@ -40,18 +40,9 @@
     strikethrough:  "<li><button class='#{classPrefix} #{classPrefix}-strikethrough'
                                  data-action='strikethrough' data-element='strike'>#{ l.strikethrough }</button></li>"
 
-    superscript:    "<li><button class='#{classPrefix} #{classPrefix}-superscript'
-                                 data-action='superscript' data-element='sup'>#{ l.superscript }</button></li>"
-
-    subscript:      "<li><button class='#{classPrefix} #{classPrefix}-subscript'
-                                 data-action='subscript' data-element='sub'>#{ l.subscript }</button></li>"
-
     anchor:         "<li><button class='#{classPrefix} #{classPrefix}-anchor'
                                  data-action='anchor' data-element='a'>#{ l.anchor }</button></li>"
 
-    image:          "<li><button class='#{classPrefix} #{classPrefix}-image'
-                                 data-action='image' data-element='img'>#{ l.image }</button></li>"
-
     quote:          "<li><button class='#{classPrefix} #{classPrefix}-quote'
                                  data-action='append-blockquote' data-element='blockquote'>#{ l.quote }</button></li>"
 
@@ -69,4 +60,14 @@
 
     header2:        "<li><button class='#{classPrefix} #{classPrefix}-header2'
                                  data-action='append-#{ options.secondHeader }' data-element='#{ options.secondHeader }'>#{ l.header2 }</button></li>"
+
+    # image:          "<li><button class='#{classPrefix} #{classPrefix}-image'
+    #                              data-action='image' data-element='img'>#{ l.image }</button></li>"
+
+    # superscript:    "<li><button class='#{classPrefix} #{classPrefix}-superscript'
+    #                              data-action='superscript' data-element='sup'>#{ l.superscript }</button></li>"
+
+    # subscript:      "<li><button class='#{classPrefix} #{classPrefix}-subscript'
+    #                              data-action='subscript' data-element='sub'>#{ l.subscript }</button></li>"
+
   return templates

data/app/assets/javascripts/character_editor/toolbar/_toolbar.coffee

@@ -53,7 +53,7 @@
 
     @$toolbarButtons.show()
 
-    @$anchorInput.css('width', @$elem.width() - 40 - 12) # TODO: remove build in themes values
+    @$anchorInput.css('width', @$elem.width() - 40) # TODO: remove build in themes values
 
     @keepToolbarVisible = false
 
@@ -102,9 +102,9 @@
       if !@options.allowMultiParagraphSelection and hasMultiParagraphs
         return @_hide()
 
-      @_setButtonStates()
       @_show()
       @_setPosition()
+      @_setButtonStates()
 
   _setButtonStates: ->
     $buttons = @$elem.find('button')

data/app/assets/javascripts/character_editor.coffee

@@ -10,9 +10,11 @@
 
 ###
 
+#= require keypress
 #= require_self
 #= require character_editor/_selection
 #= require character_editor/toolbar/_toolbar
+#= require character_editor/insert/_insert
 
 # Object - an object representing a concept that you want
 # to model (e.g. a car)
@@ -26,6 +28,7 @@
     diffTop:                      -10
     disableReturn:                false
     disableToolbar:               false
+    disableInsert:                false
     forcePlainText:               true
     placeholder:                  'Type your text...'
     targetBlank:                  false
@@ -33,7 +36,7 @@
     secondHeader:                 'h3'
     tabSpaces:                    '    '
     viewSelector:                 'body'
-    parentElements:               ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre']
+    parentElements:               ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'ul', 'ol']
 
   _dataOptions: ->
     result = {}
@@ -81,6 +84,16 @@
     if not @options.disableToolbar
       @_addToolbar()
 
+    if not @options.disableInsert
+      @$elem.addClass 'character-editor-insert-enabled'
+      @_addInsert()
+
+  _addInsert: ->
+    @insert = window.characterEditorInsert
+    if not @insert
+      @insert = Object.create(CharacterEditor.Insert).init(@options)
+      window.characterEditorInsert = @insert
+
   _addToolbar: ->
     @toolbar = window.characterEditorToolbar
     if not @toolbar
@@ -171,6 +184,11 @@
       delete @toolbar
       delete window.characterEditorToolbar
 
+    if @insert
+      @insert.destroy()
+      delete @insert
+      delete window.characterEditorInsert
+
 # Object.create support test, and fallback for browsers without it
 if typeof Object.create isnt "function"
   Object.create = (o) ->

data/app/assets/stylesheets/character_editor.scss

@@ -10,6 +10,26 @@ $button_size:   40px;
 .character-editor                     {
   &:focus                             { outline: 0;
   }
+  &.character-editor-insert-enabled   { padding: 20px 0;
+  }
+}
+
+.character-editor-insert              { position: absolute;
+                                        width: 20px;
+                                        height: 20px;
+                                        left: 0px;
+                                        top: 0px;
+                                        visibility: hidden;
+                                        cursor: pointer;
+                                        box-sizing: border-box;
+                                        z-index: 1;
+  i                                   { width: 16px;
+                                        height: 16px;
+                                        margin-left: 2px;
+                                        margin-top: 2px;
+  }
+  &.visible                           { visibility: visible;
+  }
 }
 
 .character-editor-placeholder         { position: relative;
@@ -53,7 +73,7 @@ $button_size:   40px;
                                         cursor: pointer;
                                         font-size: 14px;
                                         text-decoration: none;
-      &:hover                         { background-color: $border_color;
+      &:hover                         { //background-color: $border_color;
                                         color: #fff;
       }
       &:focus                         { outline: none;
@@ -75,7 +95,7 @@ $button_size:   40px;
   }
   input[type='text']                  { display: inline;
                                         padding: 6px;
-                                        height: $button_size - 12px;
+                                        height: $button_size;
                                         background-color: $bgcolor!important;
                                         color: $link_color;
                                         border: none;

data/lib/character_editor/version.rb

@@ -1,5 +1,5 @@
 module Character
   module Editor
-    VERSION = '0.0.9'
+    VERSION = '0.1.2'
   end
 end