disco_app 0.11.0

data/app/assets/javascripts/disco_app/frame.js

@@ -0,0 +1,152 @@
+/**
+ * frame.js
+ *
+ * The FrameApp object is a lightweight Javascript object intended to mock the `postMessage` endpoint for Embedded Apps
+ * in the Shopify Admin panel. Eventually, we hope to mock all of the functionality provided by the Shopify Embedded App
+ * SDK.
+ */
+(function() {
+
+    window.FrameApp = (function() {
+
+        FrameApp.name = 'Shopify Dev Frame';
+
+        function FrameApp() {}
+
+
+        /* Initialisation, configuration and helpers.
+        ================================================== */
+
+        /**
+         * Initialise the FrameApp - load configuration, set up event handlers.
+         *
+         * @param config
+         * @returns {*}
+         */
+        FrameApp.init = function(config) {
+            var _this = this;
+            if (config == null) {
+                config = {};
+            }
+            this.loadConfig(config);
+
+            // Use addEventListener if available, otherwise fall back to attachEvent.
+            if (window.addEventListener) {
+                this.iframe.addEventListener("load", FrameApp.__iframeLoadCallback, false);
+                return window.addEventListener("message", FrameApp.__addEventMessageCallback, false);
+            }
+
+            this.iframe.attachEvent("load", FrameApp.__iframeLoadCallback);
+            return window.attachEvent("onMessage", FrameApp.__addEventMessageCallback);
+        };
+
+        /**
+         * Load configuration for the FrameApp. Set defaults if not provided.
+         * @param config
+         */
+        FrameApp.loadConfig = function(config) {
+            this.shopOrigin = config.shopOrigin;
+            this.debug = !!config.debug;
+            this.iframe = config.iframe;
+            if (!this.iframe) {
+                this.log("FrameApp error: no <iframe> specified.");
+            }
+            FrameApp.log('FrameApp configuration loaded.');
+        };
+
+        /**
+         * Log a message to the console, if the app was configured in debug mode.
+         *
+         * @param message
+         * @param force
+         * @returns {*}
+         */
+        FrameApp.log = function(message, force) {
+            if ((typeof console !== "undefined" && console !== null ? console.log : void 0) && (this.debug || force)) {
+                return console.log(message);
+            }
+        };
+
+
+        /* Message sending and event handling.
+        ================================================== */
+
+        FrameApp.__messageHandlers = {};
+
+        /**
+         * Post a message to the <iframe>.
+         *
+         * @param message
+         * @param data
+         * @returns {*}
+         */
+        FrameApp.postMessage = function(message, data) {
+            var json;
+            json = JSON.stringify({
+                message: message,
+                data: data
+            });
+            FrameApp.log("FrameApp client sent " + json + " to ShopifyApp.");
+            return this.iframe.contentWindow.postMessage(json, '*');
+        };
+
+        /**
+         * Add a handler for a received message.
+         *
+         * @param message
+         * @param fn
+         * @returns {Number|*}
+         * @private
+         */
+        FrameApp.__addMessageHandler = function(message, fn) {
+            if (typeof message === "function") {
+                fn = message;
+                message = void 0;
+            }
+            if (!FrameApp.__messageHandlers[message]) {
+                FrameApp.__messageHandlers[message] = [];
+            }
+            return FrameApp.__messageHandlers[message].push(fn);
+        };
+
+        /**
+         * Callback triggered when a postMessage message is received.
+         *
+         * @param e
+         * @returns {*}
+         * @private
+         */
+        FrameApp.__addEventMessageCallback = function(e) {
+            var handler, handlers, message, submitForm, _i, _len;
+            FrameApp.log("FrameApp client received " + e.data + " from " + e.origin);
+            message = JSON.parse(e.data);
+            handlers = [];
+            if (FrameApp.__messageHandlers[message.message]) {
+                handlers = handlers.concat(FrameApp.__messageHandlers[message.message]);
+            }
+            if (FrameApp.__messageHandlers[void 0]) {
+                handlers = handlers.concat(FrameApp.__messageHandlers[void 0]);
+            }
+            for (_i = 0, _len = handlers.length; _i < _len; _i++) {
+                handler = handlers[_i];
+                handler(message.message, message.data);
+            }
+        };
+
+        /**
+         * Callback triggered when our iFrame is loaded.
+         *
+         * @param e
+         * @private
+         */
+        FrameApp.__iframeLoadCallback = function(e) {
+            FrameApp.postMessage('Shopify.API.initialize', {
+                'hi': 'there!'
+            });
+        };
+
+        return FrameApp;
+
+    }).call(this);
+
+}).call(this);

