@concretecms/bedrock 1.3.7 → 1.4.0

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

@@ -1,270 +0,0 @@
-import interact from 'interactjs'
-
-export default {
-
-    // The properties available for our parent to edit
-    props: {
-        img: String,
-        imageHeight: Number,
-        imageWidth: Number,
-        cropperWidth: Number,
-        cropperHeight: Number,
-        shadow: Boolean
-    },
-
-    // Our state
-    data() {
-        return {
-            x: 0,
-            y: 0,
-            adjX: 0,
-            adjY: 0,
-            resizeHeight: 0,
-            resizeWidth: 0,
-            viewport: null,
-            outer: null
-        }
-    },
-
-    /**
-     * Prepare to render by setting up our viewport
-     */
-    beforeUpdate() {
-        if (this.viewport) {
-            this.viewport.x = this.x
-            this.viewport.y = this.y
-            this.viewport.adjX = this.adjX
-            this.viewport.adjY = this.adjY
-            this.viewport.resizeWidth = this.resizeWidth
-            this.viewport.resizeHeight = this.resizeHeight
-        }
-    },
-
-    /**
-     * Once we are attached
-     */
-    mounted() {
-        if (this.shadow === true) {
-            this.guessPosition()
-            this.setupResizing()
-            this.setupDragging()
-        }
-
-        // Emit an event
-        this.$emit('mount', this)
-    },
-
-    methods: {
-
-        /**
-         */
-        guessPosition() {
-            const adjustedHeight = this.adjustedDimensions(this.imageWidth, this.imageHeight)
-            let adjX = 0; let adjY = 0
-
-            this.resizeHeight = adjustedHeight.height
-            this.resizeWidth = adjustedHeight.width
-
-            if (this.resizeWidth > this.cropperWidth) {
-                adjX = -Math.round((this.resizeWidth - this.cropperWidth) / 2)
-            }
-            if (this.resizeHeight > this.cropperHeight) {
-                adjY = -Math.round((this.resizeHeight - this.cropperHeight) / 2)
-            }
-
-            const coords = this.adjustedCoordinates(adjX, adjY, this.resizeWidth, this.resizeHeight)
-            this.x += coords.x
-            this.y += coords.y
-        },
-
-        /**
-         * Make the avatar resizable
-         */
-        setupResizing() {
-            const me = this
-            this.interact = interact(this.$refs.image)
-                .resizable({
-                    preserveAspectRatio: true,
-                    edges: { left: true, right: true, bottom: true, top: true }
-                })
-                .on('resizemove', function (event) {
-                    return me.handleResizeMove(event)
-                })
-        },
-
-        /**
-         * Handle dimensions adjusting
-         * @param int width
-         * @param int height
-         */
-        adjustedDimensions(width, height) {
-            let bestFactor = 1
-            const maxFactor = Math.sqrt(Math.min(width, height))
-
-            // Find the best factor to downsize by
-            for (let i = 2; i <= maxFactor; i++) {
-                if ((width / i) % 2 === 0 && (height / i) % 2 === 0) {
-                    if ((width / i) > this.cropperWidth && (height / i) > this.cropperHeight) {
-                        bestFactor = i
-                    }
-                }
-            }
-
-            return {
-                width: width / bestFactor,
-                height: height / bestFactor,
-                factor: bestFactor,
-                adjusted: bestFactor !== 1
-            }
-        },
-
-        /**
-         * Handle coordinates adjusting
-         * @param int x
-         * @param int y
-         * @param int width
-         * @param int height
-         */
-        adjustedCoordinates(x, y, width, height) {
-            const renderedX = this.x + x
-            const renderedY = this.y + y
-            const coords = {
-                min: {
-                    x: -1 * (width - this.cropperWidth),
-                    y: -1 * (height - this.cropperHeight)
-                },
-                max: {
-                    x: 0,
-                    y: 0
-                }
-            }
-            const adjustedX = Math.max(coords.min.x, Math.min(coords.max.x, renderedX)) - this.x
-            const adjustedY = Math.max(coords.min.y, Math.min(coords.max.y, renderedY)) - this.y
-
-            return {
-                x: adjustedX,
-                y: adjustedY,
-                adjusted: adjustedY !== y || adjustedX !== x
-            }
-        },
-
-        /**
-         * Attach a parent Avatar if we're a shadow
-         * @param Avatar viewport
-         */
-        setViewport(viewport) {
-            this.viewport = viewport
-            viewport.outer = this
-            viewport.setupDragging()
-        },
-
-        /**
-         * Setup interactjs dragging
-         */
-        setupDragging() {
-            const me = this
-            this.interact = interact(this.$refs.image)
-                .draggable({
-                    intertia: false,
-                    restrict: false,
-
-                    // Send on move events to component
-                    onmove: function (e) {
-                        if (me.outer) {
-                            return me.outer.handleDragMove(e)
-                        }
-                        return me.handleDragMove(e)
-                    },
-
-                    // Send onstart events to component
-                    onstart: function (e) {
-                        if (me.outer) {
-                            return me.outer.handleDragStart(e)
-                        }
-                        return me.handleDragStart(e)
-                    },
-
-                    // Send onend events to component
-                    onend: function (e) {
-                        if (me.outer) {
-                            return me.outer.handleDragEnd(e)
-                        }
-                        return me.handleDragEnd(e)
-                    }
-                })
-        },
-
-        /**
-         * Handle interactjs drag event
-         * @param event
-         */
-        handleDragMove(event) {
-            const coords = this.adjustedCoordinates(
-                event.pageX - this.startEvent.pageX, event.pageY - this.startEvent.pageY,
-                this.resizeWidth, this.resizeHeight)
-
-            this.adjX = coords.x
-            this.adjY = coords.y
-        },
-
-        /**
-         * Handle interactjs starting to drag
-         * @param Event event
-         */
-        handleDragStart(event) {
-            this.startEvent = event
-            this.coords = {
-                min: {
-                    x: -this.resizeWidth + this.cropperWidth,
-                    y: -this.resizeHeight + this.cropperHeight
-                },
-                max: {
-                    x: 0,
-                    y: 0
-                }
-            }
-        },
-
-        /**
-         * Handle interactjs stopping dragging
-         * @param event
-         */
-        handleDragEnd(event) {
-            this.x += this.adjX
-            this.y += this.adjY
-            this.adjX = 0
-            this.adjY = 0
-        },
-
-        /**
-         * Handle resizing
-         * @param event
-         */
-        handleResizeMove(event) {
-            const coordinates = this.adjustedCoordinates(
-                event.deltaRect.left, event.deltaRect.top,
-                event.rect.width, event.rect.height)
-
-            // Don't resize too small
-            if (event.rect.width < this.cropperWidth ||
-                event.rect.height < this.cropperHeight) {
-                // If the image is square
-                if (this.imageWidth === this.imageHeight) {
-                    this.resizeWidth = this.cropperWidth
-                    this.resizeHeight = this.cropperHeight
-                    this.x = 0
-                    this.y = 0
-                }
-                return
-            }
-
-            // update the element's style
-            this.resizeWidth = Math.max(event.rect.width, this.cropperWidth)
-            this.resizeHeight = Math.max(event.rect.height, this.cropperHeight)
-
-            // translate when resizing from top or left edges
-            this.x += coordinates.x
-            this.y += coordinates.y
-        }
-    }
-}

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

