@concretecms/bedrock 1.0.0 → 1.1.0

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

@@ -21,16 +21,16 @@
         </div>
 
         <div>
-            <h5>Custom CSS</h5>
+            <h5>{{ i18n.customCSS }}</h5>
             <div class="card mb-4">
                 <div class="list-group list-group-flush">
                     <div class="list-group-item">
                         <div class="form-check form-switch">
                             <input class="form-check-input" type="checkbox" id="addCustomCSS" v-model="addCustomCss">
-                            <label class="form-check-label" for="addCustomCSS">Add Custom CSS</label>
+                            <label class="form-check-label" for="addCustomCSS">{{ i18n.addCustomCSS }}</label>
                         </div>
                         <div v-if="addCustomCss" class="d-grid mt-2">
-                            <button class="btn btn-secondary btn-sm" @click="showCustomCssDialog">Edit CSS</button>
+                            <button class="btn btn-secondary btn-sm" @click="showCustomCssDialog">{{ i18n.editCSS }}</button>
                         </div>
                     </div>
                 </div>
@@ -41,13 +41,13 @@
             <div data-dialog="save-theme-customizer-changes">
 
                 <div class="form-group">
-                    <label class="form-label" for="newSkinName">Skin Name</label>
+                    <label class="form-label" for="newSkinName">{{ i18n.skinName }}</label>
                     <input type="text" :class='{"form-control": true, "is-invalid": invalidSkinName}' name="newSkinName"
                            id="newSkinName" v-model="newSkinName">
                 </div>
 
                 <div class="dialog-buttons">
-                    <button class="btn btn-primary float-end" @click="createNewSkin" type="button">Create</button>
+                    <button class="btn btn-primary float-end" @click="createNewSkin" type="button">{{ i18n.create }}</button>
                 </div>
 
             </div>
@@ -57,21 +57,21 @@
             <div data-dialog="save-theme-customizer-styles">
 
                 <div class="form-group">
-                    <p>Apply customizations to:</p>
+                    <p>{{ i18n.applyCustomizations }}</p>
 
                     <div class="form-check">
                         <input class="form-check-input" type="radio" id="applyToThisPage" v-model="applyTo" value="page">
-                        <label class="form-check-label" for="applyToThisPage">This Page</label>
+                        <label class="form-check-label" for="applyToThisPage">{{ i18n.thisPage }}</label>
                     </div>
                     <div class="form-check">
                         <input class="form-check-input" type="radio" id="applyToEntireSite" v-model="applyTo" value="site">
-                        <label class="form-check-label" for="applyToEntireSite">Entire Site</label>
+                        <label class="form-check-label" for="applyToEntireSite">{{ i18n.entireSite }}</label>
                     </div>
 
                 </div>
 
                 <div class="dialog-buttons">
-                    <button class="btn btn-primary float-end" @click="saveStyles" type="button">Confirm</button>
+                    <button class="btn btn-primary float-end" @click="saveStyles" type="button">{{ i18n.confirm }}</button>
                 </div>
 
             </div>
@@ -80,10 +80,10 @@
         <div class="d-none">
             <div data-dialog="delete-theme-customizer-skin">
 
-                <p>Are you sure you want to delete this custom skin? This cannot be undone.</p>
+                <p>{{ i18n.confirmSkinDeletion }}</p>
 
                 <div class="dialog-buttons">
-                    <button class="btn btn-primary float-end" @click="deleteSkin" type="button">Delete</button>
+                    <button class="btn btn-primary float-end" @click="deleteSkin" type="button">{{ i18n.delete }}</button>
                 </div>
 
             </div>
