dante-editor 0.1.1 → 0.1.2
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/app/assets/javascripts/dante/menu.js.coffee +19 -11
- data/app/assets/javascripts/dante/tooltip.js.coffee +2 -2
- data/app/assets/stylesheets/dante/_caption.scss +5 -22
- data/app/assets/stylesheets/dante/_icons.scss +3 -3
- data/app/assets/stylesheets/dante/_menu.scss +87 -39
- data/app/assets/stylesheets/dante/_post.scss +2 -4
- data/app/assets/stylesheets/dante/_tooltip.scss +10 -14
- data/app/assets/stylesheets/dante/_variables.scss +61 -15
- data/bower.json +1 -1
- data/dist/css/dante-editor.css +70 -54
- data/dist/js/dante-editor.js +22 -9
- data/lib/dante-editor/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6d08776410afefd181c71ec59fa2dbc0458973de
|
|
4
|
+
data.tar.gz: a105ed8c2e03468123e5414293119949ed48bdb0
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a4fc6161e44ebe69f579ebdfa28e827441adab5a174e5a73295bff69eaf3c204a2423934f93039d25b7c92a984ef9492ab2caae4dc176e93c56717f95adf1510
|
|
7
|
+
data.tar.gz: edd4c306ca404776b250d6c43616ae287adafb4232391daa41b34ae6136f672705e7e985b0ac3bcd06d6923384ef1c20ea37ec51d16b7b2beb5c2d6167cb26c8
|
|
@@ -32,18 +32,22 @@ class Dante.Editor.Menu extends Dante.View
|
|
|
32
32
|
default_config: ()->
|
|
33
33
|
###
|
|
34
34
|
buttons: [
|
|
35
|
-
'blockquote', '
|
|
35
|
+
'blockquote', 'h3', 'h4', 'p', 'code', 'insertorderedlist', 'insertunorderedlist', 'inserthorizontalrule',
|
|
36
36
|
'indent', 'outdent', 'bold', 'italic', 'underline', 'createlink'
|
|
37
37
|
]
|
|
38
38
|
###
|
|
39
39
|
|
|
40
|
-
buttons: ['bold', 'italic', '
|
|
40
|
+
buttons: ['bold', 'italic', 'createlink', 'divider', 'h3', 'h4', 'blockquote']
|
|
41
41
|
|
|
42
42
|
template: ()=>
|
|
43
|
-
html = "<div class='dante-menu-linkinput'><input class='dante-menu-input' placeholder='
|
|
43
|
+
html = "<div class='dante-menu-linkinput'><input class='dante-menu-input' placeholder='Paste or type a link'><div class='dante-menu-button'>x</div></div>"
|
|
44
44
|
html += "<ul class='dante-menu-buttons'>"
|
|
45
45
|
_.each @config.buttons, (item)->
|
|
46
|
-
|
|
46
|
+
if item == "divider"
|
|
47
|
+
html += "<li class='dante-menu-divider'></li>"
|
|
48
|
+
else
|
|
49
|
+
html += "<li class='dante-menu-button'><i class=\"dante-icon icon-#{item}\" data-action=\"#{item}\"></i></li>"
|
|
50
|
+
|
|
47
51
|
html += "</ul>"
|
|
48
52
|
html
|
|
49
53
|
|
|
@@ -65,7 +69,11 @@ class Dante.Editor.Menu extends Dante.View
|
|
|
65
69
|
$(@el).addClass("dante-menu--linkmode")
|
|
66
70
|
input.focus()
|
|
67
71
|
else
|
|
68
|
-
|
|
72
|
+
if $(ev.currentTarget).hasClass("dante-menu-button--disabled")
|
|
73
|
+
utils.log "menu #{action} item blocked!"
|
|
74
|
+
ev.preventDefault()
|
|
75
|
+
else
|
|
76
|
+
@menuApply action
|
|
69
77
|
|
|
70
78
|
return false
|
|
71
79
|
|
|
@@ -194,19 +202,19 @@ class Dante.Editor.Menu extends Dante.View
|
|
|
194
202
|
utils.log "nothing to select"
|
|
195
203
|
|
|
196
204
|
if tag.match /(?:h[1-6])/i
|
|
197
|
-
|
|
198
|
-
|
|
205
|
+
@toggleMenuButtons(@el, ".icon-bold, .icon-italic")
|
|
206
|
+
|
|
199
207
|
else if tag is "indent"
|
|
200
|
-
|
|
201
|
-
.parent("li").remove()
|
|
202
|
-
#.parent("li").hide()
|
|
203
|
-
#.addClass("hidden")
|
|
208
|
+
@toggleMenuButtons(@el, ".icon-h3, .icon-h4, .icon-blockquote")
|
|
204
209
|
|
|
205
210
|
@highlight(tag)
|
|
206
211
|
|
|
207
212
|
highlight: (tag)->
|
|
208
213
|
$(".icon-#{tag}").parent("li").addClass("active")
|
|
209
214
|
|
|
215
|
+
toggleMenuButtons: (el,buttons)->
|
|
216
|
+
$(el).find(buttons).parent("li").addClass("dante-menu-button--disabled")
|
|
217
|
+
|
|
210
218
|
show: ()->
|
|
211
219
|
$(@el).addClass("dante-menu--active")
|
|
212
220
|
@closeInput()
|
|
@@ -31,7 +31,7 @@ class Dante.Editor.Tooltip extends Dante.View
|
|
|
31
31
|
|
|
32
32
|
_.find @widgets, (e)->
|
|
33
33
|
e.action == name
|
|
34
|
-
|
|
34
|
+
|
|
35
35
|
|
|
36
36
|
render: ()=>
|
|
37
37
|
$(@el).html(@template())
|
|
@@ -46,7 +46,7 @@ class Dante.Editor.Tooltip extends Dante.View
|
|
|
46
46
|
move: (coords)->
|
|
47
47
|
tooltip = $(@el)
|
|
48
48
|
control_width = tooltip.find(".control").css("width")
|
|
49
|
-
control_spacing = tooltip.find(".inlineTooltip-
|
|
49
|
+
control_spacing = tooltip.find(".inlineTooltip-button").css("margin-right")
|
|
50
50
|
pull_size = parseInt(control_width.replace(/px/,"")) + parseInt(control_spacing.replace(/px/,""))
|
|
51
51
|
coord_left = coords.left - pull_size
|
|
52
52
|
coord_top = coords.top
|
|
@@ -1,28 +1,17 @@
|
|
|
1
1
|
.imageCaption {
|
|
2
2
|
& {
|
|
3
|
-
position: absolute;
|
|
4
|
-
left: -172px;
|
|
5
|
-
width: 150px;
|
|
6
3
|
top: 0;
|
|
7
|
-
text-align:
|
|
4
|
+
text-align: center;
|
|
8
5
|
margin-top: 0;
|
|
9
|
-
font-family: "
|
|
10
|
-
letter-spacing: 0
|
|
6
|
+
font-family: "jaf-bernino-sans", "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
|
7
|
+
letter-spacing: 0;
|
|
11
8
|
font-weight: 400;
|
|
12
|
-
font-
|
|
13
|
-
font-size: 14px;
|
|
9
|
+
font-size: 13px;
|
|
14
10
|
line-height: 1.4;
|
|
15
11
|
color: rgba(0,0,0,0.6);
|
|
16
12
|
outline: 0;
|
|
17
13
|
z-index: 300;
|
|
18
|
-
|
|
19
|
-
&:before {
|
|
20
|
-
width: 25%;
|
|
21
|
-
margin-left: 75%;
|
|
22
|
-
border-top: 1px solid rgba(0,0,0,0.15);
|
|
23
|
-
display: block;
|
|
24
|
-
content: "";
|
|
25
|
-
margin-bottom: 10px;
|
|
14
|
+
margin-top: 10px;
|
|
26
15
|
}
|
|
27
16
|
}
|
|
28
17
|
@media (max-width: 1200px) {
|
|
@@ -34,9 +23,6 @@
|
|
|
34
23
|
left: 0;
|
|
35
24
|
margin-top: 10px;
|
|
36
25
|
}
|
|
37
|
-
.imageCaption:before {
|
|
38
|
-
display: none;
|
|
39
|
-
}
|
|
40
26
|
}
|
|
41
27
|
|
|
42
28
|
figure.graf--layoutOutsetLeft {
|
|
@@ -48,9 +34,6 @@ figure.graf--layoutOutsetLeft {
|
|
|
48
34
|
left: 0;
|
|
49
35
|
margin-top: 10px;
|
|
50
36
|
}
|
|
51
|
-
.imageCaption:before {
|
|
52
|
-
display: none;
|
|
53
|
-
}
|
|
54
37
|
}
|
|
55
38
|
|
|
56
39
|
figure.is-defaultValue .imageCaption,
|
|
@@ -12,9 +12,9 @@
|
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
.icon-h2:before { content: "
|
|
16
|
-
.icon-h3:before { content: "
|
|
17
|
-
.icon-h4:before { content: "
|
|
15
|
+
.icon-h2:before { content: ""; }
|
|
16
|
+
.icon-h3:before { content: "H1"; }
|
|
17
|
+
.icon-h4:before { content: "H2"; }
|
|
18
18
|
.icon-p:before { content: "P"; }
|
|
19
19
|
.icon-code:before { content: ""; }
|
|
20
20
|
.icon-insertorderedlist:before { content: ""; }
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
// Base styles
|
|
2
|
+
|
|
1
3
|
.dante-menu {
|
|
2
4
|
|
|
3
5
|
// MENU
|
|
@@ -12,36 +14,51 @@
|
|
|
12
14
|
display:block;
|
|
13
15
|
white-space: nowrap;
|
|
14
16
|
|
|
15
|
-
height: $menu-height;
|
|
16
|
-
background: $menu-background;
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
height: $dante-menu-height;
|
|
18
|
+
background: $dante-menu-background;
|
|
19
|
+
color: $dante-menu-color;
|
|
20
|
+
|
|
21
|
+
@if $dante-menu-border-width {
|
|
22
|
+
border: $dante-menu-border-width;
|
|
23
|
+
}
|
|
24
|
+
@if $dante-menu-border-radius {
|
|
25
|
+
border-radius: $dante-menu-border-radius;
|
|
26
|
+
}
|
|
27
|
+
@if $dante-menu-box-shadow {
|
|
28
|
+
box-shadow: $dante-menu-box-shadow;
|
|
29
|
+
}
|
|
20
30
|
|
|
21
31
|
|
|
22
32
|
// CARET
|
|
23
|
-
|
|
24
|
-
&:after
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
33
|
+
// &:before -> Borde
|
|
34
|
+
// &:after -> Triangulo
|
|
35
|
+
@if $dante-menu-caret-size {
|
|
36
|
+
//&:before,
|
|
37
|
+
&:after {
|
|
38
|
+
content: "";
|
|
39
|
+
height: 0;
|
|
40
|
+
width: 0;
|
|
41
|
+
position: absolute;
|
|
42
|
+
left: 50%;
|
|
43
|
+
pointer-events: none;
|
|
44
|
+
border: $dante-menu-caret-size solid transparent;
|
|
45
|
+
margin-left: -($dante-menu-caret-size/2);
|
|
46
|
+
}
|
|
47
|
+
//&:before {
|
|
48
|
+
// border-top-color: $menu-border-color;
|
|
49
|
+
// bottom: -($dante-menu-caret-size*2);
|
|
50
|
+
//}
|
|
51
|
+
&:after {
|
|
52
|
+
border-top-color: $dante-menu-background;
|
|
53
|
+
bottom: -(($dante-menu-caret-size*2)-1);
|
|
54
|
+
}
|
|
41
55
|
}
|
|
42
56
|
|
|
43
57
|
}
|
|
44
58
|
|
|
59
|
+
|
|
60
|
+
// Visible
|
|
61
|
+
|
|
45
62
|
.dante-menu--active {
|
|
46
63
|
display: inline-block;
|
|
47
64
|
visibility: visible;
|
|
@@ -49,6 +66,9 @@
|
|
|
49
66
|
animation: pop-upwards 180ms forwards linear;
|
|
50
67
|
}
|
|
51
68
|
|
|
69
|
+
|
|
70
|
+
// Link mode
|
|
71
|
+
|
|
52
72
|
.dante-menu--linkmode {
|
|
53
73
|
.dante-menu-buttons {
|
|
54
74
|
visibility: hidden;
|
|
@@ -62,13 +82,29 @@
|
|
|
62
82
|
}
|
|
63
83
|
}
|
|
64
84
|
|
|
85
|
+
|
|
65
86
|
// BUTONS
|
|
87
|
+
|
|
66
88
|
.dante-menu-buttons {
|
|
67
89
|
list-style: none;
|
|
68
90
|
margin: 0;
|
|
69
91
|
padding: 0;
|
|
70
92
|
line-height: 0;
|
|
71
93
|
}
|
|
94
|
+
.dante-menu-divider {
|
|
95
|
+
width: 1px;
|
|
96
|
+
height: $dante-menu-height - 18px;
|
|
97
|
+
margin: 9px 2px;
|
|
98
|
+
background: rgba($dante-menu-color,.2);
|
|
99
|
+
display: inline-block;
|
|
100
|
+
overflow: hidden;
|
|
101
|
+
cursor: default;
|
|
102
|
+
line-height: $dante-menu-height;
|
|
103
|
+
-webkit-user-select: none;
|
|
104
|
+
-moz-user-select: none;
|
|
105
|
+
-ms-user-select: none;
|
|
106
|
+
user-select: none;
|
|
107
|
+
}
|
|
72
108
|
.dante-menu-button {
|
|
73
109
|
& {
|
|
74
110
|
min-width: 20px;
|
|
@@ -77,11 +113,11 @@
|
|
|
77
113
|
padding-right: 10px;
|
|
78
114
|
overflow: hidden;
|
|
79
115
|
text-align: center;
|
|
80
|
-
color: $menu-color;
|
|
116
|
+
color: $dante-menu-icon-color;
|
|
81
117
|
cursor: pointer;
|
|
82
|
-
font-size:
|
|
83
|
-
line-height: $menu-
|
|
84
|
-
height: $menu-button-height;
|
|
118
|
+
font-size: $dante-menu-icon-size;
|
|
119
|
+
line-height: $dante-menu-height;
|
|
120
|
+
//height: $menu-button-height;
|
|
85
121
|
-webkit-user-select: none;
|
|
86
122
|
-moz-user-select: none;
|
|
87
123
|
-ms-user-select: none;
|
|
@@ -91,22 +127,34 @@
|
|
|
91
127
|
// nada
|
|
92
128
|
}
|
|
93
129
|
&.active{
|
|
94
|
-
color: $menu-
|
|
130
|
+
color: $dante-menu-icon-accent;
|
|
95
131
|
}
|
|
96
132
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
133
|
+
@if $dante-menu-border-radius {
|
|
134
|
+
&:first-child {
|
|
135
|
+
border-top-left-radius: $dante-menu-border-radius;
|
|
136
|
+
border-bottom-left-radius: $dante-menu-border-radius;
|
|
137
|
+
padding-left: 18px;
|
|
138
|
+
}
|
|
139
|
+
&:last-child {
|
|
140
|
+
border-top-right-radius: $dante-menu-border-radius;
|
|
141
|
+
border-bottom-right-radius: $dante-menu-border-radius;
|
|
142
|
+
padding-right: 18px;
|
|
143
|
+
}
|
|
106
144
|
}
|
|
107
145
|
}
|
|
108
146
|
|
|
147
|
+
.dante-menu-button--disabled {
|
|
148
|
+
-webkit-user-select: none !important;
|
|
149
|
+
-moz-user-select: none !important;
|
|
150
|
+
-ms-user-select: none !important;
|
|
151
|
+
user-select: none !important;
|
|
152
|
+
opacity: .3;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
|
|
109
156
|
// LINK
|
|
157
|
+
|
|
110
158
|
.dante-menu-linkinput {
|
|
111
159
|
& {
|
|
112
160
|
display: none;
|
|
@@ -135,12 +183,12 @@
|
|
|
135
183
|
color: $menu-color;
|
|
136
184
|
border: none;
|
|
137
185
|
outline: none;
|
|
138
|
-
font-size:
|
|
186
|
+
font-size: 14px;
|
|
139
187
|
box-sizing: border-box;
|
|
140
188
|
border-radius: $menu-border-radius;
|
|
141
189
|
appearance: none;
|
|
142
190
|
text-align: left;
|
|
143
|
-
font-family: $font-family-
|
|
191
|
+
font-family: $font-family-sans;
|
|
144
192
|
letter-spacing: 0.01rem;
|
|
145
193
|
font-weight: 400;
|
|
146
194
|
font-style: normal;
|
|
@@ -37,10 +37,8 @@
|
|
|
37
37
|
letter-spacing: 0.01rem;
|
|
38
38
|
font-weight: 400;
|
|
39
39
|
font-style: normal;
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
font-size: 19px;
|
|
43
|
-
line-height: 1.69;
|
|
40
|
+
font-size: $dante-editor-font-size;
|
|
41
|
+
line-height: $dante-editor-line-height;
|
|
44
42
|
}
|
|
45
43
|
|
|
46
44
|
.postField {
|
|
@@ -18,7 +18,6 @@
|
|
|
18
18
|
pointer-events: auto;
|
|
19
19
|
}
|
|
20
20
|
&.is-scaled {
|
|
21
|
-
width: $tooltip-size-expanded;
|
|
22
21
|
-webkit-transition-delay: 0;
|
|
23
22
|
transition-delay: 0;
|
|
24
23
|
}
|
|
@@ -27,8 +26,7 @@
|
|
|
27
26
|
// MENU
|
|
28
27
|
.inlineTooltip-menu {
|
|
29
28
|
& {
|
|
30
|
-
|
|
31
|
-
padding-left: $tooltip-menu-spacing;
|
|
29
|
+
width: $tooltip-size-expanded;
|
|
32
30
|
}
|
|
33
31
|
button {
|
|
34
32
|
margin-right: $tooltip-button-spacing;
|
|
@@ -40,6 +38,8 @@
|
|
|
40
38
|
|
|
41
39
|
// BASE
|
|
42
40
|
& {
|
|
41
|
+
float: left;
|
|
42
|
+
margin-right: $tooltip-menu-spacing;
|
|
43
43
|
display: inline-block;
|
|
44
44
|
position: relative;
|
|
45
45
|
outline: 0;
|
|
@@ -93,17 +93,13 @@
|
|
|
93
93
|
-webkit-transition: -webkit-#{$tooltip-backward-transition}, $tooltip-default-transition;
|
|
94
94
|
transition: $tooltip-backward-transition, $tooltip-default-transition;
|
|
95
95
|
}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}
|
|
104
|
-
&:nth-child(4) {
|
|
105
|
-
-webkit-transition-delay: 90ms;
|
|
106
|
-
transition-delay: 90ms;
|
|
96
|
+
|
|
97
|
+
@while $tooltip-items > 0 {
|
|
98
|
+
&:nth-child(#{$tooltip-items + 1}) {
|
|
99
|
+
-webkit-transition-delay: #{$tooltip-item-delay * $tooltip-items + "ms"};
|
|
100
|
+
transition-delay: #{$tooltip-item-delay * $tooltip-items + "ms"};
|
|
101
|
+
}
|
|
102
|
+
$tooltip-items: $tooltip-items - 1;
|
|
107
103
|
}
|
|
108
104
|
}
|
|
109
105
|
|
|
@@ -1,3 +1,45 @@
|
|
|
1
|
+
// NEW VARIABLES
|
|
2
|
+
|
|
3
|
+
// General
|
|
4
|
+
|
|
5
|
+
$dante-visual-debugger: false !default;
|
|
6
|
+
|
|
7
|
+
$dante-text-color: #000000 !default;
|
|
8
|
+
$dante-inversed-color: #FFFFFF !default;
|
|
9
|
+
$dante-accent-color: #5BD974 !default;
|
|
10
|
+
$dante-control-color: #333333 !default;
|
|
11
|
+
$dante-popover-color: #FFFFFF !default;
|
|
12
|
+
|
|
13
|
+
// Editor
|
|
14
|
+
$dante-editor-font-size: 18px !default;
|
|
15
|
+
$dante-editor-line-height: 1.9 !default;
|
|
16
|
+
|
|
17
|
+
// Menu
|
|
18
|
+
$dante-menu-height: 42px !default;
|
|
19
|
+
$dante-menu-background: $dante-control-color !default;
|
|
20
|
+
$dante-menu-color: $dante-inversed-color !default;
|
|
21
|
+
|
|
22
|
+
$dante-menu-border-radius: 5px !default;
|
|
23
|
+
$dante-menu-box-shadow: 1px 2px 3px -2px #222 !default;
|
|
24
|
+
|
|
25
|
+
$dante-menu-icon-size: 16px !default;
|
|
26
|
+
$dante-menu-icon-color: $dante-inversed-color !default;
|
|
27
|
+
$dante-menu-icon-accent: $dante-accent-color !default;
|
|
28
|
+
|
|
29
|
+
$dante-menu-border-width: 0px !default;
|
|
30
|
+
$dante-menu-border-color: none !default;
|
|
31
|
+
|
|
32
|
+
$dante-menu-caret-size: 8px !default;
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
// Tooltip
|
|
36
|
+
|
|
37
|
+
// Popover
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
// OLD VARIABLES
|
|
42
|
+
|
|
1
43
|
$font-family-sans: 'jaf-bernino-sans', 'Open Sans', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
|
2
44
|
$font-family-serif: 'freight-text-pro', 'Merriweather', Georgia,Cambria, "Times New Roman", Times,serif;
|
|
3
45
|
$font-family-mono: Menlo, Monaco, Consolas, "Courier New", "Courier", monospace;
|
|
@@ -6,23 +48,26 @@ $font-family-base: $font-family-sans;
|
|
|
6
48
|
$font-size-base: 14px;
|
|
7
49
|
$line-height-base: 1.428571429; // 20/14
|
|
8
50
|
|
|
9
|
-
$active-color:
|
|
51
|
+
/* DEPRECATED */ $active-color: $dante-accent-color;
|
|
52
|
+
|
|
53
|
+
/* DEPRECATED */ $menu-tone: $dante-menu-background;
|
|
54
|
+
/* DEPRECATED */ $menu-factor: 5%;
|
|
55
|
+
/* DEPRECATED */ $menu-background: $dante-menu-background;
|
|
56
|
+
/* DEPRECATED */ $menu-shadow: $dante-menu-box-shadow;
|
|
57
|
+
/* DEPRECATED */ $menu-border-width: $dante-menu-border-width;
|
|
58
|
+
/* DEPRECATED */ $menu-border-color: $dante-menu-border-color;
|
|
59
|
+
/* DEPRECATED */ $menu-border-radius: $dante-menu-border-radius;
|
|
60
|
+
|
|
61
|
+
/* DEPRECATED */ $menu-border: $menu-border-width solid $menu-border-color;
|
|
62
|
+
/* DEPRECATED */ $menu-color: $dante-menu-icon-color;
|
|
63
|
+
/* DEPRECATED */ $menu-color-active: $dante-menu-icon-accent;
|
|
64
|
+
|
|
65
|
+
/* DEPRECATED */ $menu-caret-size: $dante-menu-caret-size;
|
|
66
|
+
/* DEPRECATED */ $menu-caret-color: darken($menu-tone,$menu-factor);
|
|
10
67
|
|
|
11
|
-
$menu-tone: #333;
|
|
12
|
-
$menu-factor: 5%;
|
|
13
|
-
$menu-background: linear-gradient(to bottom, $menu-tone, darken($menu-tone,$menu-factor)) repeat scroll 0 0 $menu-tone;
|
|
14
|
-
$menu-shadow: 1px 2px 3px -2px #222;
|
|
15
|
-
$menu-border-width: 0px;
|
|
16
|
-
$menu-border-color: darken($menu-tone,$menu-factor);
|
|
17
|
-
$menu-border-radius: 5px;
|
|
18
|
-
$menu-border: $menu-border-width solid $menu-border-color;
|
|
19
|
-
$menu-color: #FFFFFF;
|
|
20
|
-
$menu-color-active: $active-color;
|
|
21
|
-
$menu-caret-size: 8px;
|
|
22
|
-
$menu-caret-color: darken($menu-tone,$menu-factor);
|
|
23
68
|
|
|
24
69
|
|
|
25
|
-
$menu-height:
|
|
70
|
+
/* DEPRECATED */ $menu-height: $dante-menu-height;
|
|
26
71
|
$menu-button-height: $menu-height - ($menu-border-width * 2);
|
|
27
72
|
|
|
28
73
|
$tooltip-color: black;
|
|
@@ -36,6 +81,7 @@ $tooltip-button-spacing: 9px;
|
|
|
36
81
|
$tooltip-menu-spacing: 22px;
|
|
37
82
|
|
|
38
83
|
$tooltip-items: 3;
|
|
84
|
+
$tooltip-item-delay: 30;
|
|
39
85
|
$tooltip-size: 32px;
|
|
40
86
|
$tooltip-line-height: $tooltip-size;
|
|
41
87
|
|
|
@@ -47,4 +93,4 @@ $tooltip-default-transition: 100ms border-color, 100ms color;
|
|
|
47
93
|
$tooltip-forward-transition: transform 100ms;
|
|
48
94
|
$tooltip-backward-transition: transform 250ms;
|
|
49
95
|
|
|
50
|
-
$debugger:
|
|
96
|
+
/* DEPRECATED */ $debugger: $dante-visual-debugger;
|
data/bower.json
CHANGED
data/dist/css/dante-editor.css
CHANGED
|
@@ -1,4 +1,19 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
+
/* DEPRECATED */
|
|
3
|
+
/* DEPRECATED */
|
|
4
|
+
/* DEPRECATED */
|
|
5
|
+
/* DEPRECATED */
|
|
6
|
+
/* DEPRECATED */
|
|
7
|
+
/* DEPRECATED */
|
|
8
|
+
/* DEPRECATED */
|
|
9
|
+
/* DEPRECATED */
|
|
10
|
+
/* DEPRECATED */
|
|
11
|
+
/* DEPRECATED */
|
|
12
|
+
/* DEPRECATED */
|
|
13
|
+
/* DEPRECATED */
|
|
14
|
+
/* DEPRECATED */
|
|
15
|
+
/* DEPRECATED */
|
|
16
|
+
/* DEPRECATED */
|
|
2
17
|
@import url("//fonts.googleapis.com/css?family=Merriweather:400,700,400italic,700italic|Open+Sans:400,300,800");
|
|
3
18
|
@keyframes spinner {
|
|
4
19
|
to {
|
|
@@ -144,8 +159,8 @@
|
|
|
144
159
|
letter-spacing: 0.01rem;
|
|
145
160
|
font-weight: 400;
|
|
146
161
|
font-style: normal;
|
|
147
|
-
font-size:
|
|
148
|
-
line-height: 1.
|
|
162
|
+
font-size: 18px;
|
|
163
|
+
line-height: 1.9; }
|
|
149
164
|
|
|
150
165
|
.postField, .postField:focus {
|
|
151
166
|
outline: 0;
|
|
@@ -187,13 +202,13 @@
|
|
|
187
202
|
text-transform: none; }
|
|
188
203
|
|
|
189
204
|
.icon-h2:before {
|
|
190
|
-
content: "
|
|
205
|
+
content: ""; }
|
|
191
206
|
|
|
192
207
|
.icon-h3:before {
|
|
193
|
-
content: "
|
|
208
|
+
content: "H1"; }
|
|
194
209
|
|
|
195
210
|
.icon-h4:before {
|
|
196
|
-
content: "
|
|
211
|
+
content: "H2"; }
|
|
197
212
|
|
|
198
213
|
.icon-p:before {
|
|
199
214
|
content: "P"; }
|
|
@@ -283,8 +298,9 @@
|
|
|
283
298
|
display: block;
|
|
284
299
|
white-space: nowrap;
|
|
285
300
|
height: 42px;
|
|
286
|
-
background:
|
|
287
|
-
|
|
301
|
+
background: #333333;
|
|
302
|
+
color: #FFFFFF;
|
|
303
|
+
border: 0px;
|
|
288
304
|
border-radius: 5px;
|
|
289
305
|
box-shadow: 1px 2px 3px -2px #222; }
|
|
290
306
|
.dante-menu:after {
|
|
@@ -297,7 +313,7 @@
|
|
|
297
313
|
border: 8px solid transparent;
|
|
298
314
|
margin-left: -4px; }
|
|
299
315
|
.dante-menu:after {
|
|
300
|
-
border-top-color: #
|
|
316
|
+
border-top-color: #333333;
|
|
301
317
|
bottom: -15px; }
|
|
302
318
|
|
|
303
319
|
.dante-menu--active {
|
|
@@ -320,6 +336,20 @@
|
|
|
320
336
|
padding: 0;
|
|
321
337
|
line-height: 0; }
|
|
322
338
|
|
|
339
|
+
.dante-menu-divider {
|
|
340
|
+
width: 1px;
|
|
341
|
+
height: 24px;
|
|
342
|
+
margin: 9px 2px;
|
|
343
|
+
background: rgba(255, 255, 255, 0.2);
|
|
344
|
+
display: inline-block;
|
|
345
|
+
overflow: hidden;
|
|
346
|
+
cursor: default;
|
|
347
|
+
line-height: 42px;
|
|
348
|
+
-webkit-user-select: none;
|
|
349
|
+
-moz-user-select: none;
|
|
350
|
+
-ms-user-select: none;
|
|
351
|
+
user-select: none; }
|
|
352
|
+
|
|
323
353
|
.dante-menu-button {
|
|
324
354
|
min-width: 20px;
|
|
325
355
|
display: inline-block;
|
|
@@ -331,7 +361,6 @@
|
|
|
331
361
|
cursor: pointer;
|
|
332
362
|
font-size: 16px;
|
|
333
363
|
line-height: 42px;
|
|
334
|
-
height: 42px;
|
|
335
364
|
-webkit-user-select: none;
|
|
336
365
|
-moz-user-select: none;
|
|
337
366
|
-ms-user-select: none;
|
|
@@ -347,6 +376,13 @@
|
|
|
347
376
|
border-bottom-right-radius: 5px;
|
|
348
377
|
padding-right: 18px; }
|
|
349
378
|
|
|
379
|
+
.dante-menu-button--disabled {
|
|
380
|
+
-webkit-user-select: none !important;
|
|
381
|
+
-moz-user-select: none !important;
|
|
382
|
+
-ms-user-select: none !important;
|
|
383
|
+
user-select: none !important;
|
|
384
|
+
opacity: .3; }
|
|
385
|
+
|
|
350
386
|
.dante-menu-linkinput {
|
|
351
387
|
display: none;
|
|
352
388
|
position: absolute;
|
|
@@ -369,12 +405,12 @@
|
|
|
369
405
|
color: #FFFFFF;
|
|
370
406
|
border: none;
|
|
371
407
|
outline: none;
|
|
372
|
-
font-size:
|
|
408
|
+
font-size: 14px;
|
|
373
409
|
box-sizing: border-box;
|
|
374
410
|
border-radius: 5px;
|
|
375
411
|
appearance: none;
|
|
376
412
|
text-align: left;
|
|
377
|
-
font-family: "
|
|
413
|
+
font-family: "jaf-bernino-sans", "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
|
378
414
|
letter-spacing: 0.01rem;
|
|
379
415
|
font-weight: 400;
|
|
380
416
|
font-style: normal;
|
|
@@ -398,17 +434,17 @@
|
|
|
398
434
|
opacity: 1;
|
|
399
435
|
pointer-events: auto; }
|
|
400
436
|
.inlineTooltip.is-scaled {
|
|
401
|
-
width: 178px;
|
|
402
437
|
-webkit-transition-delay: 0;
|
|
403
438
|
transition-delay: 0; }
|
|
404
439
|
|
|
405
440
|
.inlineTooltip-menu {
|
|
406
|
-
|
|
407
|
-
padding-left: 22px; }
|
|
441
|
+
width: 178px; }
|
|
408
442
|
.inlineTooltip-menu button {
|
|
409
443
|
margin-right: 9px; }
|
|
410
444
|
|
|
411
445
|
.inlineTooltip-button {
|
|
446
|
+
float: left;
|
|
447
|
+
margin-right: 22px;
|
|
412
448
|
display: inline-block;
|
|
413
449
|
position: relative;
|
|
414
450
|
outline: 0;
|
|
@@ -454,15 +490,15 @@
|
|
|
454
490
|
transform: scale(1);
|
|
455
491
|
-webkit-transition: -webkit-transform 250ms, 100ms border-color, 100ms color;
|
|
456
492
|
transition: transform 250ms, 100ms border-color, 100ms color; }
|
|
457
|
-
.inlineTooltip-button.scale:nth-child(2) {
|
|
458
|
-
-webkit-transition-delay: 30ms;
|
|
459
|
-
transition-delay: 30ms; }
|
|
460
|
-
.inlineTooltip-button.scale:nth-child(3) {
|
|
461
|
-
-webkit-transition-delay: 60ms;
|
|
462
|
-
transition-delay: 60ms; }
|
|
463
493
|
.inlineTooltip-button.scale:nth-child(4) {
|
|
464
494
|
-webkit-transition-delay: 90ms;
|
|
465
495
|
transition-delay: 90ms; }
|
|
496
|
+
.inlineTooltip-button.scale:nth-child(3) {
|
|
497
|
+
-webkit-transition-delay: 60ms;
|
|
498
|
+
transition-delay: 60ms; }
|
|
499
|
+
.inlineTooltip-button.scale:nth-child(2) {
|
|
500
|
+
-webkit-transition-delay: 30ms;
|
|
501
|
+
transition-delay: 30ms; }
|
|
466
502
|
.inlineTooltip-button.control {
|
|
467
503
|
-webkit-transition: -webkit-transform 100ms, 100ms border-color, 100ms color;
|
|
468
504
|
transition: transform 100ms, 100ms border-color, 100ms color;
|
|
@@ -514,7 +550,7 @@
|
|
|
514
550
|
.popover--tooltip {
|
|
515
551
|
pointer-events: none; }
|
|
516
552
|
.popover--tooltip .popover-inner {
|
|
517
|
-
background: #
|
|
553
|
+
background: #333333;
|
|
518
554
|
border-radius: 4px;
|
|
519
555
|
color: #fff; }
|
|
520
556
|
|
|
@@ -529,7 +565,7 @@
|
|
|
529
565
|
|
|
530
566
|
.popover--Aligntooltip .popover-inner {
|
|
531
567
|
padding: 0;
|
|
532
|
-
background: #
|
|
568
|
+
background: #333333;
|
|
533
569
|
color: #fff; }
|
|
534
570
|
|
|
535
571
|
.popover--typeahead .popover-inner {
|
|
@@ -561,7 +597,7 @@
|
|
|
561
597
|
position: absolute; }
|
|
562
598
|
|
|
563
599
|
.popover-arrow:after {
|
|
564
|
-
background-color: #
|
|
600
|
+
background-color: #333333; }
|
|
565
601
|
|
|
566
602
|
.popover--top .popover-arrow,
|
|
567
603
|
.popover--bottom .popover-arrow {
|
|
@@ -592,25 +628,25 @@
|
|
|
592
628
|
-webkit-transform: rotate(45deg) translate(-5px, -5px);
|
|
593
629
|
-ms-transform: rotate(45deg) translate(-5px, -5px);
|
|
594
630
|
transform: rotate(45deg) translate(-5px, -5px);
|
|
595
|
-
box-shadow: 1px 1px 1px -1px #
|
|
631
|
+
box-shadow: 1px 1px 1px -1px #333333; }
|
|
596
632
|
|
|
597
633
|
.popover--right .popover-arrow:after {
|
|
598
634
|
-webkit-transform: rotate(45deg) translate(6px, -6px);
|
|
599
635
|
-ms-transform: rotate(45deg) translate(6px, -6px);
|
|
600
636
|
transform: rotate(45deg) translate(6px, -6px);
|
|
601
|
-
box-shadow: -1px 1px 1px -1px #
|
|
637
|
+
box-shadow: -1px 1px 1px -1px #333333; }
|
|
602
638
|
|
|
603
639
|
.popover--bottom .popover-arrow:after {
|
|
604
640
|
-webkit-transform: rotate(45deg) translate(6px, 6px);
|
|
605
641
|
-ms-transform: rotate(45deg) translate(6px, 6px);
|
|
606
642
|
transform: rotate(45deg) translate(6px, 6px);
|
|
607
|
-
box-shadow: -1px -1px 1px -1px #
|
|
643
|
+
box-shadow: -1px -1px 1px -1px #333333; }
|
|
608
644
|
|
|
609
645
|
.popover--left .popover-arrow:after {
|
|
610
646
|
-webkit-transform: rotate(45deg) translate(-6px, 6px);
|
|
611
647
|
-ms-transform: rotate(45deg) translate(-6px, 6px);
|
|
612
648
|
transform: rotate(45deg) translate(-6px, 6px);
|
|
613
|
-
box-shadow: 1px -1px 1px -1px #
|
|
649
|
+
box-shadow: 1px -1px 1px -1px #333333; }
|
|
614
650
|
|
|
615
651
|
.graf--h2,
|
|
616
652
|
.graf--h3,
|
|
@@ -847,28 +883,18 @@ p[data-align="center"],
|
|
|
847
883
|
max-width: 100%; }
|
|
848
884
|
|
|
849
885
|
.imageCaption {
|
|
850
|
-
position: absolute;
|
|
851
|
-
left: -172px;
|
|
852
|
-
width: 150px;
|
|
853
886
|
top: 0;
|
|
854
|
-
text-align:
|
|
887
|
+
text-align: center;
|
|
855
888
|
margin-top: 0;
|
|
856
|
-
font-family: "
|
|
857
|
-
letter-spacing: 0
|
|
889
|
+
font-family: "jaf-bernino-sans", "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
|
890
|
+
letter-spacing: 0;
|
|
858
891
|
font-weight: 400;
|
|
859
|
-
font-
|
|
860
|
-
font-size: 14px;
|
|
892
|
+
font-size: 13px;
|
|
861
893
|
line-height: 1.4;
|
|
862
894
|
color: rgba(0, 0, 0, 0.6);
|
|
863
895
|
outline: 0;
|
|
864
|
-
z-index: 300;
|
|
865
|
-
|
|
866
|
-
width: 25%;
|
|
867
|
-
margin-left: 75%;
|
|
868
|
-
border-top: 1px solid rgba(0, 0, 0, 0.15);
|
|
869
|
-
display: block;
|
|
870
|
-
content: "";
|
|
871
|
-
margin-bottom: 10px; }
|
|
896
|
+
z-index: 300;
|
|
897
|
+
margin-top: 10px; }
|
|
872
898
|
|
|
873
899
|
@media (max-width: 1200px) {
|
|
874
900
|
.imageCaption,
|
|
@@ -877,10 +903,7 @@ p[data-align="center"],
|
|
|
877
903
|
width: 100%;
|
|
878
904
|
text-align: center;
|
|
879
905
|
left: 0;
|
|
880
|
-
margin-top: 10px; }
|
|
881
|
-
|
|
882
|
-
.imageCaption:before {
|
|
883
|
-
display: none; } }
|
|
906
|
+
margin-top: 10px; } }
|
|
884
907
|
figure.graf--layoutOutsetLeft .imageCaption,
|
|
885
908
|
figure.graf--layoutOutsetLeft .postField--outsetCenterImage > .imageCaption {
|
|
886
909
|
position: relative;
|
|
@@ -888,8 +911,6 @@ figure.graf--layoutOutsetLeft .postField--outsetCenterImage > .imageCaption {
|
|
|
888
911
|
text-align: center;
|
|
889
912
|
left: 0;
|
|
890
913
|
margin-top: 10px; }
|
|
891
|
-
figure.graf--layoutOutsetLeft .imageCaption:before {
|
|
892
|
-
display: none; }
|
|
893
914
|
|
|
894
915
|
figure.is-defaultValue .imageCaption,
|
|
895
916
|
.graf--sectionCaption.is-defaultValue {
|
|
@@ -1162,8 +1183,3 @@ a[rel=token], .markup--query {
|
|
|
1162
1183
|
margin-right: 30px;
|
|
1163
1184
|
padding-top: 10px;
|
|
1164
1185
|
padding-bottom: 10px; }
|
|
1165
|
-
|
|
1166
|
-
.debug .section-inner .is-selected {
|
|
1167
|
-
outline-color: #55b6b3;
|
|
1168
|
-
outline-width: thin;
|
|
1169
|
-
outline-style: dotted; }
|
data/dist/js/dante-editor.js
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
defaults: {
|
|
9
9
|
image_placeholder: '../images/dante/media-loading-placeholder.png'
|
|
10
10
|
},
|
|
11
|
-
version: "0.1.
|
|
11
|
+
version: "0.1.2"
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
}).call(this);
|
|
@@ -2850,7 +2850,7 @@
|
|
|
2850
2850
|
var control_spacing, control_width, coord_left, coord_top, pull_size, tooltip;
|
|
2851
2851
|
tooltip = $(this.el);
|
|
2852
2852
|
control_width = tooltip.find(".control").css("width");
|
|
2853
|
-
control_spacing = tooltip.find(".inlineTooltip-
|
|
2853
|
+
control_spacing = tooltip.find(".inlineTooltip-button").css("margin-right");
|
|
2854
2854
|
pull_size = parseInt(control_width.replace(/px/, "")) + parseInt(control_spacing.replace(/px/, ""));
|
|
2855
2855
|
coord_left = coords.left - pull_size;
|
|
2856
2856
|
coord_top = coords.top;
|
|
@@ -3379,20 +3379,24 @@
|
|
|
3379
3379
|
|
|
3380
3380
|
/*
|
|
3381
3381
|
buttons: [
|
|
3382
|
-
'blockquote', '
|
|
3382
|
+
'blockquote', 'h3', 'h4', 'p', 'code', 'insertorderedlist', 'insertunorderedlist', 'inserthorizontalrule',
|
|
3383
3383
|
'indent', 'outdent', 'bold', 'italic', 'underline', 'createlink'
|
|
3384
3384
|
]
|
|
3385
3385
|
*/
|
|
3386
|
-
buttons: ['bold', 'italic', '
|
|
3386
|
+
buttons: ['bold', 'italic', 'createlink', 'divider', 'h3', 'h4', 'blockquote']
|
|
3387
3387
|
};
|
|
3388
3388
|
};
|
|
3389
3389
|
|
|
3390
3390
|
Menu.prototype.template = function() {
|
|
3391
3391
|
var html;
|
|
3392
|
-
html = "<div class='dante-menu-linkinput'><input class='dante-menu-input' placeholder='
|
|
3392
|
+
html = "<div class='dante-menu-linkinput'><input class='dante-menu-input' placeholder='Paste or type a link'><div class='dante-menu-button'>x</div></div>";
|
|
3393
3393
|
html += "<ul class='dante-menu-buttons'>";
|
|
3394
3394
|
_.each(this.config.buttons, function(item) {
|
|
3395
|
-
|
|
3395
|
+
if (item === "divider") {
|
|
3396
|
+
return html += "<li class='dante-menu-divider'></li>";
|
|
3397
|
+
} else {
|
|
3398
|
+
return html += "<li class='dante-menu-button'><i class=\"dante-icon icon-" + item + "\" data-action=\"" + item + "\"></i></li>";
|
|
3399
|
+
}
|
|
3396
3400
|
});
|
|
3397
3401
|
html += "</ul>";
|
|
3398
3402
|
return html;
|
|
@@ -3418,7 +3422,12 @@
|
|
|
3418
3422
|
input.focus();
|
|
3419
3423
|
}
|
|
3420
3424
|
} else {
|
|
3421
|
-
|
|
3425
|
+
if ($(ev.currentTarget).hasClass("dante-menu-button--disabled")) {
|
|
3426
|
+
utils.log("menu " + action + " item blocked!");
|
|
3427
|
+
ev.preventDefault();
|
|
3428
|
+
} else {
|
|
3429
|
+
this.menuApply(action);
|
|
3430
|
+
}
|
|
3422
3431
|
}
|
|
3423
3432
|
return false;
|
|
3424
3433
|
};
|
|
@@ -3579,9 +3588,9 @@
|
|
|
3579
3588
|
utils.log("nothing to select");
|
|
3580
3589
|
}
|
|
3581
3590
|
if (tag.match(/(?:h[1-6])/i)) {
|
|
3582
|
-
|
|
3591
|
+
_this.toggleMenuButtons(_this.el, ".icon-bold, .icon-italic");
|
|
3583
3592
|
} else if (tag === "indent") {
|
|
3584
|
-
|
|
3593
|
+
_this.toggleMenuButtons(_this.el, ".icon-h3, .icon-h4, .icon-blockquote");
|
|
3585
3594
|
}
|
|
3586
3595
|
return _this.highlight(tag);
|
|
3587
3596
|
};
|
|
@@ -3592,6 +3601,10 @@
|
|
|
3592
3601
|
return $(".icon-" + tag).parent("li").addClass("active");
|
|
3593
3602
|
};
|
|
3594
3603
|
|
|
3604
|
+
Menu.prototype.toggleMenuButtons = function(el, buttons) {
|
|
3605
|
+
return $(el).find(buttons).parent("li").addClass("dante-menu-button--disabled");
|
|
3606
|
+
};
|
|
3607
|
+
|
|
3595
3608
|
Menu.prototype.show = function() {
|
|
3596
3609
|
$(this.el).addClass("dante-menu--active");
|
|
3597
3610
|
this.closeInput();
|
data/lib/dante-editor/version.rb
CHANGED