@@ -1,17 +0,0 @@
-img {
-  left: 0;
-  max-width: inherit;
-  min-width: inherit;
-  top: 0;
-}
-
-.shadow {
-  box-shadow: 0 0 10px black;
-  box-sizing: border-box;
-  left: 1px;
-  opacity: 0.3;
-  outline: solid 1px #333;
-  position: absolute;
-  top: 1px;
-  z-index: 1;
-}

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

@@ -1,18 +0,0 @@
-<template>
-    <div>
-        <img ref='image'
-             :src="img"
-             :width="imageWidth" :height="imageHeight"
-             :class="{
-                 shadow: shadow
-             }"
-             :style="{
-                 width: resizeWidth + 'px',
-                 height: resizeHeight + 'px',
-                 transform: 'translate(' + (x + adjX) + 'px, ' + (y + adjY) + 'px)',
-             }"/>
-    </div>
-</template>
-
-<style src='./Avatar.scss' lang="scss" scoped></style>
-<script src='./Avatar.js'></script>

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

@@ -1,202 +0,0 @@
-import Dropzone from 'dropzone'
-import Avatar from './Avatar.vue'
-
-// Disable dropzone discovery
-Dropzone.autoDiscover = false
-
-export default {
-
-    // Properties tied to our parent
-    props: {
-        width: Number,
-        height: Number,
-        uploadurl: String,
-        src: String,
-        cancelConfirmText: {
-            type: String,
-            default: 'Are you sure you want to quit?'
-        },
-        canceledText: {
-            type: String,
-            default: 'Upload canceled.'
-        }
-    },
-
-    // Our internal state
-    data: function () {
-        return {
-            img: null,
-            x: 10,
-            y: 5,
-            cropWidth: 0,
-            cropHeight: 0,
-            imageHeight: 0,
-            imageWidth: 0,
-            saving: false,
-            currentimage: null,
-            hasError: false,
-            errorMessage: ''
-        }
-    },
-
-    /**
-     * Handle mounting to our element
-     */
-    mounted() {
-        // Attach the current image
-        this.currentimage = this.src
-
-        // Setup Uploading
-        this.setupUploading()
-    },
-    methods: {
-        setError(error) {
-            this.hasError = true
-            this.errorMessage = error
-        },
-        clearError() {
-            this.hasError = false
-            this.errorMessage = ''
-        },
-        /**
-         * Setup dropzone for uploading
-         */
-        setupUploading() {
-            if (this.dropzone) {
-                return
-            }
-
-            const component = this
-            this.dropzone = new Dropzone(this.$refs.dropzone, {
-                url: this.uploadurl,
-                maxFiles: 1,
-                previewTemplate: '<span></span>',
-                transformFileSync: false,
-
-                // Accept uploaded files from user
-                accept(file, done) {
-                    component.file = file
-                    component.done = done
-                },
-
-                // Give the component a chance to finalize the file
-                transformFile(file, done) {
-                    return component.finalize(file, done)
-                },
-
-                // Initialize dropzone
-                init() {
-                    // Capture thumbnail details
-                    this.on('thumbnail', function () {
-                        component.img = component.file.dataURL
-                        component.imageWidth = component.file.width
-                        component.imageHeight = component.file.height
-                    })
-
-                    this.on('success', function(event, data) {
-                        if (!component.hasError) {
-                            component.currentimage = data.avatar
-                        }
-                    })
-
-                    this.on('error', function (event, data) {
-                        component.setError(typeof data === 'string' ? data : data.message)
-                        component.currentimage = component.src
-                    })
-
-                    this.on('complete', function() {
-                        component.saving = false
-                        component.img = null
-                        component.dropzone.destroy()
-                        component.dropzone = null
-
-                        setTimeout(function () {
-                            component.setupUploading()
-                        }, 0)
-                    })
-                },
-
-                /**
-                 * Request full size thumbnails
-                 * @param file
-                 * @param int width
-                 * @param int height
-                 * @returns {{int srcWidth, int srcHeight, int trgWidth, int trgHeight}}
-                 */
-                resize(file, width, height) {
-                    return {
-                        srcWidth: file.width,
-                        srcHeight: file.height,
-                        trgWidth: file.width,
-                        trgHeight: file.height
-                    }
-                }
-            })
-        },
-
-        /**
-         * Handle finalizing a user provided image.
-         * This is where we actually do the cropping and rendering.
-         *
-         * @param file
-         * @param bool done
-         * @returns {*}
-         */
-        finalize(file, done) {
-            const canvas = document.createElement('canvas')
-            const ctx = canvas.getContext('2d')
-            const img = new Image()
-
-            img.src = file.dataURL
-
-            canvas.width = this.width
-            canvas.height = this.height
-
-            // Draw the image cropped
-            ctx.drawImage(
-                img, this.$refs.image.x, this.$refs.image.y,
-                this.$refs.image.resizeWidth, this.$refs.image.resizeHeight)
-
-            this.saving = true
-            // Complete the upload
-            const data = canvas.toDataURL()
-            const result = done(Dropzone.dataURItoBlob(data))
-
-            this.currentimage = data
-            return result
-        },
-
-        /**
-         * Attach our shadow and our image together
-         */
-        attachShadow() {
-            // Attach the shadow
-            this.$refs.shadow.setViewport(this.$refs.image)
-        },
-
-        /**
-         * Handle checkmark click
-         */
-        handleOkay() {
-            this.done.call(this.dropzone)
-        },
-
-        /**
-         * Handle x mark click
-         */
-        handleCancel() {
-            if (window.confirm(this.cancelConfirmText)) {
-                this.done.call(this.dropzone, this.canceledText)
-                this.img = null
-                this.saving = false
-                this.dropzone.destroy()
-                this.clearError()
-                this.dropzone = null
-                this.setupUploading()
-            }
-        }
-    },
-    components: {
-        Avatar
-    }
-}

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