data/app/assets/javascripts/disco_app/shopify-turbolinks.js

@@ -0,0 +1,7 @@
+/**
+ * disco_app/shopify-turbolinks.js
+ * Some tweaks to help Turbolinks play nicely with the Embedded App SDK.
+ */
+jQuery(document).on('page:load', function(e) {
+  ShopifyApp.pushState(window.location.pathname);
+});

data/app/assets/javascripts/disco_app/ui-kit.js

@@ -0,0 +1 @@
+(function(){var t,e,n,s,a,i=function(t,e){return function(){return t.apply(e,arguments)}};t={STYLIZED:"next-input--stylized",SELECT_WRAPPER:"next-select__wrapper",TEXTAREA:"next-textarea",INPUT:"next-input",SELECT:"next-select",LABEL:"next-label"},n={LABEL:{FOCUSED:t.LABEL+"--is-focused"},INPUT:{FOCUSED:t.INPUT+"--is-focused"}},e=[t.INPUT,t.TEXTAREA,t.SELECT],s=function(){function s(){this.handleFocusChange=i(this.handleFocusChange,this),document.addEventListener("focus",this.handleFocusChange,!0),document.addEventListener("blur",this.handleFocusChange,!0)}return s.prototype.handleFocusChange=function(t){var s,a,i,o,r,c,l,u,d;for(u=t.target,a=0,o=e.length;o>a;a++)l=e[a],d=u.classList.contains(l);return d?(c=this.findLabelAndParent(u),i=c[0],r=c[1],s="focus"===t.type,i.classList.toggle(n.LABEL.FOCUSED,s),r.classList.toggle(n.INPUT.FOCUSED,s)):void 0},s.prototype.findLabelAndParent=function(e){var n,s;return n=document.querySelectorAll("label[for='"+e.getAttribute("id")+"']")[0],s=this._findParentNodeByClass(t.SELECT_WRAPPER,e),s||(s=this._findParentNodeByClass(t.STYLIZED,e)),[n,s]},s.prototype._findParentNodeByClass=function(t,e){var n;for(n=e.parentNode;!n.classList.contains(t);)n=n.parentNode;return n.classList.contains(t)?n:void 0},s}(),a=new s}).call(this),function(){}.call(this);

data/app/assets/stylesheets/disco_app/admin/_header.scss

@@ -0,0 +1,75 @@
+//
+// header.scss
+// Styles for admin header.
+// --------------------------------------------------
+
+.header-row {
+  display: block;
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  z-index: 198;
+  left: 240px;
+  right: 0;
+  height: 56px;
+  max-width: 100vw;
+  box-shadow: 0 1px 0 rgba(0,0,0,0.07);
+  background: #ffffff;
+}
+
+.header {
+  position: relative;
+  height: 56px;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.header__main {
+  color: rgba(0,0,0,0.9);
+  font-size: 1.42857rem;
+  line-height: 1.71429rem;
+  font-weight: 400;
+  z-index: 2;
+  overflow: hidden;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 0 0%;
+  -ms-flex: 1 0 0%;
+  flex: 1 0 0%;
+  -webkit-box-ordinal-group: 2;
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 10px 0;
+  text-align: left;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.breadcrumb {
+  color: #798c9c;
+}
+
+.breadcrumb a, .breadcrumb a:hover {
+  color: #798c9c;
+}

data/app/assets/stylesheets/disco_app/admin/_layout.scss

@@ -0,0 +1,32 @@
+//
+// layout.scss
+// Styles for admin layout.
+// --------------------------------------------------
+
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: #ebeef0;
+}
+
+#wrapper {
+  min-height: 100%;
+  background: #ebeef0;
+}
+
+#content {
+  padding: 56px 0 0 240px;
+  width: 100%;
+  box-sizing: border-box;
+  outline: 0;
+  display: block;
+  max-width: 3000px;
+  margin: 0 auto;
+  position: relative;
+  -webkit-transition: -webkit-transform 200ms ease;
+  transition: -webkit-transform 200ms ease;
+  transition: transform 200ms ease;
+  transition: transform 200ms ease, -webkit-transform 200ms ease;
+}

data/app/assets/stylesheets/disco_app/admin/_nav.scss