@@ -195,7 +195,7 @@ export default {
                 modal: true,
                 width: '800px',
                 height: '70%',
-                title: 'Custom CSS',
+                title: my.i18n.customCSS,
                 onOpen: function() {
                     var editor = ace.edit('theme-customizer-custom-css-editor')
                     editor.setTheme('ace/theme/eclipse')
@@ -254,6 +254,20 @@ export default {
     },
     data: function () {
         return {
+            i18n: {
+                addCustomCSS: 'Add Custom CSS',
+                editCSS: 'Edit CSS',
+                skinName: 'Skin Name',
+                create: 'Create',
+                applyCustomizations: 'Apply customizations to:',
+                thisPage: 'This Page',
+                entireSite: 'Entire Site',
+                confirm: 'Confirm',
+                confirmSkinDeletion: 'Are you sure you want to delete this custom skin? This cannot be undone.',
+                delete: 'Delete',
+                customCSS: 'Custom CSS',
+                save: 'Save'
+            },
             invalidSkinName: false,
             newSkinName: '',
             addCustomCss: false,
@@ -263,6 +277,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]
+                }
+            }
+        }
         if (this.customCss) {
             this.addCustomCss = true
             this.customizerCustomCss = this.customCss
@@ -295,7 +316,7 @@ export default {
                 element: 'div[data-dialog=delete-theme-customizer-skin]',
                 modal: true,
                 width: '400',
-                title: 'Save',
+                title: my.i18n.save,
                 height: 'auto'
             })
         })
@@ -305,7 +326,7 @@ export default {
                 element: 'div[data-dialog=save-theme-customizer-changes]',
                 modal: true,
                 width: '400',
-                title: 'Save',
+                title: my.i18n.save,
                 height: 'auto'
             })
         })
@@ -315,7 +336,7 @@ export default {
                 element: 'div[data-dialog=save-theme-customizer-styles]',
                 modal: true,
                 width: '400',
-                title: 'Save',
+                title: my.i18n.save,
                 height: 'auto'
             })
         })

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

@@ -7,7 +7,7 @@
         <div v-if="loadingPreview">
             <div class="text-center mt-5 display-4 text-secondary">
                 <i class="fa fa-cog fa-spin"></i>
-                Loading...
+                {{ i18n.loading }}
             </div>
         </div>
     </div>