@@ -1,136 +0,0 @@
-/* stylelint-disable property-no-vendor-prefix, property-no-unkown */
-.ccm-avatar-creator-container {
-  position: relative;
-
-  .ccm-avatar-actions {
-    position: absolute;
-    z-index: 20000;
-
-    > a {
-      display: inline-block;
-      font-weight: 600;
-      opacity: 0.8;
-      text-align: center;
-      text-decoration: none;
-      transition: all 0.5s;
-      width: 50%;
-
-      &:hover {
-        opacity: 1;
-      }
-
-      &::before {
-        font-family: 'Font Awesome 5 Free';
-        font-size: 16px;
-        text-align: center;
-      }
-
-      &.ccm-avatar-cancel {
-        color: #ff4136;
-        float: right;
-
-        &::before {
-          content: '\f00d';
-        }
-      }
-
-      &.ccm-avatar-okay {
-        color: #3d9970;
-
-        &::before {
-          content: '\f00c';
-        }
-      }
-    }
-  }
-
-  .ccm-avatar-creator {
-    border: solid 1px #999;
-    overflow: hidden;
-    position: relative;
-    transition: all 0.3s;
-    z-index: 10000;
-
-    > img.ccm-avatar-current {
-      display: inline;
-      height: 100%;
-      width: 100%;
-      z-index: 998;
-    }
-
-    > div.saving {
-      background: rgba(127, 219, 255, 0.5);
-      color: #111;
-      font-size: 16px;
-      font-weight: bolder;
-      height: 100%;
-      left: 0;
-      position: absolute;
-      text-align: center;
-      top: 0;
-      width: 100%;
-    }
-
-    &::before {
-      background-color: rgba(238, 238, 238, 0.8);
-      color: #3d9970;
-      content: '\f303';
-      display: block;
-      font-family: 'Font Awesome 5 Free';
-      font-weight: 600;
-      height: 100%;
-      line-height: 0%;
-      margin: 0 auto;
-      opacity: 0;
-      padding-top: 50%;
-      position: absolute;
-      text-align: center;
-      transition: all 0.3s;
-      vertical-align: middle;
-      width: 100%;
-      z-index: 999;
-    }
-
-    &.dz-started {
-      &::before {
-        -webkit-animation: pulse 1s infinite;
-        animation: pulse 1s infinite;
-        opacity: 1;
-      }
-    }
-
-    @keyframes pulse {
-      0% {
-        transform: scale(1);
-      }
-
-      50% {
-        transform: scale(1.3);
-      }
-
-      100% {
-        transform: scale(1);
-      }
-    }
-
-    &.editing {
-      &::before {
-        display: none;
-      }
-    }
-
-    &.dz-clickable {
-      cursor: 'pointer';
-    }
-
-    &.dz-clickable:hover,
-    &.dz-drag-hover {
-      border-color: #3d9970;
-      box-shadow: 0 0 20px -10px #2ecc40;
-
-      &::before {
-        opacity: 1;
-      }
-    }
-  }
-}

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

