dante-editor 0.0.10 → 0.0.11
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +4 -0
- data/app/assets/javascripts/dante.js +4 -0
- data/app/assets/javascripts/dante/editor.js.coffee +56 -25
- data/app/assets/javascripts/dante/tooltip.js.coffee +14 -304
- data/app/assets/javascripts/dante/tooltip_widget.js.coffee +10 -0
- data/app/assets/javascripts/dante/tooltip_widgets/embed.js.coffee +60 -0
- data/app/assets/javascripts/dante/tooltip_widgets/extract.js.coffee +64 -0
- data/app/assets/javascripts/dante/tooltip_widgets/uploader.js.coffee +224 -0
- data/app/assets/javascripts/dante/view.js.coffee +46 -1
- data/app/assets/stylesheets/{dante.css.scss → dante.scss} +0 -0
- data/bower.json +1 -1
- data/config.rb +2 -2
- data/dist/{0.0.10/css → css}/dante-editor.css +0 -0
- data/dist/{0.0.10/fonts → fonts}/dante/dante.eot +0 -0
- data/dist/{0.0.10/fonts → fonts}/dante/dante.svg +0 -0
- data/dist/{0.0.10/fonts → fonts}/dante/dante.ttf +0 -0
- data/dist/{0.0.10/fonts → fonts}/dante/dante.woff +0 -0
- data/dist/{0.0.10/fonts → fonts}/dante/fontello.eot +0 -0
- data/dist/{0.0.10/fonts → fonts}/dante/fontello.svg +0 -0
- data/dist/{0.0.10/fonts → fonts}/dante/fontello.ttf +0 -0
- data/dist/{0.0.10/fonts → fonts}/dante/fontello.woff +0 -0
- data/dist/{0.0.10/images → images}/dante/media-loading-placeholder.png +0 -0
- data/dist/{0.0.10/js → js}/dante-editor.js +355 -138
- data/lib/dante-editor/version.rb +1 -1
- data/source/assets/javascripts/examples/custom_toolbar.js.coffee +30 -0
- data/source/custom_toolbar.erb +29 -0
- data/source/layouts/layout.erb +1 -1
- metadata +20 -47
- data/dist/0.0.7/css/dante-editor.css +0 -1077
- data/dist/0.0.7/fonts/dante/dante.eot +0 -0
- data/dist/0.0.7/fonts/dante/dante.svg +0 -14
- data/dist/0.0.7/fonts/dante/dante.ttf +0 -0
- data/dist/0.0.7/fonts/dante/dante.woff +0 -0
- data/dist/0.0.7/fonts/dante/fontello.eot +0 -0
- data/dist/0.0.7/fonts/dante/fontello.svg +0 -36
- data/dist/0.0.7/fonts/dante/fontello.ttf +0 -0
- data/dist/0.0.7/fonts/dante/fontello.woff +0 -0
- data/dist/0.0.7/images/dante/media-loading-placeholder.png +0 -0
- data/dist/0.0.7/js/dante-editor.js +0 -2610
- data/dist/0.0.8/css/dante-editor.css +0 -1116
- data/dist/0.0.8/fonts/dante/dante.eot +0 -0
- data/dist/0.0.8/fonts/dante/dante.svg +0 -14
- data/dist/0.0.8/fonts/dante/dante.ttf +0 -0
- data/dist/0.0.8/fonts/dante/dante.woff +0 -0
- data/dist/0.0.8/fonts/dante/fontello.eot +0 -0
- data/dist/0.0.8/fonts/dante/fontello.svg +0 -36
- data/dist/0.0.8/fonts/dante/fontello.ttf +0 -0
- data/dist/0.0.8/fonts/dante/fontello.woff +0 -0
- data/dist/0.0.8/images/dante/media-loading-placeholder.png +0 -0
- data/dist/0.0.8/js/dante-editor.js +0 -2532
- data/dist/0.0.9/css/dante-editor.css +0 -1116
- data/dist/0.0.9/fonts/dante/dante.eot +0 -0
- data/dist/0.0.9/fonts/dante/dante.svg +0 -14
- data/dist/0.0.9/fonts/dante/dante.ttf +0 -0
- data/dist/0.0.9/fonts/dante/dante.woff +0 -0
- data/dist/0.0.9/fonts/dante/fontello.eot +0 -0
- data/dist/0.0.9/fonts/dante/fontello.svg +0 -36
- data/dist/0.0.9/fonts/dante/fontello.ttf +0 -0
- data/dist/0.0.9/fonts/dante/fontello.woff +0 -0
- data/dist/0.0.9/images/dante/media-loading-placeholder.png +0 -0
- data/dist/0.0.9/js/dante-editor.js +0 -2575
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: ce93b6b016e569966678e24ff82312b27125a136
|
4
|
+
data.tar.gz: 4bc7081e9e6a17785e9f752ca7369001e82b9f5c
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 43c7c63ad8b016a22839fa7e7ccbf2def26ae11f1934466902dd8a4e0d9a38157a94f2f31b9d836f1388ba1ead630b8bef1772530ff6af3acaddb7629f164f7f
|
7
|
+
data.tar.gz: d0fb16dcc13f2b5956215328ebcc3c657b9fd4cc779ea0729f26dec30f426892b1a5abfbf2de26ff19476f7d1f659e49b9cd1e59337e43fe301db741fc905fed
|
data/README.md
CHANGED
@@ -26,7 +26,9 @@ Until now I´ve been able to implement the following features:
|
|
26
26
|
+ Image Uploader with *preview* and caption option.
|
27
27
|
+ Embed data for pasted link through OEmbed services.
|
28
28
|
+ Embed media information for pasted links through OEmbed services.
|
29
|
+
+ Add or remove tooltip buttons with ease with plugin system.
|
29
30
|
+ List creation with shorcuts ie:. 1. , - , 1) with spacebar or return key
|
31
|
+
+ Custom tooltip bottons support
|
30
32
|
+ CSS tries to use the same fonts used in Medium, (if you have already setup those fonts) or fallbacks to open fonts (by Google fonts) or system fonts.
|
31
33
|
+ serif: freight-text-pro fallbacks to Merriweather or Georgia,
|
32
34
|
+ sans: jaf-bernino-sans fallbacks to Open Sans or Lucida Grande
|
@@ -75,6 +77,8 @@ Until now I´ve been able to implement the following features:
|
|
75
77
|
+ **body_placeholder** default: 'Tell your story…'
|
76
78
|
+ **embed_placeholder** default: 'Paste a YouTube, Vine, Vimeo, or other video link, and press Enter'
|
77
79
|
+ **extract_placeholder** default: 'Paste a link to embed content from another site (e.g. Twitter) and press Enter'
|
80
|
+
+ **base_widgets:** default: ["uploader", "embed", "embed-extract"],
|
81
|
+
+ **extra_tooltip_widgets:** and array of new Dante.TooltipWidget instances.
|
78
82
|
|
79
83
|
### Rails / AssetPippeline
|
80
84
|
|
@@ -3,6 +3,10 @@
|
|
3
3
|
//= require dante/utils
|
4
4
|
//= require dante/view
|
5
5
|
//= require dante/editor
|
6
|
+
//= require dante/tooltip_widget
|
7
|
+
//= require dante/tooltip_widgets/uploader
|
8
|
+
//= require dante/tooltip_widgets/embed
|
9
|
+
//= require dante/tooltip_widgets/extract
|
6
10
|
//= require dante/tooltip
|
7
11
|
//= require dante/popover
|
8
12
|
//= require dante/menu
|
@@ -4,13 +4,13 @@ utils = Dante.utils
|
|
4
4
|
class Dante.Editor extends Dante.View
|
5
5
|
|
6
6
|
events:
|
7
|
-
"mouseup"
|
8
|
-
"keydown"
|
9
|
-
"keyup"
|
10
|
-
"paste"
|
7
|
+
"mouseup" : "handleMouseUp"
|
8
|
+
"keydown" : "handleKeyDown"
|
9
|
+
"keyup" : "handleKeyUp"
|
10
|
+
"paste" : "handlePaste"
|
11
11
|
"dblclick" : "handleDblclick"
|
12
12
|
"dragstart": "handleDrag"
|
13
|
-
"drop"
|
13
|
+
"drop" : "handleDrag"
|
14
14
|
"click .graf--figure .aspectRatioPlaceholder" : "handleGrafFigureSelectImg"
|
15
15
|
"click .graf--figure figcaption" : "handleGrafFigureSelectCaption"
|
16
16
|
|
@@ -38,8 +38,16 @@ class Dante.Editor extends Dante.View
|
|
38
38
|
@disable_title = opts.disable_title || false
|
39
39
|
@store_interval = opts.store_interval || 15000
|
40
40
|
@paste_element_id = "#dante-paste-div"
|
41
|
+
@tooltip_class = opts.tooltip_class || Dante.Editor.Tooltip
|
42
|
+
|
43
|
+
opts.base_widgets ||= ["uploader", "embed", "embed_extract"]
|
44
|
+
|
45
|
+
@widgets = []
|
46
|
+
|
41
47
|
window.debugMode = opts.debug || false
|
48
|
+
|
42
49
|
$(@el).addClass("debug") if window.debugMode
|
50
|
+
|
43
51
|
if (localStorage.getItem('contenteditable'))
|
44
52
|
$(@el).html localStorage.getItem('contenteditable')
|
45
53
|
|
@@ -54,6 +62,31 @@ class Dante.Editor extends Dante.View
|
|
54
62
|
extractplaceholder = opts.extract_placeholder|| "Paste a link to embed content from another site (e.g. Twitter) and press Enter"
|
55
63
|
@extract_placeholder= "<span class='defaultValue defaultValue--root'>#{extractplaceholder}</span><br>"
|
56
64
|
|
65
|
+
@initializeWidgets(opts)
|
66
|
+
|
67
|
+
|
68
|
+
initializeWidgets: (opts)->
|
69
|
+
#TODO: this could be a hash to access widgets without var
|
70
|
+
#Base widgets
|
71
|
+
base_widgets = opts.base_widgets
|
72
|
+
|
73
|
+
if base_widgets.indexOf("uploader") >= 0
|
74
|
+
@uploader_widget = new Dante.View.TooltipWidget.Uploader(current_editor: @)
|
75
|
+
@widgets.push @uploader_widget
|
76
|
+
|
77
|
+
if base_widgets.indexOf("embed") >= 0
|
78
|
+
@embed_widget = new Dante.View.TooltipWidget.Embed(current_editor: @)
|
79
|
+
@widgets.push @embed_widget
|
80
|
+
|
81
|
+
if base_widgets.indexOf("embed_extract") >= 0
|
82
|
+
@embed_extract_widget = new Dante.View.TooltipWidget.EmbedExtract(current_editor: @)
|
83
|
+
@widgets.push @embed_extract_widget
|
84
|
+
|
85
|
+
#add extra widgets
|
86
|
+
if opts.extra_tooltip_widgets
|
87
|
+
_.each opts.extra_tooltip_widgets, (w)=>
|
88
|
+
@widgets.push w
|
89
|
+
|
57
90
|
store: ()->
|
58
91
|
#localStorage.setItem("contenteditable", $(@el).html() )
|
59
92
|
return unless @store_url
|
@@ -107,7 +140,7 @@ class Dante.Editor extends Dante.View
|
|
107
140
|
$("<div id='dante-menu' class='dante-menu'></div>").insertAfter(@el)
|
108
141
|
$("<div class='inlineTooltip'></div>").insertAfter(@el)
|
109
142
|
@editor_menu = new Dante.Editor.Menu(editor: @)
|
110
|
-
@tooltip_view = new
|
143
|
+
@tooltip_view = new @tooltip_class(editor: @ , widgets: @widgets)
|
111
144
|
@pop_over = new Dante.Editor.PopOver(editor: @)
|
112
145
|
@pop_over.render().hide()
|
113
146
|
@tooltip_view.render().hide()
|
@@ -269,7 +302,6 @@ class Dante.Editor extends Dante.View
|
|
269
302
|
else
|
270
303
|
$(@getNode()).removeClass("is-defaultValue")
|
271
304
|
|
272
|
-
|
273
305
|
#get text of selected and displays menu
|
274
306
|
handleTextSelection: (anchor_node)->
|
275
307
|
@editor_menu.hide()
|
@@ -511,7 +543,7 @@ class Dante.Editor extends Dante.View
|
|
511
543
|
#http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata
|
512
544
|
_.each elements.find("img"), (image)=>
|
513
545
|
utils.log ("process image here!")
|
514
|
-
@
|
546
|
+
@uploader_widget.uploadExistentImage(image)
|
515
547
|
|
516
548
|
handleInmediateDeletion: (element)->
|
517
549
|
@inmediateDeletion = false
|
@@ -607,7 +639,8 @@ class Dante.Editor extends Dante.View
|
|
607
639
|
utils.log "KEYDOWN"
|
608
640
|
|
609
641
|
anchor_node = @getNode() #current node on which cursor is positioned
|
610
|
-
|
642
|
+
parent = $(anchor_node)
|
643
|
+
|
611
644
|
|
612
645
|
@markAsSelected( anchor_node ) if anchor_node
|
613
646
|
|
@@ -621,22 +654,20 @@ class Dante.Editor extends Dante.View
|
|
621
654
|
#removes previous selected nodes
|
622
655
|
$(@el).find(".is-selected").removeClass("is-selected")
|
623
656
|
|
624
|
-
parent = $(anchor_node)
|
625
|
-
|
626
657
|
utils.log @isLastChar()
|
627
658
|
|
628
659
|
#smart list support
|
629
|
-
if
|
630
|
-
li = @handleSmartList(
|
660
|
+
if parent.hasClass("graf--p")
|
661
|
+
li = @handleSmartList(parent, e)
|
631
662
|
anchor_node = li if li
|
632
|
-
else if
|
633
|
-
@handleListLineBreak(
|
663
|
+
else if parent.hasClass("graf--li")
|
664
|
+
@handleListLineBreak(parent, e)
|
634
665
|
|
635
|
-
#
|
636
|
-
|
637
|
-
|
638
|
-
|
639
|
-
|
666
|
+
#handle keydowns for each widget
|
667
|
+
utils.log("HANDLING WIDGET KEYDOWNS");
|
668
|
+
_.each @widgets, (w)=>
|
669
|
+
if w.handleEnterKey
|
670
|
+
w.handleEnterKey(e, parent);
|
640
671
|
|
641
672
|
#supress linebreak into embed page text unless last char
|
642
673
|
if parent.hasClass("graf--mixtapeEmbed") or parent.hasClass("graf--iframe") or parent.hasClass("graf--figure")
|
@@ -695,8 +726,8 @@ class Dante.Editor extends Dante.View
|
|
695
726
|
anchor_node = @getNode()
|
696
727
|
utils_anchor_node = utils.getNode()
|
697
728
|
|
698
|
-
if(
|
699
|
-
return this.handleListBackspace(
|
729
|
+
if(parent.hasClass("graf--li") and @getCharacterPrecedingCaret().length is 0)
|
730
|
+
return this.handleListBackspace(parent, e);
|
700
731
|
|
701
732
|
if $(utils_anchor_node).hasClass("section-content") || $(utils_anchor_node).hasClass("graf--first")
|
702
733
|
utils.log "SECTION DETECTED FROM KEYDOWN #{_.isEmpty($(utils_anchor_node).text())}"
|
@@ -728,8 +759,8 @@ class Dante.Editor extends Dante.View
|
|
728
759
|
#spacebar
|
729
760
|
if (e.which == 32)
|
730
761
|
utils.log("SPACEBAR")
|
731
|
-
if (
|
732
|
-
@handleSmartList(
|
762
|
+
if (parent.hasClass("graf--p"))
|
763
|
+
@handleSmartList(parent, e)
|
733
764
|
#arrows key
|
734
765
|
#if _.contains([37,38,39,40], e.which)
|
735
766
|
#up & down
|
@@ -894,7 +925,7 @@ class Dante.Editor extends Dante.View
|
|
894
925
|
|
895
926
|
when "img"
|
896
927
|
utils.log "images"
|
897
|
-
@
|
928
|
+
@uploader_widget.uploadExistentImage(n)
|
898
929
|
#set figure non editable
|
899
930
|
|
900
931
|
when "a", 'strong', 'em', 'br', 'b', 'u', 'i'
|
@@ -9,17 +9,12 @@ class Dante.Editor.Tooltip extends Dante.View
|
|
9
9
|
|
10
10
|
initialize: (opts = {})=>
|
11
11
|
@current_editor = opts.editor
|
12
|
-
@
|
13
|
-
{icon: "icon-image", title: "Add an image", action: "image"},
|
14
|
-
{icon: "icon-video", title: "Add a video", action: "embed"},
|
15
|
-
{icon: "icon-embed", title: "Add an embed", action: "embed-extract"}
|
16
|
-
]
|
17
|
-
#TODO: include section splitter
|
18
|
-
#icon: "fa-minus", title: "Add a new part", action: "hr"
|
12
|
+
@widgets = opts.widgets
|
19
13
|
|
20
14
|
template: ()->
|
21
15
|
menu = ""
|
22
|
-
|
16
|
+
|
17
|
+
_.each @widgets, (b)->
|
23
18
|
data_action_value = if b.action_value then "data-action-value='#{b.action_value}'" else ""
|
24
19
|
menu += "<button class='inlineTooltip-button scale' title='#{b.title}' data-action='inline-menu-#{b.action}' #{data_action_value}>
|
25
20
|
<span class='tooltip-icon #{b.icon}'></span>
|
@@ -32,40 +27,11 @@ class Dante.Editor.Tooltip extends Dante.View
|
|
32
27
|
#{menu}
|
33
28
|
</div>"
|
34
29
|
|
35
|
-
|
36
|
-
"<figure contenteditable='false' class='graf graf--figure is-defaultValue' name='#{utils.generateUniqueName()}' tabindex='0'>
|
37
|
-
<div style='' class='aspectRatioPlaceholder is-locked'>
|
38
|
-
<div style='padding-bottom: 100%;' class='aspect-ratio-fill'></div>
|
39
|
-
<img src='' data-height='' data-width='' data-image-id='' class='graf-image' data-delayed-src=''>
|
40
|
-
</div>
|
41
|
-
<figcaption contenteditable='true' data-default-value='Type caption for image (optional)' class='imageCaption'>
|
42
|
-
<span class='defaultValue'>Type caption for image (optional)</span>
|
43
|
-
<br>
|
44
|
-
</figcaption>
|
45
|
-
</figure>"
|
46
|
-
|
47
|
-
extractTemplate: ()->
|
48
|
-
"<div class='graf graf--mixtapeEmbed is-selected' name=''>
|
49
|
-
<a target='_blank' data-media-id='' class='js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock' href=''>
|
50
|
-
</a>
|
51
|
-
<a data-tooltip-type='link' data-tooltip-position='bottom' data-tooltip='' title='' class='markup--anchor markup--mixtapeEmbed-anchor' data-href='' href='' target='_blank'>
|
52
|
-
<strong class='markup--strong markup--mixtapeEmbed-strong'></strong>
|
53
|
-
<em class='markup--em markup--mixtapeEmbed-em'></em>
|
54
|
-
</a>
|
55
|
-
</div>"
|
56
|
-
|
57
|
-
embedTemplate: ()->
|
58
|
-
"<figure contenteditable='false' class='graf--figure graf--iframe graf--first' name='504e' tabindex='0'>
|
59
|
-
<div class='iframeContainer'>
|
60
|
-
<iframe frameborder='0' width='700' height='393' data-media-id='' src='' data-height='480' data-width='854'>
|
61
|
-
</iframe>
|
62
|
-
</div>
|
63
|
-
<figcaption contenteditable='true' data-default-value='Type caption for embed (optional)' class='imageCaption'>
|
64
|
-
<a rel='nofollow' class='markup--anchor markup--figure-anchor' data-href='' href='' target='_blank'>
|
30
|
+
findWidgetByAction: (name)->
|
65
31
|
|
66
|
-
|
67
|
-
|
68
|
-
|
32
|
+
_.find @widgets, (e)->
|
33
|
+
e.action == name
|
34
|
+
|
69
35
|
|
70
36
|
render: ()=>
|
71
37
|
$(@el).html(@template())
|
@@ -90,6 +56,7 @@ class Dante.Editor.Tooltip extends Dante.View
|
|
90
56
|
handleClick: (ev)->
|
91
57
|
name = $(ev.currentTarget).data('action')
|
92
58
|
utils.log name
|
59
|
+
###
|
93
60
|
switch name
|
94
61
|
when "inline-menu-image"
|
95
62
|
@placeholder = "<p>PLACEHOLDER</p>"
|
@@ -100,270 +67,13 @@ class Dante.Editor.Tooltip extends Dante.View
|
|
100
67
|
@displayExtractPlaceHolder()
|
101
68
|
when "inline-menu-hr"
|
102
69
|
@splitSection()
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
uploadExistentImage: (image_element, opts = {})->
|
109
|
-
|
110
|
-
utils.log ("process image here!")
|
111
|
-
tmpl = $(@insertTemplate())
|
112
|
-
tmpl.find("img").attr('src', @current_editor.default_loading_placeholder )
|
113
|
-
#is a child element or a first level element ?
|
114
|
-
|
115
|
-
if $(image_element).parents(".graf").length > 0
|
116
|
-
#return if its already wrapped in graf--figure
|
117
|
-
if $(image_element).parents(".graf").hasClass("graf--figure")
|
118
|
-
return
|
119
|
-
utils.log "UNO"
|
120
|
-
tmpl.insertBefore( $(image_element).parents(".graf") )
|
121
|
-
node = @current_editor.getNode()
|
122
|
-
if node
|
123
|
-
@current_editor.preCleanNode($(node))
|
124
|
-
@current_editor.addClassesToElement(node)
|
125
|
-
else
|
126
|
-
utils.log "DOS"
|
127
|
-
img = $(image_element).parentsUntil(".section-inner").first()
|
128
|
-
$(img).replaceWith(tmpl)
|
129
|
-
|
130
|
-
utils.log $("[name='#{tmpl.attr('name')}']").attr("name")
|
131
|
-
@replaceImg(image_element, $("[name='#{tmpl.attr('name')}']"))
|
132
|
-
|
133
|
-
#in case we found that graf--image is nested element, unwrap * nested times
|
134
|
-
n = $("[name='#{tmpl.attr('name')}']").parentsUntil(".section-inner").length
|
135
|
-
unless n is 0
|
136
|
-
for i in [0..n-1] by 1
|
137
|
-
$("[name='#{tmpl.attr('name')}']").unwrap()
|
138
|
-
|
139
|
-
utils.log "FIG"
|
140
|
-
#utils.log $("[name='#{tmpl.attr('name')}']").attr("name")
|
141
|
-
|
142
|
-
replaceImg: (image_element, figure)->
|
143
|
-
utils.log figure.attr("name")
|
144
|
-
utils.log figure
|
145
|
-
$(image_element).remove()
|
146
|
-
img = new Image()
|
147
|
-
img.src = image_element.src
|
148
|
-
self = this
|
149
|
-
img.onload = ()->
|
150
|
-
utils.log "replace image with loaded info"
|
151
|
-
utils.log figure.attr("name")
|
152
|
-
utils.log(this.width + 'x' + this.height);
|
153
|
-
|
154
|
-
ar = self.getAspectRatio(this.width, this.height)
|
155
|
-
#debugger
|
156
|
-
figure.find(".aspectRatioPlaceholder").css
|
157
|
-
'max-width': ar.width
|
158
|
-
'max-height': ar.height
|
159
|
-
|
160
|
-
figure.find(".graf-image").attr
|
161
|
-
"data-height": this.height
|
162
|
-
"data-width": this.width
|
163
|
-
|
164
|
-
figure.find(".aspect-ratio-fill").css
|
165
|
-
"padding-bottom": "#{ar.ratio}%"
|
166
|
-
|
167
|
-
#TODO: upload file to server
|
168
|
-
#@uploadFile file, replaced_node
|
169
|
-
|
170
|
-
figure.find("img").attr("src", image_element.src)
|
171
|
-
|
172
|
-
displayAndUploadImages: (file)->
|
173
|
-
@displayCachedImage file
|
174
|
-
|
175
|
-
imageSelect: (ev)->
|
176
|
-
$selectFile = $('<input type="file" multiple="multiple">').click()
|
177
|
-
self = @
|
178
|
-
$selectFile.change ()->
|
179
|
-
t = this
|
180
|
-
self.uploadFiles(t.files)
|
181
|
-
|
182
|
-
displayCachedImage: (file)->
|
183
|
-
@current_editor.tooltip_view.hide()
|
184
|
-
|
185
|
-
reader = new FileReader()
|
186
|
-
reader.onload = (e)=>
|
187
|
-
img = new Image
|
188
|
-
img.src = e.target.result
|
189
|
-
node = @current_editor.getNode()
|
190
|
-
self = this
|
191
|
-
img.onload = ()->
|
192
|
-
new_tmpl = $(self.insertTemplate())
|
193
|
-
|
194
|
-
replaced_node = $( new_tmpl ).insertBefore($(node))
|
195
|
-
|
196
|
-
img_tag = new_tmpl.find('img.graf-image').attr('src', e.target.result)
|
197
|
-
img_tag.height = this.height
|
198
|
-
img_tag.width = this.width
|
199
|
-
|
200
|
-
utils.log "UPLOADED SHOW FROM CACHE"
|
201
|
-
|
202
|
-
ar = self.getAspectRatio(this.width, this.height)
|
203
|
-
|
204
|
-
replaced_node.find(".aspectRatioPlaceholder").css
|
205
|
-
'max-width': ar.width
|
206
|
-
'max-height': ar.height
|
207
|
-
|
208
|
-
replaced_node.find(".graf-image").attr
|
209
|
-
"data-height": this.height
|
210
|
-
"data-width": this.width
|
70
|
+
###
|
71
|
+
#debugger
|
72
|
+
sub_name = name.replace("inline-menu-", "")
|
73
|
+
if detected_widget = @findWidgetByAction(sub_name)
|
74
|
+
detected_widget.handleClick(ev)
|
211
75
|
|
212
|
-
|
213
|
-
"padding-bottom": "#{ar.ratio}%"
|
214
|
-
|
215
|
-
self.uploadFile file, replaced_node
|
216
|
-
|
217
|
-
reader.readAsDataURL(file)
|
218
|
-
|
219
|
-
getAspectRatio: (w , h)->
|
220
|
-
maxWidth = 700
|
221
|
-
maxHeight = 700
|
222
|
-
ratio = 0
|
223
|
-
width = w # Current image width
|
224
|
-
height = h # Current image height
|
225
|
-
|
226
|
-
# Check if the current width is larger than the max
|
227
|
-
if width > maxWidth
|
228
|
-
ratio = maxWidth / width # get ratio for scaling image
|
229
|
-
height = height * ratio # Reset height to match scaled image
|
230
|
-
width = width * ratio # Reset width to match scaled image
|
231
|
-
|
232
|
-
# Check if current height is larger than max
|
233
|
-
else if height > maxHeight
|
234
|
-
ratio = maxHeight / height # get ratio for scaling image
|
235
|
-
width = width * ratio # Reset width to match scaled image
|
236
|
-
height = height * ratio # Reset height to match scaled image
|
237
|
-
|
238
|
-
fill_ratio = height / width * 100
|
239
|
-
result = { width: width, height: height, ratio: fill_ratio }
|
240
|
-
utils.log result
|
241
|
-
result
|
242
|
-
|
243
|
-
formatData: (file)->
|
244
|
-
formData = new FormData()
|
245
|
-
formData.append('file', file)
|
246
|
-
return formData
|
247
|
-
|
248
|
-
uploadFiles: (files)=>
|
249
|
-
acceptedTypes =
|
250
|
-
"image/png": true
|
251
|
-
"image/jpeg": true
|
252
|
-
"image/gif": true
|
253
|
-
|
254
|
-
i = 0
|
255
|
-
while i < files.length
|
256
|
-
file = files[i]
|
257
|
-
if acceptedTypes[file.type] is true
|
258
|
-
$(@placeholder).append "<progress class=\"progress\" min=\"0\" max=\"100\" value=\"0\">0</progress>"
|
259
|
-
@displayAndUploadImages(file)
|
260
|
-
i++
|
261
|
-
|
262
|
-
uploadFile: (file, node)=>
|
263
|
-
n = node
|
264
|
-
handleUp = (jqxhr)=>
|
265
|
-
@uploadCompleted jqxhr, n
|
266
|
-
|
267
|
-
$.ajax
|
268
|
-
type: "post"
|
269
|
-
url: @current_editor.upload_url
|
270
|
-
xhr: =>
|
271
|
-
xhr = new XMLHttpRequest()
|
272
|
-
xhr.upload.onprogress = @updateProgressBar
|
273
|
-
xhr
|
274
|
-
cache: false
|
275
|
-
contentType: false
|
276
|
-
|
277
|
-
success: (response) =>
|
278
|
-
response = @current_editor.upload_callback(response) if @current_editor.upload_callback
|
279
|
-
handleUp(response)
|
280
|
-
return
|
281
|
-
error: (jqxhr)=>
|
282
|
-
utils.log("ERROR: got error uploading file #{jqxhr.responseText}")
|
283
|
-
|
284
|
-
processData: false
|
285
|
-
data: @formatData(file)
|
286
|
-
|
287
|
-
updateProgressBar: (e)=>
|
288
|
-
$progress = $('.progress:first', this.$el)
|
289
|
-
complete = ""
|
290
|
-
|
291
|
-
if (e.lengthComputable)
|
292
|
-
complete = e.loaded / e.total * 100
|
293
|
-
complete = complete ? complete : 0
|
294
|
-
#$progress.attr('value', complete)
|
295
|
-
#$progress.html(complete)
|
296
|
-
utils.log "complete"
|
297
|
-
utils.log complete
|
298
|
-
|
299
|
-
uploadCompleted: (url, node)=>
|
300
|
-
node.find("img").attr("src", url)
|
301
|
-
#return false
|
302
|
-
|
303
|
-
## EMBED
|
304
|
-
displayEmbedPlaceHolder: ()->
|
305
|
-
ph = @current_editor.embed_placeholder
|
306
|
-
@node = @current_editor.getNode()
|
307
|
-
$(@node).html(ph).addClass("is-embedable")
|
308
|
-
|
309
|
-
@current_editor.setRangeAt(@node)
|
310
|
-
@hide()
|
311
|
-
false
|
312
|
-
|
313
|
-
getEmbedFromNode: (node)=>
|
314
|
-
@node = $(node)
|
315
|
-
@node_name = @node.attr("name")
|
316
|
-
@node.addClass("spinner")
|
317
|
-
|
318
|
-
$.getJSON("#{@current_editor.oembed_url}#{$(@node).text()}")
|
319
|
-
.success (data)=>
|
320
|
-
@node = $("[name=#{@node_name}]")
|
321
|
-
iframe_src = $(data.html).prop("src")
|
322
|
-
tmpl = $(@embedTemplate())
|
323
|
-
tmpl.attr("name", @node.attr("name"))
|
324
|
-
$(@node).replaceWith(tmpl)
|
325
|
-
replaced_node = $(".graf--iframe[name=#{@node.attr("name")}]")
|
326
|
-
replaced_node.find("iframe").attr("src", iframe_src)
|
327
|
-
url = data.url || data.author_url
|
328
|
-
utils.log "URL IS #{url}"
|
329
|
-
replaced_node.find(".markup--anchor").attr("href", url ).text(url)
|
330
|
-
@hide()
|
331
|
-
|
332
|
-
##EXTRACT
|
333
|
-
displayExtractPlaceHolder: ()->
|
334
|
-
ph = @current_editor.extract_placeholder
|
335
|
-
@node = @current_editor.getNode()
|
336
|
-
$(@node).html(ph).addClass("is-extractable")
|
337
|
-
|
338
|
-
@current_editor.setRangeAt(@node)
|
339
|
-
@hide()
|
340
|
-
false
|
341
|
-
|
342
|
-
getExtractFromNode: (node)=>
|
343
|
-
@node = $(node)
|
344
|
-
@node_name = @node.attr("name")
|
345
|
-
@node.addClass("spinner")
|
346
|
-
|
347
|
-
$.getJSON("#{@current_editor.extract_url}#{$(@node).text()}").success (data)=>
|
348
|
-
@node = $("[name=#{@node_name}]")
|
349
|
-
iframe_src = $(data.html).prop("src")
|
350
|
-
tmpl = $(@extractTemplate())
|
351
|
-
tmpl.attr("name", @node.attr("name"))
|
352
|
-
$(@node).replaceWith(tmpl)
|
353
|
-
replaced_node = $(".graf--mixtapeEmbed[name=#{@node.attr("name")}]")
|
354
|
-
replaced_node.find("strong").text(data.title)
|
355
|
-
replaced_node.find("em").text(data.description)
|
356
|
-
replaced_node.append(data.provider_url)
|
357
|
-
replaced_node.find(".markup--anchor").attr("href", data.url )
|
358
|
-
unless _.isEmpty data.images
|
359
|
-
image_node = replaced_node.find(".mixtapeImage")
|
360
|
-
image_node.css("background-image", "url(#{data.images[0].url})")
|
361
|
-
image_node.removeClass("mixtapeImage--empty u-ignoreBlock")
|
362
|
-
@hide()
|
363
|
-
|
364
|
-
getExtract: (url)=>
|
365
|
-
$.getJSON("#{@current_editor.extract_url}#{url}").done (data)->
|
366
|
-
utils.log(data)
|
76
|
+
return false
|
367
77
|
|
368
78
|
cleanOperationClasses: (node)->
|
369
79
|
node.removeClass("is-embedable is-extractable")
|