@@ -22,11 +22,21 @@ export default {
     },
     data: function () {
         return {
+            i18n: {
+                loading: 'Loading...'
+            },
             loadingPreview: true
         }
     },
     mounted() {
         var my = this
+        if (window.ccmi18n_styleCustomizer) {
+            for (const key in my.i18n) {
+                if (window.ccmi18n_styleCustomizer[key]) {
+                    my.i18n[key] = window.ccmi18n_styleCustomizer[key]
+                }
+            }
+        }
         $('iframe[name=ccm-theme-preview-frame]').on('load', function() {
             my.loadingPreview = false
         })

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

@@ -5,7 +5,7 @@
         </template>
         <template v-slot:content>
             <div class="mb-2">
-                <label class="form-label">Font Family</label>
+                <label class="form-label">{{ i18n.fontFamily }}</label>
                 <div class="d-flex">
                     <font-family-page-customizer-widget @update="componentUpdated" v-if="fontFamilySubTypeValue" :style-value="fontFamilySubTypeValue"></font-family-page-customizer-widget>
                     <div class="ms-1 d-flex align-items-center" v-if="colorSubTypeValue">
@@ -14,23 +14,23 @@
                 </div>
             </div>
             <div class="mb-2" v-if="fontSizeSubTypeValue">
-                <label class="form-label">Size</label>
+                <label class="form-label">{{ i18n.fontSize }}</label>
                 <size-page-customizer-widget @update="componentUpdated" :style-value="fontSizeSubTypeValue"></size-page-customizer-widget>
             </div>
             <div class="mb-2" v-if="fontWeightSubTypeValue">
-                <label class="form-label">Font Weight</label>
+                <label class="form-label">{{ i18n.fontWeight }}</label>
                 <font-weight-page-customizer-widget @update="componentUpdated" :style-value="fontWeightSubTypeValue"></font-weight-page-customizer-widget>
             </div>
             <div class="mb-2" v-if="fontStyleSubTypeValue">
-                <label class="form-label">Font Style</label>
+                <label class="form-label">{{ i18n.fontStyle }}</label>
                 <font-style-page-customizer-widget @update="componentUpdated" :style-value="fontStyleSubTypeValue"></font-style-page-customizer-widget>
             </div>
             <div class="mb-2" v-if="textDecorationSubTypeValue">
-                <label class="form-label">Text Decoration</label>
+                <label class="form-label">{{ i18n.textDecoration }}</label>
                 <text-decoration-page-customizer-widget @update="componentUpdated" :style-value="textDecorationSubTypeValue"></text-decoration-page-customizer-widget>
             </div>
             <div class="mb-2" v-if="textTransformSubTypeValue">
-                <label class="form-label">Text Transform</label>
+                <label class="form-label">{{ i18n.textTransform }}</label>
                 <text-transform-page-customizer-widget @update="componentUpdated" :style-value="textTransformSubTypeValue"></text-transform-page-customizer-widget>
             </div>
         </template>
@@ -60,6 +60,14 @@ export default {
     },
     data() {
         return {
+            i18n: {
+                fontFamily: 'Font Family',
+                fontSize: 'Size',
+                fontWeight: 'Font Weight',
+                fontStyle: 'Font Style',
+                textDecoration: 'Text Decoration',
+                textTransform: 'Text Transform'
+            },
             fontFamilySubTypeValue: null,
             colorSubTypeValue: null,
             fontSizeSubTypeValue: null,
@@ -76,6 +84,13 @@ export default {
     },
     mounted() {
         var my = this
+        if (window.ccmi18n_styleCustomizer) {
+            for (const key in my.i18n) {
+                if (window.ccmi18n_styleCustomizer[key]) {
+                    my.i18n[key] = window.ccmi18n_styleCustomizer[key]
+                }
+            }
+        }
         this.styleValue.value.values.forEach(function(styleValue) {
             if (styleValue.style.type === 'color') {
                 my.colorSubTypeValue = styleValue

package/assets/cms/components/express/Selector.vue

@@ -5,7 +5,7 @@
         <form @submit.prevent="getExpressEntries">
           <div class="ccm-header-search-form-input input-group">
             <!--suppress HtmlFormInputWithoutLabel -->
-            <input type="text" class="form-control border-end-0" placeholder="Search" autocomplete="false"
+            <input type="text" class="form-control border-end-0" :placeholder="i18n.search" autocomplete="false"
                    v-model="keywords">
 
             <button type="submit" class="input-group-icon">
@@ -30,16 +30,16 @@
               <th></th>
               <th :class="getSortColumnClassName('e.exEntryDateCreated')">
                 <a href="#" @click.prevent="sortBy('exEntryDateCreated')">
-                  Date Added
+                  {{ i18n.dateAdded }}
                 </a>
               </th>
               <th :class="getSortColumnClassName('e.exEntryDateModified')">
                 <a href="#" @click.prevent="sortBy('e.exEntryDateModified')">
-                  Date Modified
+                  {{ i18n.dateModified }}
                 </a>
               </th>
               <th>
-                <span>Name</span>
+                <span>{{ i18n.name }}</span>
               </th>
             </tr>
             </thead>
@@ -67,11 +67,11 @@
 
     <div class="dialog-buttons">
       <button class="btn btn-secondary" data-dialog-action="cancel">
-        Cancel
+        {{ i18n.cancel }}
       </button>
 
       <button type="button" @click="selectEntry" :disabled="selectedEntry === null" class="btn btn-primary">
-        Select
+        {{ i18n.select }}
       </button>
     </div>
   </div>
@@ -95,6 +95,14 @@ export default {
     }
   },
   data: () => ({
+    i18n: {
+      search: 'Search',
+      dateAdded: 'Date Added',
+      dateModified: 'Date Modified',
+      name: 'Name',
+      cancel: 'Cancel',
+      select: 'Select'
+    },
     keywords: '',
     selectedEntry: null,
     currentPage: 1,
@@ -210,6 +218,13 @@ export default {
     }
   },
   mounted() {
+    if (window.ccmi18n_express) {
+      for (const key in this.i18n) {
+        if (window.ccmi18n_express[key]) {
+          this.i18n[key] = window.ccmi18n_express[key]
+        }
+      }
+    }
     this.getExpressEntries()
   }
 }

package/assets/cms/components/file-manager/Chooser/ExternalFileProvider.vue

@@ -12,7 +12,7 @@
               </option>
             </select>
 
-            <input type="text" class="form-control border-end-0" placeholder="Search" autocomplete="false"
+            <input type="text" class="form-control border-end-0" :placeholder="i18n.search" autocomplete="false"
                    v-model="searchText">
             <button type="submit" class="input-group-icon">
               <svg width="16" height="16">
@@ -27,7 +27,7 @@
             <span class="search-icon my-4">
                 <Icon icon="search" type="fas" color="#f4f4f4"/>
             </span>
-      <p><b>Let's get some info on what you're looking for.</b></p>
+      <p><b>{{ i18n.initialExternalFileProviderChooserTip }}</b></p>
     </div>
     <div>
       <files v-if="keywords"
@@ -66,6 +66,10 @@ export default {
     ConcreteFileDirectoryInput
   },
   data: () => ({
+    i18n: {
+      search: 'Search',
+      initialExternalFileProviderChooserTip: "Let's get some info on what you're looking for."
+    },
     uploadDirectoryId: 0,
     fileTypes: [],
     searchText: '',
@@ -121,6 +125,13 @@ export default {
     }
   },
   mounted() {
+    if (window.ccmi18n_filemanager) {
+      for (const key in this.i18n) {
+        if (window.ccmi18n_filemanager[key]) {
+          this.i18n[key] = window.ccmi18n_filemanager[key]
+        }
+      }
+    }
     this.formFactor = this.resultsFormFactor
     this.getFileTypes()
     this.$refs.folderSelector.selectedDirectoryID = this.extraData.uploadDirectoryId

package/assets/cms/components/file-manager/Chooser/FileSets.vue

@@ -4,11 +4,11 @@
 
         <div class="form-group row row-cols-auto g-0 align-items-center justify-content-end">
             <div class="col-auto">
-                <label for="fileSetSelector" class="me-2">File Set</label>
+                <label for="fileSetSelector" class="me-2">{{ i18n.fileSet }}</label>
             </div>
             <div class="col-auto">
                 <select id="fileSetSelector" class="form-select file-set-menu" v-model="activeSet">
-                    <option value="" selected>Select a Set</option>
+                    <option value="" selected>{{ i18n.selectFileSet }}</option>
                     <option v-for="set in sets" :key="set.id" :value="set.id">
                         {{set.name}}
                     </option>
@@ -45,6 +45,10 @@ export default {
         Files
     },
     data: () => ({
+        i18n: {
+            fileSet: 'File Set',
+            selectFileSet: 'Select a Set'
+        },
         sets: [],
         activeSet: '',
         selectedFiles: [],
@@ -86,6 +90,13 @@ export default {
         }
     },
     mounted() {
+        if (window.ccmi18n_filemanager) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_filemanager[key]) {
+                    this.i18n[key] = window.ccmi18n_filemanager[key]
+                }
+            }
+        }
         this.formFactor = this.resultsFormFactor
 
         this.getSets()

package/assets/cms/components/file-manager/Chooser/Files.vue

@@ -24,14 +24,14 @@
                     <tr>
                         <th></th>
                         <th></th>
-                        <th>ID</th>
+                        <th>{{ i18n.id }}</th>
                         <th :class="getSortColumnClassName('fv.fvTitle')">
-                            <a v-if="enableSort" href="#" @click.prevent="sortBy('fv.fvTitle')">Name</a>
-                            <span v-else>Name</span>
+                            <a v-if="enableSort" href="#" @click.prevent="sortBy('fv.fvTitle')">{{ i18n.name }}</a>
+                            <span v-else>{{ i18n.name }}</span>
                         </th>
                         <th :class="getSortColumnClassName(dateSortColumn)">
-                            <a v-if="enableSort" href="#" @click.prevent="sortBy(dateSortColumn)">Uploaded</a>
-                            <span v-else>Uploaded</span>
+                            <a v-if="enableSort" href="#" @click.prevent="sortBy(dateSortColumn)">{{ i18n.uploaded }}</a>
+                            <span v-else>{{ i18n.uploaded }}</span>
                         </th>
                     </tr>
                     </thead>
@@ -80,6 +80,11 @@ export default {
         Pagination
     },
     data: () => ({
+        i18n: {
+            id: 'ID',
+            name: 'Name',
+            uploaded: 'Uploaded'
+        },
         currentPage: 1,
         rows: false,
         fileList: [],
@@ -235,6 +240,15 @@ export default {
             }
         }
     },
+    mounted: function() {
+        if (window.ccmi18n_filemanager) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_filemanager[key]) {
+                    this.i18n[key] = window.ccmi18n_filemanager[key]
+                }
+            }
+        }
+    },
     watch: {
         selectedFiles(value) {
             this.$emit('update:selectedFiles', Array.isArray(value) ? value : [value])

package/assets/cms/components/file-manager/Chooser/SavedSearch.vue

@@ -7,11 +7,11 @@
 
         <div class="form-group row row-cols-auto g-0 align-items-center justify-content-end">
             <div class="col-auto">
-                <label for="searchPresets" class="me-2">Search Presets</label>
+                <label for="searchPresets" class="me-2">{{ i18n.searchPresets }}</label>
             </div>
             <div class="col-auto">
                 <select id="searchPresets" class="form-select search-presets-menu" v-model="activeSearchPreset">
-                    <option value="" selected>Select a Preset</option>
+                    <option value="" selected>{{ i18n.selectPreset }}</option>
                     <option v-for="searchPreset in searchPresets" :key="searchPreset.id" :value="searchPreset.id">
                         {{searchPreset.presetName}}
                     </option>
@@ -48,6 +48,10 @@ export default {
         Files
     },
     data: () => ({
+        i18n: {
+            searchPresets: 'Search Presets',
+            selectPreset: 'Select a Preset'
+        },
         activeFolder: '',
         searchPresets: [],
         activeSearchPreset: '',
@@ -91,6 +95,13 @@ export default {
         }
     },
     mounted() {
+        if (window.ccmi18n_filemanager) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_filemanager[key]) {
+                    this.i18n[key] = window.ccmi18n_filemanager[key]
+                }
+            }
+        }
         this.formFactor = this.resultsFormFactor
 
         this.fetchSearchPresets()

package/assets/cms/components/file-manager/Chooser/Search.vue

@@ -6,7 +6,7 @@
             <div class="col-md-4 ms-auto">
                 <form @submit.prevent="search">
                     <div class="ccm-header-search-form-input input-group">
-                        <input type="text" class="form-control border-end-0" placeholder="Search" autocomplete="false" v-model="searchText">
+                        <input type="text" class="form-control border-end-0" :placeholder="i18n.search" autocomplete="false" v-model="searchText">
                         <button type="submit" class="input-group-icon">
                             <svg width="16" height="16">
                                 <use xlink:href="#icon-search"/>
@@ -20,7 +20,7 @@
             <span class="search-icon my-4">
                 <Icon icon="search" type="fas" color="#f4f4f4"/>
             </span>
-            <p><b>Let's get some info on what you're looking for.</b></p>
+            <p><b>{{ i18n.initialSearchChooserTip }}</b></p>
         </div>
         <div>
             <files v-if="keywords"
@@ -47,6 +47,10 @@ export default {
         Files
     },
     data: () => ({
+        i18n: {
+            search: 'Search',
+            initialSearchChooserTip: "Let's get some info on what you're looking for."
+        },
         searchText: '',
         keywords: '',
         selectedFiles: [],
@@ -83,6 +87,13 @@ export default {
         }
     },
     mounted() {
+        if (window.ccmi18n_filemanager) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_filemanager[key]) {
+                    this.i18n[key] = window.ccmi18n_filemanager[key]
+                }
+            }
+        }
         this.formFactor = this.resultsFormFactor
     }
 }

package/assets/cms/components/file-manager/Chooser.vue

@@ -41,11 +41,11 @@
             </div>
         </div>
         <div class="dialog-buttons">
-            <button class="btn btn-secondary" data-dialog-action="cancel">Cancel</button>
+            <button class="btn btn-secondary" data-dialog-action="cancel">{{ i18n.cancel }}</button>
 
-            <button type="button" v-show="isImportExternalFilesMode()" @click="importExternalFiles" :disabled="selectedFiles.length === 0" class="btn btn-primary">Import</button>
-            <button type="button" v-show="isChooseFilesMode()" @click="chooseFiles" :disabled="selectedFiles.length === 0" class="btn btn-primary">Choose</button>
-            <button type="button" v-show="isAddNewFilesMode()" @click="uploadFiles" :disabled="uploadReady === false" class="btn btn-primary">Upload</button>
+            <button type="button" v-show="isImportExternalFilesMode()" @click="importExternalFiles" :disabled="selectedFiles.length === 0" class="btn btn-primary">{{ i18n.import }}</button>
+            <button type="button" v-show="isChooseFilesMode()" @click="chooseFiles" :disabled="selectedFiles.length === 0" class="btn btn-primary">{{ i18n.choose }}</button>
+            <button type="button" v-show="isAddNewFilesMode()" @click="uploadFiles" :disabled="uploadReady === false" class="btn btn-primary">{{ i18n.upload }}</button>
         </div>
     </div>
 </template>
@@ -74,6 +74,16 @@ export default {
     },
     data() {
         return {
+            i18n: {
+                cancel: 'Cancel',
+                import: 'Import',
+                choose: 'Choose',
+                upload: 'Upload',
+                recentlyUploaded: 'Recently Uploaded',
+                fileManager: 'File Manager',
+                search: 'Search',
+                uploadFiles: 'Upload Files'
+            },
             filesReadyToUpload: 0,
             activeNavItem: null,
             resultsFormFactor: 'grid',
@@ -91,15 +101,15 @@ export default {
             default: [
                 {
                     key: 'recent-uploads',
-                    title: 'Recently Uploaded'
+                    title: null // use the detault one if null
                 },
                 {
                     key: 'file-manager',
-                    title: 'File Manager'
+                    title: null // use the detault one if null
                 },
                 {
                     key: 'search',
-                    title: 'Search'
+                    title: null // use the detault one if null
                 }
             ]
         },
@@ -108,7 +118,7 @@ export default {
             default: [
                 {
                     key: 'file-upload',
-                    title: 'Upload Files'
+                    title: null // use the detault one if null
                 }
             ]
         },
@@ -122,11 +132,57 @@ export default {
     },
     mounted() {
         var my = this
+        if (window.ccmi18n_filemanager) {
+            for (const key in my.i18n) {
+                if (window.ccmi18n_filemanager[key]) {
+                    my.i18n[key] = window.ccmi18n_filemanager[key]
+                }
+            }
+        }
+        this.applyLocalization()
         ConcreteEvent.subscribe('FileUploaderFilesReadyToUpload', function(e, filesReadyToUpload) {
             my.filesReadyToUpload = filesReadyToUpload
         })
     },
+    watch: {
+        choosers() {
+            this.applyLocalization()
+        },
+        uploaders() {
+            this.applyLocalization()
+        }
+    },
     methods: {
+        applyLocalization() {
+            if (this.choosers) {
+                for (const chooser of this.choosers) {
+                    if (typeof chooser.title !== 'string') {
+                        switch (chooser.key) {
+                        case 'recent-uploads':
+                            chooser.title = this.i18n.recentlyUploaded
+                            break
+                        case 'file-manager':
+                            chooser.title = this.i18n.fileManager
+                            break
+                        case 'search':
+                            chooser.title = this.i18n.search
+                            break
+                        }
+                    }
+                }
+            }
+            if (this.uploaders) {
+                for (const uploader of this.uploaders) {
+                    if (typeof uploader.title !== 'string') {
+                        switch (uploader.key) {
+                        case 'file-upload':
+                            uploader.title = this.i18n.uploadFiles
+                            break
+                        }
+                    }
+                }
+            }
+        },
         isImportExternalFilesMode() {
             return this.activeNavItem.componentKey === 'external-file-provider'
         },