hippo-fw 0.9.1

data/client/hippo/extensions/namespace-available.js.erb

@@ -0,0 +1,3 @@
+<% Hippo::Extensions.each do | ext | %>
+Hippo.Extensions.makeNamespace('<%=  ext.client_namespace %>');
+<% end %>

data/client/hippo/index.js

@@ -0,0 +1 @@
+import './boot';

data/client/hippo/index.scss.erb

@@ -0,0 +1,31 @@
+@import "styles/variables";
+@import "styles/fonts";
+@import "styles/mixins/all";
+
+html { height: 100%;     }
+body { margin: 0; height: 100%; }
+.hippo-root {
+    height: 100%;
+    .hippo > div { height: 100%; }
+}
+
+.hippo {
+  height: 100%;
+  @import "styles/global";
+
+<% Hippo::Extensions.each_asset(phase: :all, type: :css) do | asset | %>
+  @import "<%= asset %>";
+<% end %>
+
+@import "hippo/components/shared/styles";
+
+<% Hippo::Components.enabled_with_dependencies(self) do | component | %>
+  @import "hippo/components/<%= component %>/styles";
+<% end %>
+
+<% if !Hippo.config.initial_workspace_screen_id.blank? &&
+      screen = Hippo::Screen[Hippo.config.initial_workspace_screen_id] %>
+  @import "<%= screen.css.remove(/\.css$/) + "/index.scss" %>";
+<% end %>
+
+}

data/client/hippo/lib/__mocks__/loader.js

@@ -0,0 +1,11 @@
+/* global jest */
+
+const loadJS = jest.fn((src, cb) => {
+    cb(src, {});
+});
+
+const loadCSS = jest.fn((src, cb) => {
+    cb(src, {});
+});
+
+export { loadJS, loadCSS };

data/client/hippo/lib/__mocks__/request-assets.js

@@ -0,0 +1,6 @@
+/* global jest */
+
+const MockedRequestAssets = jest.fn((...urls) =>
+                                    new Promise(resolve => resolve(urls)),
+                                   );
+export default MockedRequestAssets;

data/client/hippo/lib/all.js

@@ -0,0 +1,14 @@
+//= require ./namespace
+//= require ./utilFunctions
+//= require ./objToParam
+//= require ./ModuleSupport
+//= require ./loader
+//= require ./RequestAssets
+//= require ./MakeBaseClass
+//= require ./el
+//= require ./polyfills
+//= require ./dom
+//= require ./format
+//= require ./promise_helpers
+//= require ./results
+//= require ./ResizeSensor

data/client/hippo/lib/bootstrap.js

@@ -0,0 +1,45 @@
+// this file's imports should be kept as small as possible, it'll be typical used
+// to bootstrap a remote lib
+import whenDomReady from 'when-dom-ready';
+
+const PENDING  = Symbol('PENDING');
+const ERROR    = Symbol('ERROR');
+const COMPLETE = Symbol('COMPLETE');
+
+export default class Bootstrap {
+
+    constructor(options = {}) {
+        this.options = options;
+        this.callbacks = { onReady: [] };
+        this.status = PENDING;
+        if (this.options.onReady) { this.onReady(this.options.onReady); }
+
+        whenDomReady(() => this.readLoadUrl());
+    }
+
+    tagMatches(tag) {
+        return !!tag.src.match(this.options.srcTag);
+    }
+
+    readLoadUrl() {
+        const tags = document.querySelectorAll('script');
+        for (let i = 0; i < tags.length; i += 1) {
+            const tag = tags[i];
+            if (this.tagMatches(tag)) {
+                this.signalDone(tag.src.replace(this.options.srcTag, ''), tag.dataset);
+                return;
+            }
+        }
+        this.state = ERROR;
+        console.error('Unable to find script tag that Stockor was loaded from'); // eslint-disable-line no-console
+    }
+
+    onReady(cb) {
+        return this.callbacks.onReady.push(cb);
+    }
+
+    signalDone(host, data) {
+        this.status = COMPLETE;
+        this.callbacks.onReady.map(cb => cb(host, data));
+    }
+}

data/client/hippo/lib/index.js.erb

@@ -0,0 +1,6 @@
+//=require ./all
+<% if Hippo.env.development?
+    require_asset "./development"
+else
+    require_asset "./production"
+end %>

data/client/hippo/lib/loader.js

