mango-cms 0.0.13

package/frontend-starter/src/helpers/uploadFile.vue

@@ -0,0 +1,157 @@
+<template>
+    <label :for="_uid" :uploading="uploading" :error="error" :url="url" :class="{'block relative border-2 border-transparent': showProgress}" ref="container">
+
+        <svg class="absolute -left-[2px] -top-[2px] z-50 w-[calc(100%+4px)] h-[calc(100%+4px)]" :style="progressRingStyle" v-if="progress">
+            <!-- <circle class="progress-ring__circle" stroke="green" stroke-width="4" fill="transparent" r="58" cx="60" cy="60"/> -->
+            <circle class="progress-ring__circle" stroke="#22c55e" :stroke-width="progressWidth" fill="transparent" :r="radius" :cx="containerSize/2" :cy="containerSize/2" :style="progressRingStyle"/>
+        </svg>
+
+        <button type="button" v-if="showDelete" @click.stop.prevent="url = null; $emit('url', null)" class="absolute -top-1 -right-1 w-[0.9rem] h-[0.9rem] rounded-full border-2 border-black/50 dark:bg-red-900 bg-red-500 flex items-center justify-center text-4xs font-bold z-50">
+            <span class=""><i class="fa fa-times opacity-50"/></span>
+        </button>
+
+        <slot :progress="progress" />
+
+        <input
+            :id="_uid"
+            hidden
+            type="file"
+            :accept="accept"
+            @change="upload"
+        />
+    </label>
+</template>
+
+<script>
+import Compress from 'compress.js'
+const compress = new Compress()
+// import Modernizr from 'modernizr'
+
+export default {
+    props: {
+        accept: {type: String, default: 'image/png, image/jpeg, image/heic'},
+        showProgress: {type: Boolean, default: true},
+        miultiple: {type: Boolean, default: true},
+        showDelete: {type: Boolean, default: true},
+    },
+    data() {
+        return {
+            _uid: Math.random().toString(36).substr(2, 10),
+            uploading: false,
+            error: false,
+            url: null,
+            progress: 0,
+            filename: null,
+            containerSize: 0,
+            progressWidth: 2,
+        }
+    },
+    watch: {
+        uploading() { this.$emit('uploading', this.uploading) },
+        error() { this.$emit('error', this.error) },
+        url() { this.$emit('url', this.url) },
+        filename() { this.$emit('filename', this.filename) },
+        // progress() { this.$emit('progress', this.progress) },
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.containerSize = this.$refs.container.offsetWidth;
+        })
+    },
+    computed: {
+        radius() {
+            return ((this.containerSize / 2)-(this.progressWidth/2)) || 0; // Subtract the stroke width
+        },
+        progressRingStyle() {
+            const circumference = 2 * Math.PI * this.radius;
+            const offset = circumference - (this.progress / 100) * circumference;
+            return {
+                strokeDasharray: `${circumference} ${circumference}`,
+                strokeDashoffset: offset,
+            };
+        },
+    },
+    methods: {
+        async upload(event) {
+
+            let file = event.target.files[0]
+            const formData = new FormData()
+
+            this.uploading = true
+            this.filename = file.name
+
+            // // Use Modernizr to detect if exit-orientation is supported.
+            // const browserSupportsExifOrientation = () => {
+            //     return new Promise((resolve) => Modernizr.on("exiforientation", resolve));
+            // };
+
+            // // Only rotate if browser does not support exit orientation.
+            // const shouldRotate = async () => {
+            //     const supported = await browserSupportsExifOrientation();
+            //     return !supported;
+            // };
+
+            // const rotate = await shouldRotate();
+
+            // Compress the image
+            if (file.type.includes('image')) {
+                let results = await compress.compress([file], {
+                    quality: .75, // the quality of the image, max is 1,
+                    maxWidth: 1920, // the max width of the output image, defaults to 1920px
+                    maxHeight: 1920, // the max height of the output image, defaults to 1920px
+                    resize: true, // defaults to true, set false if you do not want to resize the image width and height
+                    rotate: false, // See the rotation section below
+                })
+                const img1 = results[0]
+                const base64str = img1.data
+                const imgExt = img1.ext
+                const filename = file.name
+                file = Compress.convertBase64ToFile(base64str, imgExt)
+                file = new File([file], filename, { type: file.type });
+                console.log('file', file)
+            }
+
+            formData.append('file', file)
+
+            const xhr = new XMLHttpRequest()
+
+            xhr.open('POST', 'https://api.churchandfamilylife.com/upload', true)
+
+            xhr.upload.onprogress = (event) => {
+                if (event.lengthComputable) {
+                    this.progress = (event.loaded / event.total) * 100
+                }
+            }
+
+            xhr.onload = () => {
+                if (xhr.status === 200) {
+                    const json = JSON.parse(xhr.response)
+                    const path = json.paths[0]
+                    const url = `https://api.churchandfamilylife.com` + path
+                    this.uploading = false
+                    this.url = url
+                    this.progress = 0
+                } else {
+                    this.error = 'Error while uploading file'
+                    this.uploading = false
+                }
+            }
+
+            xhr.onerror = () => {
+                this.error = 'Error while uploading file'
+                this.uploading = false
+            }
+
+            xhr.send(formData)
+        },
+    }
+}
+</script>
+
+<style scoped>
+    .progress-ring__circle {
+        transition: stroke-dashoffset 0.35s;
+        transform: rotate(-90deg);
+        transform-origin: 50% 50%;
+    }
+</style>

