formagic 0.3.8 → 0.3.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 15c1f064f1b01b4388e86e70974a0c75213fc5bf
-  data.tar.gz: 633b109c4479ae67b2f39757ccec3da53112542e
+  metadata.gz: 79015f55a3f1cfacca4bee34191aa33b1fb3f745
+  data.tar.gz: a76c54dbe60f720d3dcb4cd91d1e3bb8cf005767
 SHA512:
-  metadata.gz: dd7dd54998f2a9474add3be59b0ee99e7fe2ad4d562b5c6e74169a20e242ba29ffebb18749d16977fcd25a335031b125bfffcdb74560b5173512a5ea515bfdd2
-  data.tar.gz: c3e779c4ba42167afc1fd0263e38600e50077c7e40cd0e18b537fbdab511b66614b772b887a4280558ddda824f3713f830640f838ee1a8b4050b297bd3b1c4c4
+  metadata.gz: 5a1dfef367302b2b09eef3e03d463ba029ffd355663ef8647e34e7f8e7d5ce184c81170286608143144cec3d83b24a2e185e3d8a788f3bbc9404091513f094b2
+  data.tar.gz: a3d522aafd769bd9bd9670ada5b00597ef4c4ed460b0eb3dc49e596b93afbaeb8ec513469c1f97ad1cf38223978c1520701d3f592e2ae09348472ca060a72d1a

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    formagic (0.3.7)
+    formagic (0.3.9)
       bourbon (>= 3.2)
       normalize-rails (>= 3.0)
 

data/app/assets/javascripts/formagic/inputs/markdown.coffee

@@ -7,9 +7,10 @@
 # Markdown input supports syntax highlighting and optional compilation to html.
 #
 # Config options:
-#   label         - Input label
-#   aceOptions    - Custom options for overriding default ones
-#   htmlFieldName - Input name for generated HTML content
+#   label          - Input label
+#   aceOptions     - Custom options for overriding default ones
+#   htmlFieldName  - Input name for generated HTML content
+#   disableToolbar - Do not show shorcuts panel
 #
 # Input config example:
 #   body_md: { type: 'markdown', label: 'Article', htmlFieldName: 'body_html' }
@@ -18,6 +19,7 @@
 #= require vendor/marked
 #= require vendor/ace
 #= require vendor/mode-markdown
+#= require ./markdown_toolbar
 # -----------------------------------------------------------------------------
 class @InputMarkdown extends InputString
   # PRIVATE ===================================================================
@@ -35,6 +37,9 @@ class @InputMarkdown extends InputString
     @$editor =$ "<div></div>"
     @$el.append @$editor
 
+    if ! @config.disableToolbar
+      @_add_toolbar()
+
   _update_inputs: ->
     md_source = @session.getValue()
     @$input.val(md_source)
@@ -48,6 +53,7 @@ class @InputMarkdown extends InputString
   # PUBLIC ====================================================================
 
   initialize: ->
+    @config.pluginConfig ||= {}
     @config.beforeInitialize?(this)
 
     @editor = ace.edit(@$editor.get(0))
@@ -59,7 +65,7 @@ class @InputMarkdown extends InputString
     @session.setMode("ace/mode/markdown")
 
     # options: https://github.com/ajaxorg/ace/wiki/Configuring-Ace
-    @editor.setOptions
+    aceOptions =
       autoScrollEditorIntoView: true
       minLines:                 5
       maxLines:                 Infinity
@@ -67,11 +73,11 @@ class @InputMarkdown extends InputString
       showGutter:               false
       highlightActiveLine:      false
       showPrintMargin:          false
+    $.merge(aceOptions, @config.pluginConfig)
 
+    @editor.setOptions aceOptions
     @session.on 'change', (e) => @_update_inputs()
-
     @_update_inputs()
-
     @config.onInitialize?(this)
 
   updateValue: (@value) ->
@@ -83,4 +89,6 @@ class @InputMarkdown extends InputString
     hash[@config.klassName]     = @$input.val()
     return hash
 
+include(InputMarkdown, inputMarkdownToolbar)
+
 chr.formInputs['markdown'] = InputMarkdown

data/app/assets/javascripts/formagic/inputs/markdown_toolbar.coffee