@@ -0,0 +1,67 @@
+let doc = window.document;
+export function setDocument(newDocument) {
+    doc = newDocument;
+}
+
+const insertBefore = () => {
+    const refs = doc.getElementsByTagName('head')[0].childNodes;
+    return refs[refs.length - 1];
+};
+
+// https://github.com/filamentgroup/loadJS/blob/master/loadJS.js
+export function loadJS(src, cb) {
+    const ref = insertBefore();
+    const script = doc.createElement('script');
+    script.src = src;
+    script.async = true;
+    ref.parentNode.insertBefore(script, ref);
+    if (cb) {
+        script.onload = ev => cb(script, ev);
+    }
+    return script;
+}
+
+
+// https://github.com/filamentgroup/loadCSS/blob/master/src/loadCSS.js
+export function loadCSS(href, cb) {
+    const ss = doc.createElement('link');
+    const ref = insertBefore();
+
+    const sheets = doc.styleSheets;
+    ss.rel = 'stylesheet';
+    ss.href = href;
+    ss.media = 'only x';
+
+    ref.parentNode.insertBefore(ss, ref.nextSibling);
+
+    // A method (exposed on return object for external use) that mimics onload
+    // by polling document.styleSheets until it includes the new sheet.
+    const onloadcssdefined = (onDefCb) => {
+        const resolvedHref = ss.href;
+        for (let i = 0; i < sheets.length; i += 1) {
+            if (sheets[i].href === resolvedHref) {
+                onDefCb(sheets[i]);
+                return;
+            }
+        }
+        setTimeout(() => {
+            onloadcssdefined(onDefCb);
+        });
+    };
+
+    function loadCB(ev) {
+        if (ss.addEventListener) {
+            ss.removeEventListener('load', loadCB);
+        }
+        ss.media = 'all';
+        if (cb) { cb(ss, ev); }
+    }
+
+    // once loaded, set link's media back to `all` so that the stylesheet applies once it loads
+    if (ss.addEventListener) {
+        ss.addEventListener('load', loadCB);
+    } else {
+        onloadcssdefined(loadCB);
+    }
+    return ss;
+}

data/client/hippo/lib/request-assets.js

@@ -0,0 +1,38 @@
+import { isArray, pick, isEmpty, keys } from 'lodash';
+import { loadCSS, loadJS } from './loader';
+import { logger } from './util';
+
+class AssetLoader {
+    constructor(urls, cb) {
+        let finished = 0;
+        const completed = {};
+        const onComplete = (url, success, error = false) => {
+            finished += 1;
+            completed[url] = { success: true === success, error };
+            if (finished === urls.length) { cb(completed); }
+        };
+
+        Array.from(urls).forEach((baseUrl) => {
+            const url = `http://localhost:8889${baseUrl}?${parseInt(Math.random() * 100000, 10)}`;
+            if (/.css($|\?)/.test(url)) {
+                loadCSS(url, onComplete);
+            } else {
+                loadJS(url, onComplete);
+            }
+        });
+    }
+}
+
+export default function RequestAssets(...urlArgs) {
+    const urls = ((1 === urlArgs.length) && isArray(urlArgs[0])) ? urlArgs[0] : urlArgs;
+    return new Promise((resolve, reject) =>
+        new AssetLoader(urls, (completed) => {
+            const failures = pick(completed, status => !status.success);
+            if (isEmpty(failures)) {
+                return resolve(completed);
+            }
+            logger.warn(`${keys(failures).join(',')} failed to load`);
+            return reject(failures);
+        }),
+    );
+}

data/client/hippo/lib/smooth-scroll.js

@@ -0,0 +1,68 @@
+if (!window.Argosity) { window.Argosity = {}; }
+
+const DEFAULT_DURATION = 750; // milliseconds
+
+const EASE_IN_OUT = function(t) {
+    if (t < .5) { return 4 * t * t * t; } else { return ((t - 1) * ((2 * t) - 2) * ((2 * t) - 2)) + 1; }
+};
+
+const POSITION = function(start, end, elapsed, duration) {
+    if (elapsed > duration) {
+        return end;
+    } else {
+        return start + ((end - start) * EASE_IN_OUT(elapsed / duration));
+    }
+};
+
+
+export default class SmoothScroll {
+
+    constructor(link, destination, options) {
+        this.link = link;
+        this.destination = destination;
+        if (options == null) { options = {}; }
+        this.options = options;
+        if (!(this.destination instanceof Element)) {
+            this.destination = document.querySelector(this.destination);
+        }
+        if (!(this.link instanceof Element)) {
+            this.link = document.querySelector(this.link);
+        }
+        if (this.link && this.destination) {
+            this.link.addEventListener('click', () => this.scrollToElement());
+        } else {
+            console.warn("failed to setup link", this.link, this.destination);
+        }
+    }
+
+    scrollToElement() {
+        return this.constructor.scroll(this.destination, this.options.duration || DEFAULT_DURATION);
+    }
+
+    static scroll(destination, duration) {
+        if (duration == null) { duration = DEFAULT_DURATION; }
+        if (!(destination instanceof Element)) {
+            destination = document.querySelector(destination);
+        }
+
+        if (!destination) {
+            console.warn("failed to scroll to", destination);
+            return false;
+        }
+
+        const startPos  = window.pageYOffset;
+
+        const endPos    =
+            destination.getBoundingClientRect().top -
+                document.body.getBoundingClientRect().top;
+
+        const startTime = Date.now();
+
+        var step = function() {
+            const elapsed = Date.now() - startTime;
+            window.scroll(0, POSITION(startPos, endPos, elapsed, duration) );
+            if (elapsed < duration) { return window.requestAnimationFrame(step); }
+        };
+        return step();
+    }
+};

