coveragebook_components 0.5.7 → 0.6.0
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/build/coco/app.css +146 -25
- data/app/assets/build/coco/app.js +48 -5
- data/app/assets/build/coco/book.css +26 -15
- data/app/assets/build/coco/book.js +13 -1
- data/app/components/coco/app/blocks/slide_editor/slide_editor.css +84 -12
- data/app/components/coco/app/blocks/slide_editor/slide_editor.html.erb +100 -0
- data/app/components/coco/app/blocks/slide_editor/slide_editor.js +32 -1
- data/app/components/coco/app/blocks/slide_editor/slide_editor.rb +40 -1
- data/app/components/coco/app/elements/layout_picker_button/layout_picker_button.html.erb +1 -2
- data/app/components/coco/app/elements/layout_picker_button/layout_picker_button.js +7 -1
- data/app/components/coco/app/elements/layout_picker_button/layout_picker_button.rb +1 -0
- data/app/components/coco/base/button/button.js +15 -0
- data/app/components/coco/base/image_uploader/image_uploader.html.erb +1 -3
- data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.css +12 -9
- data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.html.erb +6 -4
- data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.rb +4 -4
- data/config/locales/coco.en.yml +2 -0
- data/lib/coco.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 324d5f797b12a43ba287186f0bb292881a0b2d7fa3cebf348c66394b1ab56543
|
|
4
|
+
data.tar.gz: 8d890765e161085db340052746adbe5def80174e6b3c410829d7add5a40d29e3
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c8c4c8539446948b4b2da346ff121fd7420d755ff7a0c992a68b9c26c40d905c6531c476603ba250edfc5b3d2f97da27bf3a587cb82184a4f01966368fb89661
|
|
7
|
+
data.tar.gz: 9c954db0e3d53181459c812fdd0248f99f2fda517fead437da41be871ea6f2f38598b46d65ee742da0e2557a709bb6d867f61ba0a4c9f2aaa9de09c9b1dfa50e
|
|
@@ -1104,6 +1104,8 @@ select{
|
|
|
1104
1104
|
margin-bottom: 1.5rem}}
|
|
1105
1105
|
[data-coco][data-component="app-slide-editor"] .editor-form form{
|
|
1106
1106
|
display: none}
|
|
1107
|
+
[data-coco][data-component="app-slide-editor"] .slide-media{
|
|
1108
|
+
position: relative}
|
|
1107
1109
|
[data-coco][data-component="app-slide-editor"] .editor-slide{
|
|
1108
1110
|
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
1109
1111
|
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
|
@@ -1111,6 +1113,97 @@ select{
|
|
|
1111
1113
|
[data-coco][data-component="app-slide-editor"] .editor-slide textarea{
|
|
1112
1114
|
width: 100%;
|
|
1113
1115
|
flex: none}
|
|
1116
|
+
[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader{
|
|
1117
|
+
position: relative;
|
|
1118
|
+
height: 100%;
|
|
1119
|
+
width: 100%}
|
|
1120
|
+
[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-foreground-image{
|
|
1121
|
+
position: relative;
|
|
1122
|
+
height: 100%;
|
|
1123
|
+
width: 100%;
|
|
1124
|
+
transition-property: outline-color;
|
|
1125
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1126
|
+
transition-duration: 100ms}
|
|
1127
|
+
[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-foreground-image:hover{
|
|
1128
|
+
outline-style: solid;
|
|
1129
|
+
outline-width: 1px;
|
|
1130
|
+
outline-offset: 0px;
|
|
1131
|
+
outline-color: transparent}
|
|
1132
|
+
[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-foreground-image img{
|
|
1133
|
+
height: 100%;
|
|
1134
|
+
width: 100%;
|
|
1135
|
+
-o-object-fit: contain;
|
|
1136
|
+
object-fit: contain}
|
|
1137
|
+
[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder{
|
|
1138
|
+
inset: 0px;
|
|
1139
|
+
display: flex;
|
|
1140
|
+
flex-direction: column;
|
|
1141
|
+
align-items: center;
|
|
1142
|
+
justify-content: center;
|
|
1143
|
+
text-align: center}
|
|
1144
|
+
@supports (aspect-ratio: 1 / 1){
|
|
1145
|
+
|
|
1146
|
+
[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder{
|
|
1147
|
+
aspect-ratio: 4/3}}
|
|
1148
|
+
@supports not (aspect-ratio: 1 / 1){
|
|
1149
|
+
|
|
1150
|
+
[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder::before{
|
|
1151
|
+
content: "";
|
|
1152
|
+
float: left;
|
|
1153
|
+
padding-top: calc(100% / (4/3))}
|
|
1154
|
+
|
|
1155
|
+
[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder::after{
|
|
1156
|
+
clear: left;
|
|
1157
|
+
content: "";
|
|
1158
|
+
display: block}}
|
|
1159
|
+
@container (min-width: 700px){
|
|
1160
|
+
|
|
1161
|
+
[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder{
|
|
1162
|
+
position: absolute}
|
|
1163
|
+
|
|
1164
|
+
@supports (aspect-ratio: 1 / 1){
|
|
1165
|
+
|
|
1166
|
+
[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder{
|
|
1167
|
+
aspect-ratio: auto}}
|
|
1168
|
+
|
|
1169
|
+
@supports not (aspect-ratio: 1 / 1){
|
|
1170
|
+
|
|
1171
|
+
[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder::before{
|
|
1172
|
+
content: "";
|
|
1173
|
+
float: left;
|
|
1174
|
+
padding-top: calc(100% / (auto))}
|
|
1175
|
+
|
|
1176
|
+
[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder::after{
|
|
1177
|
+
clear: left;
|
|
1178
|
+
content: "";
|
|
1179
|
+
display: block}}}
|
|
1180
|
+
[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder{
|
|
1181
|
+
outline-style: solid;
|
|
1182
|
+
outline-width: 1px;
|
|
1183
|
+
outline-offset: 0px;
|
|
1184
|
+
outline-color: transparent;
|
|
1185
|
+
background-color: rgba(255, 255, 255, 0.1)}
|
|
1186
|
+
[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder .coco-icon{
|
|
1187
|
+
color: currentColor;
|
|
1188
|
+
width: 3em;
|
|
1189
|
+
height: 3em;
|
|
1190
|
+
margin-bottom: 0.6em}
|
|
1191
|
+
[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder .coco-icon,
|
|
1192
|
+
[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder .editor-image-upload-placeholder-text{
|
|
1193
|
+
opacity: 0.5}
|
|
1194
|
+
[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-toolbar{
|
|
1195
|
+
position: absolute;
|
|
1196
|
+
left: 50%;
|
|
1197
|
+
top: 0px;
|
|
1198
|
+
--tw-translate-x: -50%;
|
|
1199
|
+
--tw-translate-y: -50%;
|
|
1200
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1201
|
+
opacity: 0;
|
|
1202
|
+
transition-property: opacity;
|
|
1203
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1204
|
+
transition-duration: 100ms}
|
|
1205
|
+
[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader:hover .editor-image-upload-toolbar{
|
|
1206
|
+
opacity: 1}
|
|
1114
1207
|
[data-coco][data-component="app-slide-editor"] .coco-button.editor-saving{
|
|
1115
1208
|
cursor: not-allowed}
|
|
1116
1209
|
[data-coco][data-component="app-slide-editor"] .editor-thumbnail-wrapper{
|
|
@@ -1122,7 +1215,13 @@ select{
|
|
|
1122
1215
|
position: absolute;
|
|
1123
1216
|
top: 0px;
|
|
1124
1217
|
z-index: -1000;
|
|
1125
|
-
width:
|
|
1218
|
+
width: 780px}
|
|
1219
|
+
[data-coco][data-component="app-slide-editor"] .editor-thumbnail-image{
|
|
1220
|
+
height: 100%;
|
|
1221
|
+
width: 100%;
|
|
1222
|
+
background-size: contain;
|
|
1223
|
+
background-position: center;
|
|
1224
|
+
background-repeat: no-repeat}
|
|
1126
1225
|
[data-coco][data-component="app-slide-editor"] .editor-icon-bg-color{
|
|
1127
1226
|
fill: currentColor;
|
|
1128
1227
|
stroke: #111827;
|
|
@@ -1131,19 +1230,36 @@ select{
|
|
|
1131
1230
|
outline-style: solid;
|
|
1132
1231
|
outline-width: 1px;
|
|
1133
1232
|
outline-offset: 0px;
|
|
1134
|
-
outline-color: transparent
|
|
1233
|
+
outline-color: transparent;
|
|
1234
|
+
transition-property: outline-color;
|
|
1235
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1236
|
+
transition-duration: 100ms}
|
|
1135
1237
|
[data-coco][data-component="app-slide-editor"] [data-component="app-seamless-textarea"] textarea::-moz-placeholder{
|
|
1136
1238
|
font-style: italic}
|
|
1137
1239
|
[data-coco][data-component="app-slide-editor"] [data-component="app-seamless-textarea"] textarea::placeholder{
|
|
1138
1240
|
font-style: italic}
|
|
1241
|
+
[data-coco][data-component="app-slide-editor"] .slide-bg-light .editor-foreground-image,
|
|
1242
|
+
[data-coco][data-component="app-slide-editor"] .slide-bg-light .editor-image-upload-placeholder {
|
|
1243
|
+
outline-color: rgba(0, 0, 0, 0.3) !important;
|
|
1244
|
+
}
|
|
1245
|
+
[data-coco][data-component="app-slide-editor"] .slide-bg-light .editor-image-upload-placeholder{
|
|
1246
|
+
--tw-text-opacity: 1;
|
|
1247
|
+
color: rgb(17 24 39 / var(--tw-text-opacity))}
|
|
1139
1248
|
[data-coco][data-component="app-slide-editor"] .slide-bg-light [data-component="app-seamless-textarea"] textarea:hover,
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1249
|
+
[data-coco][data-component="app-slide-editor"] .slide-bg-light [data-component="app-seamless-textarea"] textarea:focus {
|
|
1250
|
+
outline-color: rgba(0, 0, 0, 0.3);
|
|
1251
|
+
}
|
|
1252
|
+
[data-coco][data-component="app-slide-editor"] .slide-bg-dark .editor-foreground-image,
|
|
1253
|
+
[data-coco][data-component="app-slide-editor"] .slide-bg-dark .editor-image-upload-placeholder {
|
|
1254
|
+
outline-color: rgba(255, 255, 255, 0.3) !important;
|
|
1255
|
+
}
|
|
1256
|
+
[data-coco][data-component="app-slide-editor"] .slide-bg-dark .editor-image-upload-placeholder{
|
|
1257
|
+
--tw-text-opacity: 1;
|
|
1258
|
+
color: rgb(255 255 255 / var(--tw-text-opacity))}
|
|
1143
1259
|
[data-coco][data-component="app-slide-editor"] .slide-bg-dark [data-component="app-seamless-textarea"] textarea:hover,
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1260
|
+
[data-coco][data-component="app-slide-editor"] .slide-bg-dark [data-component="app-seamless-textarea"] textarea:focus {
|
|
1261
|
+
outline-color: rgba(255, 255, 255, 0.3);
|
|
1262
|
+
}
|
|
1147
1263
|
[data-coco][data-component="app-alert"]{
|
|
1148
1264
|
overflow: hidden;
|
|
1149
1265
|
border-radius: 0.75rem;
|
|
@@ -3210,7 +3326,7 @@ select{
|
|
|
3210
3326
|
[data-coco][data-component="book-editable-slide"] [data-slide-region],
|
|
3211
3327
|
[data-coco][data-component="book-editable-slide"] .slide-header,
|
|
3212
3328
|
[data-coco][data-component="book-editable-slide"] .slide-text,
|
|
3213
|
-
[data-coco][data-component="book-editable-slide"] .slide-
|
|
3329
|
+
[data-coco][data-component="book-editable-slide"] .slide-media{
|
|
3214
3330
|
display: none}
|
|
3215
3331
|
[data-coco][data-component="book-editable-slide"] .slide-group{
|
|
3216
3332
|
display: contents}
|
|
@@ -3225,7 +3341,9 @@ select{
|
|
|
3225
3341
|
line-height: 1.5;
|
|
3226
3342
|
font-size: var(--text-font-size)}
|
|
3227
3343
|
[data-coco][data-component="book-editable-slide"] .slide-media{
|
|
3228
|
-
width: 100
|
|
3344
|
+
width: 100%;
|
|
3345
|
+
color: currentColor;
|
|
3346
|
+
font-size: var(--text-font-size)}
|
|
3229
3347
|
[data-coco][data-component="book-editable-slide"] .slide-media img{
|
|
3230
3348
|
height: 100%;
|
|
3231
3349
|
width: 100%;
|
|
@@ -3292,6 +3410,14 @@ select{
|
|
|
3292
3410
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-text {
|
|
3293
3411
|
line-height: 1.4;
|
|
3294
3412
|
}
|
|
3413
|
+
[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container{
|
|
3414
|
+
padding-top: 1.5rem;
|
|
3415
|
+
padding-bottom: 1.5rem}
|
|
3416
|
+
@container (min-width: 700px){
|
|
3417
|
+
|
|
3418
|
+
[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container{
|
|
3419
|
+
padding-top: var(--slide-padding-sm);
|
|
3420
|
+
padding-bottom: var(--slide-padding-sm)}}
|
|
3295
3421
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container{
|
|
3296
3422
|
display: flex;
|
|
3297
3423
|
align-items: center}
|
|
@@ -3326,13 +3452,11 @@ select{
|
|
|
3326
3452
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] [data-slide-region="content-1"] .slide-text{
|
|
3327
3453
|
display: block}
|
|
3328
3454
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-container{
|
|
3329
|
-
padding
|
|
3330
|
-
padding-bottom: 1.5rem}
|
|
3455
|
+
padding: 1.5rem}
|
|
3331
3456
|
@container (min-width: 700px){
|
|
3332
3457
|
|
|
3333
3458
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-container{
|
|
3334
|
-
padding
|
|
3335
|
-
padding-bottom: var(--slide-padding-sm)}}
|
|
3459
|
+
padding: var(--slide-padding-sm)}}
|
|
3336
3460
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-layout,
|
|
3337
3461
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-content{
|
|
3338
3462
|
height: 100%}
|
|
@@ -3392,21 +3516,15 @@ select{
|
|
|
3392
3516
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"],
|
|
3393
3517
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-2"]{
|
|
3394
3518
|
display: block}
|
|
3395
|
-
[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"] .slide-text,
|
|
3396
|
-
[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"] .slide-media,
|
|
3397
|
-
[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-2"] .slide-text,
|
|
3398
|
-
[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-2"] .slide-media,
|
|
3399
|
-
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"] .slide-text,
|
|
3400
|
-
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"] .slide-media,
|
|
3401
|
-
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-2"] .slide-text,
|
|
3402
|
-
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-2"] .slide-media{
|
|
3403
|
-
display: block}
|
|
3404
3519
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"], [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"]{
|
|
3405
3520
|
margin-bottom: var(--slide-padding-sm)}
|
|
3406
3521
|
@container (min-width: 700px){
|
|
3407
3522
|
|
|
3408
3523
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"], [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"]{
|
|
3409
|
-
margin-bottom: 0px}
|
|
3524
|
+
margin-bottom: 0px}}
|
|
3525
|
+
[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-text{
|
|
3526
|
+
display: block}
|
|
3527
|
+
@container (min-width: 700px){
|
|
3410
3528
|
|
|
3411
3529
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-layout{
|
|
3412
3530
|
height: 100%}}
|
|
@@ -3417,7 +3535,10 @@ select{
|
|
|
3417
3535
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-content{
|
|
3418
3536
|
display: flex;
|
|
3419
3537
|
height: 100%;
|
|
3420
|
-
align-items: center}
|
|
3538
|
+
align-items: center}}
|
|
3539
|
+
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-media{
|
|
3540
|
+
display: block}
|
|
3541
|
+
@container (min-width: 700px){
|
|
3421
3542
|
|
|
3422
3543
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-media{
|
|
3423
3544
|
position: absolute;
|
|
@@ -14604,7 +14604,7 @@
|
|
|
14604
14604
|
var package_default = {
|
|
14605
14605
|
name: "coveragebook-components",
|
|
14606
14606
|
type: "module",
|
|
14607
|
-
version: "0.
|
|
14607
|
+
version: "0.6.0",
|
|
14608
14608
|
main: "index.js",
|
|
14609
14609
|
repository: "git@github.com:coveragebook/coco.git",
|
|
14610
14610
|
author: "Mark Perkins <mark@coveragebook.com>",
|
|
@@ -29276,7 +29276,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
|
|
|
29276
29276
|
confirmed: true,
|
|
29277
29277
|
lastState: null,
|
|
29278
29278
|
stateTooltips: data2.tooltips || {},
|
|
29279
|
-
tooltipText: null
|
|
29279
|
+
tooltipText: null,
|
|
29280
|
+
dropdown: null
|
|
29280
29281
|
}, data2.props || {}), {
|
|
29281
29282
|
init() {
|
|
29282
29283
|
this.lastState = this.state;
|
|
@@ -29316,6 +29317,17 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
|
|
|
29316
29317
|
set disabled(value) {
|
|
29317
29318
|
this.$options.disabled = value;
|
|
29318
29319
|
},
|
|
29320
|
+
/* dropdown */
|
|
29321
|
+
hideDropdown() {
|
|
29322
|
+
if (this.dropdown) {
|
|
29323
|
+
this.dropdown.hide();
|
|
29324
|
+
}
|
|
29325
|
+
},
|
|
29326
|
+
showDropdown() {
|
|
29327
|
+
if (this.dropdown) {
|
|
29328
|
+
this.dropdown.show();
|
|
29329
|
+
}
|
|
29330
|
+
},
|
|
29319
29331
|
/* confirmation */
|
|
29320
29332
|
checkConfirmation(event) {
|
|
29321
29333
|
if (!this.confirmed) {
|
|
@@ -29665,11 +29677,20 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
|
|
|
29665
29677
|
layout: data2.layout,
|
|
29666
29678
|
title: data2.title,
|
|
29667
29679
|
text1: data2.text1,
|
|
29680
|
+
text2: data2.text2,
|
|
29668
29681
|
bgColor: data2.bgColor,
|
|
29669
29682
|
textColor: data2.textColor,
|
|
29670
29683
|
bgImage: {
|
|
29671
29684
|
name: data2.bgImage,
|
|
29672
29685
|
data: data2.bgImage
|
|
29686
|
+
},
|
|
29687
|
+
image1: {
|
|
29688
|
+
name: data2.image1,
|
|
29689
|
+
data: data2.image1
|
|
29690
|
+
},
|
|
29691
|
+
image2: {
|
|
29692
|
+
name: data2.image2,
|
|
29693
|
+
data: data2.image2
|
|
29673
29694
|
}
|
|
29674
29695
|
};
|
|
29675
29696
|
return __spreadProps(__spreadValues({
|
|
@@ -29684,6 +29705,9 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
|
|
|
29684
29705
|
get bgImagePicker() {
|
|
29685
29706
|
return getData(this.$root.querySelector("[data-role='bg-image-picker']"));
|
|
29686
29707
|
},
|
|
29708
|
+
get layoutPicker() {
|
|
29709
|
+
return getData(this.$root.querySelector("[data-role='layout-picker']"));
|
|
29710
|
+
},
|
|
29687
29711
|
init() {
|
|
29688
29712
|
this.$watch("errors", (errors) => {
|
|
29689
29713
|
errors.forEach((error2) => console.error(error2.message));
|
|
@@ -29712,6 +29736,9 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
|
|
|
29712
29736
|
);
|
|
29713
29737
|
Array.from(inputs).forEach((el) => getData(el).onResize());
|
|
29714
29738
|
},
|
|
29739
|
+
setLayout(layout) {
|
|
29740
|
+
this.layout = layout;
|
|
29741
|
+
},
|
|
29715
29742
|
handleImageDrop(event) {
|
|
29716
29743
|
this.dragging = false;
|
|
29717
29744
|
if (this.bgImagePicker) {
|
|
@@ -29782,6 +29809,12 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
|
|
|
29782
29809
|
get hasBgImage() {
|
|
29783
29810
|
return !!(this.bgImage && this.bgImage.data);
|
|
29784
29811
|
},
|
|
29812
|
+
get hasImage1() {
|
|
29813
|
+
return !!(this.image1 && this.image1.data);
|
|
29814
|
+
},
|
|
29815
|
+
get hasImage2() {
|
|
29816
|
+
return !!(this.image2 && this.image2.data);
|
|
29817
|
+
},
|
|
29785
29818
|
get bgColorHex() {
|
|
29786
29819
|
return this.bgColor.replace("#", "");
|
|
29787
29820
|
},
|
|
@@ -29818,16 +29851,22 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
|
|
|
29818
29851
|
"slide-bg-dark": this.isDarkBg,
|
|
29819
29852
|
"slide-bg-light": !this.isDarkBg
|
|
29820
29853
|
};
|
|
29821
|
-
}
|
|
29854
|
+
},
|
|
29855
|
+
[":data-layout"]: "layout"
|
|
29822
29856
|
},
|
|
29823
29857
|
input: {
|
|
29824
|
-
layout: { "x-model.fill": "layout" },
|
|
29858
|
+
layout: { "x-model.fill": "layout.replace(/-/g,'_')" },
|
|
29825
29859
|
title: { "x-model.fill": "title" },
|
|
29826
29860
|
text1: { "x-model.fill": "text1" },
|
|
29861
|
+
text2: { "x-model.fill": "text2" },
|
|
29827
29862
|
bgColor: { "x-model.fill": "bgColorHex" },
|
|
29828
29863
|
textColor: { "x-model.fill": "textColorHex" },
|
|
29829
29864
|
bgImage: { "x-effect": "syncFileInput($el, bgImage.file)" },
|
|
29830
29865
|
bgImagePurge: { ":checked": "!hasBgImage" },
|
|
29866
|
+
image1: { "x-effect": "syncFileInput($el, image1.file)" },
|
|
29867
|
+
image1Purge: { ":checked": "!hasImage1" },
|
|
29868
|
+
image2: { "x-effect": "syncFileInput($el, image2.file)" },
|
|
29869
|
+
image2Purge: { ":checked": "!hasImage2" },
|
|
29831
29870
|
thumbnailImage: { "x-effect": "syncFileInput($el, thumbnailFile)" }
|
|
29832
29871
|
}
|
|
29833
29872
|
});
|
|
@@ -31883,7 +31922,11 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
|
|
|
31883
31922
|
this.$root.querySelector("[data-role='layout-picker']").firstElementChild
|
|
31884
31923
|
);
|
|
31885
31924
|
},
|
|
31886
|
-
|
|
31925
|
+
getButton() {
|
|
31926
|
+
return getData(this.$root.querySelector(".layout-picker-trigger"));
|
|
31927
|
+
},
|
|
31928
|
+
init() {
|
|
31929
|
+
this.$watch("selectedLayout", () => this.getButton().hideDropdown());
|
|
31887
31930
|
}
|
|
31888
31931
|
};
|
|
31889
31932
|
});
|
|
@@ -842,7 +842,7 @@ select {
|
|
|
842
842
|
[data-coco][data-component="book-editable-slide"] [data-slide-region],
|
|
843
843
|
[data-coco][data-component="book-editable-slide"] .slide-header,
|
|
844
844
|
[data-coco][data-component="book-editable-slide"] .slide-text,
|
|
845
|
-
[data-coco][data-component="book-editable-slide"] .slide-
|
|
845
|
+
[data-coco][data-component="book-editable-slide"] .slide-media {
|
|
846
846
|
display: none;
|
|
847
847
|
}
|
|
848
848
|
[data-coco][data-component="book-editable-slide"] .slide-group {
|
|
@@ -862,6 +862,8 @@ select {
|
|
|
862
862
|
}
|
|
863
863
|
[data-coco][data-component="book-editable-slide"] .slide-media {
|
|
864
864
|
width: 100%;
|
|
865
|
+
color: currentColor;
|
|
866
|
+
font-size: var(--text-font-size);
|
|
865
867
|
}
|
|
866
868
|
[data-coco][data-component="book-editable-slide"] .slide-media img {
|
|
867
869
|
height: 100%;
|
|
@@ -940,6 +942,17 @@ select {
|
|
|
940
942
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-text {
|
|
941
943
|
line-height: 1.4;
|
|
942
944
|
}
|
|
945
|
+
[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container {
|
|
946
|
+
padding-top: 1.5rem;
|
|
947
|
+
padding-bottom: 1.5rem;
|
|
948
|
+
}
|
|
949
|
+
@container (min-width: 700px) {
|
|
950
|
+
|
|
951
|
+
[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container {
|
|
952
|
+
padding-top: var(--slide-padding-sm);
|
|
953
|
+
padding-bottom: var(--slide-padding-sm);
|
|
954
|
+
}
|
|
955
|
+
}
|
|
943
956
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container {
|
|
944
957
|
display: flex;
|
|
945
958
|
align-items: center;
|
|
@@ -985,14 +998,12 @@ select {
|
|
|
985
998
|
display: block;
|
|
986
999
|
}
|
|
987
1000
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-container {
|
|
988
|
-
padding
|
|
989
|
-
padding-bottom: 1.5rem;
|
|
1001
|
+
padding: 1.5rem;
|
|
990
1002
|
}
|
|
991
1003
|
@container (min-width: 700px) {
|
|
992
1004
|
|
|
993
1005
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-container {
|
|
994
|
-
padding
|
|
995
|
-
padding-bottom: var(--slide-padding-sm);
|
|
1006
|
+
padding: var(--slide-padding-sm);
|
|
996
1007
|
}
|
|
997
1008
|
}
|
|
998
1009
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-layout,
|
|
@@ -1070,16 +1081,6 @@ select {
|
|
|
1070
1081
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-2"] {
|
|
1071
1082
|
display: block;
|
|
1072
1083
|
}
|
|
1073
|
-
[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"] .slide-text,
|
|
1074
|
-
[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"] .slide-media,
|
|
1075
|
-
[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-2"] .slide-text,
|
|
1076
|
-
[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-2"] .slide-media,
|
|
1077
|
-
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"] .slide-text,
|
|
1078
|
-
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"] .slide-media,
|
|
1079
|
-
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-2"] .slide-text,
|
|
1080
|
-
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-2"] .slide-media {
|
|
1081
|
-
display: block;
|
|
1082
|
-
}
|
|
1083
1084
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"], [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"] {
|
|
1084
1085
|
margin-bottom: var(--slide-padding-sm);
|
|
1085
1086
|
}
|
|
@@ -1088,6 +1089,11 @@ select {
|
|
|
1088
1089
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"], [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"] {
|
|
1089
1090
|
margin-bottom: 0px;
|
|
1090
1091
|
}
|
|
1092
|
+
}
|
|
1093
|
+
[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-text {
|
|
1094
|
+
display: block;
|
|
1095
|
+
}
|
|
1096
|
+
@container (min-width: 700px) {
|
|
1091
1097
|
|
|
1092
1098
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-layout {
|
|
1093
1099
|
height: 100%;
|
|
@@ -1103,6 +1109,11 @@ select {
|
|
|
1103
1109
|
height: 100%;
|
|
1104
1110
|
align-items: center;
|
|
1105
1111
|
}
|
|
1112
|
+
}
|
|
1113
|
+
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-media {
|
|
1114
|
+
display: block;
|
|
1115
|
+
}
|
|
1116
|
+
@container (min-width: 700px) {
|
|
1106
1117
|
|
|
1107
1118
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-media {
|
|
1108
1119
|
position: absolute;
|
|
@@ -14962,7 +14962,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
|
|
|
14962
14962
|
confirmed: true,
|
|
14963
14963
|
lastState: null,
|
|
14964
14964
|
stateTooltips: data2.tooltips || {},
|
|
14965
|
-
tooltipText: null
|
|
14965
|
+
tooltipText: null,
|
|
14966
|
+
dropdown: null
|
|
14966
14967
|
}, data2.props || {}), {
|
|
14967
14968
|
init() {
|
|
14968
14969
|
this.lastState = this.state;
|
|
@@ -15002,6 +15003,17 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
|
|
|
15002
15003
|
set disabled(value) {
|
|
15003
15004
|
this.$options.disabled = value;
|
|
15004
15005
|
},
|
|
15006
|
+
/* dropdown */
|
|
15007
|
+
hideDropdown() {
|
|
15008
|
+
if (this.dropdown) {
|
|
15009
|
+
this.dropdown.hide();
|
|
15010
|
+
}
|
|
15011
|
+
},
|
|
15012
|
+
showDropdown() {
|
|
15013
|
+
if (this.dropdown) {
|
|
15014
|
+
this.dropdown.show();
|
|
15015
|
+
}
|
|
15016
|
+
},
|
|
15005
15017
|
/* confirmation */
|
|
15006
15018
|
checkConfirmation(event) {
|
|
15007
15019
|
if (!this.confirmed) {
|
|
@@ -12,6 +12,10 @@
|
|
|
12
12
|
@apply hidden;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
+
.slide-media {
|
|
16
|
+
@apply relative;
|
|
17
|
+
}
|
|
18
|
+
|
|
15
19
|
.editor-slide {
|
|
16
20
|
@apply shadow-md;
|
|
17
21
|
|
|
@@ -20,6 +24,48 @@
|
|
|
20
24
|
}
|
|
21
25
|
}
|
|
22
26
|
|
|
27
|
+
.editor-foreground-image-uploader {
|
|
28
|
+
@apply h-full w-full relative;
|
|
29
|
+
|
|
30
|
+
.editor-foreground-image {
|
|
31
|
+
@apply h-full w-full relative transition-[outline-color] duration-100;
|
|
32
|
+
|
|
33
|
+
&:hover {
|
|
34
|
+
@apply outline outline-1 outline-transparent outline-offset-0;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
img {
|
|
38
|
+
@apply w-full h-full object-contain;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.editor-image-upload-placeholder {
|
|
43
|
+
@apply inset-0 flex flex-col items-center justify-center text-center aspect-[4/3] @slide-fluid:aspect-auto @slide-fluid:absolute;
|
|
44
|
+
@apply outline outline-1 outline-transparent outline-offset-0;
|
|
45
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
46
|
+
|
|
47
|
+
.coco-icon {
|
|
48
|
+
@apply text-current;
|
|
49
|
+
width: 3em;
|
|
50
|
+
height: 3em;
|
|
51
|
+
margin-bottom: 0.6em;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.coco-icon,
|
|
55
|
+
.editor-image-upload-placeholder-text {
|
|
56
|
+
@apply opacity-50;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.editor-image-upload-toolbar {
|
|
61
|
+
@apply absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 opacity-0 transition-opacity duration-100;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&:hover .editor-image-upload-toolbar {
|
|
65
|
+
@apply opacity-100;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
23
69
|
.coco-button.editor-saving {
|
|
24
70
|
@apply cursor-not-allowed;
|
|
25
71
|
}
|
|
@@ -29,7 +75,11 @@
|
|
|
29
75
|
}
|
|
30
76
|
|
|
31
77
|
.editor-thumbnail {
|
|
32
|
-
@apply absolute w-[
|
|
78
|
+
@apply absolute w-[780px] top-0 z-[-1000] pointer-events-none;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.editor-thumbnail-image {
|
|
82
|
+
@apply w-full h-full bg-contain bg-no-repeat bg-center;
|
|
33
83
|
}
|
|
34
84
|
|
|
35
85
|
.editor-icon-bg-color {
|
|
@@ -39,7 +89,7 @@
|
|
|
39
89
|
|
|
40
90
|
[data-component="app-seamless-textarea"] {
|
|
41
91
|
textarea {
|
|
42
|
-
@apply outline outline-1 outline-transparent outline-offset-0;
|
|
92
|
+
@apply outline outline-1 outline-transparent outline-offset-0 transition-[outline-color] duration-100;
|
|
43
93
|
|
|
44
94
|
&::placeholder {
|
|
45
95
|
@apply italic;
|
|
@@ -47,20 +97,42 @@
|
|
|
47
97
|
}
|
|
48
98
|
}
|
|
49
99
|
|
|
50
|
-
.slide-bg-light
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
100
|
+
.slide-bg-light {
|
|
101
|
+
.editor-foreground-image,
|
|
102
|
+
.editor-image-upload-placeholder {
|
|
103
|
+
outline-color: rgba(0, 0, 0, 0.3) !important;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.editor-image-upload-placeholder {
|
|
107
|
+
@apply text-content-dark-1;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
[data-component="app-seamless-textarea"] {
|
|
111
|
+
textarea {
|
|
112
|
+
&:hover,
|
|
113
|
+
&:focus {
|
|
114
|
+
outline-color: rgba(0, 0, 0, 0.3);
|
|
115
|
+
}
|
|
55
116
|
}
|
|
56
117
|
}
|
|
57
118
|
}
|
|
58
119
|
|
|
59
|
-
.slide-bg-dark
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
120
|
+
.slide-bg-dark {
|
|
121
|
+
.editor-foreground-image,
|
|
122
|
+
.editor-image-upload-placeholder {
|
|
123
|
+
outline-color: rgba(255, 255, 255, 0.3) !important;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.editor-image-upload-placeholder {
|
|
127
|
+
@apply text-content-light-1;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
[data-component="app-seamless-textarea"] {
|
|
131
|
+
textarea {
|
|
132
|
+
&:hover,
|
|
133
|
+
&:focus {
|
|
134
|
+
outline-color: rgba(255, 255, 255, 0.3);
|
|
135
|
+
}
|
|
64
136
|
}
|
|
65
137
|
}
|
|
66
138
|
}
|
|
@@ -5,6 +5,30 @@
|
|
|
5
5
|
<div class="editor-toolbar">
|
|
6
6
|
<%= coco_toolbar do |toolbar| %>
|
|
7
7
|
<% toolbar.with_section do |section| %>
|
|
8
|
+
<% if layout? %>
|
|
9
|
+
<% section.with_layout_picker_button(
|
|
10
|
+
icon: :layout_template,
|
|
11
|
+
selected: current_layout,
|
|
12
|
+
wrapper: {
|
|
13
|
+
data: {
|
|
14
|
+
role: "layout-picker"
|
|
15
|
+
},
|
|
16
|
+
x: {
|
|
17
|
+
"@layout-picker:change": "setLayout($event.detail.layout)"
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
) do |button| %>
|
|
21
|
+
<% button.with_layout(name: "one-col-title", thumbnail: "slides/one-col-title-layout") %>
|
|
22
|
+
<% button.with_layout(name: "two-col-mixed", thumbnail: "slides/two-col-mixed-layout") %>
|
|
23
|
+
<% button.with_layout(name: "one-col-media", thumbnail: "slides/one-col-media-layout") %>
|
|
24
|
+
<% button.with_layout(name: "two-col-media", thumbnail: "slides/two-col-media-layout") %>
|
|
25
|
+
<% button.with_layout(name: "one-col-text", thumbnail: "slides/one-col-text-layout") %>
|
|
26
|
+
<% button.with_layout(name: "two-col-text", thumbnail: "slides/two-col-text-layout") %>
|
|
27
|
+
|
|
28
|
+
<%= tt("layout_picker.label") %>
|
|
29
|
+
<% end %>
|
|
30
|
+
<% end %>
|
|
31
|
+
|
|
8
32
|
<% if bg_color? %>
|
|
9
33
|
<% section.with_color_picker_button(
|
|
10
34
|
**@bg_color_options.to_h,
|
|
@@ -147,6 +171,64 @@
|
|
|
147
171
|
<%= text_1 %>
|
|
148
172
|
<% end %>
|
|
149
173
|
<% end %>
|
|
174
|
+
|
|
175
|
+
<% if text_2? %>
|
|
176
|
+
<% slide.with_text_2 do %>
|
|
177
|
+
<%= text_2 %>
|
|
178
|
+
<% end %>
|
|
179
|
+
<% end %>
|
|
180
|
+
|
|
181
|
+
<% if image_1? %>
|
|
182
|
+
<% slide.with_image_1 do %>
|
|
183
|
+
<%= render Coco::ImageUploader.new(
|
|
184
|
+
class: "editor-foreground-image-uploader",
|
|
185
|
+
x: {
|
|
186
|
+
"@image-uploader:load": "image1 = $event.detail.file"
|
|
187
|
+
}
|
|
188
|
+
) do %>
|
|
189
|
+
<div class="editor-foreground-image" x-show="hasImage1">
|
|
190
|
+
<%= coco_button_group(
|
|
191
|
+
theme: :toolbar,
|
|
192
|
+
floating: true,
|
|
193
|
+
class: "editor-image-upload-toolbar"
|
|
194
|
+
) do |group| %>
|
|
195
|
+
<% group.with_button(icon: :trash_2, tooltip: "remove image", x: {"@click.stop": "image1 = {}"}) %>
|
|
196
|
+
<% end %>
|
|
197
|
+
<img :src="image1.data">
|
|
198
|
+
</div>
|
|
199
|
+
<div class="editor-image-upload-placeholder" x-show="!hasImage1">
|
|
200
|
+
<%= coco_icon(:image_plus) %>
|
|
201
|
+
<div class="editor-image-upload-placeholder-text">Add image</div>
|
|
202
|
+
</div>
|
|
203
|
+
<% end %>
|
|
204
|
+
<% end %>
|
|
205
|
+
<% end %>
|
|
206
|
+
|
|
207
|
+
<% if image_2? %>
|
|
208
|
+
<% slide.with_image_2 do %>
|
|
209
|
+
<%= render Coco::ImageUploader.new(
|
|
210
|
+
class: "editor-foreground-image-uploader",
|
|
211
|
+
x: {
|
|
212
|
+
"@image-uploader:load": "image2 = $event.detail.file"
|
|
213
|
+
}
|
|
214
|
+
) do %>
|
|
215
|
+
<div class="editor-foreground-image" x-show="hasImage2">
|
|
216
|
+
<%= coco_button_group(
|
|
217
|
+
theme: :toolbar,
|
|
218
|
+
floating: true,
|
|
219
|
+
class: "editor-image-upload-toolbar"
|
|
220
|
+
) do |group| %>
|
|
221
|
+
<% group.with_button(icon: :trash_2, tooltip: "remove image", x: {"@click.stop": "image2 = {}"}) %>
|
|
222
|
+
<% end %>
|
|
223
|
+
<img :src="image2.data">
|
|
224
|
+
</div>
|
|
225
|
+
<div class="editor-image-upload-placeholder" x-show="!hasImage2">
|
|
226
|
+
<%= coco_icon(:image_plus) %>
|
|
227
|
+
<div class="editor-image-upload-placeholder-text">Add image</div>
|
|
228
|
+
</div>
|
|
229
|
+
<% end %>
|
|
230
|
+
<% end %>
|
|
231
|
+
<% end %>
|
|
150
232
|
<% end %>
|
|
151
233
|
</div>
|
|
152
234
|
|
|
@@ -174,6 +256,24 @@
|
|
|
174
256
|
<span x-html="text1.replace(/\n/g, '<br>')"></span>
|
|
175
257
|
<% end %>
|
|
176
258
|
<% end %>
|
|
259
|
+
|
|
260
|
+
<% if text_2? %>
|
|
261
|
+
<% slide.with_text_2 do %>
|
|
262
|
+
<span x-html="text2.replace(/\n/g, '<br>')"></span>
|
|
263
|
+
<% end %>
|
|
264
|
+
<% end %>
|
|
265
|
+
|
|
266
|
+
<% if image_1? %>
|
|
267
|
+
<% slide.with_image_1 do %>
|
|
268
|
+
<div class="editor-thumbnail-image" :style="`background-image: url('${image1.data}')`"></div>
|
|
269
|
+
<% end %>
|
|
270
|
+
<% end %>
|
|
271
|
+
|
|
272
|
+
<% if image_2? %>
|
|
273
|
+
<% slide.with_image_2 do %>
|
|
274
|
+
<div class="editor-thumbnail-image" :style="`background-image: url('${image2.data}')`"></div>
|
|
275
|
+
<% end %>
|
|
276
|
+
<% end %>
|
|
177
277
|
<% end %>
|
|
178
278
|
</div>
|
|
179
279
|
</div>
|
|
@@ -10,12 +10,21 @@ export default CocoComponent("appSlideEditor", (data) => {
|
|
|
10
10
|
layout: data.layout,
|
|
11
11
|
title: data.title,
|
|
12
12
|
text1: data.text1,
|
|
13
|
+
text2: data.text2,
|
|
13
14
|
bgColor: data.bgColor,
|
|
14
15
|
textColor: data.textColor,
|
|
15
16
|
bgImage: {
|
|
16
17
|
name: data.bgImage,
|
|
17
18
|
data: data.bgImage,
|
|
18
19
|
},
|
|
20
|
+
image1: {
|
|
21
|
+
name: data.image1,
|
|
22
|
+
data: data.image1,
|
|
23
|
+
},
|
|
24
|
+
image2: {
|
|
25
|
+
name: data.image2,
|
|
26
|
+
data: data.image2,
|
|
27
|
+
},
|
|
19
28
|
};
|
|
20
29
|
|
|
21
30
|
return {
|
|
@@ -36,6 +45,10 @@ export default CocoComponent("appSlideEditor", (data) => {
|
|
|
36
45
|
return getData(this.$root.querySelector("[data-role='bg-image-picker']"));
|
|
37
46
|
},
|
|
38
47
|
|
|
48
|
+
get layoutPicker() {
|
|
49
|
+
return getData(this.$root.querySelector("[data-role='layout-picker']"));
|
|
50
|
+
},
|
|
51
|
+
|
|
39
52
|
init() {
|
|
40
53
|
this.$watch("errors", (errors) => {
|
|
41
54
|
errors.forEach((error) => console.error(error.message)); // TODO display errors properly!
|
|
@@ -70,6 +83,10 @@ export default CocoComponent("appSlideEditor", (data) => {
|
|
|
70
83
|
Array.from(inputs).forEach((el) => getData(el).onResize());
|
|
71
84
|
},
|
|
72
85
|
|
|
86
|
+
setLayout(layout) {
|
|
87
|
+
this.layout = layout;
|
|
88
|
+
},
|
|
89
|
+
|
|
73
90
|
handleImageDrop(event) {
|
|
74
91
|
this.dragging = false;
|
|
75
92
|
|
|
@@ -157,6 +174,14 @@ export default CocoComponent("appSlideEditor", (data) => {
|
|
|
157
174
|
return !!(this.bgImage && this.bgImage.data);
|
|
158
175
|
},
|
|
159
176
|
|
|
177
|
+
get hasImage1() {
|
|
178
|
+
return !!(this.image1 && this.image1.data);
|
|
179
|
+
},
|
|
180
|
+
|
|
181
|
+
get hasImage2() {
|
|
182
|
+
return !!(this.image2 && this.image2.data);
|
|
183
|
+
},
|
|
184
|
+
|
|
160
185
|
get bgColorHex() {
|
|
161
186
|
return this.bgColor.replace("#", "");
|
|
162
187
|
},
|
|
@@ -203,16 +228,22 @@ export default CocoComponent("appSlideEditor", (data) => {
|
|
|
203
228
|
"slide-bg-light": !this.isDarkBg,
|
|
204
229
|
};
|
|
205
230
|
},
|
|
231
|
+
[":data-layout"]: "layout",
|
|
206
232
|
},
|
|
207
233
|
|
|
208
234
|
input: {
|
|
209
|
-
layout: { "x-model.fill": "layout" },
|
|
235
|
+
layout: { "x-model.fill": "layout.replace(/-/g,'_')" },
|
|
210
236
|
title: { "x-model.fill": "title" },
|
|
211
237
|
text1: { "x-model.fill": "text1" },
|
|
238
|
+
text2: { "x-model.fill": "text2" },
|
|
212
239
|
bgColor: { "x-model.fill": "bgColorHex" },
|
|
213
240
|
textColor: { "x-model.fill": "textColorHex" },
|
|
214
241
|
bgImage: { "x-effect": "syncFileInput($el, bgImage.file)" },
|
|
215
242
|
bgImagePurge: { ":checked": "!hasBgImage" },
|
|
243
|
+
image1: { "x-effect": "syncFileInput($el, image1.file)" },
|
|
244
|
+
image1Purge: { ":checked": "!hasImage1" },
|
|
245
|
+
image2: { "x-effect": "syncFileInput($el, image2.file)" },
|
|
246
|
+
image2Purge: { ":checked": "!hasImage2" },
|
|
216
247
|
thumbnailImage: { "x-effect": "syncFileInput($el, thumbnailFile)" },
|
|
217
248
|
},
|
|
218
249
|
};
|
|
@@ -6,6 +6,8 @@ module Coco
|
|
|
6
6
|
include Coco::BookHelper
|
|
7
7
|
include Coco::FormatHelper
|
|
8
8
|
|
|
9
|
+
DEFAULT_LAYOUT = "one-col-title"
|
|
10
|
+
|
|
9
11
|
renders_one :title, ->(value = nil, **textarea_options) do
|
|
10
12
|
Coco::App::Elements::SeamlessTextarea.new(**textarea_options,
|
|
11
13
|
value: value,
|
|
@@ -23,6 +25,22 @@ module Coco
|
|
|
23
25
|
x: {modelable: "value", model: "text1"})
|
|
24
26
|
end
|
|
25
27
|
|
|
28
|
+
renders_one :text_2, ->(value = nil, **textarea_options) do
|
|
29
|
+
Coco::App::Elements::SeamlessTextarea.new(**textarea_options,
|
|
30
|
+
value: value,
|
|
31
|
+
multiline: true,
|
|
32
|
+
data: {role: "text-2-editor"},
|
|
33
|
+
x: {modelable: "value", model: "text2"})
|
|
34
|
+
end
|
|
35
|
+
|
|
36
|
+
renders_one :image_1, ->(src = nil, **image_options) do
|
|
37
|
+
@image_1_options = {src: src, **image_options}
|
|
38
|
+
end
|
|
39
|
+
|
|
40
|
+
renders_one :image_2, ->(src = nil, **image_options) do
|
|
41
|
+
@image_2_options = {src: src, **image_options}
|
|
42
|
+
end
|
|
43
|
+
|
|
26
44
|
renders_one :bg_color, ->(value = nil, **input_options) do
|
|
27
45
|
@bg_color_options = {selected: value, **input_options}
|
|
28
46
|
end
|
|
@@ -35,6 +53,10 @@ module Coco
|
|
|
35
53
|
@bg_image_options = {src: src, **input_options}
|
|
36
54
|
end
|
|
37
55
|
|
|
56
|
+
renders_one :layout, ->(value = DEFAULT_LAYOUT, **input_options) do
|
|
57
|
+
@layout_options = {selected: value&.to_s&.tr("_", "-"), **input_options}
|
|
58
|
+
end
|
|
59
|
+
|
|
38
60
|
def initialize(generate_thumbnail: true, **kwargs)
|
|
39
61
|
@generate_thumbnail = generate_thumbnail
|
|
40
62
|
end
|
|
@@ -46,6 +68,7 @@ module Coco
|
|
|
46
68
|
bg_image: bg_image_src,
|
|
47
69
|
bg_color_hex: bg_color_css,
|
|
48
70
|
text_color_hex: text_color_css,
|
|
71
|
+
layout: current_layout,
|
|
49
72
|
render_empty: true
|
|
50
73
|
}
|
|
51
74
|
end
|
|
@@ -56,7 +79,11 @@ module Coco
|
|
|
56
79
|
text_color: text_color_css,
|
|
57
80
|
title: title&.value,
|
|
58
81
|
text_1: text_1&.value,
|
|
59
|
-
|
|
82
|
+
text_2: text_2&.value,
|
|
83
|
+
image_1: image_1_src,
|
|
84
|
+
image_2: image_2_src,
|
|
85
|
+
bg_image: bg_image_src,
|
|
86
|
+
layout: current_layout
|
|
60
87
|
}
|
|
61
88
|
end
|
|
62
89
|
|
|
@@ -71,6 +98,18 @@ module Coco
|
|
|
71
98
|
def bg_image_src
|
|
72
99
|
@bg_image_options[:src] if @bg_image_options
|
|
73
100
|
end
|
|
101
|
+
|
|
102
|
+
def image_1_src
|
|
103
|
+
@image_1_options[:src] if @image_1_options
|
|
104
|
+
end
|
|
105
|
+
|
|
106
|
+
def image_2_src
|
|
107
|
+
@image_2_options[:src] if @image_2_options
|
|
108
|
+
end
|
|
109
|
+
|
|
110
|
+
def current_layout
|
|
111
|
+
@layout_options&.fetch(:selected, DEFAULT_LAYOUT) || DEFAULT_LAYOUT
|
|
112
|
+
end
|
|
74
113
|
end
|
|
75
114
|
end
|
|
76
115
|
end
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
<%= render component_tag(x: {
|
|
2
|
-
data: x_data("appLayoutPickerButton", {selected: selected})
|
|
3
|
-
"@dropdown:mount": "onDropdownMount"
|
|
2
|
+
data: x_data("appLayoutPickerButton", {selected: selected})
|
|
4
3
|
}) do %>
|
|
5
4
|
<div
|
|
6
5
|
@layout-picker:selected="selectedLayout = $event.detail.layout"
|
|
@@ -12,6 +12,12 @@ export default CocoComponent("appLayoutPickerButton", ({ selected }) => {
|
|
|
12
12
|
);
|
|
13
13
|
},
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
getButton() {
|
|
16
|
+
return getData(this.$root.querySelector(".layout-picker-trigger"));
|
|
17
|
+
},
|
|
18
|
+
|
|
19
|
+
init() {
|
|
20
|
+
this.$watch("selectedLayout", () => this.getButton().hideDropdown());
|
|
21
|
+
},
|
|
16
22
|
};
|
|
17
23
|
});
|
|
@@ -13,6 +13,7 @@ export default CocoComponent("button", (data = {}) => {
|
|
|
13
13
|
lastState: null,
|
|
14
14
|
stateTooltips: data.tooltips || {},
|
|
15
15
|
tooltipText: null,
|
|
16
|
+
dropdown: null,
|
|
16
17
|
|
|
17
18
|
...(data.props || {}),
|
|
18
19
|
|
|
@@ -66,6 +67,20 @@ export default CocoComponent("button", (data = {}) => {
|
|
|
66
67
|
this.$options.disabled = value;
|
|
67
68
|
},
|
|
68
69
|
|
|
70
|
+
/* dropdown */
|
|
71
|
+
|
|
72
|
+
hideDropdown() {
|
|
73
|
+
if (this.dropdown) {
|
|
74
|
+
this.dropdown.hide();
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
|
|
78
|
+
showDropdown() {
|
|
79
|
+
if (this.dropdown) {
|
|
80
|
+
this.dropdown.show();
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
|
|
69
84
|
/* confirmation */
|
|
70
85
|
|
|
71
86
|
checkConfirmation(event) {
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
[data-slide-region],
|
|
56
56
|
.slide-header,
|
|
57
57
|
.slide-text,
|
|
58
|
-
.slide-
|
|
58
|
+
.slide-media {
|
|
59
59
|
@apply hidden;
|
|
60
60
|
}
|
|
61
61
|
|
|
@@ -77,7 +77,8 @@
|
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
.slide-media {
|
|
80
|
-
@apply w-full;
|
|
80
|
+
@apply w-full text-current;
|
|
81
|
+
font-size: var(--text-font-size);
|
|
81
82
|
|
|
82
83
|
img {
|
|
83
84
|
@apply w-full h-full object-contain;
|
|
@@ -147,6 +148,7 @@
|
|
|
147
148
|
|
|
148
149
|
&[data-layout="one-col-text"] {
|
|
149
150
|
.slide-container {
|
|
151
|
+
@apply py-6 @slide-fluid:py-[var(--slide-padding-sm)];
|
|
150
152
|
@apply flex items-center;
|
|
151
153
|
}
|
|
152
154
|
|
|
@@ -185,7 +187,7 @@
|
|
|
185
187
|
|
|
186
188
|
&[data-layout="one-col-media"] {
|
|
187
189
|
.slide-container {
|
|
188
|
-
@apply
|
|
190
|
+
@apply p-6 @slide-fluid:p-[var(--slide-padding-sm)];
|
|
189
191
|
}
|
|
190
192
|
|
|
191
193
|
.slide-layout,
|
|
@@ -242,11 +244,6 @@
|
|
|
242
244
|
[data-slide-region="content-1"],
|
|
243
245
|
[data-slide-region="content-2"] {
|
|
244
246
|
@apply block;
|
|
245
|
-
|
|
246
|
-
.slide-text,
|
|
247
|
-
.slide-media {
|
|
248
|
-
@apply block;
|
|
249
|
-
}
|
|
250
247
|
}
|
|
251
248
|
|
|
252
249
|
[data-slide-region="content-1"] {
|
|
@@ -254,6 +251,12 @@
|
|
|
254
251
|
}
|
|
255
252
|
}
|
|
256
253
|
|
|
254
|
+
&[data-layout="two-col-text"] {
|
|
255
|
+
.slide-text {
|
|
256
|
+
@apply block;
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
|
|
257
260
|
&[data-layout="two-col-media"] {
|
|
258
261
|
.slide-layout {
|
|
259
262
|
@apply @slide-fluid:h-full;
|
|
@@ -264,7 +267,7 @@
|
|
|
264
267
|
}
|
|
265
268
|
|
|
266
269
|
.slide-media {
|
|
267
|
-
@apply @slide-fluid:absolute @slide-fluid:inset-0;
|
|
270
|
+
@apply block @slide-fluid:absolute @slide-fluid:inset-0;
|
|
268
271
|
}
|
|
269
272
|
}
|
|
270
273
|
|
|
@@ -17,9 +17,10 @@
|
|
|
17
17
|
<div class="slide-text" data-role="text-1">
|
|
18
18
|
<%= text_1 %>
|
|
19
19
|
</div>
|
|
20
|
-
<%
|
|
20
|
+
<% end %>
|
|
21
|
+
<% if image_1? %>
|
|
21
22
|
<div class="slide-media" data-role="media-1">
|
|
22
|
-
|
|
23
|
+
<%= image_1 %>
|
|
23
24
|
</div>
|
|
24
25
|
<% end %>
|
|
25
26
|
</div>
|
|
@@ -30,9 +31,10 @@
|
|
|
30
31
|
<div class="slide-text" data-role="text-2">
|
|
31
32
|
<%= text_2 %>
|
|
32
33
|
</div>
|
|
33
|
-
<%
|
|
34
|
+
<% end %>
|
|
35
|
+
<% if image_2? %>
|
|
34
36
|
<div class="slide-media" data-role="media-2">
|
|
35
|
-
|
|
37
|
+
<%= image_2 %>
|
|
36
38
|
</div>
|
|
37
39
|
<% end %>
|
|
38
40
|
</div>
|
|
@@ -28,15 +28,15 @@ module Coco
|
|
|
28
28
|
end
|
|
29
29
|
|
|
30
30
|
renders_one :image_1,
|
|
31
|
-
->(
|
|
31
|
+
->(src: nil, &block) do
|
|
32
32
|
@has_content = true
|
|
33
|
-
|
|
33
|
+
block ? block.call : tag.img(src: src)
|
|
34
34
|
end
|
|
35
35
|
|
|
36
36
|
renders_one :image_2,
|
|
37
|
-
->(
|
|
37
|
+
->(src: nil, &block) do
|
|
38
38
|
@has_content = true
|
|
39
|
-
|
|
39
|
+
block ? block.call : tag.img(src: src)
|
|
40
40
|
end
|
|
41
41
|
|
|
42
42
|
before_initialize do |kwargs|
|
data/config/locales/coco.en.yml
CHANGED
data/lib/coco.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: coveragebook_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.6.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Mark Perkins
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2023-08-
|
|
11
|
+
date: 2023-08-17 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|