package/frontend-starter/src/helpers/uploadFiles.vue

@@ -0,0 +1,100 @@
+<template>
+
+    <div class="p-4 rounded-lg bg-gray-100 dark:bg-gray-800/50 w-full space-y-4">
+        <div class="font-semibold uppercase tracking-widest text-gray-500/50 text-sm">Documents</div>
+        <div class="w-full grid grid-cols-4 gap-2">
+
+            <Draggable v-model="sortableDocuments" v-if="sortableDocuments.length" item-key="id" class="w-full grid grid-cols-4 gap-2 col-span-4" >
+                <template #item="{element:document}">
+                    <div class="bg-center bg-cover w-full aspect-square shrink-0 overflow-hidden rounded relative group border-4">
+                        <div class="absolute inset-0 flex flex-col space-y-4 items-center justify-center">
+                            <i class="fa fa-file-alt text-xl sm:text-3xl" />
+                            <div class="text-xs md:text-sm lg:text-base">{{ document.name }}</div>
+                        </div>
+                        <div class="bg-black/50 absolute h-full top-0 right-0" :style="`width: ${100-document?.progress}%;`" />
+                        <button @click="removeDocument(document)" class="w-full h-full hidden group-hover:flex absolute backdrop-blur items-center justify-center">
+                            <i class="fa fa-trash-alt text-3xl text-red-800" />
+                        </button>
+                    </div>
+                </template>
+            </Draggable>
+
+            <FileUpload
+                ref="upload"
+                v-model="documents"
+                key="documents"
+                input-id="documents"
+                :post-action="`${api}/upload`"
+                :drop="true"
+                :multiple="true"
+                :drop-directory="true"
+                class="w-full aspect-square border-2 dark:border-gray-600 bg-gray-300 dark:bg-gray-800 block cursor-pointer relative rounded"
+            >
+                <div class="w-full h-full flex items-center justify-center">
+                    <i class="fad fa-file-alt text-3xl dark:text-gray-700" />
+                </div>
+                <div class="w-full h-full hidden group-hover:flex absolute backdrop-blur items-center justify-center">
+                    <i class="fa fa-pencil text-3xl text-gray-800" />
+                </div>
+            </FileUpload>
+
+        </div>
+    </div>
+
+</template>
+
+<script>
+import FileUpload from 'vue-upload-component'
+import Draggable from 'vuedraggable'
+import { useModel } from './model'
+
+export default {
+    components: {FileUpload, Draggable},
+    inject: ['axios','api'],
+    props: ['modelValue'],
+    data() {
+        return {
+            // documents: [],
+            sortableDocuments: [],
+        }
+    },
+	setup(props, { emit }) {
+		return {
+			documents: useModel(props, emit, 'modelValue')
+		}
+	},
+    watch: {
+        documents: {
+            handler() {
+                this.sortableDocuments = this.documents?.map(i => ({id:i?.id, url:i?.url, name: i.name})) || []
+
+                let documentsToUpload = this.documents?.filter(i => i.file) || []
+                if (this.$refs.upload) this.$refs.upload.active = true
+                documentsToUpload.forEach(i => i.blob = i.blob ? i.blob : URL.createObjectURL(i.file))
+            },
+            deep: true,
+            immediate: true
+        },
+        urls() {
+            this.$emit('urls', this.urls)
+        }
+    },
+    computed: {
+        done() {
+            return this.documents.every(i => i.progress == 100)
+        },
+        urls() {
+            return this.sortableDocuments.map(document => document.url ? document : this.documents?.find(i => i.id == document.id)?.response?.paths?.[0])
+        }
+    },
+    methods: {
+        removeDocument(document) {
+            let id = document?.id
+            let index = id ? this.documents?.findIndex(i => i.id == id) : this.documents?.findIndex(i => i.url == document.url)
+            console.log('index', index)
+            if (isNaN(index)) return
+            this.documents.splice(index,1)
+        }
+    }
+}
+</script>

