Adds demo pages and tests

README.md

@@ -1,26 +1,26 @@
-# Liquid-wormhole
+[![Build Status](https://travis-ci.org/pzuraq/liquid-wormhole.svg?branch=master)](https://travis-ci.org/pzuraq/liquid-wormhole)
 
-This README outlines the details of collaborating on this Ember addon.
+# Liquid Wormhole
 
-## Installation
-
-* `git clone` this repository
-* `npm install`
-* `bower install`
+Liquid Wormhole combines the ideas behind
+[Ember Wormhole](https://github.com/yapplabs/ember-wormhole.git) with the power of
+[Liquid Fire](http://ef4.github.io/liquid-fire/) to provide an accessible,
+easy-to-use toolkit for both animating UI elements "above" your templates.
 
-## Running
+Interactive documentation can be found
+[here](http://pzuraq.github.io/liquid-wormhole/).
 
-* `ember server`
-* Visit your app at http://localhost:4200.
+## Ember Compatibility
 
-## Running Tests
+Liquid Wormhole is tested on all versions of Ember >= 1.13. Long term support will
+continue for 1.13 and up for as long Ember core support continues.
 
-* `npm test` (Runs `ember try:testall` to test your addon against multiple Ember versions)
-* `ember test`
-* `ember test --server`
+## Installation
 
-## Building
+```
+ember install liquid-tether
+```
 
-* `ember build`
+## Contributing
 
-For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).
+Fork the repository, make your changes on a branch, and submit a pull request.

addon/styles/addon.css

@@ -13,3 +13,7 @@
 .liquid-wormhole-container {
   display: none;
 }
+
+.liquid-target > .liquid-child {
+  overflow: visible;
+}

bower.json

@@ -1,6 +1,8 @@
 {
   "name": "liquid-wormhole",
   "dependencies": {
+    "bootstrap-sass": "~3.3.5",
+    "flat-ui-sass": "~2.1.3",
     "ember": "~2.4.1",
     "ember-cli-shims": "0.1.0",
     "ember-cli-test-loader": "0.2.2",

ember-cli-build.js

@@ -2,11 +2,20 @@
 /* global require, module */
 var EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
-module.exports = function(defaults) {
-  var app = new EmberAddon(defaults, {
-    // Add options here
+module.exports = function() {
+  var app = new EmberAddon({
+    snippetPaths: ['tests/dummy/snippets'],
+    snippetSearchPaths: ['app', 'tests/dummy/app', 'addon'],
+    sassOptions: {
+      includePaths: [
+        'bower_components/bootstrap-sass/assets/stylesheets',
+        'bower_components/flat-ui-sass/vendor/assets/stylesheets'
+      ],
+      extension: 'scss'
+    }
   });
 
+  app.import('vendor/sinon.js', { type: 'test'});
   /*
     This build file specifies the options for the dummy test app of this
     addon, located in `/tests/dummy`

package.json

@@ -24,21 +24,26 @@
     "ember-cli-app-version": "^1.0.0",
     "ember-cli-dependency-checker": "^1.2.0",
     "ember-cli-fastboot": "0.6.2",
+    "ember-cli-github-pages": "0.1.0",
     "ember-cli-htmlbars": "^1.0.1",
     "ember-cli-htmlbars-inline-precompile": "^0.3.1",
     "ember-cli-inject-live-reload": "^1.3.1",
     "ember-cli-qunit": "^1.2.1",
     "ember-cli-release": "0.2.8",
+    "ember-cli-sass": "5.3.1",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-uglify": "^1.2.0",
+    "ember-code-snippet": "1.3.0",
     "ember-data": "^2.4.0",
     "ember-disable-prototype-extensions": "^1.1.0",
     "ember-disable-proxy-controllers": "^1.0.1",
     "ember-export-application-global": "^1.0.4",
     "ember-load-initializers": "^0.5.0",
     "ember-resolver": "^2.0.3",
     "ember-try": "^0.1.2",
-    "loader.js": "^4.0.0"
+    "liquid-fire": "0.22.1",
+    "loader.js": "^4.0.0",
+    "ui-tabs": "firefly-ui/ui-tabs"
   },
   "keywords": [
     "ember-addon"

tests/.jshintrc

@@ -21,7 +21,11 @@
     "andThen",
     "currentURL",
     "currentPath",
-    "currentRouteName"
+    "currentRouteName",
+    "ok",
+    "equal",
+    "module",
+    "test"
   ],
   "node": false,
   "browser": false,

tests/acceptance/demo.js

@@ -0,0 +1,58 @@
+/* global ranTetherTransition, noTransitionsYet */
+import { startApp, destroyApp } from '../helpers/app-lifecycle';
+import { injectTransitionSpies } from '../helpers/integration';
+
+let app;
+
+module('Acceptance: Demos', {
+  setup: function() {
+    app = startApp();
+
+    // Conceptually, integration tests shouldn't be digging around in
+    // the container. But animations are slippery, and it's easier to
+    // just spy on them to make sure they're being run than to try to
+    // observe their behavior more directly.
+    injectTransitionSpies(app);
+  },
+
+  teardown: function() {
+    destroyApp(app);
+  }
+});
+
+test('target container exists and is empty on load', function() {
+  visit('/examples');
+
+  andThen(() => {
+    noTransitionsYet();
+    equal(find('.liquid-target-container').length, 1, 'it exists');
+    equal(find('.liquid-target-container > .liquid-target').length, 0, 'it\'s empty');
+  });
+});
+
+test('target container is cleaned when empty', function() {
+  visit('/examples');
+  click('#flyout-button');
+  click('#flyout-button');
+
+  andThen(() => {
+    equal(find('.liquid-target-container > .liquid-target').length, 0, 'it\'s empty');
+  });
+});
+
+test('basic liquid-wormhole works correctly and can determine context', function() {
+  visit('/examples');
+  noTransitionsYet();
+
+  click('#flyout-button');
+  andThen(() => {
+    equal(find('.liquid-target-container .liquid-tether').length, 1, 'it exists');
+    ranTetherTransition('to-left');
+  });
+
+  click('#flyout-button');
+  andThen(() => {
+    equal(find('.liquid-target-container .liquid-tether').length, 'it exists');
+    ranTetherTransition('to-right');
+  });
+});

tests/dummy/app/controllers/basics.js

@@ -0,0 +1,41 @@
+import Ember from 'ember';
+
+const { observer } = Ember;
+
+export default Ember.Controller.extend({
+  queryParams: ['a'],
+  a: null,
+
+  passedAnchors: Ember.A(),
+
+  // This is terrible. TODO Think of something better.
+  anchorParamDidChange: observer('a', function() {
+    const id = this.get('a');
+
+    if (id && id !== this.get('passedAnchors.lastObject')) {
+      this.set('locked', true);
+      Ember.run.next(() => {
+        Ember.$('body').scrollTop(Ember.$(`#${id}`).offset().top - 15);
+        this.set('locked', false);
+      });
+    }
+  }),
+
+  updateAnchor() {
+    if (!this.get('locked')) {
+      this.set('a', this.get('passedAnchors.lastObject') || null);
+    }
+  },
+
+  actions: {
+    addPassedAnchor(anchor) {
+      this.get('passedAnchors').pushObject(anchor);
+      Ember.run.scheduleOnce('afterRender', this, 'updateAnchor');
+    },
+
+    removePassedAnchor(anchor) {
+      this.get('passedAnchors').removeObject(anchor);
+      Ember.run.scheduleOnce('afterRender', this, 'updateAnchor');
+    }
+  }
+});

tests/dummy/app/controllers/examples.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  actions: {
+    toggleFlyout() {
+      this.toggleProperty('showFlyout');
+    }
+  }
+});

tests/dummy/app/controllers/index.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  actions: {
+    toggleHello() {
+      this.toggleProperty('showHello');
+    }
+  }
+});

tests/dummy/app/pods/components/example-pane/component.js

@@ -0,0 +1,31 @@
+import Ember from 'ember';
+
+const { on, run } = Ember;
+
+export default Ember.Component.extend({
+  setupTabs: on('didInsertElement', function() {
+    run.schedule('afterRender', () => {
+      const $template = this.$('.template')[0];
+      const $js = this.$('.js')[0];
+      const $styles = this.$('.styles')[0];
+      const $transitions = this.$('.transitions')[0];
+      const $current = $template || $js || $styles || $transitions;
+
+
+      this.set('$template', $template);
+      this.set('$styles', $styles);
+      this.set('$js', $js);
+      this.set('$transitions', $transitions);
+
+      this.set('currentTab', $current);
+
+      this.$($current).show();
+    });
+  }),
+
+  actions: {
+    changeTab($tab) {
+      this.set('currentTab', $tab);
+    }
+  }
+});

tests/dummy/app/pods/components/example-pane/template.hbs

@@ -0,0 +1,34 @@
+<ul class="nav nav-tabs nav-append-content">
+  {{#if $template}}
+    {{#ui-tab tagName="li" target=$template currentTab=currentTab on-click="changeTab"}}
+      <a>
+        Template
+      </a>
+    {{/ui-tab}}
+  {{/if}}
+  {{#if $js}}
+    {{#ui-tab tagName="li" target=$js currentTab=currentTab on-click="changeTab"}}
+      <a>
+        JS
+      </a>
+    {{/ui-tab}}
+  {{/if}}
+  {{#if $styles}}
+    {{#ui-tab tagName="li" target=$styles currentTab=currentTab on-click="changeTab"}}
+      <a>
+        Styles
+      </a>
+    {{/ui-tab}}
+  {{/if}}
+  {{#if $transitions}}
+    {{#ui-tab tagName="li" target=$transitions currentTab=currentTab on-click="changeTab"}}
+      <a>
+        Transitions
+      </a>
+    {{/ui-tab}}
+  {{/if}}
+</ul>
+
+<div class="tab-content">
+  {{yield}}
+</div>

tests/dummy/app/pods/components/main-nav/component.js

@@ -0,0 +1,23 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'nav',
+  classNames: ['main-nav'],
+
+  click(event) {
+    var $target = Ember.$(event.target);
+    var $c = this.$();
+
+    if ($target !== $c) {
+      if ($target.closest($c.find('a.nav-item')).length) {
+        this.set('navOpen', false);
+      }
+    }
+  },
+
+  actions: {
+    toggleNav() {
+      this.toggleProperty('navOpen');
+    }
+  }
+});

tests/dummy/app/pods/components/main-nav/template.hbs

@@ -0,0 +1,28 @@
+<div class="nav-container">
+  <div class="row">
+    <h1 class="nav-title col-xs-6 col-sm-12">
+      Liquid Wormhole
+    </h1>
+    <div class="col-xs-6 text-right visible-xs">
+      <a class="nav-button nav-svg {{if navOpen 'active'}}" {{action "toggleNav"}}>{{svg-icon.hamburger}}</a>
+    </div>
+  </div>
+</div>
+<div class="nav-menu {{if navOpen 'nav-open'}}">
+  {{link-to 'Introduction' 'index' class="nav-item"}}
+
+  {{link-to 'The Basics' 'basics' class="nav-item"}}
+  <div class="hidden-xs">
+    {{link-to 'Parameters' 'basics' (query-params a="parameters") class="nav-item sub-nav-item "}}
+    {{link-to 'What Are Targets' 'basics' (query-params a="targets") class="nav-item sub-nav-item"}}
+    {{link-to 'Transitions' 'basics' (query-params a="transitions") class="nav-item sub-nav-item"}}
+    {{link-to 'DOM Structure and Styles' 'basics' (query-params a="dom-structure-and-styles") class="nav-item sub-nav-item"}}
+    {{link-to 'Ember Compatibility' 'basics' (query-params a="ember-compatibility") class="nav-item sub-nav-item"}}
+  </div>
+
+  {{link-to 'Examples' 'examples' class="nav-item"}}
+
+  <a class="nav-item nav-svg" href="https://github.com/pzuraq/liquid-wormhole">
+    GitHub {{svg-icon.github}}
+  </a>
+</div>

tests/dummy/app/pods/components/scroll-spier/component.js

@@ -0,0 +1,26 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'h2',
+
+  didInsertElement() {
+    Ember.$(document).scroll(() => {
+      const scrollSpierOffset = this.$().offset().top;
+      const scrollTop = Ember.$('body').scrollTop();
+
+      if ((scrollTop + 20 > scrollSpierOffset || (window.innerHeight + window.scrollY) >= document.body.offsetHeight - 20)) {
+        if (!this.get('passed')) {
+          this.set('passed', true);
+          this.sendAction('on-pass', this.id);
+        }
+      } else if (scrollTop + 20 <= scrollSpierOffset && this.get('passed')) {
+        this.set('passed', false);
+        this.sendAction('on-unpass', this.id);
+      }
+    });
+  },
+
+  willDestroyElement() {
+    Ember.$(document).off('scroll');
+  }
+});

tests/dummy/app/pods/components/svg-icon/github/component.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: ''
+});