mango-cms 0.0.13

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

@@ -0,0 +1,252 @@
+<template>
+    <div class="w-full group flex flex-col relative">
+
+        <!-- <div v-if="modelSelectedEntries" class="space-y-2 mb-2">
+            <div v-for="entry in modelSelectedEntries" :key="entry.id" class="flex items-center space-x-4 border dark:border-gray-500 p-2 md:p-4 rounded-lg relative overflow-hidden">
+                <div
+                    v-if="image"
+                    class="rounded-full shrink-0 w-6 h-6 md:w-8 md:h-8 bg-gray-800 dark:bg-gray-700 uppercase text-white relative flex items-center justify-center bg-cover bg-center"
+                    :style="`background-image: url(${entry?.image?.url})`"
+                    v-html="entry?.image?.url ? '' : entry.title[0]"
+                />
+                <div class="">{{ entry.title }}</div>
+                <button @click="remove(entry.id)" class="flex opacity-0 hover:opacity-100 bg-gray-500/75 backdrop-blur-[1px] absolute top-0 left-0 !m-0 items-center justify-center h-full w-full">
+                    <i class="far fa-trash-alt text-white text-lg" />
+                </button>
+            </div>
+        </div> -->
+
+        <Draggable v-model="selectedEntries" v-show="selectedEntries?.length" item-key="id" class="divide-y dark:divide-gray-800 overflow-scroll max-h-[25vh] w-full" :class="{'mb-2': multiple}" >
+            <template #item="{element}">
+                <div class="space-y-2">
+                    <div class="flex items-center space-x-4 p-2 relative w-full hover:bg-gray-100 dark:hover:bg-gray-700">
+                        <div v-if="multiple" class="cursor-pointer"><i class="fal fa-grip-lines" /></div>
+                        <div
+                            v-if="image"
+                            class="rounded-full shrink-0 w-6 h-6 md:w-8 md:h-8 bg-gray-800 dark:bg-gray-700 uppercase text-white relative flex items-center justify-center bg-cover bg-center"
+                            :style="`background-image: url(${element?.image?.url || element?.bannerImage?.url})`"
+                            v-html="element?.image?.url || element?.bannerImage?.url ? '' : element?.title?.[0]"
+                        />
+                        <div class="flex-grow">{{ element?.title }}</div>
+                        <button @click="remove(element?.id)" class="sm:hidden group-hover:block">
+                            <i class="fal fa-trash-alt text-red-500 text-lg" />
+                        </button>
+                    </div>
+                </div>
+            </template>
+        </Draggable>
+
+        <button class="text-sm text-gray-500 px-3 py-2 border-2 dark:border-gray-700 rounded" @click="enableSearch" v-show="!add && (!selectedEntries?.length || multiple)">{{ placeholder || `Add ${singular}` }}</button>
+        <input
+            v-show="add && (!selectedEntries?.length || multiple)"
+            ref="input"
+            type="text" :placeholder="placeholder || `Search`"
+            v-model="search" @keydown.enter="select(targetId)"
+            @keydown.up="previous" @keydown.down="next"
+            class="w-full bg-transparent"
+            :class="inputStyle"
+        />
+
+        <div class="relative hidden group-focus-within:block">
+            <div class="absolute top-0 left-0 w-full z-50">
+                <!-- v-if="search" -->
+                <Mango
+                    :algoliaSearch="search"
+                    :algoliaFilters="algoliaFilters"
+                    :query="{fields:['id','title','image','address','speakers']}"
+                    :collection="collection" :id="null"
+                    v-slot="{loading}"
+                    @update:data="hits = $event"
+                    :disabled="!!facet"
+                    class="max-w-xs bg-white dark:bg-gray-800 z-10
+                    w-full rounded-lg shadow-card "
+                >
+                    <div v-if="loading || loadingFacets" class="w-full flex items-center justify-center"><Spinner :small="true" class="w-8 h-8 m-8" /></div>
+                    <div v-else-if="create || hits.length" class="divide-y dark:divide-gray-500 overflow-scroll max-h-60 border-2 dark:border-gray-500 rounded-lg" ref="scrollContainer">
+                        <div
+                            tabindex="0"
+                            v-if="create && search"
+                            class="flex items-center p-4 space-x-4 w-full hover:bg-green-50 cursor-pointer"
+                            @click.stop="select('new')"
+                        >
+                            <div class="rounded-full shrink-0 w-8 h-8 bg-gray-800 flex items-center justify-center bg-green-500">
+                                <i class="fa fa-plus text-white" />
+                            </div>
+                            <div class="">Add New</div>
+                        </div>
+                        <div
+                            tabindex="0"
+                            v-for="entry in hits"
+                            :key="entry.id"
+                            class="flex items-center p-4 space-x-4 w-full cursor-pointer"
+                            @mouseenter="targetId = entry.id"
+                            :class="{'bg-blue-50 dark:bg-gray-900': targetId == entry.id, 'bg-green-50 dark:bg-green-600/40': selectedIds?.includes(entry.id)}"
+                            :ref="setItemRef"
+                            @click.stop="select(entry.id)"
+                        >
+                            <div v-if="selectedIds?.includes(entry?.id)" class="rounded-full shrink-0 w-8 h-8 bg-gray-800 flex items-center justify-center bg-green-500">
+                                <i class="fa fa-check text-white" />
+                            </div>
+                            <div
+                                v-else-if="image"
+                                class="rounded-full shrink-0 w-8 h-8 bg-gray-700 uppercase text-white relative flex items-center justify-center bg-cover bg-center"
+                                :style="`background-image: url(${entry?.image?.url})`"
+                                v-html="entry?.image?.url ? '' : entry?.title?.[0]"
+                            />
+                            <div class="text-left truncate">
+                                <div class="truncate">{{ entry?.title }}</div>
+                                <div class="text-sm self-start text-gray-500">
+                                    <template v-if="collection == 'churches'">{{ entry?.address?.city }}, {{ entry?.address?.state }}</template>
+                                    <template v-if="collection == 'sermons'">{{ entry?.speakers?.map(s => s?.title)?.join(',') }}</template>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </Mango>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import { algoliaAppId, algoliaSearchKey, algoliaIndex } from '../../../mango/config/settings.json'
+import collections from '../../../mango/config/.collections.json'
+import algoliasearch from 'algoliasearch/lite'
+import Draggable from 'vuedraggable'
+
+const client = algoliasearch(algoliaAppId, algoliaSearchKey);
+const algolia = client.initIndex(algoliaIndex);
+
+import { useModel } from '../helpers/model'
+import Mango from './mango'
+import Swal from 'sweetalert2'
+export default {
+    components: {Draggable},
+    props: {
+        multiple: {type: Boolean, default: true},
+        image: {type: Boolean, default: true},
+        create: {type: Boolean, default: false},
+        collection: {},
+        placeholder: {},
+        facet: {},
+        modelSelectedIds: {default: [], type: Array},
+        modelSelectedEntries: {default: [], type: Array},
+        algoliaFilters: {default: null},
+        inputStyle: {default: null},
+        newEntryFields: {default: {}, type: Object},
+    },
+	setup(props, { emit }) {
+		return {
+            selectedIds: useModel(props, emit, 'modelSelectedIds'),
+			selectedEntries: useModel(props, emit, 'modelSelectedEntries')
+		}
+	},
+    data() {
+        return {
+            search: null,
+            targetId: null,
+            hits: [],
+            itemRefs:[],
+            // selectedIds: [],
+            // selectedEntries: [],
+            loadingFacets: false,
+            add: false,
+            singular: collections.find(c => c.name == this.collection)?.singular
+        }
+    },
+    watch: {
+        search() {
+            console.log('search changed')
+            this.targetId = null
+            if (this.facet) this.facetSearch()
+        },
+        hits() {
+            if (this.hits?.length) this.targetId = this.hits?.[0]?.id
+        }
+    },
+    methods: {
+        enableSearch() {
+            this.add = true
+            this.$nextTick(() => this.$refs.input.focus())
+        },
+        async facetSearch() {
+            this.loadingFacets = true
+            let {facetHits} = await algolia.searchForFacetValues(this.facet, this.search)
+            this.loadingFacets = false
+            console.log('facetHits', facetHits)
+            this.hits = facetHits.map((hit, index) => ({title: hit.value, id: index}))
+            console.log('this.hits', this.hits)
+        },
+        setItemRef(el) {
+            if (el) this.itemRefs.push(el)
+        },
+        async select(id) {
+
+            // Create the new entry
+            let newEntry
+            if (id == 'new') {
+                this.creatingEntry = true
+                newEntry = await Mango[this.collection].save({ title: this.search, ...this.newEntryFields })
+                this.creatingEntry = false
+                id = newEntry.id
+                if (!id) return Swal.fire({icon: 'error', title: 'Error creating new entry'})
+            }
+
+            this.$emit('selected', id)
+
+            this.selectedIds = Array.isArray(this.selectedIds) ? [...this.selectedIds, id] : [id]
+            this.$emit('selectedIds', this.selectedIds)
+
+            let selectedEntry = newEntry || this.hits.find(h => h.id == id)
+            this.selectedEntries.push(selectedEntry)
+            this.$emit('selectedEntries', this.selectedEntries)
+
+            this.search = null
+            this.targetId = null
+            this.add = false
+
+        },
+        remove(id) {
+            let idIndex = this.selectedIds.findIndex(i => i == id)
+            this.selectedIds.splice(idIndex, 1)
+
+            let selectedEntryIndex = this.selectedEntries.findIndex(h => h.id == id)
+            this.selectedEntries.splice(selectedEntryIndex, 1)
+
+            this.$emit('removed', id)
+            this.$emit('selectedIds', this.selectedIds)
+            this.$emit('selectedEntries', this.selectedEntries)
+
+            this.$forceUpdate()
+        },
+        next() {
+            if (this.targetIndex < 0 && this.hits.length) this.targetId = 0
+            if (this.targetIndex+1 == this.hits.length) return
+            this.targetId = this.hits[this.targetIndex+1].id
+            let offsetTop = this.itemRefs[this.targetIndex].offsetTop
+            console.log('offsetTop', offsetTop)
+            this.$refs.scrollContainer.scrollTop = offsetTop
+        },
+        previous() {
+            if (!this.targetIndex) return
+            this.targetId = this.hits[this.targetIndex-1].id
+            let offsetTop = this.itemRefs[this.targetIndex].offsetTop
+            console.log('offsetTop', offsetTop)
+            this.$refs.scrollContainer.scrollTop = offsetTop
+        }
+    },
+    computed: {
+        targetIndex() { return this.hits.findIndex(h => this.targetId == h.id)},
+    },
+    beforeUpdate() {
+        this.itemRefs = []
+    },
+}
+</script>
+
+<style lang="postcss" scoped>
+input {
+    @apply border rounded outline-blue-400 px-3 py-2 w-full dark:bg-transparent dark:border-gray-600 dark:placeholder-gray-500
+}
+</style>

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