data/client/hippo/lib/util.js

@@ -0,0 +1,101 @@
+import logger from 'loglevel';
+import {
+    trim, isDate, isNaN, isError, isElement, isFunction, isBoolean, isRegExp,
+    isNumber, isObject, isEmpty, isNil, isString, each,
+} from 'lodash';
+import pluralize from 'pluralize';
+
+function lcDash(char, match, index) {
+    return (0 === index ? '' : '_') + char.toLowerCase();
+}
+
+export { logger };
+
+export function emptyFn() {}
+
+export function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+export function dasherize(str) {
+    return trim(str)
+        .replace(/([A-Z])/g, lcDash)
+        .replace(/[-_\s]+/g, '-')
+        .toLowerCase();
+}
+
+export function titleize(words) {
+    if ('string' !== typeof words) { return words; }
+    return (words)
+        .replace(/[\W_]/g, ' ')
+        .replace(/\S+/g, word => (word.charAt(0).toUpperCase() + word.slice(1)),
+    );
+}
+
+export function underscored(str) {
+    return trim(str)
+        .replace(/([a-z\d])([A-Z]+)/g, '$1_$2')
+        .replace(/[-\s]+/g, '_')
+        .toLowerCase();
+}
+
+export function humanize(str) {
+    return capitalize(trim(underscored(str)
+                           .replace(/_id$/, '')
+                           .replace(/_/g, ' ')));
+}
+
+export function renameProperties(object, keyMap) {
+    each(keyMap, (to, from) => {
+        if (object[from]) {
+            object[to] = object[from]; // eslint-disable-line no-param-reassign
+            delete object[from];       // eslint-disable-line no-param-reassign
+        }
+    });
+    return object;
+}
+
+export function toSentence(sentence, comma = ', ', nd = ' and ') {
+    let words = isString(sentence) ? sentence.split(' ') : sentence;
+    if (null == words) { words = []; }
+    const last = words.pop();
+    if (last) {
+        return words.length ? [words.join(comma), last].join(nd) : last;
+    }
+    return '';
+}
+
+export function singular(str) {
+    return pluralize.singular(str);
+}
+
+export function classify(str) {
+    return str
+        .replace(/\S+/g, word => (word.charAt(0).toUpperCase() + word.slice(1)))
+        .replace(/-\S+/g, word => (word.charAt(1).toUpperCase() + word.slice(2)))
+        .replace(/\/\S+/g, word => (`::${word.charAt(1).toUpperCase()}${word.slice(2)}`))
+        .replace(/\s/g, '');
+}
+
+export function isBlank(value) {
+    switch (true) {
+    case isDate(value):
+        return isNaN(value.getDate());
+    case isError(value):
+    case isNaN(value):
+        return true;
+    case isElement(value):
+    case isFunction(value):
+    case isBoolean(value):
+    case isRegExp(value):
+        return false;
+    case isNumber(value):
+        return !value;
+    case isObject(value):
+        return isEmpty(value);
+    case isString(value):
+        return isEmpty(trim(value));
+    default:
+        return isNil(value);
+    }
+}

data/client/hippo/models/PubSub.js

