mango-cms 0.0.13

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

@@ -0,0 +1,455 @@
+<template>
+	<div v-infinite-scroll="loadMore">
+		<slot :data="data" :loading="loading" :loadingPage="loadingPage" :totalResults="totalResults" :save="save" :saving="saving" />
+	</div>
+</template>
+
+<script setup>
+import Mango from './mango'
+import Swal from 'sweetalert2'
+import 'sweetalert2/dist/sweetalert2.min.css';
+// import { siteName } from '../../../mango/config/settings.json'
+import { siteName } from '../../../config/config/settings.json'
+import rws from './reconnecting-websocket'
+
+import { ref, watch, computed, nextTick, onUnmounted } from 'vue'
+// import { useRouter, useRoute, onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
+import { useRoute, onBeforeRouteLeave } from 'vue-router'
+
+const props = defineProps({
+    collection: {type: String},
+    algoliaSearch: {type: String},
+    algoliaFilters: {type: String},
+    id: {type: String},
+    query: {type: Object},
+    graphql: {type: String},
+    debounce: {type: Number, default: 500},
+    infinite: {type: Boolean, default: false},
+    suspend: {type: Boolean, default: false},
+    disabled: {type: Boolean, default: false},
+    main: {type: Boolean, default: false},
+    globalSearch: {type: Boolean, default: false},
+    subscribe: {type: Boolean, default: false},
+})
+
+/*
+    If I comment this out, some things are fixed and others are broken...
+*/
+onBeforeRouteLeave((to, from) => {
+    // console.log('onBeforeRouteLeave')
+    active.value = false
+})
+
+const emit = defineEmits(['update:data'])
+
+let webSocket
+
+// const router = useRouter()
+const route = useRoute()
+
+let active = ref(true)
+let autoPage = ref(null)
+let loadingPage = ref(false)
+let noneRemain = ref(false)
+let saving = ref(false)
+let inferedCollection = ref(props.collection || props.query?.collection || route.path.split('/')?.[1] || null)
+
+let loading = ref(false)
+let data = ref(null)
+let error = ref(null)
+let totalResults = ref(null)
+let oldQuery = JSON.stringify(props.query || {})
+
+let inferedId = computed(() => props.id !== undefined ? props.id : props.query?.id || route.params?.id || null )
+let searchingAlgolia = computed(() => !!props.algoliaSearch || !!props.algoliaFilters )
+
+let debounceInit = computed(() => {
+    let timer;
+    return (...args) => {
+        if (active.value === false || props.disabled) return
+        loading.value = true
+        clearTimeout(timer);
+        timer = setTimeout(() => { init.apply(this, args); }, props.debounce);
+    };
+})
+
+watch(() => props.query, (n, o) => {
+    let newQuery = JSON.stringify(n)
+    if (oldQuery != newQuery) defer(newQuery, oldQuery, 'query')
+}, { deep: true })
+
+watch(inferedId, (n, o) => defer(null, null, 'id'))
+watch(() => props.collection, (n, o) => defer(null, null, 'collection'))
+watch(() => props.algoliaSearch, (n, o) => searchingAlgolia.value ? debounceInit.value() : init())
+watch(() => props.algoliaFilters, (n, o) => searchingAlgolia.value ? debounceInit.value() : init())
+watch(loading, (n, o) => emit('update:loading', loading.value))
+watch(data, () => {
+    if (data?.value?.length && props.query?.limit && data?.value?.length < props.query?.limit) noneRemain.value = true
+    if (data?.value) emit('update:data', data.value)
+})
+
+
+function defer(n,o,origin) {
+    console.log('n,o,origin', n,o,origin)
+    if (n == o && origin == 'query') return console.log(`they're the same...`)
+    if (origin == 'query') oldQuery = n
+    nextTick(() => init())
+}
+
+async function loadMore() {
+
+    // console.log('loadMore')
+
+    if (!props.infinite || !data?.value?.length || loadingPage.value || noneRemain.value || props.disabled) return
+    loadingPage.value = true
+    let query = props.query ? JSON.parse(JSON.stringify(props.query)) : {}
+    if (query.search && !query.search?.wordSearch) delete query.search.wordSearch
+    autoPage.value ++
+    query.page = autoPage.value
+    if (searchingAlgolia.value) {
+        var nextPage = (await Mango[inferedCollection.value].search(props.algoliaSearch, query, props.algoliaFilters))?.hits
+    } else if (inferedCollection.value?.includes('/')) {
+        var nextPage = await Mango.relationRequest({...query, path: inferedCollection.value})
+    } else {
+        var nextPage = await Mango[inferedCollection.value](query)
+    }
+    if (nextPage.length) data.value = data.value.concat(nextPage)
+    if (!nextPage.length || (query.limit && nextPage.length < query.limit)) noneRemain.value = true
+    loadingPage.value = false
+
+}
+
+async function init() {
+
+    console.log('init')
+
+    // If the main entry is provided in ssr
+    if (props.main && window.mainEntry?.id == inferedId.value) {
+        data.value = window.mainEntry
+        window.mainEntry = null
+        emit('update:data', data.value)
+        return
+    }
+
+    if (active.value === false || props.disabled) return
+
+    console.log('active', active.value)
+
+    loading.value = true
+    data.value = null
+    noneRemain.value = false
+    autoPage.value = props.query?.page || 0
+
+    // Using the computed here won't work because it hasn't been computed yet
+    let searchingAlgolia = !!props.algoliaSearch || !!props.algoliaFilters
+
+    if (props.graphql){
+        data.value = await Mango.graphql(props.graphql)
+        emit('update:data', data.value)
+        loading.value = false
+        return
+    }
+
+    let collection = inferedCollection.value
+    let validatedCollection = Mango.collections.find(c => c.name == collection)
+    let id = props.id || props.query?.id || route.params?.id || null
+    if (props.id !== undefined) id = props.id // So you can pass null to id and get a list
+
+    let query = props.query ? JSON.parse(JSON.stringify(props.query)) : {}
+    if (query.search && !query.search?.wordSearch) delete query.search.wordSearch // So empty search still returns something
+
+    if (inferedCollection.value?.includes('/')) {
+        data.value = await Mango.relationRequest({...query, path: inferedCollection.value})
+        emit('update:data', data.value)
+        loading.value = false
+        return
+    }
+
+    // Global Algolia Search
+    if (props.globalSearch) {
+        data.value = await Mango.search(props.algoliaSearch, query, props.algoliaFilters)
+        emit('update:data', data.value)
+        loading.value = false
+        return
+    }
+
+    if (!validatedCollection) return console.error(`🥭 ${collection} is not a valid collection.`)
+    if (id && !searchingAlgolia) collection = validatedCollection.singular
+    // if (id) query = id
+
+    console.log('collection, id:', collection, id)
+    // console.log('collection', collection)
+
+    if (searchingAlgolia) {
+        console.log('collection', collection)
+        let algoliaResponse = await Mango[collection].search(props.algoliaSearch, query, props.algoliaFilters)
+        data.value = algoliaResponse.hits
+        totalResults.value = algoliaResponse.nbHits
+        emit('update:data', data.value)
+        loading.value = false
+    } else {
+        if (id) data.value = await Mango[collection](id, query)
+        else data.value = await Mango[collection](query)
+
+        emit('update:data', data.value)
+        loading.value = false
+
+        if (id && props.main) document.title = data.value?.title || siteName
+        else document.title = siteName
+
+        if (props.subscribe) {
+
+            let sub = function() {
+                let subscribeCollection = `${validatedCollection.singular}Change`
+                console.log('subscribeCollection', subscribeCollection)
+                subscribe(subscribeCollection, id)
+            }
+
+            sub()
+
+            let hidden;
+            let visibilityChange;
+            if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
+                hidden = "hidden";
+                visibilityChange = "visibilitychange";
+            } else if (typeof document.msHidden !== "undefined") {
+                hidden = "msHidden";
+                visibilityChange = "msvisibilitychange";
+            } else if (typeof document.webkitHidden !== "undefined") {
+                hidden = "webkitHidden";
+                visibilityChange = "webkitvisibilitychange";
+            }
+
+            document.addEventListener(visibilityChange, () => {
+                if (!document[hidden]) {
+                    // Ensure connectivity
+                    console.log('ensure connectivity')
+                    init()
+                }
+
+                // else {
+                //     if (webSocket?.send) {
+                //         webSocket.send(JSON.stringify({
+                //             type: GQL.CONNECTION_TERMINATE
+                //         }))
+                //     }
+                //     webSocket = null
+                // }
+            }, false)
+
+        }
+
+
+        return
+    }
+
+}
+
+const GQL = {
+    CONNECTION_INIT: 'connection_init',
+    CONNECTION_ACK: 'connection_ack',
+    CONNECTION_ERROR: 'connection_error',
+    CONNECTION_KEEP_ALIVE: 'ka',
+    START: 'start',
+    STOP: 'stop',
+    CONNECTION_TERMINATE: 'connection_terminate',
+    DATA: 'data',
+    ERROR: 'error',
+    COMPLETE: 'complete'
+}
+function subscribe(collection, id) {
+
+    webSocket = new rws(Mango.ws, 'graphql-ws')
+
+    webSocket.onopen = event => {
+
+        webSocket.send(JSON.stringify({
+            type: GQL.CONNECTION_INIT,
+            payload: {}
+        }))
+
+        webSocket.send(JSON.stringify({
+            type: GQL.START,
+            id: Date.now(),
+            payload: {
+                query: `
+                subscription {
+                    ${collection}(id: "${id}") {
+                        id
+                        settings {
+                            clueTimeLimit
+                            guessTimeLimit
+                        }
+                        guesses {
+                            word
+                            playerId
+                            time
+                        }
+                        clue {
+                            text
+                            number
+                            time
+                            team
+                            words
+                            guesses
+                        }
+                        words {
+                            value
+                            color
+                            guessed
+                        }
+                    }
+                }`,
+                variables: {},
+                operationName: null
+            }
+        }))
+    }
+
+    webSocket.onmessage = event => {
+        const response = JSON.parse(event.data)
+        switch (response.type) {
+            case GQL.CONNECTION_ACK: {
+                console.log('success')
+                break
+            }
+            case GQL.CONNECTION_ERROR: {
+                console.error(response.payload)
+                break
+            }
+            case GQL.CONNECTION_KEEP_ALIVE: {
+                break
+            }
+            case GQL.DATA: {
+                console.log(response.id, response.payload.errors, response.payload.data)
+                if (response.payload.data) {
+                    data.value = response.payload.data[collection]
+                    emit('update:data', data.value)
+                }
+                break
+            }
+            case GQL.COMPLETE: {
+                console.log('completed', response.id)
+                break
+            }
+        }
+    }
+}
+
+onUnmounted(() => {
+    if (webSocket?.send) {
+        webSocket.send(JSON.stringify({
+            type: GQL.CONNECTION_TERMINATE
+        }))
+    }
+})
+
+// init()
+// await init()
+
+if (props.suspend) {
+    await init()
+} else {
+    init()
+}
+</script>
+
+<script>
+export default {
+    directives: {
+        infiniteScroll: {
+            mounted(element, binding) {
+                document.addEventListener("scroll", () => binding.dir.methods.handleScroll(element, binding.value))
+            },
+            unmounted(element, binding) {
+                document.removeEventListener("scroll", () => binding.dir.methods.handleScroll(element, binding.value))
+            },
+            methods: {
+                handleScroll(element, method) {
+                    // console.log('triggered')
+                    if (element.getBoundingClientRect().bottom - 100 < window.innerHeight) method()
+                }
+            }
+        }
+    },
+	watch: {
+        // id: 'defer',
+        // inferedId: 'oldDefer',
+        // collection: 'oldDefer',
+		// query: {
+		// 	handler(n, o) {
+        //         let oldQuery = JSON.stringify(o)
+        //         let newQuery = JSON.stringify(n)
+        //         if (oldQuery != newQuery) console.log(`but they're not the same!`)
+        //         this.defer(newQuery, oldQuery, 'query')
+        //     },
+		// 	deep: true,
+		// },
+		// algoliaSearch() {
+		// 	if (this.searchingAlgolia) this.debounceInit()
+		// 	else this.init()
+		// },
+		// data() {
+		// 	if (this.data?.length && this.query?.limit && this.data?.length < this.query?.limit) {
+		// 		this.noneRemain = true
+		// 	}
+        //     if (this.data) this.$emit('update:data', this.data)
+		// }
+	},
+	computed: {
+		// searchingAlgolia() {return !!this.algoliaSearch},
+		// inferedId() { return this.id !== undefined ? this.id : this.query?.id || this.$route.params?.id || null },
+		// debounceInit() {
+		// 	let timer;
+		// 	return (...args) => {
+		// 		this.loading = true
+		// 		clearTimeout(timer);
+		// 		timer = setTimeout(() => { this.init.apply(this, args); }, this.debounce);
+		// 	};
+		// }
+	},
+	methods: {
+		// async loadMore() {
+
+        //     console.log('loadMore')
+
+		// 	if (!this.infinite || !this.data?.length || this.loadingPage || this.noneRemain) return
+		// 	this.loadingPage = true
+		// 	let query = this.query ? JSON.parse(JSON.stringify(this.query)) : {}
+        //     if (query.search && !query.search?.wordSearch) delete query.search.wordSearch
+		// 	this.autoPage ++
+		// 	query.page = this.autoPage
+		// 	if (this.searchingAlgolia) {
+		// 		var nextPage = await Mango[this.inferedCollection].search(this.algoliaSearch, query)
+		// 	} else {
+		// 		var nextPage = await Mango[this.inferedCollection](query)
+		// 	}
+		// 	if (nextPage.length) this.data = this.data.concat(nextPage)
+		// 	if (!nextPage.length || (query.limit && nextPage.length < query.limit)) this.noneRemain = true
+		// 	this.loadingPage = false
+
+		// },
+        // oldDefer(n,o,origin) {
+        //     console.log('n,o,origin', n,o,origin)
+        //     if (n == o) { console.log(`they're the same...`); return }
+        //     this.$nextTick(() => this.init())
+        // },
+        async save(data) {
+            data = data || this.data
+            if (Array.isArray(data)) {
+                console.log('You can only call save after querying for an individual document.')
+                return
+            } else {
+                if (this.saving) return
+                this.saving = true
+                let response = await Mango[this.inferedCollection].save(data)
+                this.saving = false
+                // if (response?.id) return Swal.fire({ title: 'Success!', icon: 'success', confirmButtonText: 'Awesome!' })
+                // return Swal.fire({ title: 'Error 😬', icon: 'error' })
+            }
+        }
+	},
+    activated() { this.active = true },
+    deactivated() { this.active = false },
+}
+</script>

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