package/frontend-starter/src/helpers/uploadImages.vue

@@ -0,0 +1,89 @@
+<template>
+
+    <div class="p-4 rounded-lg bg-gray-100 dark:bg-gray-800/50 w-full space-y-4">
+        <div class="font-semibold uppercase tracking-widest text-gray-500/50 text-sm">Images</div>
+        <div class="w-full grid grid-cols-4 gap-2">
+
+            <Draggable v-model="sortableImages" v-if="sortableImages.length" item-key="id" class="w-full grid grid-cols-4 gap-2 col-span-4" >
+                <template #item="{element:id}">
+                    <div class="bg-center bg-cover w-full aspect-square shrink-0 overflow-hidden rounded relative group" :style="`background-image: url(${images.find(i => i.id == id)?.blob || images.find(i => i.id == id)?.url || `https://api.churchandfamilylife.com/${images.find(i => i.id == id)?.response?.paths?.[0]}`})`">
+                        <div class="bg-black/50 absolute h-full top-0 right-0" :style="`width: ${100-images.find(i => i.id == id)?.progress}%;`" />
+                        <button @click="removeImage(id)" class="w-full h-full hidden group-hover:flex absolute backdrop-blur items-center justify-center">
+                            <i class="fa fa-trash-alt text-3xl text-red-800" />
+                        </button>
+                    </div>
+                </template>
+            </Draggable>
+
+            <FileUpload
+                ref="upload"
+                v-model="images"
+                post-action="https://api.churchandfamilylife.com/upload"
+                :drop="true"
+                :multiple="true"
+                :drop-directory="true"
+                :extensions="['png','jpg','jpeg','heic']"
+                class="w-full aspect-square border-2 dark:border-gray-600 bg-gray-300 dark:bg-gray-800 block cursor-pointer relative rounded"
+            >
+                <div class="w-full h-full flex items-center justify-center">
+                    <i class="fa fa-image text-3xl dark:text-gray-700" />
+                </div>
+                <div class="w-full h-full hidden group-hover:flex absolute backdrop-blur items-center justify-center">
+                    <i class="fa fa-pencil text-3xl text-gray-800" />
+                </div>
+            </FileUpload>
+
+        </div>
+    </div>
+
+</template>
+
+<script>
+import FileUpload from 'vue-upload-component'
+import Draggable from 'vuedraggable'
+
+export default {
+    components: {FileUpload, Draggable},
+    inject: ['axios'],
+    data() {
+        return {
+            images: [],
+            sortableImages: [],
+        }
+    },
+    watch: {
+        images: {
+            handler() {
+                // this.updateImages()
+                console.log('image watcher')
+                console.log('this', this.$refs.upload)
+                this.$refs.upload.active = true
+                this.sortableImages = this.images.map(i => i.id)
+                this.images.forEach(i => i.blob = i.blob ? i.blob : URL.createObjectURL(i.file))
+            },
+            deep: true
+        },
+        urls() {
+            this.$emit('urls', this.urls)
+        },
+
+    },
+    computed: {
+        done() {
+            return this.images.every(i => i.progress == 100)
+        },
+        urls() {
+            return this.sortableImages.map(id => this.images?.find(i => i.id == id)?.response?.paths?.[0])
+        }
+    },
+    methods: {
+        removeImage(id) {
+            console.log('removing')
+            let index = this.images?.findIndex(i => i.id == id)
+            console.log('index', index)
+            if (isNaN(index)) return
+            this.images.splice(index,1)
+        }
+    }
+}
+</script>