@@ -0,0 +1,96 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+# -----------------------------------------------------------------------------
+# INPUT MARKDOWN TOOLBAR
+# -----------------------------------------------------------------------------
+class @InputMarkdownToolbar
+  constructor: (@input) ->
+    @$el =$ "<div class='toolbar'>"
+
+    @topOffset = 40
+    @isFixed = false
+
+    @_bind_window_scroll()
+
+  # PRIVATE ===================================================================
+
+  _bind_window_scroll: ->
+    @$window =$ ".content:visible"
+    @$window.on "scroll", => @_check_offset()
+
+  _height: ->
+    toolbarBottomMargin = parseInt @$el.css("margin-bottom")
+    toolbarHeight = @$el.outerHeight() + toolbarBottomMargin
+
+  _check_offset: ->
+    @$ace = @input.$editor
+    aceOffset = @$ace.offset()
+    isBelowAceTop = aceOffset.top - @topOffset - @_height() <= 0
+    isAboveAceBottom = @$ace.outerHeight() + aceOffset.top -
+                       @topOffset - @$el.outerHeight() >= 0
+    if isBelowAceTop && isAboveAceBottom then @_fix() else @_unfix()
+
+  _fix: ->
+    if @isFixed
+      return
+      # some legacy workaround for mobile:
+      # webkit does not recalc top: 0 when focused on contenteditable
+      # if chr.isMobile() && @isFocused
+      #   @$el.css
+      #     position: "absolute"
+      #     top: @$window.scrollTop() - @$ace.offset().top
+
+    @$ace = @input.$editor
+    @$el.css
+      position: "fixed"
+      top: @topOffset
+      width: @input.$el.outerWidth()
+      zIndex: 300
+    @$ace.css("margin-top", @_height())
+    @isFixed = true
+
+  _unfix: ->
+    if ! @isFixed then return
+
+    @$ace = @input.$editor
+    @$el.css
+      position: 'relative'
+      left: ''
+      width: ''
+      top: ''
+    @$ace.css('margin-top', '')
+    @isFixed = false
+
+  # PUBLIC ====================================================================
+
+  addButton: (title, callback=$.noop) ->
+    @buttons ||= {}
+    $btn =$ "<button>#{title}</button>"
+    $btn.on "click", (e) => callback(@input.editor)
+    @$el.append $btn
+    @buttons[title] = $btn
+
+@inputMarkdownToolbar =
+  # PRIVATE ===================================================================
+
+  _add_toolbar: ->
+    @toolbar = new InputMarkdownToolbar(this)
+    @$label.after @toolbar.$el
+
+    @toolbar.addButton "Link", $.proxy(@_insert_link, this)
+    @toolbar.addButton "Image", $.proxy(@_insert_images, this)
+
+  _insert_link: (editor) ->
+    url = prompt("URL", "")
+    if url
+      title = editor.getSelectedText()
+      if title == "" then title = url
+      editor.insert "[#{title}](#{url})"
+    editor.focus()
+
+  _insert_images: (editor) ->
+    chr.modules.loft.showModal "images", true, (objects) ->
+      for image in objects
+        editor.insert "![#{image.name}](#{image.file.url})\n"
+    editor.focus()

data/app/assets/stylesheets/formagic.scss

@@ -15,6 +15,7 @@ $formagic-assertive-color: #e32e2e !default;
 $formagic-label-color: lighten($formagic-base-color, 25%);
 $formagic-placeholder-color: rgb(210,210,210) !default;
 $formagic-border-color: #f1f1f1 !default;
+$formagic-bg-color: #fbfbfd !default;
 
 @mixin custom-scrollbar($color, $bg-color, $radius) {
   &::-webkit-scrollbar       { width: 6px; background-color: $bg-color; }
@@ -73,3 +74,4 @@ $formagic-border-color: #f1f1f1 !default;
 @import "formagic/array";
 @import "formagic/actions";
 @import "formagic/url";
+@import "formagic/markdown";

data/app/assets/stylesheets/formagic/markdown.scss

@@ -0,0 +1,18 @@
+.input-markdown {
+  .toolbar {
+    margin: 0em -1em 1em;
+    border-top: 1px solid $formagic-border-color;
+    border-bottom: 1px solid $formagic-border-color;
+    background-color: $white-color;
+  }
+
+  button {
+    border: 0;
+    border-radius: 0;
+    color: $formagic-base-color;
+    font-size: 0.8em;
+    line-height: 2.5;
+    padding-left: 1.25em;
+    padding-right: 1.25em;
+  }
+}

data/lib/formagic/version.rb

@@ -1,3 +1,3 @@
 module Formagic
-  VERSION = "0.3.8"
+  VERSION = "0.3.9"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: formagic
 version: !ruby/object:Gem::Version
-  version: 0.3.8
+  version: 0.3.9
 platform: ruby
 authors:
 - Alexander Kravets
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2015-12-21 00:00:00.000000000 Z
+date: 2015-12-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bourbon
@@ -108,6 +108,7 @@ files:
 - app/assets/javascripts/formagic/inputs/list_reorder.coffee
 - app/assets/javascripts/formagic/inputs/list_typeahead.coffee
 - app/assets/javascripts/formagic/inputs/markdown.coffee
+- app/assets/javascripts/formagic/inputs/markdown_toolbar.coffee
 - app/assets/javascripts/formagic/inputs/password.coffee
 - app/assets/javascripts/formagic/inputs/redactor.coffee
 - app/assets/javascripts/formagic/inputs/redactor_character.coffee
@@ -144,6 +145,7 @@ files:
 - app/assets/stylesheets/formagic/group.scss
 - app/assets/stylesheets/formagic/image.scss
 - app/assets/stylesheets/formagic/list.scss
+- app/assets/stylesheets/formagic/markdown.scss
 - app/assets/stylesheets/formagic/nested-form.scss
 - app/assets/stylesheets/formagic/redactor-character.scss
 - app/assets/stylesheets/formagic/select.scss