@@ -0,0 +1,34 @@
+import { reactive } from 'vue'
+
+const screens = {
+    '2xs': 425,
+    xs: 475,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280
+}
+
+const breakpoints = reactive({ xs: false, sm: false, md: false, lg: false, xl: false })
+
+const setBreakpoint = () => {
+    breakpoints['2xs'] = window.innerWidth >= screens['2xs']
+    breakpoints.xs = window.innerWidth >= screens.xs
+    breakpoints.sm = window.innerWidth >= screens.sm
+    breakpoints.md = window.innerWidth >= screens.md
+    breakpoints.lg = window.innerWidth >= screens.lg
+    breakpoints.xl = window.innerWidth >= screens.xl
+}
+
+const useBreakpoint = () => {
+
+    setBreakpoint()
+    window.addEventListener('resize', setBreakpoint)
+
+    return {
+        breakpoints
+    }
+}
+
+export default useBreakpoint
+export { screens }

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

@@ -0,0 +1,38 @@
+import { reactive } from 'vue'
+
+const toggle = () => {
+    console.log('toggle')
+    if (darkMode.enabled) {
+        window.localStorage.setItem('darkMode', 'false')
+    } else {
+        window.localStorage.setItem('darkMode', 'true')
+    }
+    checkDarkMode()
+
+}
+
+const darkMode = reactive({ enabled: false, toggle })
+
+const systemChange = () => {
+    window.localStorage.removeItem('darkMode')
+    darkMode.enabled = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+
+const checkDarkMode = () => {
+    let storedValue = window.localStorage.getItem('darkMode')
+    let enabledLocally = storedValue != null
+    let localBoolean = storedValue == 'true' ? true : false
+    let systemPreference = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    darkMode.enabled = enabledLocally ? localBoolean : systemPreference
+}
+
+const useDarkMode = () => {
+
+    checkDarkMode()
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', systemChange)
+
+    return { darkMode }
+
+}
+
+export default useDarkMode

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

@@ -0,0 +1,32 @@
+import Swal from "sweetalert2"
+import axios from "axios"
+
+function validateEmail(email) {
+    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return re.test(String(email.trim()).toLowerCase());
+}
+
+function subscribeToMailChimp({ email, list, source, alert }) {
+
+    let lists = {
+        master: '816047355d',
+        devotional: '5fbac827f8'
+    }
+
+    let listId = lists[list]
+
+    if (!listId) return console.error(`"${list}" is not a valid email list`)
+    if (!source) return console.error(`You must provide a subscription source`)
+
+    if (!validateEmail(email)) {
+        new Swal('Invalid Email', `"${email}" is not a valid email address`, 'warning')
+        return console.error(`"${email}" is not a valid email address`)
+    }
+
+    axios.get(`https://ncfic.us2.list-manage.com/subscribe/post-json?u=12eae89c5f8969e490844c75a&id=${listId}&c=jQuery190019886783748288184_1530501492048&MMERGE3=${source}&EMAIL=${email}&b_12eae89c5f8969e490844c75a_816047355d=&subscribe=Subscribe&_=1530501492049`)
+        .then(response => { if (alert) new Swal('Subscribed!', 'Thank you for subscribing.', 'success') })
+        // MC apparently doesn't give a proper error message we can read at the time of writing this...
+        .catch(response => { if (alert) new Swal('Subscribed!', 'Thank you for subscribing.', 'success') })
+}
+
+export { subscribeToMailChimp, validateEmail }

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

@@ -0,0 +1,18 @@
+export default (phone) => {
+    if (!phone) return ''
+    let formattedPhoneNumber = ''
+    let number = phone.replace(/\D/g, '').split('')
+    if (number.length == 11) {
+        formattedPhoneNumber += '+' + number[0] + ' '
+        number.splice(0, 1)
+    }
+    for (let [index, digit] in number) {
+        if (number.length >= 3) {
+            if (index == 0) formattedPhoneNumber += '('
+            if (index == 6) formattedPhoneNumber += '-'
+            if (number[index]) formattedPhoneNumber += number[index]
+            if (index == 2) formattedPhoneNumber += ') '
+        }
+    }
+    return formattedPhoneNumber
+}