@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <Draggable v-model="selections" v-show="selections?.length" class="flex flex-wrap">
+            <template #item="{element}">
+                <button
+                    @click="remove(element)"
+                    class="rounded text-white px-3 py-2 mr-2 mb-2 group hover:bg-gray-400 relative text-left"
+                    :class="pillBackground"
+                >
+                    <span class="group-hover:text-gray-400">{{ element }}</span>
+                    <div class="group-hover:flex hidden absolute inset-0 items-center justify-center h-full w-full">
+                        <i class="far fa-trash-alt" />
+                    </div>
+                </button>
+            </template>
+        </Draggable>
+        <div>
+            <slot :add="add">
+                <input type="text" @change="add" v-model="value" :placeholder="placeholder" class="text-base">
+            </slot>
+        </div>
+    </div>
+</template>
+
+<script>
+import { useModel } from '../helpers/model'
+import Draggable from 'vuedraggable'
+
+export default {
+    components: {Draggable},
+    props: {
+        modelValue: {default: []},
+        placeholder: {type: String, default: 'Add a selection'},
+        pillBackground: {type: String, default: 'bg-gray-500'},
+        delimiters: {type: Array},
+    },
+    data() {
+        return {
+            value: null
+        }
+    },
+	setup(props, { emit }) {
+		return {
+            selections: useModel(props, emit, 'modelValue'),
+		}
+	},
+    watch: {
+        selections: {
+            handler() { this.$emit('selections', this.selections) },
+            deep: true
+        }
+    },
+    methods: {
+        add(event) {
+            console.log('event', event)
+            let value = [this.value || event]
+            if (this.delimiters) {
+                for (let delimiter of this.delimiters) value = value.flatMap(v => v.split(delimiter))
+            }
+            this.selections = [...new Set([...this.selections, ...value])]
+            this.value = null
+        },
+        remove(element) {
+            let index = this.selections?.findIndex(s => s == element)
+            this.selections.splice(index, 1)
+        }
+    }
+}
+</script>
+
+<style lang="postcss" scoped>
+input {
+    @apply border rounded outline-blue-400 px-3 py-2 w-full dark:bg-transparent dark:border-gray-600 dark:placeholder-gray-600
+}
+</style>

