dante-editor 0.0.3 → 0.0.4
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 +1 -1
- data/README.md +45 -24
- data/ROADMAP.md +12 -0
- data/TODO.md +1 -17
- data/app/assets/javascripts/dante/editor.js.coffee +149 -45
- data/app/assets/javascripts/dante/menu.js.coffee +13 -2
- data/app/assets/javascripts/dante/tooltip.js.coffee +87 -32
- data/app/assets/stylesheets/dante.css.scss +1 -2
- data/app/assets/stylesheets/dante/_debug.scss +2 -2
- data/app/assets/stylesheets/dante/_graf.scss +141 -68
- data/app/assets/stylesheets/dante/_icons.scss +22 -23
- data/app/assets/stylesheets/dante/_menu.scss +112 -110
- data/app/assets/stylesheets/dante/_needsorder.scss +7 -1
- data/app/assets/stylesheets/dante/_post.scss +7 -9
- data/app/assets/stylesheets/dante/_scaffold.scss +16 -21
- data/app/assets/stylesheets/dante/_tooltip.scss +103 -104
- data/app/assets/stylesheets/dante/_utilities.scss +2 -3
- data/app/assets/stylesheets/{old → temp}/fonts.css.scss +0 -26
- data/app/assets/stylesheets/temp/medium.css +12404 -0
- data/app/assets/stylesheets/temp/review.scss +21 -0
- data/app/assets/stylesheets/temp/structure.haml +22 -0
- data/lib/dante-editor/version.rb +1 -1
- data/source/assets/images/dante-logo.png +0 -0
- data/source/assets/stylesheets/_scaffold.scss +12 -0
- data/source/assets/stylesheets/_tooltips.scss +216 -0
- data/source/assets/stylesheets/all.css.scss +51 -26
- data/source/embeds.html.erb +13 -15
- data/source/index.html.erb +7 -24
- data/source/layouts/layout.erb +7 -3
- data/source/partials/_content.erb +6 -3
- data/source/partials/_example_1.erb +15 -0
- data/source/partials/_example_2.erb +1 -2
- data/source/partials/_example_3.erb +1 -14
- data/source/partials/_readme.markdown +13 -67
- data/source/partials/test/_example_1.erb +22 -1
- metadata +10 -6
- data/app/assets/stylesheets/old/base.css.scss +0 -57
- data/app/assets/stylesheets/old/editor.css.scss +0 -662
- data/source/readme.html.erb +0 -28
@@ -5,7 +5,7 @@ class Dante.Editor.Menu extends Dante.View
|
|
5
5
|
|
6
6
|
events:
|
7
7
|
"mousedown li" : "handleClick"
|
8
|
-
|
8
|
+
"click .dante-menu-linkinput .dante-menu-button": "closeInput"
|
9
9
|
"mouseenter" : "handleOver"
|
10
10
|
"mouseleave" : "handleOut"
|
11
11
|
"keypress input": "handleInputEnter"
|
@@ -69,6 +69,10 @@ class Dante.Editor.Menu extends Dante.View
|
|
69
69
|
|
70
70
|
return false
|
71
71
|
|
72
|
+
closeInput: (e)->
|
73
|
+
$(@el).removeClass("dante-menu--linkmode")
|
74
|
+
false
|
75
|
+
|
72
76
|
handleInputEnter: (e)=>
|
73
77
|
if (e.which is 13)
|
74
78
|
utils.restoreSelection(@savedSel)
|
@@ -123,6 +127,7 @@ class Dante.Editor.Menu extends Dante.View
|
|
123
127
|
if $(n).parent().hasClass("section-inner")
|
124
128
|
n = @current_editor.addClassesToElement(n)
|
125
129
|
@current_editor.setElementName(n)
|
130
|
+
@current_editor.handleTextSelection(n)
|
126
131
|
else
|
127
132
|
utils.log "fail" + message, true
|
128
133
|
return
|
@@ -151,7 +156,7 @@ class Dante.Editor.Menu extends Dante.View
|
|
151
156
|
el = el or @current_editor.$el[0]
|
152
157
|
while el isnt @current_editor.$el[0]
|
153
158
|
if el.nodeName.match(@effectNodeReg)
|
154
|
-
nodes.push (if returnAsNodeName then el.nodeName.
|
159
|
+
nodes.push (if returnAsNodeName then el.nodeName.toLowerCase() else el)
|
155
160
|
el = el.parentNode
|
156
161
|
nodes
|
157
162
|
|
@@ -189,6 +194,12 @@ class Dante.Editor.Menu extends Dante.View
|
|
189
194
|
tag = "indent"
|
190
195
|
utils.log "nothing to select"
|
191
196
|
|
197
|
+
if tag.match /(?:h[1-6])/i
|
198
|
+
$(@el).find(".icon-bold, .icon-italic, .icon-blockquote")
|
199
|
+
.parent("li").remove()
|
200
|
+
#.parent("li").hide()
|
201
|
+
#.addClass("hidden")
|
202
|
+
|
192
203
|
@highlight(tag)
|
193
204
|
|
194
205
|
highlight: (tag)->
|
@@ -36,7 +36,7 @@ class Dante.Editor.Tooltip extends Dante.View
|
|
36
36
|
"<figure contenteditable='false' class='graf graf--figure is-defaultValue' name='#{utils.generateUniqueName()}' tabindex='0'>
|
37
37
|
<div style='' class='aspectRatioPlaceholder is-locked'>
|
38
38
|
<div style='padding-bottom: 100%;' class='aspect-ratio-fill'></div>
|
39
|
-
<img src='' data-height='
|
39
|
+
<img src='' data-height='' data-width='' data-image-id='' class='graf-image' data-delayed-src=''>
|
40
40
|
</div>
|
41
41
|
<figcaption contenteditable='true' data-default-value='Type caption for image (optional)' class='imageCaption'>
|
42
42
|
<span class='defaultValue'>Type caption for image (optional)</span>
|
@@ -74,6 +74,7 @@ class Dante.Editor.Tooltip extends Dante.View
|
|
74
74
|
toggleOptions: ()=>
|
75
75
|
utils.log "Toggle Options!!"
|
76
76
|
$(@el).toggleClass("is-active is-scaled")
|
77
|
+
return false
|
77
78
|
|
78
79
|
move: (coords)->
|
79
80
|
$(@el).offset(coords)
|
@@ -91,7 +92,7 @@ class Dante.Editor.Tooltip extends Dante.View
|
|
91
92
|
@displayExtractPlaceHolder()
|
92
93
|
when "inline-menu-hr"
|
93
94
|
@splitSection()
|
94
|
-
|
95
|
+
return false
|
95
96
|
#UPLOADER
|
96
97
|
|
97
98
|
#replace existing img tag , and wrap it in insertTamplate
|
@@ -102,43 +103,63 @@ class Dante.Editor.Tooltip extends Dante.View
|
|
102
103
|
tmpl = $(@insertTemplate())
|
103
104
|
tmpl.find("img").attr('src', @current_editor.default_loading_placeholder )
|
104
105
|
#is a child element or a first level element ?
|
106
|
+
|
105
107
|
if $(image_element).parents(".graf").length > 0
|
106
108
|
#return if its already wrapped in graf--figure
|
107
109
|
if $(image_element).parents(".graf").hasClass("graf--figure")
|
108
110
|
return
|
109
|
-
|
110
111
|
utils.log "UNO"
|
111
112
|
tmpl.insertBefore( $(image_element).parents(".graf") )
|
112
113
|
node = @current_editor.getNode()
|
113
|
-
|
114
|
-
|
114
|
+
if node
|
115
|
+
@current_editor.preCleanNode($(node))
|
116
|
+
@current_editor.addClassesToElement(node)
|
115
117
|
else
|
116
118
|
utils.log "DOS"
|
117
|
-
$(image_element).
|
119
|
+
img = $(image_element).parentsUntil(".section-inner").first()
|
120
|
+
$(img).replaceWith(tmpl)
|
118
121
|
|
119
|
-
utils.log tmpl.attr('name')
|
122
|
+
utils.log $("[name='#{tmpl.attr('name')}']").attr("name")
|
120
123
|
@replaceImg(image_element, $("[name='#{tmpl.attr('name')}']"))
|
121
124
|
|
125
|
+
#in case we found that graf--image is nested element, unwrap * nested times
|
126
|
+
n = $("[name='#{tmpl.attr('name')}']").parentsUntil(".section-inner").length
|
127
|
+
unless n is 0
|
128
|
+
for i in [0..n-1] by 1
|
129
|
+
$("[name='#{tmpl.attr('name')}']").unwrap()
|
130
|
+
|
131
|
+
utils.log "FIG"
|
132
|
+
#utils.log $("[name='#{tmpl.attr('name')}']").attr("name")
|
133
|
+
|
122
134
|
replaceImg: (image_element, figure)->
|
123
|
-
#set image dimensions
|
124
|
-
#TODO: maybe limit with default max-heigth ?
|
125
135
|
utils.log figure.attr("name")
|
126
136
|
utils.log figure
|
127
|
-
|
128
137
|
$(image_element).remove()
|
129
|
-
|
130
138
|
img = new Image()
|
139
|
+
img.src = image_element.src
|
140
|
+
self = this
|
131
141
|
img.onload = ()->
|
132
|
-
|
133
|
-
|
134
|
-
|
142
|
+
utils.log "replace image with loaded info"
|
143
|
+
utils.log figure.attr("name")
|
144
|
+
utils.log(this.width + 'x' + this.height);
|
145
|
+
|
146
|
+
ar = self.getAspectRatio(this.width, this.height)
|
147
|
+
#debugger
|
135
148
|
figure.find(".aspectRatioPlaceholder").css
|
136
|
-
'max-width':
|
137
|
-
'max-height':
|
138
|
-
|
139
|
-
figure.find("
|
140
|
-
|
141
|
-
|
149
|
+
'max-width': ar.width
|
150
|
+
'max-height': ar.height
|
151
|
+
|
152
|
+
figure.find(".graf-image").attr
|
153
|
+
"data-height": this.height
|
154
|
+
"data-width": this.width
|
155
|
+
|
156
|
+
figure.find(".aspect-ratio-fill").css
|
157
|
+
"padding-bottom": "#{ar.ratio}%"
|
158
|
+
|
159
|
+
#TODO: upload file to server
|
160
|
+
#@uploadFile file, replaced_node
|
161
|
+
|
162
|
+
figure.find("img").attr("src", image_element.src)
|
142
163
|
|
143
164
|
displayAndUploadImages: (file)->
|
144
165
|
@displayCachedImage file
|
@@ -151,32 +172,66 @@ class Dante.Editor.Tooltip extends Dante.View
|
|
151
172
|
self.uploadFiles(t.files)
|
152
173
|
|
153
174
|
displayCachedImage: (file)->
|
154
|
-
@node = @current_editor.getNode()
|
155
175
|
@current_editor.tooltip_view.hide()
|
156
176
|
|
157
177
|
reader = new FileReader()
|
158
178
|
reader.onload = (e)=>
|
159
|
-
|
160
|
-
|
179
|
+
img = new Image
|
180
|
+
img.src = e.target.result
|
181
|
+
node = @current_editor.getNode()
|
182
|
+
self = this
|
183
|
+
img.onload = ()->
|
184
|
+
new_tmpl = $(self.insertTemplate())
|
161
185
|
|
162
|
-
|
186
|
+
replaced_node = $( new_tmpl ).insertBefore($(node))
|
163
187
|
|
164
|
-
|
188
|
+
img_tag = new_tmpl.find('img.graf-image').attr('src', e.target.result)
|
189
|
+
img_tag.height = this.height
|
190
|
+
img_tag.width = this.width
|
165
191
|
|
166
|
-
img_tag = new_tmpl.find('img.graf-image').attr('src', e.target.result)
|
167
|
-
img_tag.height = i.height
|
168
|
-
img_tag.width = i.width
|
169
|
-
unless i.width is 0 || i.height is 0
|
170
192
|
utils.log "UPLOADED SHOW FROM CACHE"
|
171
193
|
|
194
|
+
ar = self.getAspectRatio(this.width, this.height)
|
195
|
+
|
172
196
|
replaced_node.find(".aspectRatioPlaceholder").css
|
173
|
-
'max-width':
|
174
|
-
'max-height':
|
197
|
+
'max-width': ar.width
|
198
|
+
'max-height': ar.height
|
199
|
+
|
200
|
+
replaced_node.find(".graf-image").attr
|
201
|
+
"data-height": this.height
|
202
|
+
"data-width": this.width
|
175
203
|
|
176
|
-
|
204
|
+
replaced_node.find(".aspect-ratio-fill").css
|
205
|
+
"padding-bottom": "#{ar.ratio}%"
|
206
|
+
|
207
|
+
self.uploadFile file, replaced_node
|
177
208
|
|
178
209
|
reader.readAsDataURL(file)
|
179
210
|
|
211
|
+
getAspectRatio: (w , h)->
|
212
|
+
maxWidth = 700
|
213
|
+
maxHeight = 700
|
214
|
+
ratio = 0
|
215
|
+
width = w # Current image width
|
216
|
+
height = h # Current image height
|
217
|
+
|
218
|
+
# Check if the current width is larger than the max
|
219
|
+
if width > maxWidth
|
220
|
+
ratio = maxWidth / width # get ratio for scaling image
|
221
|
+
height = height * ratio # Reset height to match scaled image
|
222
|
+
width = width * ratio # Reset width to match scaled image
|
223
|
+
|
224
|
+
# Check if current height is larger than max
|
225
|
+
else if height > maxHeight
|
226
|
+
ratio = maxHeight / height # get ratio for scaling image
|
227
|
+
width = width * ratio # Reset width to match scaled image
|
228
|
+
height = height * ratio # Reset height to match scaled image
|
229
|
+
|
230
|
+
fill_ratio = height / width * 100
|
231
|
+
result = { width: width, height: height, ratio: fill_ratio }
|
232
|
+
utils.log result
|
233
|
+
result
|
234
|
+
|
180
235
|
formatData: (file)->
|
181
236
|
formData = new FormData()
|
182
237
|
formData.append('file', file)
|
@@ -1,79 +1,152 @@
|
|
1
|
-
.graf
|
1
|
+
.graf--h2,
|
2
|
+
.graf--h3,
|
3
|
+
.graf--h4,
|
4
|
+
.graf--h5,
|
5
|
+
.graf--h6,
|
6
|
+
.graf--h7,
|
7
|
+
.postList,
|
8
|
+
.graf--figure,
|
9
|
+
.graf--blockquote,
|
10
|
+
.graf--pullquote,
|
11
|
+
.graf--p,
|
12
|
+
.graf--pre {
|
13
|
+
margin: 0;
|
14
|
+
}
|
2
15
|
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
16
|
+
.graf--h2 {
|
17
|
+
font-family: $sans;
|
18
|
+
font-size: 60px;
|
19
|
+
font-style: normal;
|
20
|
+
font-weight: 700;
|
21
|
+
letter-spacing: -0.04em;
|
22
|
+
line-height: 1;
|
23
|
+
margin-bottom: 8px;
|
24
|
+
margin-left: -3px;
|
25
|
+
margin-top: 40px;
|
26
|
+
padding-top: 0;
|
27
|
+
}
|
28
|
+
.graf--h3 {
|
29
|
+
font-family: $sans;
|
30
|
+
letter-spacing: -0.02em;
|
31
|
+
font-weight: 700;
|
32
|
+
font-style: normal;
|
33
|
+
font-size: 36px;
|
34
|
+
margin-left: -1.8px;
|
35
|
+
line-height: 1.2;
|
36
|
+
margin-top: 40px;
|
37
|
+
margin-bottom: 4px;
|
38
|
+
}
|
39
|
+
.graf--h4 {
|
40
|
+
font-family: $sans;
|
41
|
+
letter-spacing: -0.02em;
|
42
|
+
font-weight: 300;
|
43
|
+
font-style: normal;
|
44
|
+
font-size: 30px;
|
45
|
+
margin-left: -1.5px;
|
46
|
+
line-height: 1.2;
|
47
|
+
color: rgba(0,0,0,0.44);
|
48
|
+
margin-top: 40px;
|
49
|
+
margin-bottom: 2px;
|
50
|
+
}
|
8
51
|
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
52
|
+
.graf--h2 + .graf--h3,
|
53
|
+
.graf--h2 + .graf--h4 {
|
54
|
+
margin-top: -6px;
|
55
|
+
}
|
56
|
+
|
57
|
+
.graf--h3 + .graf--h2,
|
58
|
+
.graf--h4 + .graf--h2 {
|
59
|
+
margin-top: 2px;
|
60
|
+
}
|
61
|
+
|
62
|
+
.graf--h3 + .graf--h4,
|
63
|
+
.graf--h4 + .graf--h3 {
|
64
|
+
margin-top: -2px;
|
65
|
+
}
|
66
|
+
|
67
|
+
.graf--h2 + .graf--p.graf--empty + .graf--h3,
|
68
|
+
.graf--h3 + .graf--p.graf--empty + .graf--h3,
|
69
|
+
.graf--h2 + .graf--p.graf--empty + .graf--h4,
|
70
|
+
.graf--h3 + .graf--p.graf--empty + .graf--h4,
|
71
|
+
.graf--h4 + .graf--p.graf--empty + .graf--h4 {
|
72
|
+
margin-top: -8px;
|
73
|
+
}
|
74
|
+
|
75
|
+
.graf--h4 + .graf--figure,
|
76
|
+
.graf--h3 + .graf--figure,
|
77
|
+
.graf--h2 + .graf--figure {
|
78
|
+
margin-top: 15px;
|
79
|
+
}
|
80
|
+
|
81
|
+
.graf--p,
|
82
|
+
.graf--blockquote,
|
83
|
+
.graf--pullquote {
|
84
|
+
margin-bottom: 30px;
|
85
|
+
}
|
86
|
+
|
87
|
+
.graf--pre {
|
88
|
+
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.05);
|
89
|
+
font-family: Monaco,"Courier New","Courier",monospace;
|
90
|
+
font-size: 16px;
|
91
|
+
margin-bottom: 20px;
|
92
|
+
padding: 20px;
|
93
|
+
white-space: pre-wrap;
|
94
|
+
}
|
95
|
+
.graf--pre + .graf--pre {
|
96
|
+
margin-top: -20px;
|
97
|
+
}
|
98
|
+
|
99
|
+
.graf--blockquote {
|
100
|
+
border-left: 3px solid rgba(0, 0, 0, 0.8);
|
101
|
+
font-family: $serif;
|
102
|
+
font-style: italic;
|
103
|
+
font-weight: 400;
|
104
|
+
letter-spacing: 0.01rem;
|
105
|
+
margin-left: -23px;
|
106
|
+
padding-bottom: 3px;
|
107
|
+
padding-left: 20px;
|
108
|
+
}
|
109
|
+
.graf--blockquote + .graf--blockquote {
|
110
|
+
margin-top: -30px;
|
111
|
+
padding-top: 30px;
|
112
|
+
}
|
113
|
+
|
114
|
+
.graf--figure {
|
115
|
+
box-sizing: border-box;
|
116
|
+
clear: both;
|
117
|
+
margin-bottom: 30px;
|
118
|
+
outline: medium none;
|
119
|
+
position: relative;
|
120
|
+
}
|
121
|
+
|
122
|
+
.graf--first {
|
123
|
+
margin-top: 0;
|
124
|
+
padding-top: 0;
|
125
|
+
}
|
126
|
+
.graf--empty {
|
127
|
+
margin-bottom: -7px;
|
128
|
+
margin-top: -7px;
|
129
|
+
}
|
130
|
+
|
131
|
+
@media (max-width: 500px) {
|
132
|
+
|
133
|
+
.graf--h2 {
|
25
134
|
font-size: 36px;
|
26
|
-
|
135
|
+
line-height: 1.1;
|
136
|
+
padding-top: 12px;
|
137
|
+
margin-bottom: 6px;
|
138
|
+
}
|
139
|
+
.graf--h3 {
|
140
|
+
font-size: 26px;
|
27
141
|
line-height: 1.2;
|
28
|
-
margin-top:
|
142
|
+
margin-top: 18px;
|
29
143
|
margin-bottom: 4px;
|
30
144
|
}
|
31
|
-
|
32
|
-
|
33
|
-
font-family: $sans;
|
34
|
-
font-size: 30px;
|
35
|
-
font-style: normal;
|
36
|
-
font-weight: 300;
|
37
|
-
letter-spacing: -0.02em;
|
145
|
+
.graf--h4 {
|
146
|
+
font-size: 24px;
|
38
147
|
line-height: 1.2;
|
148
|
+
margin-top: 18px;
|
39
149
|
margin-bottom: 2px;
|
40
|
-
margin-left: -1.5px;
|
41
|
-
margin-top: 40px;
|
42
|
-
}
|
43
|
-
|
44
|
-
&--pre {
|
45
|
-
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.05);
|
46
|
-
font-family: Monaco,"Courier New","Courier",monospace;
|
47
|
-
font-size: 16px;
|
48
|
-
margin-bottom: 20px;
|
49
|
-
padding: 20px;
|
50
|
-
white-space: pre-wrap;
|
51
|
-
}
|
52
|
-
&--pre + &--pre {
|
53
|
-
margin-top: -20px;
|
54
|
-
}
|
55
|
-
|
56
|
-
&--blockquote {
|
57
|
-
border-left: 3px solid rgba(0, 0, 0, 0.8);
|
58
|
-
font-family: $serif;
|
59
|
-
font-style: italic;
|
60
|
-
font-weight: 400;
|
61
|
-
letter-spacing: 0.01rem;
|
62
|
-
margin-left: -23px;
|
63
|
-
padding-bottom: 3px;
|
64
|
-
padding-left: 20px;
|
65
|
-
}
|
66
|
-
&--blockquote + &--blockquote {
|
67
|
-
margin-top: -30px;
|
68
|
-
padding-top: 30px;
|
69
|
-
}
|
70
|
-
|
71
|
-
&--figure {
|
72
|
-
box-sizing: border-box;
|
73
|
-
clear: both;
|
74
|
-
margin-bottom: 30px;
|
75
|
-
outline: medium none;
|
76
|
-
position: relative;
|
77
150
|
}
|
78
151
|
|
79
152
|
}
|