@concretecms/bedrock 1.0.0 → 1.1.0

package/assets/account/js/frontend/components/Avatar/Cropper.js

@@ -11,7 +11,15 @@ export default {
         width: Number,
         height: Number,
         uploadurl: String,
-        src: String
+        src: String,
+        cancelConfirmText: {
+            type: String,
+            default: 'Are you sure you want to quit?'
+        },
+        canceledText: {
+            type: String,
+            default: 'Upload canceled.'
+        }
     },
 
     // Our internal state
@@ -92,7 +100,7 @@ export default {
                     })
 
                     this.on('error', function (event, data) {
-                        component.setError(data.message)
+                        component.setError(typeof data === 'string' ? data : data.message)
                         component.currentimage = component.src
                     })
 
@@ -177,8 +185,8 @@ export default {
          * Handle x mark click
          */
         handleCancel() {
-            if (window.confirm('Are you sure you want to quit?')) {
-                this.done.call(this.dropzone, 'Cancelled upload.')
+            if (window.confirm(this.cancelConfirmText)) {
+                this.done.call(this.dropzone, this.canceledText)
                 this.img = null
                 this.saving = false
                 this.dropzone.destroy()

package/assets/calendar/js/backend/duration.js

@@ -322,7 +322,7 @@
             var endDate = my.getSelectedEndDate()
 
             if (!endDate) {
-                return;
+                return
             }
 
             var difference = ((endDate.getTime() / 1000) - (startDate.getTime() / 1000))

package/assets/ckeditor/js/concrete/link.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-new, no-unused-vars, camelcase, no-useless-call, eqeqeq */
+/* global ccmi18n_editor */
 (function() {
     CKEDITOR.plugins.add('concretelink', {
         requires: 'link',
@@ -39,8 +40,8 @@
                         infoTab.add({
                             type: 'button',
                             id: 'sitemapBrowse',
-                            label: 'Sitemap',
-                            title: 'Sitemap',
+                            label: ccmi18n_editor.sitemap,
+                            title: ccmi18n_editor.sitemap,
                             onClick: function() {
                                 jQuery.fn.dialog.open({
                                     width: '90%',
@@ -82,13 +83,13 @@
                                 id: 'lightboxFeatures',
                                 children: [{
                                     type: 'fieldset',
-                                    label: 'Lightbox Features',
+                                    label: ccmi18n_editor.lightboxFeatures,
                                     children: [{
                                         type: 'hbox',
                                         children: [{
                                             type: 'checkbox',
                                             id: 'imageLightbox',
-                                            label: 'Linking to an image',
+                                            label: ccmi18n_editor.imageLink,
                                             setup: function(data) {
                                                 var link = getSelectedLink()
                                                 if (link !== null && typeof data.target !== 'undefined') {

package/assets/ckeditor/js/concrete/styles.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-new, no-unused-vars, camelcase, new-cap, eqeqeq */
-
+/* global ccmi18n_editor */
 (function() {
     CKEDITOR.plugins.add('concretestyles', {
 
@@ -102,7 +102,7 @@
             var buttons = {
                 name: 'snippets',
                 icon: 'snippet.png',
-                title: 'Snippets',
+                title: ccmi18n_editor.snippets,
                 items: []
             }
             if (editor.config.snippets) {

package/assets/cms/components/BoardInstanceRule.vue

@@ -5,7 +5,7 @@
                 {{startDate}}
             </span>
             <span v-else class="text-muted">
-                No Start Date
+                {{ i18n.noStartDate }}
             </span>
             <span v-if="hasStartDate && hasEndDate">
                 –
@@ -14,7 +14,7 @@
         </td>
         <td>{{rule.slot}}</td>
         <td>
-            <div>{{rule.name}} (<a data-dialog="preview" href="javascript:void(0)" @click="showPreview">preview</a>)</div>
+            <div>{{rule.name}} (<a data-dialog="preview" href="javascript:void(0)" @click="showPreview">{{ i18n.preview }}</a>)</div>
             <div class="fw-light font-italic">{{rule.actionDescription}}</div>
         </td>
         <td class="align-middle">
@@ -48,6 +48,10 @@ export default {
         }
     },
     data: () => ({
+        i18n: {
+            noStartDate: 'No Start Date',
+            preview: 'Preview'
+        },
         previewLoaded: false
     }),
     methods: {
@@ -61,7 +65,7 @@ export default {
             $.fn.dialog.open({
                 width: '90%',
                 height: '70%',
-                title: 'Preview',
+                title: this.i18n.preview,
                 element: '#preview-container-' + my.rule.id
             })
         }
@@ -88,6 +92,15 @@ export default {
                 return momentDate.format('MMMM D, YYYY h:mm a')
             }
         }
+    },
+    mounted() {
+        if (window.ccmi18n_boards) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_boards[key]) {
+                    this.i18n[key] = window.ccmi18n_boards[key]
+                }
+            }
+        }
     }
 }
 </script>

package/assets/cms/components/BoardInstanceRuleList.vue

@@ -3,9 +3,9 @@
         <table class="table">
             <thead>
             <tr>
-                <th style="width: 30%;">Date & Time</th>
-                <th style="width: 10%;">Slot</th>
-                <th style="width: 60%;">Name</th>
+                <th style="width: 30%;">{{ i18n.dateAndTime }}</th>
+                <th style="width: 10%;">{{ i18n.slot }}</th>
+                <th style="width: 60%;">{{ i18n.name }}</th>
                 <th></th>
             </tr>
             </thead>
@@ -17,14 +17,14 @@
         </table>
 
         <div v-if="draftRules.length" class="mt-4">
-            <h5>Unpublished Rules</h5>
+            <h5>{{ i18n.unpublishedRules }}</h5>
 
             <table class="table">
                 <thead>
                 <tr>
-                    <th style="width: 30%;">Date & Time</th>
-                    <th style="width: 10%;">Slot</th>
-                    <th style="width: 60%;">Name</th>
+                    <th style="width: 30%;">{{ i18n.dateAndTime }}</th>
+                    <th style="width: 10%;">{{ i18n.slot }}</th>
+                    <th style="width: 60%;">{{ i18n.name }}</th>
                     <th></th>
                 </tr>
                 </thead>
@@ -49,6 +49,14 @@ export default {
     props: {
         rules: Array
     },
+    data: () => ({
+        i18n: {
+            dateAndTime: 'Date & Time',
+            slot: 'Slot',
+            name: 'Name',
+            unpublishedRules: 'Unpublished Rules'
+        }
+    }),
     computed: {
         publishedRules: function() {
             var publishedRules = []
@@ -91,6 +99,15 @@ export default {
                 })
             }
         }
+    },
+    mounted() {
+        if (window.ccmi18n_boards) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_boards[key]) {
+                    this.i18n[key] = window.ccmi18n_boards[key]
+                }
+            }
+        }
     }
 }
 </script>

package/assets/cms/components/CompletedProcessList.vue

@@ -3,13 +3,13 @@
         <div class="p-2">
             <div class="row">
                 <div class="col-md-4">
-                    <h5>Name</h5>
+                    <h5>{{ i18n.name }}</h5>
                 </div>
                 <div class="col-md-3">
-                    <h5>Date Started</h5>
+                    <h5>{{ i18n.dateStarted }}</h5>
                 </div>
                 <div class="col-md-5">
-                    <h5>Date Completed</h5>
+                    <h5>{{ i18n.dateCompleted }}</h5>
                 </div>
             </div>
         </div>
@@ -48,7 +48,7 @@
                                 {{detail}}
                             </div>
                         </div>
-                        <span v-else class="text-muted">Loading...</span>
+                        <span v-else class="text-muted">{{ i18n.loading }}</span>
                     </div>
                 </div>
             </div>
@@ -59,15 +59,15 @@
                     <div class="modal-content">
                         <form method="post" @submit.prevent="deleteProcessSubmit(process.id)">
                             <div class="modal-header">
-                                <h5 class="modal-title">Delete Process</h5>
-                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+                                <h5 class="modal-title">{{ i18n.deleteProcess }}</h5>
+                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" :aria-label="i18n.close"></button>
                             </div>
                             <div class="modal-body">
-                                Delete this process log entry? The record of the process along with any logs will be removed.
+                                {{ i18n.confirmDeletion }}
                             </div>
                             <div class="modal-footer">
-                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                                <button type="submit" class="btn btn-danger">Delete</button>
+                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ i18n.close }}</button>
+                                <button type="submit" class="btn btn-danger">{{ i18n.delete }}</button>
                             </div>
                         </form>
                     </div>
@@ -102,6 +102,16 @@ export default {
         }
     },
     data: () => ({
+        i18n: {
+            name: 'Name',
+            dateStarted: 'Date Started',
+            dateCompleted: 'Date Completed',
+            loading: 'Loading...',
+            deleteProcess: 'Delete Process',
+            confirmDeletion: 'Delete this process log entry? The record of the process along with any logs will be removed.',
+            close: 'Close',
+            delete: 'Delete'
+        },
         openProcesses: []
     }),
     methods: {
@@ -150,6 +160,15 @@ export default {
                 }
             })
         }
+    },
+    mounted() {
+        if (window.ccmi18n_processes) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_processes[key]) {
+                    this.i18n[key] = window.ccmi18n_processes[key]
+                }
+            }
+        }
     }
 }
 </script>

package/assets/cms/components/Icon.vue

@@ -10,7 +10,7 @@
     <svg v-else-if='$options.methods.isSvg(props.type)' viewport='0 0 20 20' width='20px' height='20px'>
         <use :xlink:href='`${props.spritePath}#icon-${props.icon}`' :style='`fill: ${props.color}`'></use>
     </svg>
-    <span v-else>Invalid icon type.</span>
+    <span v-else>{{ i18n.invalidIconType }}</span>
 </template>
 
 <script>
@@ -22,6 +22,11 @@ export { icons, types }
 
 // Export our component definition
 export default {
+    data: () => ({
+        i18n: {
+            invalidIconType: 'Invalid icon type.'
+        }
+    }),
     props: {
         spritePath: {
             type: String,
@@ -53,6 +58,16 @@ export default {
          */
         isFontAwesome: type => [types.fas, types.far, types.fab].indexOf(type) >= 0,
         isSvg: type => type === types.svg
+    },
+    mounted() {
+        if (window.ccmi18n) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n[key]) {
+                    this.i18n[key] = window.ccmi18n[key]
+                }
+            }
+        }
     }
+
 }
 </script>

package/assets/cms/components/Pagination.vue

@@ -3,14 +3,14 @@
         <nav :aria-label="ariaLabel">
             <ul class="pagination">
                 <li :class="{'page-item': true, 'disabled': prevDisabled}">
-                    <a class="page-link" href="#" :aria-label="labelPrevPage" @click.prevent="onClick('prev', $event)">
-                        <span aria-hidden="true">{{prevText}}</span>
+                    <a class="page-link" href="#" :aria-label="finalLabelPrevPage" @click.prevent="onClick('prev', $event)">
+                        <span aria-hidden="true">{{finalPrevText}}</span>
                     </a>
                 </li>
                 <li v-for="page in pageList" :key="page.number" :class="{'page-item': true, 'active': page.number === currentPage}"><a class="page-link" href="#" @click.prevent="onClick(page.number)">{{page.text || page.number}}</a></li>
                 <li :class="{'page-item': true, 'disabled': nextDisabled}">
-                    <a class="page-link" href="#" :aria-label="labelNextPage" @click.prevent="onClick('next', $event)">
-                        <span aria-hidden="true">{{nextText}}</span>
+                    <a class="page-link" href="#" :aria-label="finalLabelNextPage" @click.prevent="onClick('next', $event)">
+                        <span aria-hidden="true">{{finalNextText}}</span>
                     </a>
                 </li>
             </ul>
@@ -55,11 +55,11 @@ export default {
         },
         nextText: {
             type: String,
-            default: 'Next →'
+            required: false
         },
         labelNextPage: {
             type: String,
-            default: 'Next'
+            required: false
         },
         prevCursor: {
             type: [Number, String, null],
@@ -70,11 +70,11 @@ export default {
         },
         labelPrevPage: {
             type: String,
-            default: 'Previous'
+            required: false
         },
         prevText: {
             type: String,
-            default: '← Previous'
+            required: false
         },
         perPage: {
             type: [Number, String],
@@ -102,6 +102,10 @@ export default {
         }
 
         return {
+            i18n: {
+                next: 'Next',
+                previous: 'Previous'
+            },
             targetNumberOfLinks: 7,
             currentPage,
             localNumberOfPages: 1
@@ -181,6 +185,30 @@ export default {
             }
 
             return pages
+        },
+        finalNextText () {
+            if (typeof this.nextText === 'string') {
+                return this.nextText
+            }
+            return `${this.i18n.next} →`
+        },
+        finalLabelNextPage () {
+            if (typeof this.labelNextPage === 'string') {
+                return this.labelNextPage
+            }
+            return this.i18n.next
+        },
+        finalPrevText () {
+            if (typeof this.prevText === 'string') {
+                return this.prevText
+            }
+            return `← ${this.i18n.previous}`
+        },
+        finalLabelPrevPage () {
+            if (typeof this.labelPrevPage === 'string') {
+                return this.labelPrevPage
+            }
+            return this.i18n.previous
         }
     },
     watch: {
@@ -228,6 +256,15 @@ export default {
             // Emit event triggered by user interaction
             this.$emit('change', this.currentPage)
         }
+    },
+    mounted() {
+        if (window.ccmi18n) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n[key]) {
+                    this.i18n[key] = window.ccmi18n[key]
+                }
+            }
+        }
     }
 }
 </script>

package/assets/cms/components/customizer/ColorPageCustomizerWidget.vue

@@ -14,6 +14,7 @@ export default {
     },
     mounted() {
         var my = this
+        const i18n = window.ccmi18n_styleCustomizer || null
         $('#color-picker-' + this.styleValue.style.variable).spectrum({
             showAlpha: true,
             preferredFormat: 'rgb',
@@ -21,6 +22,12 @@ export default {
             color: this.color,
             showInitial: true,
             showInput: true,
+            cancelText: i18n && i18n.cancel ? i18n.cancel : 'Cancel',
+            chooseText: i18n && i18n.choose ? i18n.choose : 'Choose',
+            clearText: i18n && i18n.clearColorSelection ? i18n.clearColorSelection : 'Clear Color Selection',
+            noColorSelectedText: i18n && i18n.noColorSelected ? i18n.noColorSelected : 'No Color Selected',
+            togglePaletteMoreText: i18n && i18n.togglePaletteMore ? i18n.togglePaletteMore : 'More',
+            togglePaletteLessText: i18n && i18n.togglePaletteLess ? i18n.togglePaletteLess : 'Less',
             change: function (r) {
                 var color = r.toRgb()
                 my.$emit('update', {

package/assets/cms/components/customizer/FontWeightPageCustomizerWidget.vue

@@ -1,7 +1,7 @@
 <template>
     <select @change="componentUpdated" class="form-select form-select-sm" v-model="fontWeight"
             :style="{'font-weight': fontWeight}">
-        <option v-for="fontWeightValue in fontWeightValues" :value="fontWeightValue">{{ fontWeightValue }}</option>
+        <option v-for="fontWeightValue in fontWeightValues" :value="fontWeightValue">{{ getWeightValueDisplayName(fontWeightValue) }}</option>
     </select>
 </template>
 
@@ -22,6 +22,12 @@ export default {
                     fontWeight: this.fontWeight
                 }
             })
+        },
+        getWeightValueDisplayName: function (id) {
+            if (window.ccmi18n_styleCustomizer && window.ccmi18n_styleCustomizer.fontWeights && window.ccmi18n_styleCustomizer.fontWeights[id]) {
+                return window.ccmi18n_styleCustomizer.fontWeights[id]
+            }
+            return id
         }
     },
     computed: {

package/assets/cms/components/customizer/ImagePageCustomizerWidget.vue

@@ -4,10 +4,10 @@
             <i :class="{'fas': true, 'fa-image': true, 'text-black-50': !imageURL && !imageFileID, 'text-primary': imageFileID > 0}"></i>
         </template>
         <template v-slot:content>
-            <concrete-file-input :file-id="imageFileID" @change="value => imageFileID = value" choose-text="Choose Image"
+            <concrete-file-input :file-id="imageFileID" @change="value => imageFileID = value" :choose-text="i18n.chooseImageText"
                                  input-name="imageFileID"></concrete-file-input>
             <div class="mt-2" v-if="imageURL">
-                <small class="text-muted">Currently using {{ imageURL }}</small>
+                <small class="text-muted">{{ i18n.currentlyUsingText.replace(/%s/g, imageURL) }}</small>
             </div>
         </template>
     </flyout-menu>
@@ -29,6 +29,10 @@ export default {
     },
     data() {
         return {
+            i18n: {
+                chooseImageText: 'Choose Image',
+                currentlyUsingText: 'Currently using %s'
+            },
             imageURL: this.styleValue.value.imageURL, // this is the default one passed in,
             imageFileID: this.styleValue.value.imageFileID
         }
@@ -45,7 +49,13 @@ export default {
         }
     },
     mounted() {
-
+        if (window.ccmi18n_styleCustomizer) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_styleCustomizer[key]) {
+                    this.i18n[key] = window.ccmi18n_styleCustomizer[key]
+                }
+            }
+        }
     },
     props: {
         styleValue: {

package/assets/cms/components/customizer/TextTransformPageCustomizerWidget.vue

@@ -1,7 +1,7 @@
 <template>
     <select @change="componentUpdated" class="form-select form-select-sm" v-model="textTransform"
             :style="{'text-transform': textTransform}">
-        <option v-for="transformValue in transformValues" :value="transformValue">{{ transformValue }}</option>
+        <option v-for="transformValue in transformValues" :value="transformValue">{{ getTransformValueDisplayName(transformValue) }}</option>
     </select>
 </template>
 
@@ -22,6 +22,12 @@ export default {
                     textTransform: this.textTransform
                 }
             })
+        },
+        getTransformValueDisplayName: function (id) {
+            if (window.ccmi18n_styleCustomizer && window.ccmi18n_styleCustomizer.textTransforms && window.ccmi18n_styleCustomizer.textTransforms[id]) {
+                return window.ccmi18n_styleCustomizer.textTransforms[id]
+            }
+            return id
         }
     },
     computed: {