@@ -1,40 +0,0 @@
-<template>
-    <div class="ccm-avatar-creator-container">
-        <avatar ref="shadow" v-if="img !== null"
-                      @mount="attachShadow"
-                      :shadow="true"
-                      :img="img"
-                      :imageHeight="imageHeight"
-                      :imageWidth="imageWidth"
-                      :cropperWidth="width"
-                      :cropperHeight="height" />
-        <div ref='dropzone'
-             class="ccm-avatar-creator"
-             :style="{width: width + 'px', height: height + 'px' }"
-             :class="{editing: img !== null}">
-            <avatar ref="image" v-if="img"
-                          :img="img"
-                          :imageHeight="imageHeight"
-                          :imageWidth="imageWidth"
-                          :cropperWidth="width"
-                          :cropperHeight="height" />
-            <img class="ccm-avatar-current" v-if="!img" :src="currentimage"/>
-            <div class="saving"
-                 v-if="saving"
-                 :style="{lineHeight: height + 'px' }">
-                <i class="fa fa-spin fa-spinner fa-circle-o-notch"></i>
-            </div>
-        </div>
-        <div class="ccm-avatar-actions" v-if="img">
-            <a class="ccm-avatar-okay" :style="{width: width / 2 + 'px'}" @click="handleOkay"></a>
-            <a class="ccm-avatar-cancel" :style="{width: width / 2 + 'px'}" @click="handleCancel"></a>
-        </div>
-        <canvas ref="canvas" style="height: 0;"></canvas>
-        <div v-if="hasError" class="alert alert-danger">
-            {{errorMessage}}
-        </div>
-    </div>
-</template>
-
-<script src='./Cropper.js'></script>
-<style src='./Cropper.scss' lang="scss" scoped></style>

package/assets/bedrock/scss/_theme-grid.scss

@@ -1,7 +0,0 @@
-// This file ensures that the layout tools work with this theme grid
-div#ccm-theme-grid-temp,
-div#ccm-theme-grid-edit-mode-row-wrapper {
-  div.row {
-    position: relative; // This is necessary in order for the javascript to correctly use jquery position() calls
-  }
-}