coveragebook_components 0.5.7 → 0.6.1
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 +148 -25
- data/app/assets/build/coco/app.js +48 -5
- data/app/assets/build/coco/book.css +28 -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 +107 -3
- 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 +13 -10
- 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: 315f0f67e3808e47c30ec505efd02020e73b65f2aac7cf701bc76d2029a8d171
|
|
4
|
+
data.tar.gz: 9d19868c18f41453cd836f428f824aba86d38a56aaab912445f8669cdb63501f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 1547b2a38d2679ae85f38e357aca2eb2d875a612bf7872cbbcfd757780f08d05280d45b1888b5c81f22ab8ec05d48c5773c86d95b13c9d1985aa1d3390482c04
|
|
7
|
+
data.tar.gz: e7226e32fd18f1abe188a69e6024f330b1a70d8f6327ad35c9817d7713a5532220ca8ed677b244434c8c4f1ef823e6493d4757fcf7c71aed59eea9b829d93a75
|
|
@@ -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;
|
|
@@ -3164,6 +3280,8 @@ select{
|
|
|
3164
3280
|
|
|
3165
3281
|
background-size: cover;
|
|
3166
3282
|
|
|
3283
|
+
background-position: center;
|
|
3284
|
+
|
|
3167
3285
|
background-repeat: no-repeat;
|
|
3168
3286
|
|
|
3169
3287
|
min-width: 320px;
|
|
@@ -3210,7 +3328,7 @@ select{
|
|
|
3210
3328
|
[data-coco][data-component="book-editable-slide"] [data-slide-region],
|
|
3211
3329
|
[data-coco][data-component="book-editable-slide"] .slide-header,
|
|
3212
3330
|
[data-coco][data-component="book-editable-slide"] .slide-text,
|
|
3213
|
-
[data-coco][data-component="book-editable-slide"] .slide-
|
|
3331
|
+
[data-coco][data-component="book-editable-slide"] .slide-media{
|
|
3214
3332
|
display: none}
|
|
3215
3333
|
[data-coco][data-component="book-editable-slide"] .slide-group{
|
|
3216
3334
|
display: contents}
|
|
@@ -3225,7 +3343,9 @@ select{
|
|
|
3225
3343
|
line-height: 1.5;
|
|
3226
3344
|
font-size: var(--text-font-size)}
|
|
3227
3345
|
[data-coco][data-component="book-editable-slide"] .slide-media{
|
|
3228
|
-
width: 100
|
|
3346
|
+
width: 100%;
|
|
3347
|
+
color: currentColor;
|
|
3348
|
+
font-size: var(--text-font-size)}
|
|
3229
3349
|
[data-coco][data-component="book-editable-slide"] .slide-media img{
|
|
3230
3350
|
height: 100%;
|
|
3231
3351
|
width: 100%;
|
|
@@ -3292,6 +3412,14 @@ select{
|
|
|
3292
3412
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-text {
|
|
3293
3413
|
line-height: 1.4;
|
|
3294
3414
|
}
|
|
3415
|
+
[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container{
|
|
3416
|
+
padding-top: 1.5rem;
|
|
3417
|
+
padding-bottom: 1.5rem}
|
|
3418
|
+
@container (min-width: 700px){
|
|
3419
|
+
|
|
3420
|
+
[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container{
|
|
3421
|
+
padding-top: var(--slide-padding-sm);
|
|
3422
|
+
padding-bottom: var(--slide-padding-sm)}}
|
|
3295
3423
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container{
|
|
3296
3424
|
display: flex;
|
|
3297
3425
|
align-items: center}
|
|
@@ -3326,13 +3454,11 @@ select{
|
|
|
3326
3454
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] [data-slide-region="content-1"] .slide-text{
|
|
3327
3455
|
display: block}
|
|
3328
3456
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-container{
|
|
3329
|
-
padding
|
|
3330
|
-
padding-bottom: 1.5rem}
|
|
3457
|
+
padding: 1.5rem}
|
|
3331
3458
|
@container (min-width: 700px){
|
|
3332
3459
|
|
|
3333
3460
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-container{
|
|
3334
|
-
padding
|
|
3335
|
-
padding-bottom: var(--slide-padding-sm)}}
|
|
3461
|
+
padding: var(--slide-padding-sm)}}
|
|
3336
3462
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-layout,
|
|
3337
3463
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-content{
|
|
3338
3464
|
height: 100%}
|
|
@@ -3392,21 +3518,15 @@ select{
|
|
|
3392
3518
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"],
|
|
3393
3519
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-2"]{
|
|
3394
3520
|
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
3521
|
[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
3522
|
margin-bottom: var(--slide-padding-sm)}
|
|
3406
3523
|
@container (min-width: 700px){
|
|
3407
3524
|
|
|
3408
3525
|
[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}
|
|
3526
|
+
margin-bottom: 0px}}
|
|
3527
|
+
[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-text{
|
|
3528
|
+
display: block}
|
|
3529
|
+
@container (min-width: 700px){
|
|
3410
3530
|
|
|
3411
3531
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-layout{
|
|
3412
3532
|
height: 100%}}
|
|
@@ -3417,7 +3537,10 @@ select{
|
|
|
3417
3537
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-content{
|
|
3418
3538
|
display: flex;
|
|
3419
3539
|
height: 100%;
|
|
3420
|
-
align-items: center}
|
|
3540
|
+
align-items: center}}
|
|
3541
|
+
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-media{
|
|
3542
|
+
display: block}
|
|
3543
|
+
@container (min-width: 700px){
|
|
3421
3544
|
|
|
3422
3545
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-media{
|
|
3423
3546
|
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.1",
|
|
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
|
});
|
|
@@ -783,6 +783,8 @@ select {
|
|
|
783
783
|
|
|
784
784
|
background-size: cover;
|
|
785
785
|
|
|
786
|
+
background-position: center;
|
|
787
|
+
|
|
786
788
|
background-repeat: no-repeat;
|
|
787
789
|
|
|
788
790
|
min-width: 320px;
|
|
@@ -842,7 +844,7 @@ select {
|
|
|
842
844
|
[data-coco][data-component="book-editable-slide"] [data-slide-region],
|
|
843
845
|
[data-coco][data-component="book-editable-slide"] .slide-header,
|
|
844
846
|
[data-coco][data-component="book-editable-slide"] .slide-text,
|
|
845
|
-
[data-coco][data-component="book-editable-slide"] .slide-
|
|
847
|
+
[data-coco][data-component="book-editable-slide"] .slide-media {
|
|
846
848
|
display: none;
|
|
847
849
|
}
|
|
848
850
|
[data-coco][data-component="book-editable-slide"] .slide-group {
|
|
@@ -862,6 +864,8 @@ select {
|
|
|
862
864
|
}
|
|
863
865
|
[data-coco][data-component="book-editable-slide"] .slide-media {
|
|
864
866
|
width: 100%;
|
|
867
|
+
color: currentColor;
|
|
868
|
+
font-size: var(--text-font-size);
|
|
865
869
|
}
|
|
866
870
|
[data-coco][data-component="book-editable-slide"] .slide-media img {
|
|
867
871
|
height: 100%;
|
|
@@ -940,6 +944,17 @@ select {
|
|
|
940
944
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-text {
|
|
941
945
|
line-height: 1.4;
|
|
942
946
|
}
|
|
947
|
+
[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container {
|
|
948
|
+
padding-top: 1.5rem;
|
|
949
|
+
padding-bottom: 1.5rem;
|
|
950
|
+
}
|
|
951
|
+
@container (min-width: 700px) {
|
|
952
|
+
|
|
953
|
+
[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container {
|
|
954
|
+
padding-top: var(--slide-padding-sm);
|
|
955
|
+
padding-bottom: var(--slide-padding-sm);
|
|
956
|
+
}
|
|
957
|
+
}
|
|
943
958
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container {
|
|
944
959
|
display: flex;
|
|
945
960
|
align-items: center;
|
|
@@ -985,14 +1000,12 @@ select {
|
|
|
985
1000
|
display: block;
|
|
986
1001
|
}
|
|
987
1002
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-container {
|
|
988
|
-
padding
|
|
989
|
-
padding-bottom: 1.5rem;
|
|
1003
|
+
padding: 1.5rem;
|
|
990
1004
|
}
|
|
991
1005
|
@container (min-width: 700px) {
|
|
992
1006
|
|
|
993
1007
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-container {
|
|
994
|
-
padding
|
|
995
|
-
padding-bottom: var(--slide-padding-sm);
|
|
1008
|
+
padding: var(--slide-padding-sm);
|
|
996
1009
|
}
|
|
997
1010
|
}
|
|
998
1011
|
[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-layout,
|
|
@@ -1070,16 +1083,6 @@ select {
|
|
|
1070
1083
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-2"] {
|
|
1071
1084
|
display: block;
|
|
1072
1085
|
}
|
|
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
1086
|
[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
1087
|
margin-bottom: var(--slide-padding-sm);
|
|
1085
1088
|
}
|
|
@@ -1088,6 +1091,11 @@ select {
|
|
|
1088
1091
|
[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
1092
|
margin-bottom: 0px;
|
|
1090
1093
|
}
|
|
1094
|
+
}
|
|
1095
|
+
[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-text {
|
|
1096
|
+
display: block;
|
|
1097
|
+
}
|
|
1098
|
+
@container (min-width: 700px) {
|
|
1091
1099
|
|
|
1092
1100
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-layout {
|
|
1093
1101
|
height: 100%;
|
|
@@ -1103,6 +1111,11 @@ select {
|
|
|
1103
1111
|
height: 100%;
|
|
1104
1112
|
align-items: center;
|
|
1105
1113
|
}
|
|
1114
|
+
}
|
|
1115
|
+
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-media {
|
|
1116
|
+
display: block;
|
|
1117
|
+
}
|
|
1118
|
+
@container (min-width: 700px) {
|
|
1106
1119
|
|
|
1107
1120
|
[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-media {
|
|
1108
1121
|
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,31 @@
|
|
|
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
|
+
modelable: "selectedLayout",
|
|
18
|
+
model: "layout"
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
) do |button| %>
|
|
22
|
+
<% button.with_layout(name: "one-col-title", thumbnail: "slides/one-col-title-layout") %>
|
|
23
|
+
<% button.with_layout(name: "two-col-mixed", thumbnail: "slides/two-col-mixed-layout") %>
|
|
24
|
+
<% button.with_layout(name: "one-col-media", thumbnail: "slides/one-col-media-layout") %>
|
|
25
|
+
<% button.with_layout(name: "two-col-media", thumbnail: "slides/two-col-media-layout") %>
|
|
26
|
+
<% button.with_layout(name: "one-col-text", thumbnail: "slides/one-col-text-layout") %>
|
|
27
|
+
<% button.with_layout(name: "two-col-text", thumbnail: "slides/two-col-text-layout") %>
|
|
28
|
+
|
|
29
|
+
<%= tt("layout_picker.label") %>
|
|
30
|
+
<% end %>
|
|
31
|
+
<% end %>
|
|
32
|
+
|
|
8
33
|
<% if bg_color? %>
|
|
9
34
|
<% section.with_color_picker_button(
|
|
10
35
|
**@bg_color_options.to_h,
|
|
@@ -13,7 +38,8 @@
|
|
|
13
38
|
role: "bg-color-picker"
|
|
14
39
|
},
|
|
15
40
|
x: {
|
|
16
|
-
|
|
41
|
+
modelable: "selectedColor",
|
|
42
|
+
model: "bgColor"
|
|
17
43
|
}
|
|
18
44
|
}
|
|
19
45
|
) do |button| %>
|
|
@@ -36,7 +62,8 @@
|
|
|
36
62
|
role: "bg-image-picker"
|
|
37
63
|
},
|
|
38
64
|
x: {
|
|
39
|
-
|
|
65
|
+
modelable: "selectedImage",
|
|
66
|
+
model: "bgImage"
|
|
40
67
|
}
|
|
41
68
|
}
|
|
42
69
|
) do |button| %>
|
|
@@ -56,7 +83,8 @@
|
|
|
56
83
|
role: "text-color-picker"
|
|
57
84
|
},
|
|
58
85
|
x: {
|
|
59
|
-
|
|
86
|
+
modelable: "selectedColor",
|
|
87
|
+
model: "textColor"
|
|
60
88
|
}
|
|
61
89
|
}
|
|
62
90
|
) do |button| %>
|
|
@@ -147,6 +175,64 @@
|
|
|
147
175
|
<%= text_1 %>
|
|
148
176
|
<% end %>
|
|
149
177
|
<% end %>
|
|
178
|
+
|
|
179
|
+
<% if text_2? %>
|
|
180
|
+
<% slide.with_text_2 do %>
|
|
181
|
+
<%= text_2 %>
|
|
182
|
+
<% end %>
|
|
183
|
+
<% end %>
|
|
184
|
+
|
|
185
|
+
<% if image_1? %>
|
|
186
|
+
<% slide.with_image_1 do %>
|
|
187
|
+
<%= render Coco::ImageUploader.new(
|
|
188
|
+
class: "editor-foreground-image-uploader",
|
|
189
|
+
x: {
|
|
190
|
+
"@image-uploader:load": "image1 = $event.detail.file"
|
|
191
|
+
}
|
|
192
|
+
) do %>
|
|
193
|
+
<div class="editor-foreground-image" x-show="hasImage1">
|
|
194
|
+
<%= coco_button_group(
|
|
195
|
+
theme: :toolbar,
|
|
196
|
+
floating: true,
|
|
197
|
+
class: "editor-image-upload-toolbar"
|
|
198
|
+
) do |group| %>
|
|
199
|
+
<% group.with_button(icon: :trash_2, tooltip: "remove image", x: {"@click.stop": "image1 = {}"}) %>
|
|
200
|
+
<% end %>
|
|
201
|
+
<img :src="image1.data">
|
|
202
|
+
</div>
|
|
203
|
+
<div class="editor-image-upload-placeholder" x-show="!hasImage1">
|
|
204
|
+
<%= coco_icon(:image_plus) %>
|
|
205
|
+
<div class="editor-image-upload-placeholder-text">Add image</div>
|
|
206
|
+
</div>
|
|
207
|
+
<% end %>
|
|
208
|
+
<% end %>
|
|
209
|
+
<% end %>
|
|
210
|
+
|
|
211
|
+
<% if image_2? %>
|
|
212
|
+
<% slide.with_image_2 do %>
|
|
213
|
+
<%= render Coco::ImageUploader.new(
|
|
214
|
+
class: "editor-foreground-image-uploader",
|
|
215
|
+
x: {
|
|
216
|
+
"@image-uploader:load": "image2 = $event.detail.file"
|
|
217
|
+
}
|
|
218
|
+
) do %>
|
|
219
|
+
<div class="editor-foreground-image" x-show="hasImage2">
|
|
220
|
+
<%= coco_button_group(
|
|
221
|
+
theme: :toolbar,
|
|
222
|
+
floating: true,
|
|
223
|
+
class: "editor-image-upload-toolbar"
|
|
224
|
+
) do |group| %>
|
|
225
|
+
<% group.with_button(icon: :trash_2, tooltip: "remove image", x: {"@click.stop": "image2 = {}"}) %>
|
|
226
|
+
<% end %>
|
|
227
|
+
<img :src="image2.data">
|
|
228
|
+
</div>
|
|
229
|
+
<div class="editor-image-upload-placeholder" x-show="!hasImage2">
|
|
230
|
+
<%= coco_icon(:image_plus) %>
|
|
231
|
+
<div class="editor-image-upload-placeholder-text">Add image</div>
|
|
232
|
+
</div>
|
|
233
|
+
<% end %>
|
|
234
|
+
<% end %>
|
|
235
|
+
<% end %>
|
|
150
236
|
<% end %>
|
|
151
237
|
</div>
|
|
152
238
|
|
|
@@ -174,6 +260,24 @@
|
|
|
174
260
|
<span x-html="text1.replace(/\n/g, '<br>')"></span>
|
|
175
261
|
<% end %>
|
|
176
262
|
<% end %>
|
|
263
|
+
|
|
264
|
+
<% if text_2? %>
|
|
265
|
+
<% slide.with_text_2 do %>
|
|
266
|
+
<span x-html="text2.replace(/\n/g, '<br>')"></span>
|
|
267
|
+
<% end %>
|
|
268
|
+
<% end %>
|
|
269
|
+
|
|
270
|
+
<% if image_1? %>
|
|
271
|
+
<% slide.with_image_1 do %>
|
|
272
|
+
<div class="editor-thumbnail-image" :style="image2.data && `background-image: url('${image1.data}')`"></div>
|
|
273
|
+
<% end %>
|
|
274
|
+
<% end %>
|
|
275
|
+
|
|
276
|
+
<% if image_2? %>
|
|
277
|
+
<% slide.with_image_2 do %>
|
|
278
|
+
<div class="editor-thumbnail-image" :style="image2.data && `background-image: url('${image2.data}')`"></div>
|
|
279
|
+
<% end %>
|
|
280
|
+
<% end %>
|
|
177
281
|
<% end %>
|
|
178
282
|
</div>
|
|
179
283
|
</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) {
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
/* ------------- */
|
|
40
40
|
|
|
41
41
|
@apply relative rounded-md @container;
|
|
42
|
-
@apply bg-white bg-no-repeat bg-cover;
|
|
42
|
+
@apply bg-white bg-no-repeat bg-cover bg-center;
|
|
43
43
|
|
|
44
44
|
min-width: 320px;
|
|
45
45
|
|
|
@@ -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.1
|
|
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-18 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|