package/frontend-starter/src/helpers/reconnecting-websocket.js

@@ -0,0 +1,357 @@
+// MIT License:
+//
+// Copyright (c) 2010-2012, Joe Walnes
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+/**
+ * This behaves like a WebSocket in every way, except if it fails to connect,
+ * or it gets disconnected, it will repeatedly poll until it successfully connects
+ * again.
+ *
+ * It is API compatible, so when you have:
+ *   ws = new WebSocket('ws://....');
+ * you can replace with:
+ *   ws = new ReconnectingWebSocket('ws://....');
+ *
+ * The event stream will typically look like:
+ *  onconnecting
+ *  onopen
+ *  onmessage
+ *  onmessage
+ *  onclose // lost connection
+ *  onconnecting
+ *  onopen  // sometime later...
+ *  onmessage
+ *  onmessage
+ *  etc...
+ *
+ * It is API compatible with the standard WebSocket API, apart from the following members:
+ *
+ * - `bufferedAmount`
+ * - `extensions`
+ * - `binaryType`
+ *
+ * Latest version: https://github.com/joewalnes/reconnecting-websocket/
+ * - Joe Walnes
+ *
+ * Syntax
+ * ======
+ * var socket = new ReconnectingWebSocket(url, protocols, options);
+ *
+ * Parameters
+ * ==========
+ * url - The url you are connecting to.
+ * protocols - Optional string or array of protocols.
+ * options - See below
+ *
+ * Options
+ * =======
+ * Options can either be passed upon instantiation or set after instantiation:
+ *
+ * var socket = new ReconnectingWebSocket(url, null, { debug: true, reconnectInterval: 4000 });
+ *
+ * or
+ *
+ * var socket = new ReconnectingWebSocket(url);
+ * socket.debug = true;
+ * socket.reconnectInterval = 4000;
+ *
+ * debug
+ * - Whether this instance should log debug messages. Accepts true or false. Default: false.
+ *
+ * automaticOpen
+ * - Whether or not the websocket should attempt to connect immediately upon instantiation. The socket can be manually opened or closed at any time using ws.open() and ws.close().
+ *
+ * reconnectInterval
+ * - The number of milliseconds to delay before attempting to reconnect. Accepts integer. Default: 1000.
+ *
+ * maxReconnectInterval
+ * - The maximum number of milliseconds to delay a reconnection attempt. Accepts integer. Default: 30000.
+ *
+ * reconnectDecay
+ * - The rate of increase of the reconnect delay. Allows reconnect attempts to back off when problems persist. Accepts integer or float. Default: 1.5.
+ *
+ * timeoutInterval
+ * - The maximum time in milliseconds to wait for a connection to succeed before closing and retrying. Accepts integer. Default: 2000.
+ *
+ */
+export default (this, function () {
+
+    if (!('WebSocket' in window)) {
+        return;
+    }
+
+    function ReconnectingWebSocket(url, protocols, options) {
+
+        // Default settings
+        var settings = {
+
+            /** Whether this instance should log debug messages. */
+            debug: false,
+
+            /** Whether or not the websocket should attempt to connect immediately upon instantiation. */
+            automaticOpen: true,
+
+            /** The number of milliseconds to delay before attempting to reconnect. */
+            reconnectInterval: 1000,
+            /** The maximum number of milliseconds to delay a reconnection attempt. */
+            maxReconnectInterval: 30000,
+            /** The rate of increase of the reconnect delay. Allows reconnect attempts to back off when problems persist. */
+            reconnectDecay: 1.5,
+
+            /** The maximum time in milliseconds to wait for a connection to succeed before closing and retrying. */
+            timeoutInterval: 2000,
+
+            /** The maximum number of reconnection attempts to make. Unlimited if null. */
+            maxReconnectAttempts: null,
+
+            /** The binary type, possible values 'blob' or 'arraybuffer', default 'blob'. */
+            binaryType: 'blob'
+        }
+        if (!options) { options = {}; }
+
+        // Overwrite and define settings with options if they exist.
+        for (var key in settings) {
+            if (typeof options[key] !== 'undefined') {
+                this[key] = options[key];
+            } else {
+                this[key] = settings[key];
+            }
+        }
+
+        // These should be treated as read-only properties
+
+        /** The URL as resolved by the constructor. This is always an absolute URL. Read only. */
+        this.url = url;
+
+        /** The number of attempted reconnects since starting, or the last successful connection. Read only. */
+        this.reconnectAttempts = 0;
+
+        /**
+         * The current state of the connection.
+         * Can be one of: WebSocket.CONNECTING, WebSocket.OPEN, WebSocket.CLOSING, WebSocket.CLOSED
+         * Read only.
+         */
+        this.readyState = WebSocket.CONNECTING;
+
+        /**
+         * A string indicating the name of the sub-protocol the server selected; this will be one of
+         * the strings specified in the protocols parameter when creating the WebSocket object.
+         * Read only.
+         */
+        this.protocol = null;
+
+        // Private state variables
+
+        var self = this;
+        var ws;
+        var forcedClose = false;
+        var timedOut = false;
+        var eventTarget = document.createElement('div');
+
+        // Wire up "on*" properties as event handlers
+
+        eventTarget.addEventListener('open', function (event) { self.onopen(event); });
+        eventTarget.addEventListener('close', function (event) { self.onclose(event); });
+        eventTarget.addEventListener('connecting', function (event) { self.onconnecting(event); });
+        eventTarget.addEventListener('message', function (event) { self.onmessage(event); });
+        eventTarget.addEventListener('error', function (event) { self.onerror(event); });
+
+        // Expose the API required by EventTarget
+
+        this.addEventListener = eventTarget.addEventListener.bind(eventTarget);
+        this.removeEventListener = eventTarget.removeEventListener.bind(eventTarget);
+        this.dispatchEvent = eventTarget.dispatchEvent.bind(eventTarget);
+
+        /**
+         * This function generates an event that is compatible with standard
+         * compliant browsers and IE9 - IE11
+         *
+         * This will prevent the error:
+         * Object doesn't support this action
+         *
+         * http://stackoverflow.com/questions/19345392/why-arent-my-parameters-getting-passed-through-to-a-dispatched-event/19345563#19345563
+         * @param s String The name that the event should use
+         * @param args Object an optional object that the event will use
+         */
+        function generateEvent(s, args) {
+            var evt = document.createEvent("CustomEvent");
+            evt.initCustomEvent(s, false, false, args);
+            return evt;
+        };
+
+        this.open = function (reconnectAttempt) {
+            ws = new WebSocket(self.url, protocols || []);
+            ws.binaryType = this.binaryType;
+
+            if (reconnectAttempt) {
+                if (this.maxReconnectAttempts && this.reconnectAttempts > this.maxReconnectAttempts) {
+                    return;
+                }
+            } else {
+                eventTarget.dispatchEvent(generateEvent('connecting'));
+                this.reconnectAttempts = 0;
+            }
+
+            if (self.debug || ReconnectingWebSocket.debugAll) {
+                console.debug('ReconnectingWebSocket', 'attempt-connect', self.url);
+            }
+
+            var localWs = ws;
+            var timeout = setTimeout(function () {
+                if (self.debug || ReconnectingWebSocket.debugAll) {
+                    console.debug('ReconnectingWebSocket', 'connection-timeout', self.url);
+                }
+                timedOut = true;
+                localWs.close();
+                timedOut = false;
+            }, self.timeoutInterval);
+
+            ws.onopen = function (event) {
+                clearTimeout(timeout);
+                if (self.debug || ReconnectingWebSocket.debugAll) {
+                    console.debug('ReconnectingWebSocket', 'onopen', self.url);
+                }
+                self.protocol = ws.protocol;
+                self.readyState = WebSocket.OPEN;
+                self.reconnectAttempts = 0;
+                var e = generateEvent('open');
+                e.isReconnect = reconnectAttempt;
+                reconnectAttempt = false;
+                eventTarget.dispatchEvent(e);
+            };
+
+            ws.onclose = function (event) {
+                clearTimeout(timeout);
+                ws = null;
+                if (forcedClose) {
+                    self.readyState = WebSocket.CLOSED;
+                    eventTarget.dispatchEvent(generateEvent('close'));
+                } else {
+                    self.readyState = WebSocket.CONNECTING;
+                    var e = generateEvent('connecting');
+                    e.code = event.code;
+                    e.reason = event.reason;
+                    e.wasClean = event.wasClean;
+                    eventTarget.dispatchEvent(e);
+                    if (!reconnectAttempt && !timedOut) {
+                        if (self.debug || ReconnectingWebSocket.debugAll) {
+                            console.debug('ReconnectingWebSocket', 'onclose', self.url);
+                        }
+                        eventTarget.dispatchEvent(generateEvent('close'));
+                    }
+
+                    var timeout = self.reconnectInterval * Math.pow(self.reconnectDecay, self.reconnectAttempts);
+                    setTimeout(function () {
+                        self.reconnectAttempts++;
+                        self.open(true);
+                    }, timeout > self.maxReconnectInterval ? self.maxReconnectInterval : timeout);
+                }
+            };
+            ws.onmessage = function (event) {
+                if (self.debug || ReconnectingWebSocket.debugAll) {
+                    console.debug('ReconnectingWebSocket', 'onmessage', self.url, event.data);
+                }
+                var e = generateEvent('message');
+                e.data = event.data;
+                eventTarget.dispatchEvent(e);
+            };
+            ws.onerror = function (event) {
+                if (self.debug || ReconnectingWebSocket.debugAll) {
+                    console.debug('ReconnectingWebSocket', 'onerror', self.url, event);
+                }
+                eventTarget.dispatchEvent(generateEvent('error'));
+            };
+        }
+
+        // Whether or not to create a websocket upon instantiation
+        if (this.automaticOpen == true) {
+            this.open(false);
+        }
+
+        /**
+         * Transmits data to the server over the WebSocket connection.
+         *
+         * @param data a text string, ArrayBuffer or Blob to send to the server.
+         */
+        this.send = function (data) {
+            if (ws) {
+                if (self.debug || ReconnectingWebSocket.debugAll) {
+                    console.debug('ReconnectingWebSocket', 'send', self.url, data);
+                }
+                return ws.send(data);
+            } else {
+                throw 'INVALID_STATE_ERR : Pausing to reconnect websocket';
+            }
+        };
+
+        /**
+         * Closes the WebSocket connection or connection attempt, if any.
+         * If the connection is already CLOSED, this method does nothing.
+         */
+        this.close = function (code, reason) {
+            // Default CLOSE_NORMAL code
+            if (typeof code == 'undefined') {
+                code = 1000;
+            }
+            forcedClose = true;
+            if (ws) {
+                ws.close(code, reason);
+            }
+        };
+
+        /**
+         * Additional public API method to refresh the connection if still open (close, re-open).
+         * For example, if the app suspects bad data / missed heart beats, it can try to refresh.
+         */
+        this.refresh = function () {
+            if (ws) {
+                ws.close();
+            }
+        };
+    }
+
+    /**
+     * An event listener to be called when the WebSocket connection's readyState changes to OPEN;
+     * this indicates that the connection is ready to send and receive data.
+     */
+    ReconnectingWebSocket.prototype.onopen = function (event) { };
+    /** An event listener to be called when the WebSocket connection's readyState changes to CLOSED. */
+    ReconnectingWebSocket.prototype.onclose = function (event) { };
+    /** An event listener to be called when a connection begins being attempted. */
+    ReconnectingWebSocket.prototype.onconnecting = function (event) { };
+    /** An event listener to be called when a message is received from the server. */
+    ReconnectingWebSocket.prototype.onmessage = function (event) { };
+    /** An event listener to be called when an error occurs. */
+    ReconnectingWebSocket.prototype.onerror = function (event) { };
+
+    /**
+     * Whether all instances of ReconnectingWebSocket should log debug messages.
+     * Setting this to true is the equivalent of setting all instances of ReconnectingWebSocket.debug to true.
+     */
+    ReconnectingWebSocket.debugAll = false;
+
+    ReconnectingWebSocket.CONNECTING = WebSocket.CONNECTING;
+    ReconnectingWebSocket.OPEN = WebSocket.OPEN;
+    ReconnectingWebSocket.CLOSING = WebSocket.CLOSING;
+    ReconnectingWebSocket.CLOSED = WebSocket.CLOSED;
+
+    return ReconnectingWebSocket;
+})()