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.
Files changed (40) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile +1 -1
  3. data/README.md +45 -24
  4. data/ROADMAP.md +12 -0
  5. data/TODO.md +1 -17
  6. data/app/assets/javascripts/dante/editor.js.coffee +149 -45
  7. data/app/assets/javascripts/dante/menu.js.coffee +13 -2
  8. data/app/assets/javascripts/dante/tooltip.js.coffee +87 -32
  9. data/app/assets/stylesheets/dante.css.scss +1 -2
  10. data/app/assets/stylesheets/dante/_debug.scss +2 -2
  11. data/app/assets/stylesheets/dante/_graf.scss +141 -68
  12. data/app/assets/stylesheets/dante/_icons.scss +22 -23
  13. data/app/assets/stylesheets/dante/_menu.scss +112 -110
  14. data/app/assets/stylesheets/dante/_needsorder.scss +7 -1
  15. data/app/assets/stylesheets/dante/_post.scss +7 -9
  16. data/app/assets/stylesheets/dante/_scaffold.scss +16 -21
  17. data/app/assets/stylesheets/dante/_tooltip.scss +103 -104
  18. data/app/assets/stylesheets/dante/_utilities.scss +2 -3
  19. data/app/assets/stylesheets/{old → temp}/fonts.css.scss +0 -26
  20. data/app/assets/stylesheets/temp/medium.css +12404 -0
  21. data/app/assets/stylesheets/temp/review.scss +21 -0
  22. data/app/assets/stylesheets/temp/structure.haml +22 -0
  23. data/lib/dante-editor/version.rb +1 -1
  24. data/source/assets/images/dante-logo.png +0 -0
  25. data/source/assets/stylesheets/_scaffold.scss +12 -0
  26. data/source/assets/stylesheets/_tooltips.scss +216 -0
  27. data/source/assets/stylesheets/all.css.scss +51 -26
  28. data/source/embeds.html.erb +13 -15
  29. data/source/index.html.erb +7 -24
  30. data/source/layouts/layout.erb +7 -3
  31. data/source/partials/_content.erb +6 -3
  32. data/source/partials/_example_1.erb +15 -0
  33. data/source/partials/_example_2.erb +1 -2
  34. data/source/partials/_example_3.erb +1 -14
  35. data/source/partials/_readme.markdown +13 -67
  36. data/source/partials/test/_example_1.erb +22 -1
  37. metadata +10 -6
  38. data/app/assets/stylesheets/old/base.css.scss +0 -57
  39. data/app/assets/stylesheets/old/editor.css.scss +0 -662
  40. 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
- #"click .dante-icon" : "handleClick"
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.toUpperCase() else el)
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='375' data-width='600' data-image-id='' class='graf-image' data-delayed-src=''>
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
- @current_editor.preCleanNode($(node))
114
- @current_editor.addClassesToElement(node)
114
+ if node
115
+ @current_editor.preCleanNode($(node))
116
+ @current_editor.addClassesToElement(node)
115
117
  else
116
118
  utils.log "DOS"
117
- $(image_element).replaceWith(tmpl)
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
- console.log "and here comes the water!"
133
- console.log(figure)
134
- console.log(this.width + 'x' + this.height);
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': this.width
137
- 'max-height': this.height
138
- 'height': this.height
139
- figure.find("img").attr({'data-height': this.height, 'data-width': this.width})
140
- figure.find("img").attr('src', image_element.src )
141
- img.src = image_element.src
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
- i = new Image
160
- i.src = e.target.result
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
- new_tmpl = $(@insertTemplate())
186
+ replaced_node = $( new_tmpl ).insertBefore($(node))
163
187
 
164
- replaced_node = $( new_tmpl ).insertBefore($(@node))
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': i.width
174
- 'max-height': i.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
- @uploadFile file, replaced_node
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)
@@ -2,10 +2,9 @@
2
2
 
3
3
  @import "dante/variables";
4
4
  @import "dante/utilities";
5
- @import "dante/fonts";
6
5
  @import "dante/scaffold";
6
+ @import "dante/fonts";
7
7
  @import "dante/animations";
8
-
9
8
  @import "dante/post";
10
9
  @import "dante/icons";
11
10
  @import "dante/menu";
@@ -1,4 +1,4 @@
1
- @if $debugger {
1
+ //@if $debugger {
2
2
  .debug {
3
3
  .section-inner {
4
4
  .is-selected{
@@ -8,4 +8,4 @@
8
8
  }
9
9
  }
10
10
  }
11
- }
11
+ //}
@@ -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
- &--p,
4
- &--blockquote,
5
- &--pullquote {
6
- margin-bottom: 30px;
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
- &--h2 {
10
- font-family: $sans;
11
- font-size: 60px;
12
- font-style: normal;
13
- font-weight: 700;
14
- letter-spacing: -0.04em;
15
- line-height: 1;
16
- margin-bottom: 8px;
17
- margin-left: -3px;
18
- margin-top: 40px;
19
- padding-top: 0;
20
- }
21
- &--h3 {
22
- letter-spacing: -0.02em;
23
- font-weight: 700;
24
- font-style: normal;
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
- margin-left: -1.8px;
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: 40px;
142
+ margin-top: 18px;
29
143
  margin-bottom: 4px;
30
144
  }
31
- &--h4 {
32
- color: rgba(0, 0, 0, 0.44);
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
  }