@@ -0,0 +1,184 @@
+//
+// nav.scss
+// Styles for admin navigation.
+// --------------------------------------------------
+
+.next-nav {
+  z-index: 221;
+  width: 240px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  -webkit-transition: -webkit-transform 200ms ease;
+  transition: -webkit-transform 200ms ease;
+  transition: transform 200ms ease;
+  transition: transform 200ms ease, -webkit-transform 200ms ease;
+  overflow: hidden;
+}
+
+.next-nav__panel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.next-nav__panel--primary {
+  z-index: 1;
+  width: 240px;
+  background-color: #31373d;
+  -webkit-transition: background-color 200ms ease;
+  transition: background-color 200ms ease;
+}
+
+.next-nav--is-expanded .next-nav__panel--primary {
+  background-color: #212529;
+}
+
+.next-nav__logo {
+  height: 56px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  padding-left: 20px;
+  background-color: #272c30;
+  -webkit-transition: background-color 200ms ease;
+  transition: background-color 200ms ease;
+  overflow: hidden;
+}
+
+.next-nav--is-expanded .next-nav__logo {
+  background-color: #212529;
+}
+
+.next-nav__logo--disco .next-nav__svg-logo {
+  -webkit-transition: none;
+  transition: none;
+  -webkit-transform: translate3d(-5px, 0, 0);
+  transform: translate3d(-5px, 0, 0);
+}
+
+.next-nav__svg-logo {
+  width: 102px;
+  height: auto;
+  -webkit-transition: -webkit-transform 200ms ease;
+  transition: -webkit-transform 200ms ease;
+  transition: transform 200ms ease;
+  transition: transform 200ms ease, -webkit-transform 200ms ease;
+}
+
+.next-nav__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.next-nav__list--primary {
+  background-color: #31373d;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: absolute;
+  top: 56px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.next-nav__item {
+  display: block;
+  min-height: 40px;
+}
+
+.next-nav__link {
+  color: rgba(0,0,0,0.9);
+  font-size: 1.07143rem;
+  line-height: 1.42857rem;
+  font-weight: 400;
+  text-transform: initial;
+  letter-spacing: initial;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 500;
+  color: #c3cfd8;
+  padding: 0 10px 0 20px;
+  height: 40px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  line-height: normal;
+
+  @media screen and (min-width: 640px) {
+    font-size: 1rem;
+  }
+}
+
+.next-nav__link:hover, .next-nav__link:focus, .next-nav__link:active, .next-nav__link.next-nav__link--is-selected {
+  text-decoration: none;
+  color: #ffffff;
+}
+
+.next-nav__link--is-selected {
+  background-color: #454e57;
+}
+
+.next-nav__text {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: block;
+  color: #c3cfd8;
+  -webkit-transition: opacity 200ms ease, -webkit-transform 200ms ease;
+  transition: opacity 200ms ease, -webkit-transform 200ms ease;
+  transition: transform 200ms ease, opacity 200ms ease;
+  transition: transform 200ms ease, opacity 200ms ease, -webkit-transform 200ms ease;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 0%;
+  -ms-flex-preferred-size: 0%;
+  flex-basis: 0%;
+  margin-left: 10px;
+}
+
+.next-nav__link:hover .next-nav__text, .next-nav__link:focus .next-nav__text, .next-nav__link:active .next-nav__text, .next-nav__link.next-nav__link--is-selected .next-nav__text {
+  color: #ffffff;
+}
+
+.next-nav__link .next-icon {
+  fill: #798c9c;
+  -webkit-transition: opacity 200ms ease;
+  transition: opacity 200ms ease;
+}
+
+.next-nav__link:hover .next-icon, .next-nav__link:focus .next-icon, .next-nav__link:active .next-icon, .next-nav__link.next-nav__link--is-selected .next-icon {
+  fill: #ffffff;
+}

data/app/assets/stylesheets/disco_app/admin.scss

@@ -0,0 +1,11 @@
+//
+// Styles for the Disco application admin.
+// --------------------------------------------------
+
+// Import the core.
+@import 'disco_app';
+
+// Admin-specific styling.
+@import 'admin/layout';
+@import 'admin/nav';
+@import 'admin/header';

data/app/assets/stylesheets/disco_app/disco_app.scss

@@ -0,0 +1,24 @@
+//
+// Styles for Disco applications.
+// --------------------------------------------------
+
+// Variables
+$font-family: -apple-system, "BlinkMacSystemFont", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", sans-serif;
+
+// Mixins and utilities.
+@import 'mixins/flexbox';
+
+// UI Kit - Core and our addons.
+@import 'ui-kit/ui-kit';
+@import 'ui-kit/ui-type';
+@import 'ui-kit/ui-icons';
+@import 'ui-kit/ui-layout';
+@import 'ui-kit/ui-forms';
+@import 'ui-kit/ui-tabs';
+
+// Components
+@import '../../components/shopify/ui-layout/ui-layout';
+@import '../../components/shopify/ui-stack/ui-stack';
+@import '../../components/shopify/typography/typography';
+@import '../../components/shopify/buttons/buttons';
+@import '../../components/shopify/card/card';

data/app/assets/stylesheets/disco_app/frame/_buttons.scss

@@ -0,0 +1,54 @@
+//
+// Buttons
+// --------------------------------------------------
+
+// Base button
+.btn {
+  cursor: pointer;
+  display: inline-block;
+  height: 32px;
+  line-height: 30px;
+  padding: 0 9px;
+  border-radius: 4px;
+
+  white-space: nowrap;
+  vertical-align: middle;
+  font-family: $font-family;
+  font-size: 13px;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  -webkit-appearance: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+// Default button
+.btn, .btn-default {
+  background-color: #fcfcfc;
+  border: 1px solid #e3e3e3;
+  color: #0078bd;
+
+  &:hover, &:focus, &.focus {
+    background-color: #efefef;
+    border-color: #d6d6d6;
+    color: #0078bd;
+  }
+}
+
+// Primary button
+.btn-primary {
+  background-color: #0078bd;
+  border: 1px solid #0078bd;
+  color: #fff;
+
+  &:hover, &:focus, &.focus {
+    background-color: #3491c8;
+    border-color: #2a74a0;
+    color: #fff;
+  }
+}

data/app/assets/stylesheets/disco_app/frame/_forms.scss

@@ -0,0 +1,26 @@
+//
+// Forms
+// --------------------------------------------------
+
+form {
+  margin: 40px 0;
+}
+
+input[type="text"],
+input[type="url"], {
+  vertical-align: top;
+  height: 32px;
+  font-family: $font-family;
+  font-size: 13px;
+  padding: 5px;
+  margin: 0;
+  border: 1px solid #ccc;
+  display: inline-block;
+  color: #222;
+  border-radius: 4px;
+
+  &:focus, &.focus {
+    border: 1px solid #0078bd;
+    outline: 0;
+  }
+}

data/app/assets/stylesheets/disco_app/frame/_layout.scss

@@ -0,0 +1,77 @@
+//
+// Layout
+// --------------------------------------------------
+
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+#sidebar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: $sidebar-width;
+
+  background: #31373d;
+  box-shadow: -1px 0 0 #2b3136 inset;
+}
+
+#header {
+  position: absolute;
+  top: 0;
+  left: $sidebar-width;
+  right: 0;
+  height: $header-height;
+
+  background: #ffffff;
+  border-bottom: 1px solid #e6e6e6;
+  border-color: rgba(0,0,0, .07);
+}
+
+#header-title {
+  position: absolute;
+  bottom: 12px;
+  left: 20px;
+
+  max-width: 718px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+#header-title-icon {
+  margin: 5px 10px 0 0;
+  float: left;
+}
+
+#header-actions {
+  position: absolute;
+  bottom: 12px;
+  right: 20px;
+
+  .btn {
+    margin: 0 0 0 5px;
+  }
+}
+
+#content-wrapper {
+  position: absolute;
+  top: $header-height;
+  left: $sidebar-width;
+  bottom: 0;
+  right: 0;
+}
+
+#content {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+#iframe {
+  padding: 40px 0;
+  text-align: center;
+}

data/app/assets/stylesheets/disco_app/frame/_type.scss

@@ -0,0 +1,25 @@
+//
+// Type
+// --------------------------------------------------
+
+// Base
+html, body {
+  font-family: $font-family;
+  font-size: 13px;
+}
+
+// Headers
+h1 {
+  font-size: 24px;
+  line-height: 32px;
+  height: 32px;
+  font-family: $font-family;
+  font-weight: 300;
+  margin: 0;
+  padding: 0;
+}
+
+// Text utilities
+.text-muted {
+  color: #ccc;
+}

data/app/assets/stylesheets/disco_app/frame.scss

@@ -0,0 +1,10 @@
+// Set variables
+$font-family: -apple-system, "BlinkMacSystemFont", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", sans-serif;
+$sidebar-width: 197px;
+$header-height: 57px;
+
+// Include components
+@import "frame/layout";
+@import "frame/type";
+@import "frame/buttons";
+@import "frame/forms";