@@ -0,0 +1,208 @@
+import { find, remove, extend } from 'lodash';
+import { logger } from '../lib/logger';
+import {
+    BaseModel,
+} from '../models/base';
+
+import User from '../user';
+import Config from '../config';
+
+const ActionCable  = {};
+
+class ModelConfig {
+
+    constructor(type, model) {
+        this.type = type;
+        this.id = model.getId();
+        this.channel = `${model.identifiedBy}/${this.id}`;
+        this.count = 0;
+        this.models = [];
+    }
+
+    add(model) {
+        if (0 === this.count) {
+//            Hippo.Models.PubSub.channel.subscribe(this.channel);
+            // __guard__(Hippo.Models.PubSub.channel, x => x
+//                .subscribe(this.channel)); // , @mbCallBack(@models))
+        }
+        this.count += 1;
+        const config = this.modelConfig(model);
+        return (config.count += 1);
+    }
+
+    modelConfig(model) {
+        let config = find(this.models, { model });
+        if (!config) {
+            config = { model, count: 0 };
+            this.models.push(config);
+        }
+        return config;
+    }
+
+    remove(model) {
+        const config = find(this.models, { model });
+        if (!config) { return null; }
+        this.count -= 1;
+        if (0 === this.count) { // all removed, just unsubscribe
+            return this.unsubscribe();
+        }
+        config.count -= 1;
+        if (0 === config.count) { return remove(this.models, { model }); }
+        return null;
+    }
+
+    unsubscribe() {
+        // __guard__(Hippo.Models.PubSub.channel, x => x.unsubscribe(this.channel));
+        return delete this.type.records[this.id];
+    }
+
+    onChange(data) {
+        return Array.from(this.models).map(config => config.model.addChangeSet(data));
+    }
+}
+
+class ModelType {
+
+    constructor(attr) {
+        extend(this, attr);
+        this.records = {};
+    }
+
+    add(model) {
+        const config = this.records[model.id] || (
+            this.records[model.id] = new ModelConfig(this, model)
+        );
+        return config.add(model);
+    }
+
+    remove(model) {
+        return this.records[model.id] && this.records[model.id].remove(model);
+    }
+
+    onChange(id, data) {
+        return this.records[id].onChange(data);
+    }
+
+    unsubscribeAll() {
+        return (() => {
+            const result = [];
+            this.recoards.forEach((record) => {
+                result.push(record.unsubscribe());
+            });
+            return result;
+        })();
+    }
+}
+
+class ModelTypesCollection extends BaseModel {
+    static initClass() {
+        this.prototype.model = ModelType;
+    }
+
+    forModel(model) {
+        const path = model.identifiedBy;
+        return this.get(path) || this.add({ id: path });
+    }
+}
+ModelTypesCollection.initClass();
+
+const CableChannel = {};
+
+const PubSub = {
+
+    types: new ModelTypesCollection(),
+
+    add(model) {
+        //        if (!__guardMethod__(model, 'isPersistent',
+        // o => o.isPersistent())) { return; }
+        return this.types.forModel(model).add(model);
+    },
+
+    remove(model) {
+        // if (!model || !__guardMethod__(model, 'isPersistent',
+        //  o => o.isPersistent())) { return; }
+        return this.types.forModel(model).remove(model);
+    },
+
+    // instanceFor(model_klass, id) {
+    //     // const path = _.result(model_klass.prototype, 'api_path');
+    //     //return __guard__(__guard__(__guard__(this.types.get(path),
+    //     // x2 => x2.records[id]), x1 => x1.models[0]), x => x.model);
+    // },
+
+    // clear() {
+    //     return this.types = new ModelTypesCollection();
+    // },
+
+    // initialize() {
+    //     Hippo.current_user.on('change:isLoggedIn', _.bind(this.onLoginChange, this));
+    //     if (Hippo.current_user.isLoggedIn) { return this.onLoginChange(); }
+    // },
+
+    // onChange(path, id, data) {
+    //     return this.types.get(path).onChange(id, data);
+    // },
+
+    onLoginChange() {
+        if (User.isLoggedIn) {
+            const url = `${Config.api_host}${Config.api_path}/ws`;
+            this.cable = ActionCable.createConsumer(url);
+            this.channel = this.cable.subscriptions.create(
+                'Hippo::API::PubSub', CableChannel,
+            );
+        }
+        PubSub.types.each(t => t.unsubscribeAll());
+        delete this.channel;
+        this.cable.disconnect();
+        return delete this.cable;
+    },
+
+};
+
+const CHANNEL_SPLITTER = new RegExp('^(.*):(.*)/([^/]+)$');
+
+extend(CableChannel, {
+    connected() {
+//        return this.subscribe('file-change', () => HotReload.initiate(changes));
+    },
+
+    subscribe(channel) {
+        logger.info(`[pubsub] subscribe to: ${channel}`);
+        return this.perform('on', { channel });
+    },
+
+    unsubscribe(channel) {
+        logger.info(`[pubsub] unsubscribe from: ${channel}`);
+        return this.perform('off', { channel });
+    },
+
+    received(data) {
+        const [channel, _, model, id] = Array.from(
+            data.channel.match(CHANNEL_SPLITTER),
+        );
+        logger.info(`[pubsub] change recvd for: ${channel}`);
+        PubSub.onChange(
+            model, id, _.omit(data, 'channel'),
+        );
+    },
+
+});
+
+export function start() {
+    // PubSub.initialize();
+}
+
+export function stop() {
+    PubSub.kill();
+}
+
+
+function __guard__(value, transform) {
+    return ('undefined' !== typeof value && null !== value) ? transform(value) : undefined;
+}
+function __guardMethod__(obj, methodName, transform) {
+    if ('undefined' !== typeof obj && null !== obj && 'function' === typeof obj[methodName]) {
+        return transform(obj, methodName);
+    }
+    return undefined;
+}