formagic 0.3.8 → 0.3.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/app/assets/javascripts/formagic/inputs/markdown.coffee +14 -6
- data/app/assets/javascripts/formagic/inputs/markdown_toolbar.coffee +96 -0
- data/app/assets/stylesheets/formagic.scss +2 -0
- data/app/assets/stylesheets/formagic/markdown.scss +18 -0
- data/lib/formagic/version.rb +1 -1
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 79015f55a3f1cfacca4bee34191aa33b1fb3f745
|
|
4
|
+
data.tar.gz: a76c54dbe60f720d3dcb4cd91d1e3bb8cf005767
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 5a1dfef367302b2b09eef3e03d463ba029ffd355663ef8647e34e7f8e7d5ce184c81170286608143144cec3d83b24a2e185e3d8a788f3bbc9404091513f094b2
|
|
7
|
+
data.tar.gz: a3d522aafd769bd9bd9670ada5b00597ef4c4ed460b0eb3dc49e596b93afbaeb8ec513469c1f97ad1cf38223978c1520701d3f592e2ae09348472ca060a72d1a
|
data/Gemfile.lock
CHANGED
|
@@ -7,9 +7,10 @@
|
|
|
7
7
|
# Markdown input supports syntax highlighting and optional compilation to html.
|
|
8
8
|
#
|
|
9
9
|
# Config options:
|
|
10
|
-
# label
|
|
11
|
-
# aceOptions
|
|
12
|
-
# htmlFieldName
|
|
10
|
+
# label - Input label
|
|
11
|
+
# aceOptions - Custom options for overriding default ones
|
|
12
|
+
# htmlFieldName - Input name for generated HTML content
|
|
13
|
+
# disableToolbar - Do not show shorcuts panel
|
|
13
14
|
#
|
|
14
15
|
# Input config example:
|
|
15
16
|
# body_md: { type: 'markdown', label: 'Article', htmlFieldName: 'body_html' }
|
|
@@ -18,6 +19,7 @@
|
|
|
18
19
|
#= require vendor/marked
|
|
19
20
|
#= require vendor/ace
|
|
20
21
|
#= require vendor/mode-markdown
|
|
22
|
+
#= require ./markdown_toolbar
|
|
21
23
|
# -----------------------------------------------------------------------------
|
|
22
24
|
class @InputMarkdown extends InputString
|
|
23
25
|
# PRIVATE ===================================================================
|
|
@@ -35,6 +37,9 @@ class @InputMarkdown extends InputString
|
|
|
35
37
|
@$editor =$ "<div></div>"
|
|
36
38
|
@$el.append @$editor
|
|
37
39
|
|
|
40
|
+
if ! @config.disableToolbar
|
|
41
|
+
@_add_toolbar()
|
|
42
|
+
|
|
38
43
|
_update_inputs: ->
|
|
39
44
|
md_source = @session.getValue()
|
|
40
45
|
@$input.val(md_source)
|
|
@@ -48,6 +53,7 @@ class @InputMarkdown extends InputString
|
|
|
48
53
|
# PUBLIC ====================================================================
|
|
49
54
|
|
|
50
55
|
initialize: ->
|
|
56
|
+
@config.pluginConfig ||= {}
|
|
51
57
|
@config.beforeInitialize?(this)
|
|
52
58
|
|
|
53
59
|
@editor = ace.edit(@$editor.get(0))
|
|
@@ -59,7 +65,7 @@ class @InputMarkdown extends InputString
|
|
|
59
65
|
@session.setMode("ace/mode/markdown")
|
|
60
66
|
|
|
61
67
|
# options: https://github.com/ajaxorg/ace/wiki/Configuring-Ace
|
|
62
|
-
|
|
68
|
+
aceOptions =
|
|
63
69
|
autoScrollEditorIntoView: true
|
|
64
70
|
minLines: 5
|
|
65
71
|
maxLines: Infinity
|
|
@@ -67,11 +73,11 @@ class @InputMarkdown extends InputString
|
|
|
67
73
|
showGutter: false
|
|
68
74
|
highlightActiveLine: false
|
|
69
75
|
showPrintMargin: false
|
|
76
|
+
$.merge(aceOptions, @config.pluginConfig)
|
|
70
77
|
|
|
78
|
+
@editor.setOptions aceOptions
|
|
71
79
|
@session.on 'change', (e) => @_update_inputs()
|
|
72
|
-
|
|
73
80
|
@_update_inputs()
|
|
74
|
-
|
|
75
81
|
@config.onInitialize?(this)
|
|
76
82
|
|
|
77
83
|
updateValue: (@value) ->
|
|
@@ -83,4 +89,6 @@ class @InputMarkdown extends InputString
|
|
|
83
89
|
hash[@config.klassName] = @$input.val()
|
|
84
90
|
return hash
|
|
85
91
|
|
|
92
|
+
include(InputMarkdown, inputMarkdownToolbar)
|
|
93
|
+
|
|
86
94
|
chr.formInputs['markdown'] = InputMarkdown
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
# -----------------------------------------------------------------------------
|
|
2
|
+
# Author: Alexander Kravets <alex@slatestudio.com>,
|
|
3
|
+
# Slate Studio (http://www.slatestudio.com)
|
|
4
|
+
# -----------------------------------------------------------------------------
|
|
5
|
+
# INPUT MARKDOWN TOOLBAR
|
|
6
|
+
# -----------------------------------------------------------------------------
|
|
7
|
+
class @InputMarkdownToolbar
|
|
8
|
+
constructor: (@input) ->
|
|
9
|
+
@$el =$ "<div class='toolbar'>"
|
|
10
|
+
|
|
11
|
+
@topOffset = 40
|
|
12
|
+
@isFixed = false
|
|
13
|
+
|
|
14
|
+
@_bind_window_scroll()
|
|
15
|
+
|
|
16
|
+
# PRIVATE ===================================================================
|
|
17
|
+
|
|
18
|
+
_bind_window_scroll: ->
|
|
19
|
+
@$window =$ ".content:visible"
|
|
20
|
+
@$window.on "scroll", => @_check_offset()
|
|
21
|
+
|
|
22
|
+
_height: ->
|
|
23
|
+
toolbarBottomMargin = parseInt @$el.css("margin-bottom")
|
|
24
|
+
toolbarHeight = @$el.outerHeight() + toolbarBottomMargin
|
|
25
|
+
|
|
26
|
+
_check_offset: ->
|
|
27
|
+
@$ace = @input.$editor
|
|
28
|
+
aceOffset = @$ace.offset()
|
|
29
|
+
isBelowAceTop = aceOffset.top - @topOffset - @_height() <= 0
|
|
30
|
+
isAboveAceBottom = @$ace.outerHeight() + aceOffset.top -
|
|
31
|
+
@topOffset - @$el.outerHeight() >= 0
|
|
32
|
+
if isBelowAceTop && isAboveAceBottom then @_fix() else @_unfix()
|
|
33
|
+
|
|
34
|
+
_fix: ->
|
|
35
|
+
if @isFixed
|
|
36
|
+
return
|
|
37
|
+
# some legacy workaround for mobile:
|
|
38
|
+
# webkit does not recalc top: 0 when focused on contenteditable
|
|
39
|
+
# if chr.isMobile() && @isFocused
|
|
40
|
+
# @$el.css
|
|
41
|
+
# position: "absolute"
|
|
42
|
+
# top: @$window.scrollTop() - @$ace.offset().top
|
|
43
|
+
|
|
44
|
+
@$ace = @input.$editor
|
|
45
|
+
@$el.css
|
|
46
|
+
position: "fixed"
|
|
47
|
+
top: @topOffset
|
|
48
|
+
width: @input.$el.outerWidth()
|
|
49
|
+
zIndex: 300
|
|
50
|
+
@$ace.css("margin-top", @_height())
|
|
51
|
+
@isFixed = true
|
|
52
|
+
|
|
53
|
+
_unfix: ->
|
|
54
|
+
if ! @isFixed then return
|
|
55
|
+
|
|
56
|
+
@$ace = @input.$editor
|
|
57
|
+
@$el.css
|
|
58
|
+
position: 'relative'
|
|
59
|
+
left: ''
|
|
60
|
+
width: ''
|
|
61
|
+
top: ''
|
|
62
|
+
@$ace.css('margin-top', '')
|
|
63
|
+
@isFixed = false
|
|
64
|
+
|
|
65
|
+
# PUBLIC ====================================================================
|
|
66
|
+
|
|
67
|
+
addButton: (title, callback=$.noop) ->
|
|
68
|
+
@buttons ||= {}
|
|
69
|
+
$btn =$ "<button>#{title}</button>"
|
|
70
|
+
$btn.on "click", (e) => callback(@input.editor)
|
|
71
|
+
@$el.append $btn
|
|
72
|
+
@buttons[title] = $btn
|
|
73
|
+
|
|
74
|
+
@inputMarkdownToolbar =
|
|
75
|
+
# PRIVATE ===================================================================
|
|
76
|
+
|
|
77
|
+
_add_toolbar: ->
|
|
78
|
+
@toolbar = new InputMarkdownToolbar(this)
|
|
79
|
+
@$label.after @toolbar.$el
|
|
80
|
+
|
|
81
|
+
@toolbar.addButton "Link", $.proxy(@_insert_link, this)
|
|
82
|
+
@toolbar.addButton "Image", $.proxy(@_insert_images, this)
|
|
83
|
+
|
|
84
|
+
_insert_link: (editor) ->
|
|
85
|
+
url = prompt("URL", "")
|
|
86
|
+
if url
|
|
87
|
+
title = editor.getSelectedText()
|
|
88
|
+
if title == "" then title = url
|
|
89
|
+
editor.insert "[#{title}](#{url})"
|
|
90
|
+
editor.focus()
|
|
91
|
+
|
|
92
|
+
_insert_images: (editor) ->
|
|
93
|
+
chr.modules.loft.showModal "images", true, (objects) ->
|
|
94
|
+
for image in objects
|
|
95
|
+
editor.insert "\n"
|
|
96
|
+
editor.focus()
|
|
@@ -15,6 +15,7 @@ $formagic-assertive-color: #e32e2e !default;
|
|
|
15
15
|
$formagic-label-color: lighten($formagic-base-color, 25%);
|
|
16
16
|
$formagic-placeholder-color: rgb(210,210,210) !default;
|
|
17
17
|
$formagic-border-color: #f1f1f1 !default;
|
|
18
|
+
$formagic-bg-color: #fbfbfd !default;
|
|
18
19
|
|
|
19
20
|
@mixin custom-scrollbar($color, $bg-color, $radius) {
|
|
20
21
|
&::-webkit-scrollbar { width: 6px; background-color: $bg-color; }
|
|
@@ -73,3 +74,4 @@ $formagic-border-color: #f1f1f1 !default;
|
|
|
73
74
|
@import "formagic/array";
|
|
74
75
|
@import "formagic/actions";
|
|
75
76
|
@import "formagic/url";
|
|
77
|
+
@import "formagic/markdown";
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
.input-markdown {
|
|
2
|
+
.toolbar {
|
|
3
|
+
margin: 0em -1em 1em;
|
|
4
|
+
border-top: 1px solid $formagic-border-color;
|
|
5
|
+
border-bottom: 1px solid $formagic-border-color;
|
|
6
|
+
background-color: $white-color;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
button {
|
|
10
|
+
border: 0;
|
|
11
|
+
border-radius: 0;
|
|
12
|
+
color: $formagic-base-color;
|
|
13
|
+
font-size: 0.8em;
|
|
14
|
+
line-height: 2.5;
|
|
15
|
+
padding-left: 1.25em;
|
|
16
|
+
padding-right: 1.25em;
|
|
17
|
+
}
|
|
18
|
+
}
|
data/lib/formagic/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: formagic
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.3.
|
|
4
|
+
version: 0.3.9
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Alexander Kravets
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: exe
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2015-12-
|
|
11
|
+
date: 2015-12-23 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: bourbon
|
|
@@ -108,6 +108,7 @@ files:
|
|
|
108
108
|
- app/assets/javascripts/formagic/inputs/list_reorder.coffee
|
|
109
109
|
- app/assets/javascripts/formagic/inputs/list_typeahead.coffee
|
|
110
110
|
- app/assets/javascripts/formagic/inputs/markdown.coffee
|
|
111
|
+
- app/assets/javascripts/formagic/inputs/markdown_toolbar.coffee
|
|
111
112
|
- app/assets/javascripts/formagic/inputs/password.coffee
|
|
112
113
|
- app/assets/javascripts/formagic/inputs/redactor.coffee
|
|
113
114
|
- app/assets/javascripts/formagic/inputs/redactor_character.coffee
|
|
@@ -144,6 +145,7 @@ files:
|
|
|
144
145
|
- app/assets/stylesheets/formagic/group.scss
|
|
145
146
|
- app/assets/stylesheets/formagic/image.scss
|
|
146
147
|
- app/assets/stylesheets/formagic/list.scss
|
|
148
|
+
- app/assets/stylesheets/formagic/markdown.scss
|
|
147
149
|
- app/assets/stylesheets/formagic/nested-form.scss
|
|
148
150
|
- app/assets/stylesheets/formagic/redactor-character.scss
|
|
149
151
|
- app/assets/stylesheets/formagic/select.scss
|