package/frontend-starter/src/helpers/user.js

@@ -0,0 +1,40 @@
+import { ref } from 'vue'
+import Mango from './mango'
+
+const getUser = async (user) => {
+
+    user = user || { value: {} }
+
+    if (window.user?.id) {
+
+        console.log('got it!')
+        user.value = window.user
+
+        /*
+        Gotta clear this out so next time
+        we try to call getUser we don't get
+        stale data. ;)
+        */
+        window.user = null
+        return user.value
+    }
+
+    let userId = window.localStorage.getItem('user')
+
+    if (!userId) return {}
+
+    user.value = await Mango.member(userId, { depthLimit: 0 }).then(r => user.value = r)
+
+    return user.value
+
+}
+
+const initUser = () => {
+
+    const user = ref({})
+    getUser(user)
+    return user
+
+}
+
+export { initUser, getUser }

package/frontend-starter/src/index.css

@@ -0,0 +1,281 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.article a {
+	@apply font-semibold cursor-pointer
+}
+
+.article a:hover {
+	@apply underline
+}
+
+.article p,
+.article div,
+.article ul,
+.article ol,
+.article h2,
+.article h3,
+.article h4,
+.article blockquote {
+	@apply mt-4 text-sm leading-relaxed break-words
+}
+
+.article li {
+	@apply mt-2
+}
+
+.article h2 {
+	@apply text-base font-semibold
+}
+
+.article > :first-child,
+.article > :first-child > :first-child,
+.article > :first-child > :first-child > :first-child {
+	margin-top: 0px!important;
+}
+
+.article > .ql-container > .ql-editor > :first-child,
+.article > .ql-container > .ql-editor > :first-child > :first-child,
+.article > .ql-container > .ql-editor > :first-child > :first-child > :first-child {
+	margin-top: 0px!important;
+}
+/*.article > :first-child > :first-of-type {
+	margin-top: 0px
+}*/
+
+/*.ql-editor > :first-child {
+	margin-top: 0px
+}*/
+
+.article blockquote {
+	@apply
+		px-8
+		italic
+		text-gray-600
+}
+
+@screen md {
+    .article p,
+    .article div,
+    .article ul,
+    .article ol,
+    .article h2,
+    .article h3,
+    .article h4,
+    .article blockquote {
+        @apply mt-8 text-base leading-relaxed
+    }
+
+    .article li {
+        @apply mt-4
+    }
+
+    .article h2 {
+        @apply text-2xl font-semibold
+    }
+}
+
+
+.space-1 {
+    @apply p-4
+}
+
+@screen md {
+    .space-1 {
+        @apply p-6
+    }
+}
+
+@screen xl {
+    .space-1 {
+        @apply p-8
+    }
+}
+
+
+
+.book-article a {
+	@apply font-semibold cursor-pointer
+}
+
+.book-article a:hover {
+	@apply underline
+}
+
+@screen md {
+
+    .book-article p,
+    .book-article div,
+    .book-article ul,
+    .book-article ol,
+    .book-article h2,
+    .book-article h3,
+    .book-article h4,
+    .book-article blockquote {
+        @apply mt-16
+    }
+
+    .book-article li {
+        @apply mt-8
+    }
+
+    .book-article h2 {
+        @apply text-5xl font-semibold
+    }
+}
+
+.book-article p,
+.book-article div,
+.book-article ul,
+.book-article ol,
+.book-article h2,
+.book-article h3,
+.book-article h4,
+.book-article blockquote {
+	@apply mt-8
+}
+
+.book-article ul {
+	@apply list-disc
+}
+
+.book-article li {
+	@apply mt-4
+}
+
+.book-article h2 {
+	@apply text-2xl font-bold
+}
+
+.book-article > :first-child,
+.book-article > :first-child > :first-child,
+.book-article > :first-child > :first-child > :first-child {
+	margin-top: 0px!important;
+}
+
+.book-article > .ql-container > .ql-editor > :first-child,
+.book-article > .ql-container > .ql-editor > :first-child > :first-child,
+.book-article > .ql-container > .ql-editor > :first-child > :first-child > :first-child {
+	margin-top: 0px!important;
+}
+/*.book-article > :first-child > :first-of-type {
+	margin-top: 0px
+}*/
+
+/*.ql-editor > :first-child {
+	margin-top: 0px
+}*/
+
+.book-article blockquote {
+	@apply
+		px-8
+		italic
+		text-gray-500
+}
+
+
+.ql-clipboard,
+.ql-tooltip {
+    display: none!important;
+}
+
+.ql-editor {
+    outline: none!important;
+}
+
+table.schedule {
+    @apply
+        my-4
+        w-full
+        text-xs
+        border-y
+        table-auto
+        border-collapse
+        dark:text-gray-500
+        dark:border-gray-800
+}
+
+table.schedule tr:nth-child(odd) {
+	@apply bg-gray-100 dark:bg-gray-800
+}
+
+table.schedule td {
+	@apply m-0 p-2
+}
+
+
+@screen md {
+    table.schedule {
+        @apply
+            my-8
+            text-sm
+    }
+
+    table.schedule td {
+        @apply m-0 p-4
+    }
+}
+
+
+.article-xs p,
+.article-xs div,
+.article-xs ul,
+.article-xs ol,
+.article-xs h2,
+.article-xs h3,
+.article-xs h4,
+.article-xs blockquote {
+    @apply mt-2 text-xs leading-relaxed
+}
+
+.article-xs li {
+    @apply mt-1
+}
+
+.article-xs h2 {
+    @apply text-sm
+}
+
+.article-sm p,
+.article-sm div,
+.article-sm ul,
+.article-sm ol,
+.article-sm h2,
+.article-sm h3,
+.article-sm h4,
+.article-sm blockquote {
+    @apply mt-4 text-sm leading-relaxed
+}
+
+.article-sm li {
+    @apply mt-2
+}
+
+.article-sm h2 {
+    @apply text-base
+}
+
+.article-md p,
+.article-md div,
+.article-md ul,
+.article-md ol,
+.article-md h2,
+.article-md h3,
+.article-md h4,
+.article-md blockquote {
+    @apply mt-4 text-base leading-relaxed
+}
+
+.article-md li {
+    @apply mt-2
+}
+
+.article-md h2 {
+    @apply text-2xl
+}
+
+.video-container,
+.video-container iframe {
+    @apply aspect-video w-full !h-auto
+}