├── .editorconfig ├── .gitignore ├── .jshintrc ├── .npmignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── bower.json ├── build ├── 6to5-options.js ├── paths.js └── tasks │ ├── build.js │ ├── clean.js │ ├── dev.js │ ├── doc.js │ ├── e2e.js │ ├── lint.js │ ├── prepare-release.js │ ├── serve.js │ └── watch.js ├── config.js ├── dist ├── app.html ├── app.js ├── aside.js ├── bar.js ├── body.html ├── body.js ├── child-router.html ├── child-router.js ├── container.js ├── flex.js ├── flickr.html ├── flickr.js ├── fonts │ ├── material-design-icons │ │ ├── Material-Design-Icons.eot │ │ ├── Material-Design-Icons.svg │ │ ├── Material-Design-Icons.ttf │ │ └── Material-Design-Icons.woff │ └── roboto │ │ ├── Roboto-Bold.ttf │ │ ├── Roboto-Light.ttf │ │ ├── Roboto-Medium.ttf │ │ ├── Roboto-Regular.ttf │ │ └── Roboto-Thin.ttf ├── form.html ├── form.js ├── grid.js ├── main.js ├── message.js ├── section.js ├── ui-aurelia.css ├── ui-aurelia.html ├── ui-aurelia.js ├── ui-class-list.js ├── ui-element.js ├── ui-main.html ├── ui-main.js ├── ui-nav-aside.html ├── ui-nav-aside.js ├── ui-nav-bar.html ├── ui-nav-bar.js ├── ui-nav.js ├── ui-toggle.html ├── ui-toggle.js ├── ui-waves.html ├── ui-waves.js ├── view.js ├── welcome.html └── welcome.js ├── doc ├── CHANGELOG.md └── api.json ├── gulpfile.js ├── index.html ├── karma.conf.js ├── package.json ├── plugins ├── core │ ├── ui-class-list.js │ └── ui-element.js ├── layout │ ├── body.html │ ├── body.js │ ├── container.js │ ├── flex.js │ ├── grid.js │ ├── section.js │ ├── ui-main.html │ ├── ui-main.js │ └── view.js ├── nav │ ├── aside.js │ ├── bar.js │ ├── ui-nav-aside.jade │ ├── ui-nav-aside.js │ ├── ui-nav-bar.html │ ├── ui-nav-bar.js │ └── ui-nav.js ├── services │ ├── message.js │ ├── ui-waves.html │ └── ui-waves.js ├── toggle │ ├── ui-toggle.html │ └── ui-toggle.js ├── ui-aurelia.html └── ui-aurelia.js ├── protractor.conf.js ├── src ├── app.jade ├── app.js ├── child-router.html ├── child-router.js ├── flickr.html ├── flickr.js ├── form.html ├── form.js ├── main.js ├── welcome.html └── welcome.js ├── styles ├── components │ ├── _button.styl │ ├── _card.styl │ ├── _collapsible.styl │ ├── _collection.styl │ ├── _dialog.styl │ ├── _dropdown.styl │ ├── _modal.styl │ ├── _progress.styl │ ├── _select.styl │ ├── _table.styl │ ├── _tabs.styl │ ├── _typehead.styl │ └── index.styl ├── core │ ├── _colors.styl │ ├── _fonts.styl │ ├── _mixins.styl │ ├── _util.styl │ ├── _var.styl │ └── index.styl ├── fonts │ ├── material-design-icons │ │ ├── Material-Design-Icons.eot │ │ ├── Material-Design-Icons.svg │ │ ├── Material-Design-Icons.ttf │ │ └── Material-Design-Icons.woff │ └── roboto │ │ ├── Roboto-Bold.ttf │ │ ├── Roboto-Light.ttf │ │ ├── Roboto-Medium.ttf │ │ ├── Roboto-Regular.ttf │ │ └── Roboto-Thin.ttf ├── index.styl ├── layout │ ├── _aside.styl │ ├── _body.styl │ ├── _container.styl │ ├── _flex.styl │ ├── _footer.styl │ ├── _grid.styl │ ├── _header.styl │ ├── _main.styl │ ├── _nav.styl │ ├── _section.styl │ ├── _ui.styl │ ├── _view.styl │ └── index.styl ├── materialize.css ├── materialize.js ├── services │ ├── _markdown.styl │ ├── _notify.styl │ ├── _splitter.styl │ └── index.styl ├── styles.css └── toolbar │ ├── _bottom.styl │ ├── _left.styl │ ├── _right.styl │ ├── _top.styl │ └── index.styl └── test ├── e2e ├── dist │ ├── demo.spec.js │ ├── skeleton.po.js │ └── welcome.po.js └── src │ ├── demo.spec.js │ ├── skeleton.po.js │ └── welcome.po.js └── unit ├── app.spec.js ├── child-router.spec.js └── flickr.spec.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | 11 | # 2 space indentation 12 | [**.*] 13 | indent_style = space 14 | indent_size = 2 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | jspm_packages 3 | bower_components 4 | .idea 5 | .DS_STORE -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "esnext": true 3 | } 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | jspm_packages 2 | bower_components 3 | .idea -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | We'd love for you to contribute and to make this project even better than it is today! If this interests you, please begin by reading [our contributing guidelines](https://github.com/DurandalProject/about/blob/master/CONTRIBUTING.md). The contributing document will provide you with all the information you need to get started. Once you have read that, you will need to also [sign our CLA](http://goo.gl/forms/dI8QDDSyKR) before we can accept a Pull Request from you. More information on the process is included in the [contributor's guide](https://github.com/DurandalProject/about/blob/master/CONTRIBUTING.md). 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Durandal Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | #This Package has been moved to 4 | 5 | ##[aurelia-interface](http://github.com/joelcoxokc/aurelia-interface) 6 | 7 | # ui-Aurelia 8 | 9 | [![Join the chat at https://gitter.im/joelcoxokc/ui-aurelia](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/joelcoxokc/ui-aurelia?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 10 | 11 | UI Library for [Aurelia](http://www.aurelia.io/) platform. It sets up a standard navigation-style app using gulp to build your ES6 code with the 6to5 compiler. Karma/Jasmine testing is also configured. 12 | 13 | > To keep up to date on [Aurelia](http://www.aurelia.io/), please visit and subscribe to [the official blog](http://blog.durandal.io/). If you have questions, we invite you to join us on [our Gitter Channel](https://gitter.im/aurelia/discuss). 14 | 15 | 16 | ### TODO 17 | Create a curated list of plugins we can begin developing on. 18 | 19 | 20 | ####COMPONENTS: 21 | 22 | > Current contains the following 23 | 24 | - Buttons 25 | - Actions 26 | - Tabs 27 | - Collections 28 | - Collapsible 29 | - Select 30 | - Typehead 31 | - Dropdown 32 | - Modal 33 | - Dialog 34 | - Progress 35 | - Card 36 | - DataGrid 37 | - Table 38 | - Shadows 39 | - Grid 40 | - Color 41 | - Draggable 42 | 43 | ####LAYOUT: 44 | 45 | - ui-main 46 | - ui-body 47 | - ui-section 48 | - ui-nav 49 | - ui-aside 50 | - ui-header 51 | - ui-footer 52 | - ui-view 53 | - ui-grid 54 | - ui-custom 55 | 56 | ####Plugins: 57 | 58 | - uiLayoutService 59 | - uiToggle 60 | - uiAnimate 61 | - uiWaves 62 | - uiText 63 | - uiBg 64 | 65 | 66 | ##CONTRIBUTERS 67 | 68 | **Plugins** are found in the ./plugins directory. 69 | 70 | **Demo Application** found in the ./src directory 71 | 72 | **Stylus && CSS** found in the ./styles directory 73 | 74 | **HTML** We are using HTML for our views, However, You are able to use jade 75 | **NOTE** We Recommend the usage of HTML over Jade. 76 | 77 | Please Contact me via Email before beginning work on a plugin, as many are already building some plugins. 78 | 79 | ###Currently Developing 80 | 81 | ####Layout: 82 | 83 | - ui-nav 84 | - ui-aside 85 | - ui-body 86 | - ui-main 87 | - ui-view 88 | 89 | 90 | Most plugins will be placed into separate repos eventually. 91 | 92 | The overall architecture is currently being designed. 93 | 94 | Please Note that any changes made to the Dev environment may be over written. 95 | 96 | 97 | 98 | ## Running The App 99 | 100 | To run the app, follow these steps. 101 | 102 | 1. Ensure that [NodeJS](http://nodejs.org/) is installed. This provides the platform on which the build tooling runs. 103 | 2. From the project folder, execute the following command: 104 | 105 | ```shell 106 | npm install 107 | ``` 108 | 3. Ensure that [Gulp](http://gulpjs.com/) is installed. If you need to install it, use the following command: 109 | 110 | ```shell 111 | npm install -g gulp 112 | ``` 113 | 4. Ensure that [jspm](http://jspm.io/) is installed. If you need to install it, use the following command: 114 | 115 | ```shell 116 | npm install -g jspm 117 | ``` 118 | > **Note:** jspm queries GitHub to install semver packages, but GitHub has a rate limit on anonymous API requests. It is advised that you configure jspm with your GitHub credentials in order to avoid problems. You can do this by executing `jspm endpoint config github` and following the prompts. 119 | 5. Install the client-side dependencies with jspm: 120 | 121 | ```shell 122 | jspm install -y 123 | ``` 124 | >**Note:** Windows users, if you experience an error of "unknown command unzip" you can solve this problem by doing `npm install -g unzip` and then re-running `jspm install`. 125 | 6. To run the app, execute the following command: 126 | 127 | ```shell 128 | gulp watch 129 | ``` 130 | 7. Browse to [http://localhost:9000](http://localhost:9000) to see the app. You can make changes in the code found under `src` and the browser should auto-refresh itself as you save files. 131 | 132 | > Note: At present there is a bug in the HTMLImports polyfill which only occurs on IE. We have submitted a pull request to the team with the fix. In the mean time, if you want to test on IE, you can work around the issue by explicitly adding a script tag before you load system.js. The script tag should look something like this (be sure to confirm the version number): 133 | 134 | ```html 135 | 136 | ``` 137 | 138 | ## Running The Unit Tests 139 | 140 | To run the unit tests, first ensure that you have followed the steps above in order to install all dependencies and successfully build the library. Once you have done that, proceed with these additional steps: 141 | 142 | 1. Ensure that the [Karma](http://karma-runner.github.io/) CLI is installed. If you need to install it, use the following command: 143 | 144 | ```shell 145 | npm install -g karma-cli 146 | ``` 147 | 2. Install Aurelia libs for test visibility: 148 | 149 | ```shell 150 | jspm install aurelia-framework 151 | jspm install aurelia-http-client 152 | jspm install aurelia-router 153 | ``` 154 | 3. You can now run the tests with this command: 155 | 156 | ```shell 157 | karma start 158 | ``` 159 | 160 | ## Running The E2E Tests 161 | Integration tests are performed with [Protractor](http://angular.github.io/protractor/#/). 162 | 163 | 1. Place your E2E-Tests into the folder ```test/e2e/src``` 164 | 2. Install the necessary webdriver 165 | 166 | ```shell 167 | gulp webdriver_update 168 | ``` 169 | 170 | 3. Configure the path to the webdriver by opening the file ```protractor.conf.js``` and adjusting the ```seleniumServerJar``` property. Typically its only needed to adjust the version number. 171 | 172 | 4. Run the E2E-Tests 173 | 174 | ```shell 175 | gulp e2e 176 | ``` 177 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "skeleton-navigation", 3 | "version": "0.9.5", 4 | "homepage": "https://github.com/joelcoxokc/ui-aurelia", 5 | "authors": [ 6 | "joelcoxokc " 7 | ], 8 | "license": "MIT", 9 | "ignore": [ 10 | "**/.*", 11 | "node_modules", 12 | "bower_components", 13 | "test", 14 | "tests" 15 | ], 16 | "dependencies": { 17 | "materialize": "~0.95.2" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /build/6to5-options.js: -------------------------------------------------------------------------------- 1 | // documentation for these options can be 2 | // found at https://6to5.org/docs/usage/options/ 3 | module.exports = { 4 | filename: '', 5 | filenameRelative: '', 6 | blacklist: [], 7 | whitelist: [], 8 | modules: '', 9 | sourceMap: true, 10 | sourceMapName: '', 11 | sourceRoot: '', 12 | moduleRoot: '', 13 | moduleIds: false, 14 | experimental: false, 15 | format: { 16 | comments: false, 17 | compact: false, 18 | indent: { 19 | parentheses: true, 20 | adjustMultilineComment: true, 21 | style: " ", 22 | base: 0 23 | } 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /build/paths.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | var appRoot = 'src/'; 4 | var pluginRoot = 'plugins/'; 5 | 6 | module.exports = { 7 | root: appRoot, 8 | source: { 9 | js : appRoot + '**/*.js', 10 | html : appRoot + '**/*.html', 11 | jade : appRoot + '**/*.jade', 12 | style: 'styles/**/*.css', 13 | }, 14 | plugins:{ 15 | root : pluginRoot, 16 | js : pluginRoot+ '**/*.js', 17 | html : pluginRoot+ '**/*.html', 18 | jade : pluginRoot+ '**/*.jade', 19 | fonts: 'styles/fonts/**/*', 20 | styl : { 21 | index: 'styles/index.styl', 22 | all : 'styles/**/*.styl' 23 | }, 24 | }, 25 | style: 'styles/**/*.css', 26 | output: 'dist/', 27 | doc:'./doc', 28 | e2eSpecsSrc: 'test/e2e/src/*.js', 29 | e2eSpecsDist: 'test/e2e/dist/' 30 | }; 31 | -------------------------------------------------------------------------------- /build/tasks/build.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | var gulp = require('gulp'); 3 | var $ = require('gulp-load-plugins')({lazy:false}); 4 | var runSequence = require('run-sequence'); 5 | var changed = require('gulp-changed'); 6 | var plumber = require('gulp-plumber'); 7 | var to5 = require('gulp-6to5'); 8 | var sourcemaps = require('gulp-sourcemaps'); 9 | var paths = require('../paths'); 10 | var compilerOptions = require('../6to5-options'); 11 | var assign = Object.assign || require('object.assign'); 12 | 13 | 14 | 15 | var build = { 16 | source: { 17 | js : buildSystem(paths.source.js, paths.output), 18 | html : buildHTML([paths.source.html, paths.source.jade], paths.output), 19 | style: buildCss(paths.source.style) 20 | }, 21 | 22 | plugins:{ 23 | js : buildSystem(paths.plugins.js, paths.output) , 24 | html : buildHTML([paths.plugins.html, paths.plugins.jade], paths.output) , 25 | fonts : buildFonts(paths.plugins.fonts) , 26 | styles: buildStylus(paths.plugins.styl.index) 27 | } 28 | } 29 | 30 | 31 | gulp 32 | .task('build', 33 | $.sequence( 'clean' 34 | , 'build:source' 35 | , 'build:plugins' 36 | )) 37 | 38 | gulp 39 | .task('source:style' , build.source.css ) 40 | .task('source:html' , build.source.html ) 41 | .task('source:js' , build.source.js ) 42 | .task('build:source', 43 | $.sequence( 'source:js' 44 | , 'source:html' 45 | , 'source:style' 46 | )) 47 | gulp 48 | .task('plugins:styles', build.plugins.styles ) 49 | .task('plugins:fonts' , build.plugins.fonts ) 50 | .task('plugins:html' , build.plugins.html ) 51 | .task('plugins:js' , build.plugins.js ) 52 | .task('build:plugins' , 53 | $.sequence( 'plugins:styles' 54 | , 'plugins:html' 55 | , 'plugins:js' 56 | , 'plugins:fonts' 57 | )) 58 | 59 | ////////////////////////// 60 | 61 | // transpiles changed es6 files to SystemJS format 62 | 63 | // the plumber() call prevents 'pipe breaking' caused 64 | // by errors from other gulp plugins 65 | // https://www.npmjs.com/package/gulp-plumber 66 | function buildSystem(source, dest) { 67 | 68 | return function(){ 69 | 70 | return gulp 71 | .src(source) 72 | .pipe($.flatten()) 73 | .pipe(plumber()) 74 | .pipe(changed(paths.output, {extension: '.js'})) 75 | .pipe(sourcemaps.init()) 76 | .pipe(to5(assign({}, compilerOptions, {modules:'system'}))) 77 | .pipe(sourcemaps.write({includeContent: false, sourceRoot: '/' + paths.output })) 78 | .pipe(gulp.dest(dest)); 79 | 80 | } 81 | 82 | } 83 | 84 | // copies changed html files to the output directory 85 | 86 | 87 | // this task calls the clean task (located 88 | // in ./clean.js), then runs the build-system 89 | // and build-html tasks in parallel 90 | // https://www.npmjs.com/package/gulp-run-sequence 91 | function buildHTML(source, dest) { 92 | 93 | return function() { 94 | var jadeFilter = $.filter('**/*.jade') 95 | return gulp 96 | .src(source) 97 | .pipe(jadeFilter) 98 | .pipe($.plumber()) 99 | .pipe($.jade()) 100 | .pipe($.plumber.stop()) 101 | .pipe(jadeFilter.restore()) 102 | .pipe($.flatten()) 103 | .pipe(changed(paths.output, {extension: '.html'})) 104 | .pipe(gulp.dest(dest)); 105 | 106 | } 107 | 108 | } 109 | 110 | 111 | function buildFonts(source) { 112 | 113 | return function() { 114 | 115 | return gulp 116 | .src(source) 117 | .pipe(gulp.dest(paths.output + '/fonts')) 118 | 119 | } 120 | 121 | } 122 | 123 | function buildStylus(source) { 124 | 125 | return function() { 126 | 127 | return gulp 128 | .src(source) 129 | .pipe($.plumber()) 130 | .pipe($.stylus()) 131 | .pipe($.concat('ui-aurelia.css')) 132 | .pipe($.autoprefixer()) 133 | .pipe($.plumber.stop()) 134 | .pipe(gulp.dest(paths.output)) 135 | 136 | } 137 | 138 | } 139 | 140 | function buildCss(source) { 141 | 142 | return function() { 143 | console.log(source) 144 | return gulp 145 | .src(source) 146 | .pipe($.concat('system.css')) 147 | .pipe($.autoprefixer()) 148 | .pipe(gulp.dest(paths.output)) 149 | 150 | } 151 | 152 | } 153 | 154 | 155 | })(); 156 | -------------------------------------------------------------------------------- /build/tasks/clean.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var paths = require('../paths'); 3 | var del = require('del'); 4 | var vinylPaths = require('vinyl-paths'); 5 | 6 | // deletes all files in the output path 7 | gulp.task('clean', function() { 8 | return gulp.src([paths.output]) 9 | .pipe(vinylPaths(del)); 10 | }); 11 | -------------------------------------------------------------------------------- /build/tasks/dev.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var tools = require('aurelia-tools'); 3 | 4 | // source code for the tasks called in this file 5 | // is located at: https://github.com/aurelia/tools/blob/master/src/dev.js 6 | 7 | // updates dependencies in this folder 8 | // from folders in the parent directory 9 | gulp.task('update-own-deps', function(){ 10 | tools.updateOwnDependenciesFromLocalRepositories(); 11 | }); 12 | 13 | // quickly pulls in all of the aurelia 14 | // github repos, placing them up one directory 15 | // from where the command is executed, 16 | // then runs `npm install` 17 | // and `gulp build` for each repo 18 | gulp.task('build-dev-env', function () { 19 | tools.buildDevEnv(); 20 | }); 21 | -------------------------------------------------------------------------------- /build/tasks/doc.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var tools = require('aurelia-tools'); 3 | var paths = require('../paths'); 4 | var yuidoc = require('gulp-yuidoc'); 5 | 6 | // uses yui to generate documentation to doc/api.json 7 | gulp.task('doc-generate', function(){ 8 | return gulp.src(paths.source.js) 9 | .pipe(yuidoc.parser(null, 'api.json')) 10 | .pipe(gulp.dest(paths.doc)); 11 | }); 12 | 13 | // takes output of doc-generate task 14 | // and cleans it up for use with aurelia 15 | // documentation app 16 | gulp.task('doc', ['doc-generate'], function(){ 17 | tools.transformAPIModel(paths.doc); 18 | }); 19 | -------------------------------------------------------------------------------- /build/tasks/e2e.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var paths = require('../paths'); 3 | var to5 = require('gulp-6to5'); 4 | var plumber = require('gulp-plumber'); 5 | var gulp = require('gulp'); 6 | var webdriver_update = require('gulp-protractor').webdriver_update; 7 | var protractor = require("gulp-protractor").protractor; 8 | 9 | // for full documentation of gulp-protractor, 10 | // please check https://github.com/mllrsohn/gulp-protractor 11 | gulp.task('webdriver_update', webdriver_update); 12 | 13 | // transpiles files in 14 | // /test/e2e/src/ from es6 to es5 15 | // then copies them to test/e2e/dist/ 16 | gulp.task('build-e2e', function () { 17 | return gulp.src(paths.e2eSpecsSrc) 18 | .pipe(plumber()) 19 | .pipe(to5()) 20 | .pipe(gulp.dest(paths.e2eSpecsDist)); 21 | }); 22 | 23 | // runs build-e2e task 24 | // then runs end to end tasks 25 | // using Protractor: http://angular.github.io/protractor/ 26 | gulp.task('e2e', ['webdriver_update', 'build-e2e'], function(cb) { 27 | return gulp.src(paths.e2eSpecsDist + "/*.js") 28 | .pipe(protractor({ 29 | configFile: "protractor.conf.js", 30 | args: ['--baseUrl', 'http://127.0.0.1:9000'] 31 | })) 32 | .on('error', function(e) { throw e; }); 33 | }); 34 | -------------------------------------------------------------------------------- /build/tasks/lint.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var paths = require('../paths'); 3 | var jshint = require('gulp-jshint'); 4 | var stylish = require('jshint-stylish'); 5 | 6 | // runs jshint on all .js files 7 | gulp.task('lint', function() { 8 | return gulp.src(paths.source.js) 9 | .pipe(jshint()) 10 | .pipe(jshint.reporter(stylish)); 11 | }); 12 | -------------------------------------------------------------------------------- /build/tasks/prepare-release.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var runSequence = require('run-sequence'); 3 | var paths = require('../paths'); 4 | var changelog = require('conventional-changelog'); 5 | var fs = require('fs'); 6 | var bump = require('gulp-bump'); 7 | 8 | // utilizes the bump plugin to bump the 9 | // semver for the repo 10 | gulp.task('bump-version', function(){ 11 | return gulp.src(['./package.json']) 12 | .pipe(bump({type:'patch'})) //major|minor|patch|prerelease 13 | .pipe(gulp.dest('./')); 14 | }); 15 | 16 | // generates the CHANGELOG.md file based on commit 17 | // from git commit messages 18 | gulp.task('changelog', function(callback) { 19 | var pkg = JSON.parse(fs.readFileSync('./package.json', 'utf-8')); 20 | 21 | return changelog({ 22 | repository: pkg.repository.url, 23 | version: pkg.version, 24 | file: paths.doc + '/CHANGELOG.md' 25 | }, function(err, log) { 26 | fs.writeFileSync(paths.doc + '/CHANGELOG.md', log); 27 | }); 28 | }); 29 | 30 | // calls the listed sequence of tasks in order 31 | gulp.task('prepare-release', function(callback){ 32 | return runSequence( 33 | 'build', 34 | 'lint', 35 | 'bump-version', 36 | 'doc', 37 | 'changelog', 38 | callback 39 | ); 40 | }); 41 | -------------------------------------------------------------------------------- /build/tasks/serve.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var browserSync = require('browser-sync'); 3 | 4 | // this task utilizes the browsersync plugin 5 | // to create a dev server instance 6 | // at http://localhost:9000 7 | gulp.task('serve', ['build'], function(done) { 8 | browserSync({ 9 | open: false, 10 | port: 9000, 11 | server: { 12 | baseDir: ['.'], 13 | middleware: function (req, res, next) { 14 | res.setHeader('Access-Control-Allow-Origin', '*'); 15 | next(); 16 | } 17 | } 18 | }, done); 19 | }); 20 | -------------------------------------------------------------------------------- /build/tasks/watch.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var paths = require('../paths'); 3 | var browserSync = require('browser-sync'); 4 | 5 | // outputs changes to files to the console 6 | function reportChange(event){ 7 | console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); 8 | } 9 | 10 | // this task wil watch for changes 11 | // to js, html, and css files and call the 12 | // reportChange method. Also, by depending on the 13 | // serve task, it will instantiate a browserSync session 14 | gulp.task('watch', ['serve'], function() { 15 | gulp.watch(paths.source.js, ['source:js' , browserSync.reload]).on('change', reportChange); 16 | gulp.watch(paths.source.html, ['source:html' , browserSync.reload]).on('change', reportChange); 17 | gulp.watch(paths.source.jade, ['source:html' , browserSync.reload]).on('change', reportChange); 18 | gulp.watch(paths.plugins.js, ['plugins:js', browserSync.reload]).on('change', reportChange); 19 | gulp.watch(paths.plugins.styl.all, ['plugins:styles', browserSync.reload]).on('change', reportChange); 20 | gulp.watch(paths.plugins.html, ['plugins:html' , browserSync.reload]).on('change', reportChange); 21 | gulp.watch(paths.plugins.jade, ['plugins:html' , browserSync.reload]).on('change', reportChange); 22 | // gulp.watch(paths.plugins.style, browserSync.reload).on('change', reportChange); 23 | }); 24 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | System.config({ 2 | "paths": { 3 | "*": "*.js", 4 | "github:*": "jspm_packages/github/*.js", 5 | "npm:*": "jspm_packages/npm/*.js", 6 | "aurelia-skeleton-navigation/*": "lib/*.js" 7 | } 8 | }); 9 | 10 | System.config({ 11 | "map": { 12 | "Waves": "github:fians/Waves@0.6.0", 13 | "aurelia-bootstrapper": "github:aurelia/bootstrapper@0.9.3", 14 | "aurelia-dependency-injection": "github:aurelia/dependency-injection@0.4.2", 15 | "aurelia-framework": "github:aurelia/framework@0.8.6", 16 | "aurelia-http-client": "github:aurelia/http-client@0.4.4", 17 | "aurelia-router": "github:aurelia/router@0.5.5", 18 | "aurelia-templating": "github:aurelia/templating@0.8.9", 19 | "font-awesome": "npm:font-awesome@4.3.0", 20 | "jquery": "github:components/jquery@2.1.3", 21 | "lodash": "npm:lodash@3.1.0", 22 | "materialize": "github:Dogfalo/materialize@0.95.2", 23 | "waves": "github:fians/Waves@0.6.0", 24 | "github:aurelia/binding@0.3.4": { 25 | "aurelia-dependency-injection": "github:aurelia/dependency-injection@0.4.2", 26 | "aurelia-metadata": "github:aurelia/metadata@0.3.1", 27 | "aurelia-task-queue": "github:aurelia/task-queue@0.2.3" 28 | }, 29 | "github:aurelia/bootstrapper@0.9.3": { 30 | "aurelia-event-aggregator": "github:aurelia/event-aggregator@0.2.2", 31 | "aurelia-framework": "github:aurelia/framework@0.8.6", 32 | "aurelia-history": "github:aurelia/history@0.2.2", 33 | "aurelia-history-browser": "github:aurelia/history-browser@0.2.3", 34 | "aurelia-loader-default": "github:aurelia/loader-default@0.4.1", 35 | "aurelia-logging-console": "github:aurelia/logging-console@0.2.2", 36 | "aurelia-router": "github:aurelia/router@0.5.5", 37 | "aurelia-templating": "github:aurelia/templating@0.8.9", 38 | "aurelia-templating-binding": "github:aurelia/templating-binding@0.8.4", 39 | "aurelia-templating-resources": "github:aurelia/templating-resources@0.8.6", 40 | "aurelia-templating-router": "github:aurelia/templating-router@0.9.2" 41 | }, 42 | "github:aurelia/dependency-injection@0.4.2": { 43 | "aurelia-metadata": "github:aurelia/metadata@0.3.1", 44 | "core-js": "npm:core-js@0.4.10" 45 | }, 46 | "github:aurelia/framework@0.8.6": { 47 | "aurelia-binding": "github:aurelia/binding@0.3.4", 48 | "aurelia-dependency-injection": "github:aurelia/dependency-injection@0.4.2", 49 | "aurelia-loader": "github:aurelia/loader@0.3.3", 50 | "aurelia-logging": "github:aurelia/logging@0.2.2", 51 | "aurelia-metadata": "github:aurelia/metadata@0.3.1", 52 | "aurelia-task-queue": "github:aurelia/task-queue@0.2.3", 53 | "aurelia-templating": "github:aurelia/templating@0.8.9" 54 | }, 55 | "github:aurelia/history-browser@0.2.3": { 56 | "aurelia-history": "github:aurelia/history@0.2.2", 57 | "core-js": "npm:core-js@0.4.10" 58 | }, 59 | "github:aurelia/http-client@0.4.4": { 60 | "aurelia-path": "github:aurelia/path@0.4.2", 61 | "core-js": "npm:core-js@0.4.10" 62 | }, 63 | "github:aurelia/loader-default@0.4.1": { 64 | "aurelia-loader": "github:aurelia/loader@0.3.3", 65 | "aurelia-metadata": "github:aurelia/metadata@0.3.1", 66 | "aurelia-path": "github:aurelia/path@0.4.2" 67 | }, 68 | "github:aurelia/loader@0.3.3": { 69 | "aurelia-html-template-element": "github:aurelia/html-template-element@0.1.2", 70 | "core-js": "npm:core-js@0.4.10", 71 | "webcomponentsjs": "github:webcomponents/webcomponentsjs@0.5.4" 72 | }, 73 | "github:aurelia/router@0.5.5": { 74 | "aurelia-dependency-injection": "github:aurelia/dependency-injection@0.4.2", 75 | "aurelia-history": "github:aurelia/history@0.2.2", 76 | "aurelia-path": "github:aurelia/path@0.4.2", 77 | "aurelia-route-recognizer": "github:aurelia/route-recognizer@0.2.2", 78 | "core-js": "npm:core-js@0.4.10" 79 | }, 80 | "github:aurelia/templating-binding@0.8.4": { 81 | "aurelia-binding": "github:aurelia/binding@0.3.4", 82 | "aurelia-templating": "github:aurelia/templating@0.8.9" 83 | }, 84 | "github:aurelia/templating-resources@0.8.6": { 85 | "aurelia-binding": "github:aurelia/binding@0.3.4", 86 | "aurelia-dependency-injection": "github:aurelia/dependency-injection@0.4.2", 87 | "aurelia-templating": "github:aurelia/templating@0.8.9", 88 | "core-js": "npm:core-js@0.4.10" 89 | }, 90 | "github:aurelia/templating-router@0.9.2": { 91 | "aurelia-dependency-injection": "github:aurelia/dependency-injection@0.4.2", 92 | "aurelia-metadata": "github:aurelia/metadata@0.3.1", 93 | "aurelia-path": "github:aurelia/path@0.4.2", 94 | "aurelia-router": "github:aurelia/router@0.5.5", 95 | "aurelia-templating": "github:aurelia/templating@0.8.9" 96 | }, 97 | "github:aurelia/templating@0.8.9": { 98 | "aurelia-binding": "github:aurelia/binding@0.3.4", 99 | "aurelia-dependency-injection": "github:aurelia/dependency-injection@0.4.2", 100 | "aurelia-html-template-element": "github:aurelia/html-template-element@0.1.2", 101 | "aurelia-loader": "github:aurelia/loader@0.3.3", 102 | "aurelia-logging": "github:aurelia/logging@0.2.2", 103 | "aurelia-metadata": "github:aurelia/metadata@0.3.1", 104 | "aurelia-path": "github:aurelia/path@0.4.2", 105 | "aurelia-task-queue": "github:aurelia/task-queue@0.2.3", 106 | "core-js": "npm:core-js@0.4.10" 107 | }, 108 | "github:jspm/nodelibs-process@0.1.1": { 109 | "process": "npm:process@0.10.0" 110 | }, 111 | "npm:core-js@0.4.10": { 112 | "process": "github:jspm/nodelibs-process@0.1.1" 113 | }, 114 | "npm:lodash@3.1.0": { 115 | "process": "github:jspm/nodelibs-process@0.1.1" 116 | } 117 | } 118 | }); 119 | 120 | -------------------------------------------------------------------------------- /dist/app.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/app.js: -------------------------------------------------------------------------------- 1 | System.register(["aurelia-router", "aurelia-framework"], function (_export) { 2 | "use strict"; 3 | 4 | var Router, Behaviore, _prototypeProperties, _classCallCheck, App; 5 | return { 6 | setters: [function (_aureliaRouter) { 7 | Router = _aureliaRouter.Router; 8 | }, function (_aureliaFramework) { 9 | Behaviore = _aureliaFramework.Behaviore; 10 | }], 11 | execute: function () { 12 | _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); }; 13 | 14 | _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; 15 | 16 | App = _export("App", (function () { 17 | function App(router) { 18 | _classCallCheck(this, App); 19 | 20 | this.router = router; 21 | this.router.configure(function (config) { 22 | config.title = "Aurelia"; 23 | config.map([{ route: ["", "welcome"], moduleId: "welcome", nav: true, title: "Welcome" }, { route: "flickr", moduleId: "flickr", nav: true }, { route: "child-router", moduleId: "child-router", nav: true, title: "Child Router" }]); 24 | 25 | }); 26 | 27 | } 28 | 29 | _prototypeProperties(App, { 30 | inject: { 31 | value: function inject() { 32 | return [Router, Element]; 33 | }, 34 | writable: true, 35 | configurable: true 36 | } 37 | }); 38 | 39 | return App; 40 | })()); 41 | } 42 | }; 43 | }); 44 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7TUFBUSxNQUFNLEVBQ04sU0FBUyx5Q0FFSixHQUFHOzs7QUFIUixZQUFNLGtCQUFOLE1BQU07O0FBQ04sZUFBUyxxQkFBVCxTQUFTOzs7Ozs7O0FBRUosU0FBRztBQU1ELGlCQU5GLEdBQUcsQ0FNQSxNQUFNO2dDQU5ULEdBQUc7O0FBUVIsY0FBSSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUM7QUFDckIsY0FBSSxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQ2pCLFVBQUEsTUFBTSxFQUFJO0FBRU4sa0JBQU0sQ0FBQyxLQUFLLEdBQUcsU0FBUyxDQUFDO0FBQ3pCLGtCQUFNLENBQUMsR0FBRyxDQUFDLENBRVAsRUFBRSxLQUFLLEVBQUUsQ0FBQyxFQUFFLEVBQUMsU0FBUyxDQUFDLEVBQUcsUUFBUSxFQUFFLFNBQVMsRUFBTyxHQUFHLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBQyxTQUFTLEVBQUUsRUFDaEYsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFTLFFBQVEsRUFBRSxRQUFRLEVBQVEsR0FBRyxFQUFFLElBQUksRUFBRSxFQUMvRCxFQUFFLEtBQUssRUFBRSxjQUFjLEVBQUcsUUFBUSxFQUFFLGNBQWMsRUFBRSxHQUFHLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBQyxjQUFjLEVBQUUsQ0FFeEYsQ0FBQyxDQUFDOztXQUdOLENBQUMsQ0FBQzs7U0FHVjs7NkJBekJRLEdBQUc7QUFHTCxnQkFBTTttQkFBQSxrQkFBRztBQUFFLHFCQUFPLENBQUMsTUFBTSxFQUFFLE9BQU8sQ0FBQyxDQUFDO2FBQUU7Ozs7OztlQUhwQyxHQUFHIiwiZmlsZSI6ImFwcC5qcyIsInNvdXJjZVJvb3QiOiIvZGlzdC8ifQ== -------------------------------------------------------------------------------- /dist/aside.js: -------------------------------------------------------------------------------- 1 | System.register(["aurelia-framework"], function (_export) { 2 | "use strict"; 3 | 4 | var Behavior, _prototypeProperties, _classCallCheck, defaults, Aside; 5 | return { 6 | setters: [function (_aureliaFramework) { 7 | Behavior = _aureliaFramework.Behavior; 8 | }], 9 | execute: function () { 10 | _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); }; 11 | 12 | _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; 13 | 14 | defaults = { 15 | asideId: "aside1", 16 | side: "left", 17 | open: false, 18 | fixed: true 19 | }; 20 | Aside = _export("Aside", (function () { 21 | function Aside(options) { 22 | _classCallCheck(this, Aside); 23 | 24 | this.defaults = defaults; 25 | 26 | this.asideId = options.asideId || this.defaults.asideId; 27 | this.fixed = options.fixed || this.defaults.fixed; 28 | this.side = options.side || this.defaults.side; 29 | this.open = options.open || this.defaults.open; 30 | this.size = options.size || this.defaults.size; 31 | } 32 | 33 | _prototypeProperties(Aside, { 34 | metadata: { 35 | value: function metadata() { 36 | return Behavior.withProperty("open").withProperty("side").withProperty("size").withProperty("fixed").attachedBehavior("toggle"); 37 | }, 38 | writable: true, 39 | configurable: true 40 | } 41 | }, { 42 | activate: { 43 | value: function activate(options) { 44 | console.log("Aside Activated", this); 45 | }, 46 | writable: true, 47 | configurable: true 48 | }, 49 | toggle: { 50 | value: function toggle() { 51 | this.open = !this.open; 52 | }, 53 | writable: true, 54 | configurable: true 55 | } 56 | }); 57 | 58 | return Aside; 59 | })()); 60 | } 61 | }; 62 | }); 63 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFzaWRlLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7OztNQUFRLFFBQVEseUNBRVosUUFBUSxFQU9DLEtBQUs7OztBQVRWLGNBQVEscUJBQVIsUUFBUTs7Ozs7OztBQUVaLGNBQVEsR0FBRztBQUNiLGVBQU8sRUFBRyxRQUFRO0FBQ2xCLFlBQUksRUFBTSxNQUFNO0FBQ2hCLFlBQUksRUFBTSxLQUFLO0FBQ2YsYUFBSyxFQUFLLElBQUk7T0FDZjtBQUVZLFdBQUs7QUFjSCxpQkFkRixLQUFLLENBY0YsT0FBTztnQ0FkVixLQUFLOztBQWVWLGNBQUksQ0FBQyxRQUFRLEdBQUcsUUFBUSxDQUFDOztBQUV6QixjQUFJLENBQUMsT0FBTyxHQUFHLE9BQU8sQ0FBQyxPQUFPLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUE7QUFDdkQsY0FBSSxDQUFDLEtBQUssR0FBSyxPQUFPLENBQUMsS0FBSyxJQUFNLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFBO0FBQ3JELGNBQUksQ0FBQyxJQUFJLEdBQU0sT0FBTyxDQUFDLElBQUksSUFBTyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQTtBQUNwRCxjQUFJLENBQUMsSUFBSSxHQUFNLE9BQU8sQ0FBQyxJQUFJLElBQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUE7QUFDcEQsY0FBSSxDQUFDLElBQUksR0FBTSxPQUFPLENBQUMsSUFBSSxJQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFBO1NBRXZEOzs2QkF2QlEsS0FBSztBQUVQLGtCQUFRO21CQUFBLG9CQUFFO0FBRWIscUJBQU8sUUFBUSxDQUNWLFlBQVksQ0FBQyxNQUFNLENBQUMsQ0FDcEIsWUFBWSxDQUFDLE1BQU0sQ0FBQyxDQUNwQixZQUFZLENBQUMsTUFBTSxDQUFDLENBQ3BCLFlBQVksQ0FBQyxPQUFPLENBQUMsQ0FDckIsZ0JBQWdCLENBQUMsUUFBUSxDQUFDLENBQUE7YUFFbEM7Ozs7O0FBY0Qsa0JBQVE7bUJBQUEsa0JBQUMsT0FBTyxFQUFDO0FBRWIscUJBQU8sQ0FBQyxHQUFHLENBQUMsaUJBQWlCLEVBQUUsSUFBSSxDQUFDLENBQUM7YUFFeEM7Ozs7QUFHRCxnQkFBTTttQkFBQSxrQkFBRTtBQUNKLGtCQUFJLENBQUMsSUFBSSxHQUFHLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQzthQUUxQjs7Ozs7O2VBbkNRLEtBQUsiLCJmaWxlIjoiYXNpZGUuanMiLCJzb3VyY2VSb290IjoiL2Rpc3QvIn0= -------------------------------------------------------------------------------- /dist/bar.js: -------------------------------------------------------------------------------- 1 | System.register(["aurelia-framework"], function (_export) { 2 | "use strict"; 3 | 4 | var Behavior, _prototypeProperties, _classCallCheck, Bar; 5 | return { 6 | setters: [function (_aureliaFramework) { 7 | Behavior = _aureliaFramework.Behavior; 8 | }], 9 | execute: function () { 10 | _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); }; 11 | 12 | _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; 13 | 14 | Bar = _export("Bar", (function () { 15 | function Bar(options) { 16 | _classCallCheck(this, Bar); 17 | 18 | this.showing = false; 19 | 20 | this.barId = "bar1"; 21 | this.open = false; 22 | this.fixed = true; 23 | this.size = "sm"; 24 | } 25 | 26 | _prototypeProperties(Bar, { 27 | metadata: { 28 | value: function metadata() { 29 | return Behavior.withProperty("showing"); 30 | }, 31 | writable: true, 32 | configurable: true 33 | } 34 | }, { 35 | open: { 36 | value: function open() { 37 | this.showing = !this.showing; 38 | }, 39 | writable: true, 40 | configurable: true 41 | } 42 | }); 43 | 44 | return Bar; 45 | })()); 46 | } 47 | }; 48 | }); 49 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7TUFBUSxRQUFRLHlDQUVILEdBQUc7OztBQUZSLGNBQVEscUJBQVIsUUFBUTs7Ozs7OztBQUVILFNBQUc7QUFTRCxpQkFURixHQUFHLENBU0EsT0FBTztnQ0FUVixHQUFHOztBQVdSLGNBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFBOztBQUVwQixjQUFJLENBQUMsS0FBSyxHQUFLLE1BQU0sQ0FBQTtBQUNyQixjQUFJLENBQUMsSUFBSSxHQUFNLEtBQUssQ0FBQTtBQUNwQixjQUFJLENBQUMsS0FBSyxHQUFLLElBQUksQ0FBQTtBQUNuQixjQUFJLENBQUMsSUFBSSxHQUFNLElBQUksQ0FBQTtTQUN0Qjs7NkJBakJRLEdBQUc7QUFFTCxrQkFBUTttQkFBQSxvQkFBRTtBQUViLHFCQUFPLFFBQVEsQ0FDVixZQUFZLENBQUMsU0FBUyxDQUFDLENBQUE7YUFFL0I7Ozs7O0FBWUQsY0FBSTttQkFBQSxnQkFBRTtBQUVGLGtCQUFJLENBQUMsT0FBTyxHQUFHLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQzthQUVoQzs7Ozs7O2VBdkJRLEdBQUciLCJmaWxlIjoiYmFyLmpzIiwic291cmNlUm9vdCI6Ii9kaXN0LyJ9 -------------------------------------------------------------------------------- /dist/body.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /dist/body.js: -------------------------------------------------------------------------------- 1 | System.register(["aurelia-templating"], function (_export) { 2 | "use strict"; 3 | 4 | var Behavior, _prototypeProperties, _classCallCheck, MzBody; 5 | return { 6 | setters: [function (_aureliaTemplating) { 7 | Behavior = _aureliaTemplating.Behavior; 8 | }], 9 | execute: function () { 10 | _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); }; 11 | 12 | _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; 13 | 14 | MzBody = _export("MzBody", (function () { 15 | function MzBody(element) { 16 | _classCallCheck(this, MzBody); 17 | 18 | console.log(element); 19 | this.element = element; 20 | } 21 | 22 | _prototypeProperties(MzBody, { 23 | metadata: { 24 | value: function metadata() { 25 | return Behavior.customElement("ui-body"); 26 | }, 27 | writable: true, 28 | configurable: true 29 | }, 30 | inject: { 31 | value: function inject() { 32 | return [Element]; 33 | }, 34 | writable: true, 35 | configurable: true 36 | } 37 | }); 38 | 39 | return MzBody; 40 | })()); 41 | } 42 | }; 43 | }); 44 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJvZHkuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O01BQVEsUUFBUSx5Q0FFSCxNQUFNOzs7QUFGWCxjQUFRLHNCQUFSLFFBQVE7Ozs7Ozs7QUFFSCxZQUFNO0FBV04saUJBWEEsTUFBTSxDQVdMLE9BQU87Z0NBWFIsTUFBTTs7QUFZZixpQkFBTyxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsQ0FBQTtBQUNwQixjQUFJLENBQUMsT0FBTyxHQUFHLE9BQU8sQ0FBQTtTQUN2Qjs7NkJBZFUsTUFBTTtBQUNWLGtCQUFRO21CQUFBLG9CQUFHO0FBQ2hCLHFCQUFPLFFBQVEsQ0FDWixhQUFhLENBQUMsU0FBUyxDQUFDLENBQUE7YUFJNUI7Ozs7QUFDTSxnQkFBTTttQkFBQSxrQkFBRztBQUNkLHFCQUFPLENBQUMsT0FBTyxDQUFDLENBQUM7YUFDbEI7Ozs7OztlQVZVLE1BQU0iLCJmaWxlIjoiYm9keS5qcyIsInNvdXJjZVJvb3QiOiIvZGlzdC8ifQ== -------------------------------------------------------------------------------- /dist/child-router.html: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /dist/child-router.js: -------------------------------------------------------------------------------- 1 | System.register(["aurelia-router"], function (_export) { 2 | "use strict"; 3 | 4 | var Router, _prototypeProperties, _classCallCheck, Welcome; 5 | return { 6 | setters: [function (_aureliaRouter) { 7 | Router = _aureliaRouter.Router; 8 | }], 9 | execute: function () { 10 | _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); }; 11 | 12 | _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; 13 | 14 | Welcome = _export("Welcome", (function () { 15 | function Welcome(router) { 16 | _classCallCheck(this, Welcome); 17 | 18 | this.heading = "Child Router"; 19 | this.router = router; 20 | router.configure(function (config) { 21 | config.map([{ route: ["", "welcome"], moduleId: "welcome", nav: true, title: "Welcome" }, { route: "flickr", moduleId: "flickr", nav: true }, { route: "child-router", moduleId: "child-router", nav: true, title: "Child Router" }]); 22 | }); 23 | } 24 | 25 | _prototypeProperties(Welcome, { 26 | inject: { 27 | value: function inject() { 28 | return [Router]; 29 | }, 30 | writable: true, 31 | configurable: true 32 | } 33 | }); 34 | 35 | return Welcome; 36 | })()); 37 | } 38 | }; 39 | }); 40 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNoaWxkLXJvdXRlci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7TUFBUSxNQUFNLHlDQUVELE9BQU87OztBQUZaLFlBQU0sa0JBQU4sTUFBTTs7Ozs7OztBQUVELGFBQU87QUFFUCxpQkFGQSxPQUFPLENBRU4sTUFBTTtnQ0FGUCxPQUFPOztBQUdoQixjQUFJLENBQUMsT0FBTyxHQUFHLGNBQWMsQ0FBQztBQUM5QixjQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztBQUNyQixnQkFBTSxDQUFDLFNBQVMsQ0FBQyxVQUFBLE1BQU0sRUFBSTtBQUN6QixrQkFBTSxDQUFDLEdBQUcsQ0FBQyxDQUNULEVBQUUsS0FBSyxFQUFFLENBQUMsRUFBRSxFQUFDLFNBQVMsQ0FBQyxFQUFHLFFBQVEsRUFBRSxTQUFTLEVBQU8sR0FBRyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUMsU0FBUyxFQUFFLEVBQ2hGLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBUyxRQUFRLEVBQUUsUUFBUSxFQUFRLEdBQUcsRUFBRSxJQUFJLEVBQUUsRUFDL0QsRUFBRSxLQUFLLEVBQUUsY0FBYyxFQUFHLFFBQVEsRUFBRSxjQUFjLEVBQUUsR0FBRyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUMsY0FBYyxFQUFFLENBQ3RGLENBQUMsQ0FBQztXQUNKLENBQUMsQ0FBQztTQUNKOzs2QkFaVSxPQUFPO0FBQ1gsZ0JBQU07bUJBQUEsa0JBQUc7QUFBRSxxQkFBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDO2FBQUU7Ozs7OztlQUR6QixPQUFPIiwiZmlsZSI6ImNoaWxkLXJvdXRlci5qcyIsInNvdXJjZVJvb3QiOiIvZGlzdC8ifQ== -------------------------------------------------------------------------------- /dist/container.js: -------------------------------------------------------------------------------- 1 | System.register([], function (_export) { 2 | "use strict"; 3 | 4 | return { 5 | setters: [], 6 | execute: function () {} 7 | }; 8 | }); 9 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJjb250YWluZXIuanMiLCJzb3VyY2VSb290IjoiL2Rpc3QvIn0= -------------------------------------------------------------------------------- /dist/flex.js: -------------------------------------------------------------------------------- 1 | System.register([], function (_export) { 2 | "use strict"; 3 | 4 | return { 5 | setters: [], 6 | execute: function () {} 7 | }; 8 | }); 9 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJmbGV4LmpzIiwic291cmNlUm9vdCI6Ii9kaXN0LyJ9 -------------------------------------------------------------------------------- /dist/flickr.html: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /dist/flickr.js: -------------------------------------------------------------------------------- 1 | System.register(["aurelia-http-client"], function (_export) { 2 | "use strict"; 3 | 4 | var HttpClient, _prototypeProperties, _classCallCheck, url, Flickr; 5 | return { 6 | setters: [function (_aureliaHttpClient) { 7 | HttpClient = _aureliaHttpClient.HttpClient; 8 | }], 9 | execute: function () { 10 | _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); }; 11 | 12 | _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; 13 | 14 | url = "http://api.flickr.com/services/feeds/photos_public.gne?tags=rainier&tagmode=any&format=json"; 15 | Flickr = _export("Flickr", (function () { 16 | function Flickr(http) { 17 | _classCallCheck(this, Flickr); 18 | 19 | this.heading = "Flickr"; 20 | this.images = []; 21 | this.http = http; 22 | } 23 | 24 | _prototypeProperties(Flickr, { 25 | inject: { 26 | value: function inject() { 27 | return [HttpClient]; 28 | }, 29 | writable: true, 30 | configurable: true 31 | } 32 | }, { 33 | activate: { 34 | value: function activate() { 35 | var _this = this; 36 | return this.http.jsonp(url).then(function (response) { 37 | _this.images = response.content.items; 38 | }); 39 | }, 40 | writable: true, 41 | configurable: true 42 | }, 43 | canDeactivate: { 44 | value: function canDeactivate() { 45 | return confirm("Are you sure you want to leave?"); 46 | }, 47 | writable: true, 48 | configurable: true 49 | } 50 | }); 51 | 52 | return Flickr; 53 | })()); 54 | } 55 | }; 56 | }); 57 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZsaWNrci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7TUFBUSxVQUFVLHlDQUVkLEdBQUcsRUFFTSxNQUFNOzs7QUFKWCxnQkFBVSxzQkFBVixVQUFVOzs7Ozs7O0FBRWQsU0FBRyxHQUFHLDZGQUE2RjtBQUUxRixZQUFNO0FBRU4saUJBRkEsTUFBTSxDQUVMLElBQUk7Z0NBRkwsTUFBTTs7QUFHZixjQUFJLENBQUMsT0FBTyxHQUFHLFFBQVEsQ0FBQztBQUN4QixjQUFJLENBQUMsTUFBTSxHQUFHLEVBQUUsQ0FBQztBQUNqQixjQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztTQUNsQjs7NkJBTlUsTUFBTTtBQUNWLGdCQUFNO21CQUFBLGtCQUFHO0FBQUUscUJBQU8sQ0FBQyxVQUFVLENBQUMsQ0FBQzthQUFFOzs7OztBQU94QyxrQkFBUTttQkFBQSxvQkFBRTs7QUFDUixxQkFBTyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBQSxRQUFRLEVBQUk7QUFDM0Msc0JBQUssTUFBTSxHQUFHLFFBQVEsQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDO2VBQ3RDLENBQUMsQ0FBQzthQUNKOzs7O0FBRUQsdUJBQWE7bUJBQUEseUJBQUU7QUFDYixxQkFBTyxPQUFPLENBQUMsaUNBQWlDLENBQUMsQ0FBQzthQUNuRDs7Ozs7O2VBaEJVLE1BQU0iLCJmaWxlIjoiZmxpY2tyLmpzIiwic291cmNlUm9vdCI6Ii9kaXN0LyJ9 -------------------------------------------------------------------------------- /dist/fonts/material-design-icons/Material-Design-Icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/dist/fonts/material-design-icons/Material-Design-Icons.eot -------------------------------------------------------------------------------- /dist/fonts/material-design-icons/Material-Design-Icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/dist/fonts/material-design-icons/Material-Design-Icons.ttf -------------------------------------------------------------------------------- /dist/fonts/material-design-icons/Material-Design-Icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/dist/fonts/material-design-icons/Material-Design-Icons.woff -------------------------------------------------------------------------------- /dist/fonts/roboto/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/dist/fonts/roboto/Roboto-Bold.ttf -------------------------------------------------------------------------------- /dist/fonts/roboto/Roboto-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/dist/fonts/roboto/Roboto-Light.ttf -------------------------------------------------------------------------------- /dist/fonts/roboto/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/dist/fonts/roboto/Roboto-Medium.ttf -------------------------------------------------------------------------------- /dist/fonts/roboto/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/dist/fonts/roboto/Roboto-Regular.ttf -------------------------------------------------------------------------------- /dist/fonts/roboto/Roboto-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/dist/fonts/roboto/Roboto-Thin.ttf -------------------------------------------------------------------------------- /dist/form.html: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /dist/form.js: -------------------------------------------------------------------------------- 1 | System.register([], function (_export) { 2 | "use strict"; 3 | 4 | var _prototypeProperties, _classCallCheck, Welcome, UpperValueConverter; 5 | return { 6 | setters: [], 7 | execute: function () { 8 | _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); }; 9 | 10 | _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; 11 | 12 | Welcome = _export("Welcome", (function () { 13 | function Welcome() { 14 | _classCallCheck(this, Welcome); 15 | 16 | this.heading = "Welcome to the Aurelia Navigation App!"; 17 | this.firstName = "John"; 18 | this.lastName = "Doe"; 19 | } 20 | 21 | _prototypeProperties(Welcome, null, { 22 | fullName: { 23 | get: function () { 24 | return "" + this.firstName + " " + this.lastName; 25 | }, 26 | configurable: true 27 | }, 28 | welcome: { 29 | value: function welcome() {}, 30 | writable: true, 31 | configurable: true 32 | } 33 | }); 34 | 35 | return Welcome; 36 | })()); 37 | UpperValueConverter = _export("UpperValueConverter", (function () { 38 | function UpperValueConverter() { 39 | _classCallCheck(this, UpperValueConverter); 40 | } 41 | 42 | _prototypeProperties(UpperValueConverter, null, { 43 | toView: { 44 | value: function toView(value) { 45 | return value && value.toUpperCase(); 46 | }, 47 | writable: true, 48 | configurable: true 49 | } 50 | }); 51 | 52 | return UpperValueConverter; 53 | })()); 54 | } 55 | }; 56 | }); 57 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZvcm0uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OzZDQUFhLE9BQU8sRUFnQlAsbUJBQW1COzs7Ozs7OztBQWhCbkIsYUFBTztBQUNQLGlCQURBLE9BQU87Z0NBQVAsT0FBTzs7QUFFaEIsY0FBSSxDQUFDLE9BQU8sR0FBRyx3Q0FBd0MsQ0FBQztBQUN4RCxjQUFJLENBQUMsU0FBUyxHQUFHLE1BQU0sQ0FBQztBQUN4QixjQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztTQUN2Qjs7NkJBTFUsT0FBTztBQU9kLGtCQUFRO2lCQUFBLFlBQUU7QUFDWiwwQkFBVSxJQUFJLENBQUMsU0FBUyxTQUFJLElBQUksQ0FBQyxRQUFRLENBQUc7YUFDN0M7OztBQUVELGlCQUFPO21CQUFBLG1CQUFFLEVBRVI7Ozs7OztlQWJVLE9BQU87O0FBZ0JQLHlCQUFtQjtpQkFBbkIsbUJBQW1CO2dDQUFuQixtQkFBbUI7Ozs2QkFBbkIsbUJBQW1CO0FBQzlCLGdCQUFNO21CQUFBLGdCQUFDLEtBQUssRUFBQztBQUNYLHFCQUFPLEtBQUssSUFBSSxLQUFLLENBQUMsV0FBVyxFQUFFLENBQUM7YUFDckM7Ozs7OztlQUhVLG1CQUFtQiIsImZpbGUiOiJmb3JtLmpzIiwic291cmNlUm9vdCI6Ii9kaXN0LyJ9 -------------------------------------------------------------------------------- /dist/grid.js: -------------------------------------------------------------------------------- 1 | System.register([], function (_export) { 2 | "use strict"; 3 | 4 | return { 5 | setters: [], 6 | execute: function () {} 7 | }; 8 | }); 9 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJncmlkLmpzIiwic291cmNlUm9vdCI6Ii9kaXN0LyJ9 -------------------------------------------------------------------------------- /dist/main.js: -------------------------------------------------------------------------------- 1 | System.register(["aurelia-framework", "aurelia-logging-console"], function (_export) { 2 | "use strict"; 3 | 4 | var LogManager, ConsoleAppender; 5 | _export("configure", configure); 6 | 7 | function configure(aurelia) { 8 | aurelia.use.defaultBindingLanguage().defaultResources().router().eventAggregator().plugin("./ui-class-list").plugin("./ui-element").plugin("./ui-toggle").plugin("./ui-aurelia").plugin("./ui-nav-bar").plugin("./ui-nav-aside"); 9 | 10 | 11 | aurelia.start().then(function (a) { 12 | console.log(a); 13 | return a.setRoot("app", document.body); 14 | }); 15 | } 16 | return { 17 | setters: [function (_aureliaFramework) { 18 | LogManager = _aureliaFramework.LogManager; 19 | }, function (_aureliaLoggingConsole) { 20 | ConsoleAppender = _aureliaLoggingConsole.ConsoleAppender; 21 | }], 22 | execute: function () { 23 | LogManager.addAppender(new ConsoleAppender()); 24 | LogManager.setLevel(LogManager.levels.debug); 25 | } 26 | }; 27 | }); 28 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O01BQ1EsVUFBVSxFQUNWLGVBQWU7dUJBS1AsU0FBUzs7QUFBbEIsV0FBUyxTQUFTLENBQUMsT0FBTyxFQUFFO0FBQ2pDLFdBQU8sQ0FBQyxHQUFHLENBQ1Isc0JBQXNCLEVBQUUsQ0FDeEIsZ0JBQWdCLEVBQUUsQ0FDbEIsTUFBTSxFQUFFLENBQ1IsZUFBZSxFQUFFLENBQ2pCLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxDQUN6QixNQUFNLENBQUMsY0FBYyxDQUFDLENBQ3RCLE1BQU0sQ0FBQyxhQUFhLENBQUMsQ0FDckIsTUFBTSxDQUFDLGNBQWMsQ0FBQyxDQUN0QixNQUFNLENBQUMsY0FBYyxDQUFDLENBQ3RCLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFBOzs7QUFHM0IsV0FBTyxDQUFDLEtBQUssRUFBRSxDQUNkLElBQUksQ0FBQyxVQUFTLENBQUMsRUFBRTtBQUNkLGFBQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUE7QUFFZCxhQUFPLENBQUMsQ0FBQyxPQUFPLENBQUMsS0FBSyxFQUFFLFFBQVEsQ0FBQyxJQUFJLENBQUMsQ0FBQTtLQUN6QyxDQUFDLENBQUM7R0FDSjs7O0FBMUJPLGdCQUFVLHFCQUFWLFVBQVU7O0FBQ1YscUJBQWUsMEJBQWYsZUFBZTs7O0FBRXZCLGdCQUFVLENBQUMsV0FBVyxDQUFDLElBQUksZUFBZSxFQUFFLENBQUMsQ0FBQztBQUM5QyxnQkFBVSxDQUFDLFFBQVEsQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDIiwiZmlsZSI6Im1haW4uanMiLCJzb3VyY2VSb290IjoiL2Rpc3QvIn0= -------------------------------------------------------------------------------- /dist/message.js: -------------------------------------------------------------------------------- 1 | System.register(["aurelia-event-aggregator"], function (_export) { 2 | "use strict"; 3 | 4 | var EventAggregator, _prototypeProperties, _classCallCheck, MsgPublisher, MsgSubscriber; 5 | return { 6 | setters: [function (_aureliaEventAggregator) { 7 | EventAggregator = _aureliaEventAggregator.EventAggregator; 8 | }], 9 | execute: function () { 10 | _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); }; 11 | 12 | _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; 13 | 14 | MsgPublisher = _export("MsgPublisher", (function () { 15 | function MsgPublisher(eventAggregator) { 16 | _classCallCheck(this, MsgPublisher); 17 | 18 | this.eventAggregator = EventAggregator; 19 | } 20 | 21 | _prototypeProperties(MsgPublisher, { 22 | inject: { 23 | value: function inject() { 24 | return [EventAggregator]; 25 | }, 26 | writable: true, 27 | configurable: true 28 | } 29 | }, { 30 | publish: { 31 | value: function publish(channel, payload) { 32 | this.eventAggregator.publish(channel, payload); 33 | }, 34 | writable: true, 35 | configurable: true 36 | } 37 | }); 38 | 39 | return MsgPublisher; 40 | })()); 41 | MsgSubscriber = _export("MsgSubscriber", (function () { 42 | function MsgSubscriber(eventAggregator) { 43 | _classCallCheck(this, MsgSubscriber); 44 | 45 | this.eventAggregator = eventAggregator; 46 | } 47 | 48 | _prototypeProperties(MsgSubscriber, { 49 | inject: { 50 | value: function inject() { 51 | return [EventAggregator]; 52 | }, 53 | writable: true, 54 | configurable: true 55 | } 56 | }, { 57 | subscribe: { 58 | value: function subscribe(channel) { 59 | this.eventAggregator.subscribe(channel, function (payload) { 60 | console.log("Subscribe Payload", payload); 61 | }); 62 | }, 63 | writable: true, 64 | configurable: true 65 | } 66 | }); 67 | 68 | return MsgSubscriber; 69 | })()); 70 | } 71 | }; 72 | }); 73 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1lc3NhZ2UuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O01BQVEsZUFBZSx5Q0FHVixZQUFZLEVBMEJaLGFBQWE7OztBQTdCbEIscUJBQWUsMkJBQWYsZUFBZTs7Ozs7OztBQUdWLGtCQUFZO0FBVVYsaUJBVkYsWUFBWSxDQVVULGVBQWU7Z0NBVmxCLFlBQVk7O0FBWWpCLGNBQUksQ0FBQyxlQUFlLEdBQUcsZUFBZSxDQUFBO1NBRXpDOzs2QkFkUSxZQUFZO0FBR2QsZ0JBQU07bUJBQUEsa0JBQUc7QUFFWixxQkFBTyxDQUFDLGVBQWUsQ0FBQyxDQUFBO2FBRTNCOzs7OztBQVVELGlCQUFPO21CQUFBLGlCQUFDLE9BQU8sRUFBRSxPQUFPLEVBQUM7QUFFckIsa0JBQUksQ0FBQyxlQUFlLENBQUMsT0FBTyxDQUFDLE9BQU8sRUFBRSxPQUFPLENBQUMsQ0FBQTthQUVqRDs7Ozs7O2VBckJRLFlBQVk7O0FBMEJaLG1CQUFhO0FBU1gsaUJBVEYsYUFBYSxDQVNWLGVBQWU7Z0NBVGxCLGFBQWE7O0FBV2xCLGNBQUksQ0FBQyxlQUFlLEdBQUcsZUFBZSxDQUFBO1NBRXpDOzs2QkFiUSxhQUFhO0FBRWYsZ0JBQU07bUJBQUEsa0JBQUc7QUFFWixxQkFBTyxDQUFDLGVBQWUsQ0FBQyxDQUFBO2FBRTNCOzs7OztBQVVELG1CQUFTO21CQUFBLG1CQUFDLE9BQU8sRUFBQztBQUNkLGtCQUFJLENBQUMsZUFBZSxDQUFDLFNBQVMsQ0FBQyxPQUFPLEVBQUUsVUFBQSxPQUFPLEVBQUc7QUFDOUMsdUJBQU8sQ0FBQyxHQUFHLENBQUMsbUJBQW1CLEVBQUUsT0FBTyxDQUFDLENBQUE7ZUFDNUMsQ0FBQyxDQUFBO2FBQ0w7Ozs7OztlQXBCUSxhQUFhIiwiZmlsZSI6Im1lc3NhZ2UuanMiLCJzb3VyY2VSb290IjoiL2Rpc3QvIn0= -------------------------------------------------------------------------------- /dist/section.js: -------------------------------------------------------------------------------- 1 | System.register([], function (_export) { 2 | "use strict"; 3 | 4 | return { 5 | setters: [], 6 | execute: function () {} 7 | }; 8 | }); 9 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJzZWN0aW9uLmpzIiwic291cmNlUm9vdCI6Ii9kaXN0LyJ9 -------------------------------------------------------------------------------- /dist/ui-aurelia.html: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /dist/ui-aurelia.js: -------------------------------------------------------------------------------- 1 | System.register(["aurelia-framework", "aurelia-templating", "./aside", "./bar", "./message"], function (_export) { 2 | "use strict"; 3 | 4 | var All, Behavior, Aside, Bar, MsgPublisher, MsgSubscriber, _prototypeProperties, _classCallCheck, defaults, UiAureliaCustomElement; 5 | return { 6 | setters: [function (_aureliaFramework) { 7 | All = _aureliaFramework.All; 8 | }, function (_aureliaTemplating) { 9 | Behavior = _aureliaTemplating.Behavior; 10 | }, function (_aside) { 11 | Aside = _aside.Aside; 12 | }, function (_bar) { 13 | Bar = _bar.Bar; 14 | }, function (_message) { 15 | MsgPublisher = _message.MsgPublisher; 16 | MsgSubscriber = _message.MsgSubscriber; 17 | }], 18 | execute: function () { 19 | _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); }; 20 | 21 | _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; 22 | 23 | defaults = { 24 | asideId: "aside1", 25 | size: "md", 26 | side: "left", 27 | open: false, 28 | fixed: true 29 | }; 30 | UiAureliaCustomElement = _export("UiAureliaCustomElement", (function () { 31 | function UiAureliaCustomElement(element, bar, pub, sub) { 32 | _classCallCheck(this, UiAureliaCustomElement); 33 | 34 | this.element = element; 35 | this.pub = pub; 36 | this.sub = sub; 37 | this.aside = {}; 38 | this.bar = {}; 39 | this.aside = new Aside(defaults); 40 | 41 | } 42 | 43 | _prototypeProperties(UiAureliaCustomElement, { 44 | metadata: { 45 | value: function metadata() { 46 | return Behavior.withProperty("router").withProperty("aside").withProperty("nav").withProperty("footer"); 47 | }, 48 | writable: true, 49 | configurable: true 50 | }, 51 | inject: { 52 | value: function inject() { 53 | return [Element, Bar, MsgPublisher, MsgSubscriber]; 54 | }, 55 | writable: true, 56 | configurable: true 57 | } 58 | }, { 59 | attached: { 60 | value: function attached() { 61 | this.element.classList.add("ui-aurelia"); 62 | }, 63 | writable: true, 64 | configurable: true 65 | }, 66 | activate: { 67 | value: function activate() { 68 | this.header = "Joel"; 69 | console.log("Nav Activated", this); 70 | }, 71 | writable: true, 72 | configurable: true 73 | } 74 | }); 75 | 76 | return UiAureliaCustomElement; 77 | })()); 78 | } 79 | }; 80 | }); 81 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVpLWF1cmVsaWEuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O01BQVEsR0FBRyxFQUNILFFBQVEsRUFDUixLQUFLLEVBQ0wsR0FBRyxFQUNILFlBQVksRUFDWixhQUFhLHlDQUdqQixRQUFRLEVBUUMsc0JBQXNCOzs7QUFoQjNCLFNBQUcscUJBQUgsR0FBRzs7QUFDSCxjQUFRLHNCQUFSLFFBQVE7O0FBQ1IsV0FBSyxVQUFMLEtBQUs7O0FBQ0wsU0FBRyxRQUFILEdBQUc7O0FBQ0gsa0JBQVksWUFBWixZQUFZO0FBQ1osbUJBQWEsWUFBYixhQUFhOzs7Ozs7O0FBR2pCLGNBQVEsR0FBRztBQUNiLGVBQU8sRUFBRyxRQUFRO0FBQ2xCLFlBQUksRUFBTSxJQUFJO0FBQ2QsWUFBSSxFQUFNLE1BQU07QUFDaEIsWUFBSSxFQUFNLEtBQUs7QUFDZixhQUFLLEVBQUssSUFBSTtPQUNmO0FBRVksNEJBQXNCO0FBb0JwQixpQkFwQkYsc0JBQXNCLENBb0JuQixPQUFPLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHO2dDQXBCekIsc0JBQXNCOztBQXNCM0IsY0FBSSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUE7QUFDdEIsY0FBSSxDQUFDLEdBQUcsR0FBTyxHQUFHLENBQUE7QUFDbEIsY0FBSSxDQUFDLEdBQUcsR0FBTyxHQUFHLENBQUE7QUFDbEIsY0FBSSxDQUFDLEtBQUssR0FBSyxFQUFFLENBQUM7QUFDbEIsY0FBSSxDQUFDLEdBQUcsR0FBTyxFQUFFLENBQUM7QUFDbEIsY0FBSSxDQUFDLEtBQUssR0FBSyxJQUFJLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQTs7U0FHckM7OzZCQTlCUSxzQkFBc0I7QUFFeEIsa0JBQVE7bUJBQUEsb0JBQUU7QUFFYixxQkFBTyxRQUFRLENBRVYsWUFBWSxDQUFDLFFBQVEsQ0FBQyxDQUN0QixZQUFZLENBQUMsT0FBTyxDQUFDLENBQ3JCLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FDbkIsWUFBWSxDQUFDLFFBQVEsQ0FBQyxDQUN0QjthQUVSOzs7O0FBRU0sZ0JBQU07bUJBQUEsa0JBQUc7QUFFWixxQkFBTyxDQUFDLE9BQU8sRUFBQyxHQUFHLEVBQUUsWUFBWSxFQUFFLGFBQWEsQ0FBQyxDQUFDO2FBRXJEOzs7OztBQWNELGtCQUFRO21CQUFBLG9CQUFFO0FBQ04sa0JBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxZQUFZLENBQUMsQ0FBQTthQUUzQzs7OztBQUVELGtCQUFRO21CQUFBLG9CQUFFO0FBRU4sa0JBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFBO0FBQ3BCLHFCQUFPLENBQUMsR0FBRyxDQUFDLGVBQWUsRUFBRSxJQUFJLENBQUMsQ0FBQTthQUVyQzs7Ozs7O2VBMUNRLHNCQUFzQiIsImZpbGUiOiJ1aS1hdXJlbGlhLmpzIiwic291cmNlUm9vdCI6Ii9kaXN0LyJ9 -------------------------------------------------------------------------------- /dist/ui-class-list.js: -------------------------------------------------------------------------------- 1 | System.register([], function (_export) { 2 | "use strict"; 3 | 4 | var _classCallCheck, ClassList; 5 | return { 6 | setters: [], 7 | execute: function () { 8 | _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; 9 | 10 | ClassList = _export("ClassList", function ClassList() { 11 | _classCallCheck(this, ClassList); 12 | 13 | this.addClass = function () { 14 | var args = Array.isArray(arguments[0]) ? arguments[0] : arguments; 15 | this.element.classList.add.apply(this.element.classList, args); 16 | }; 17 | 18 | 19 | this.removeClass = function () { 20 | var args = Array.isArray(arguments[0]) ? arguments[0] : arguments; 21 | this.element.classList.remove.apply(this.element.classList, args); 22 | }; 23 | }); 24 | } 25 | }; 26 | }); 27 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVpLWNsYXNzLWxpc3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O3VCQUNhLFNBQVM7Ozs7OztBQUFULGVBQVMsd0JBR1AsU0FIRixTQUFTOzhCQUFULFNBQVM7O0FBS2QsWUFBSSxDQUFDLFFBQVEsR0FBRyxZQUFVO0FBRXRCLGNBQUksSUFBSSxHQUFHLEtBQUssQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsU0FBUyxDQUFDLENBQUMsQ0FBQyxHQUFHLFNBQVMsQ0FBQTtBQUNqRSxjQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLElBQUksQ0FBQyxDQUFBO1NBRWpFLENBQUE7OztBQUdELFlBQUksQ0FBQyxXQUFXLEdBQUcsWUFBVTtBQUUzQixjQUFJLElBQUksR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHLFNBQVMsQ0FBQyxDQUFDLENBQUMsR0FBRyxTQUFTLENBQUE7QUFDakUsY0FBSSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxJQUFJLENBQUMsQ0FBQTtTQUVsRSxDQUFBO09BRUoiLCJmaWxlIjoidWktY2xhc3MtbGlzdC5qcyIsInNvdXJjZVJvb3QiOiIvZGlzdC8ifQ== -------------------------------------------------------------------------------- /dist/ui-element.js: -------------------------------------------------------------------------------- 1 | System.register(["./ui-class-list"], function (_export) { 2 | "use strict"; 3 | 4 | var ClassList, _prototypeProperties, _classCallCheck, UiElement; 5 | return { 6 | setters: [function (_uiClassList) { 7 | ClassList = _uiClassList.ClassList; 8 | }], 9 | execute: function () { 10 | _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); }; 11 | 12 | _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; 13 | 14 | UiElement = _export("UiElement", (function () { 15 | function UiElement(element) { 16 | _classCallCheck(this, UiElement); 17 | 18 | this.element = element; 19 | } 20 | 21 | _prototypeProperties(UiElement, { 22 | inject: { 23 | value: function inject() { 24 | return [Element]; 25 | }, 26 | writable: true, 27 | configurable: true 28 | } 29 | }, { 30 | addClass: { 31 | value: function addClass() { 32 | var args = Array.isArray(arguments[0]) ? arguments[0] : arguments; 33 | this.element.classList.add.apply(this.element.classList, args); 34 | }, 35 | writable: true, 36 | configurable: true 37 | }, 38 | removeClass: { 39 | value: function removeClass() { 40 | var args = Array.isArray(arguments[0]) ? arguments[0] : arguments; 41 | this.element.classList.remove.apply(this.element.classList, args); 42 | }, 43 | writable: true, 44 | configurable: true 45 | } 46 | }); 47 | 48 | return UiElement; 49 | })()); 50 | } 51 | }; 52 | }); 53 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVpLWVsZW1lbnQuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O01BQVEsU0FBUyx5Q0FFSixTQUFTOzs7QUFGZCxlQUFTLGdCQUFULFNBQVM7Ozs7Ozs7QUFFSixlQUFTO0FBVVAsaUJBVkYsU0FBUyxDQVVOLE9BQU87Z0NBVlYsU0FBUzs7QUFZZCxjQUFJLENBQUMsT0FBTyxHQUFHLE9BQU8sQ0FBQTtTQUV6Qjs7NkJBZFEsU0FBUztBQUdYLGdCQUFNO21CQUFBLGtCQUFFO0FBRVgscUJBQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQTthQUVuQjs7Ozs7QUFTRCxrQkFBUTttQkFBQSxvQkFBRTtBQUVOLGtCQUFJLElBQUksR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHLFNBQVMsQ0FBQyxDQUFDLENBQUMsR0FBRyxTQUFTLENBQUE7QUFDakUsa0JBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsSUFBSSxDQUFDLENBQUE7YUFFakU7Ozs7QUFHRCxxQkFBVzttQkFBQSx1QkFBRTtBQUVYLGtCQUFJLElBQUksR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHLFNBQVMsQ0FBQyxDQUFDLENBQUMsR0FBRyxTQUFTLENBQUE7QUFDakUsa0JBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsSUFBSSxDQUFDLENBQUE7YUFFbEU7Ozs7OztlQTdCUSxTQUFTIiwiZmlsZSI6InVpLWVsZW1lbnQuanMiLCJzb3VyY2VSb290IjoiL2Rpc3QvIn0= -------------------------------------------------------------------------------- /dist/ui-main.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/dist/ui-main.html -------------------------------------------------------------------------------- /dist/ui-main.js: -------------------------------------------------------------------------------- 1 | System.register([], function (_export) { 2 | "use strict"; 3 | 4 | return { 5 | setters: [], 6 | execute: function () {} 7 | }; 8 | }); 9 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJ1aS1tYWluLmpzIiwic291cmNlUm9vdCI6Ii9kaXN0LyJ9 -------------------------------------------------------------------------------- /dist/ui-nav-aside.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/ui-nav-aside.js: -------------------------------------------------------------------------------- 1 | System.register(["aurelia-templating", "./aside", "./ui-element"], function (_export) { 2 | "use strict"; 3 | 4 | var Behavior, Aside, UiElement, _prototypeProperties, _inherits, _classCallCheck, defaults, UiNavAsideCustomElement; 5 | return { 6 | setters: [function (_aureliaTemplating) { 7 | Behavior = _aureliaTemplating.Behavior; 8 | }, function (_aside) { 9 | Aside = _aside.Aside; 10 | }, function (_uiElement) { 11 | UiElement = _uiElement.UiElement; 12 | }], 13 | execute: function () { 14 | _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); }; 15 | 16 | _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }; 17 | 18 | _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; 19 | 20 | defaults = { 21 | asideId: "aside1", 22 | side: "left", 23 | open: false, 24 | fixed: true 25 | }; 26 | UiNavAsideCustomElement = _export("UiNavAsideCustomElement", (function (UiElement) { 27 | function UiNavAsideCustomElement() { 28 | _classCallCheck(this, UiNavAsideCustomElement); 29 | 30 | if (UiElement != null) { 31 | UiElement.apply(this, arguments); 32 | } 33 | } 34 | 35 | _inherits(UiNavAsideCustomElement, UiElement); 36 | 37 | _prototypeProperties(UiNavAsideCustomElement, { 38 | metadata: { 39 | value: function metadata() { 40 | return Behavior.withProperty("open").withProperty("fixed").withProperty("side").withProperty("size"); 41 | }, 42 | writable: true, 43 | configurable: true 44 | } 45 | }, { 46 | bind: { 47 | value: function bind() { 48 | var classList = ["ui-aside", "ui-aside-nav", "aside-" + this.side]; 49 | this.fixed && classList.push("aside-fixed"); 50 | this.addClass(classList); 51 | }, 52 | writable: true, 53 | configurable: true 54 | }, 55 | openChanged: { 56 | value: function openChanged(newValue) { 57 | if (newValue) { 58 | this.addClass("aside-open"); 59 | } else { 60 | this.removeClass("aside-open"); 61 | } 62 | }, 63 | writable: true, 64 | configurable: true 65 | } 66 | }); 67 | 68 | return UiNavAsideCustomElement; 69 | })(UiElement)); 70 | } 71 | }; 72 | }); 73 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVpLW5hdi1hc2lkZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7TUFBUSxRQUFRLEVBQ1IsS0FBSyxFQUNMLFNBQVMsb0RBRWIsUUFBUSxFQU9DLHVCQUF1Qjs7O0FBWDVCLGNBQVEsc0JBQVIsUUFBUTs7QUFDUixXQUFLLFVBQUwsS0FBSzs7QUFDTCxlQUFTLGNBQVQsU0FBUzs7Ozs7Ozs7O0FBRWIsY0FBUSxHQUFHO0FBQ2IsZUFBTyxFQUFHLFFBQVE7QUFDbEIsWUFBSSxFQUFNLE1BQU07QUFDaEIsWUFBSSxFQUFNLEtBQUs7QUFDZixhQUFLLEVBQUssSUFBSTtPQUNmO0FBRVksNkJBQXVCLGlEQUFTLFNBQVM7aUJBQXpDLHVCQUF1QjtnQ0FBdkIsdUJBQXVCOztjQUFTLFNBQVM7QUFBVCxxQkFBUzs7OztrQkFBekMsdUJBQXVCLEVBQVMsU0FBUzs7NkJBQXpDLHVCQUF1QjtBQUd6QixrQkFBUTttQkFBQSxvQkFBRTtBQUViLHFCQUFPLFFBQVEsQ0FDUixZQUFZLENBQUMsTUFBTSxDQUFDLENBQ3BCLFlBQVksQ0FBQyxPQUFPLENBQUMsQ0FDckIsWUFBWSxDQUFDLE1BQU0sQ0FBQyxDQUNwQixZQUFZLENBQUMsTUFBTSxDQUFDLENBQUE7YUFFOUI7Ozs7O0FBR0QsY0FBSTttQkFBQSxnQkFBRTtBQUVGLGtCQUFJLFNBQVMsR0FBRyxDQUFDLFVBQVUsRUFBRSxjQUFjLGFBQVcsSUFBSSxDQUFDLElBQUksQ0FBRyxDQUFBO0FBQ2xFLGtCQUFJLENBQUMsS0FBSyxJQUFJLFNBQVMsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUE7QUFDM0Msa0JBQUksQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLENBQUE7YUFFM0I7Ozs7QUFHRCxxQkFBVzttQkFBQSxxQkFBQyxRQUFRLEVBQUM7QUFDbkIsa0JBQUcsUUFBUSxFQUFFO0FBQ1Qsb0JBQUksQ0FBQyxRQUFRLENBQUMsWUFBWSxDQUFDLENBQUE7ZUFBRSxNQUM1QjtBQUNGLG9CQUFJLENBQUMsV0FBVyxDQUFDLFlBQVksQ0FBQyxDQUFBO2VBQUU7YUFFcEM7Ozs7OztlQTdCUSx1QkFBdUI7U0FBUyxTQUFTIiwiZmlsZSI6InVpLW5hdi1hc2lkZS5qcyIsInNvdXJjZVJvb3QiOiIvZGlzdC8ifQ== -------------------------------------------------------------------------------- /dist/ui-nav-bar.html: -------------------------------------------------------------------------------- 1 | 34 | -------------------------------------------------------------------------------- /dist/ui-nav-bar.js: -------------------------------------------------------------------------------- 1 | System.register(["aurelia-templating", "./bar", "./message", "./ui-element"], function (_export) { 2 | "use strict"; 3 | 4 | var Behavior, BoundViewFactory, ViewSlot, Bar, MsgPublisher, MsgSubscriber, UiElement, _prototypeProperties, _inherits, _classCallCheck, UiNavBarTemplateController; 5 | return { 6 | setters: [function (_aureliaTemplating) { 7 | Behavior = _aureliaTemplating.Behavior; 8 | BoundViewFactory = _aureliaTemplating.BoundViewFactory; 9 | ViewSlot = _aureliaTemplating.ViewSlot; 10 | }, function (_bar) { 11 | Bar = _bar.Bar; 12 | }, function (_message) { 13 | MsgPublisher = _message.MsgPublisher; 14 | MsgSubscriber = _message.MsgSubscriber; 15 | }, function (_uiElement) { 16 | UiElement = _uiElement.UiElement; 17 | }], 18 | execute: function () { 19 | _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); }; 20 | 21 | _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }; 22 | 23 | _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; 24 | 25 | UiNavBarTemplateController = _export("UiNavBarTemplateController", (function (UiElement) { 26 | function UiNavBarTemplateController(viewFactory, viewSlot) { 27 | _classCallCheck(this, UiNavBarTemplateController); 28 | 29 | this.viewFactory = viewFactory; 30 | this.viewSlot = viewSlot; 31 | this.showing = true; 32 | 33 | this.barId = "bar1"; 34 | this.open = false; 35 | this.fixed = true; 36 | this.size = "sm"; 37 | this.ripple = true; 38 | } 39 | 40 | _inherits(UiNavBarTemplateController, UiElement); 41 | 42 | _prototypeProperties(UiNavBarTemplateController, { 43 | metadata: { 44 | value: function metadata() { 45 | return Behavior.customElement("ui-nav-bar").withProperty("router").withProperty("aside").withProperty("showing").withProperty("value"); 46 | }, 47 | writable: true, 48 | configurable: true 49 | }, 50 | inject: { 51 | value: function inject() { 52 | return [BoundViewFactory, ViewSlot]; 53 | }, 54 | writable: true, 55 | configurable: true 56 | } 57 | }, { 58 | open: { 59 | value: function open() { 60 | this.showing = !this.showing; 61 | }, 62 | writable: true, 63 | configurable: true 64 | }, 65 | valueChanged: { 66 | value: function valueChanged() { 67 | if (newValue) { 68 | if (this.view) { 69 | this.viewSlot.remove(this.view); 70 | this.view.unbind(); 71 | } 72 | 73 | this.showing = false; 74 | return; 75 | } 76 | 77 | if (!this.view) { 78 | 79 | 80 | this.view = this.viewFactory.create(); 81 | } 82 | 83 | if (this.showing) { 84 | this.showing = true; 85 | 86 | if (!this.view.bound) { 87 | this.view.bind(); 88 | } 89 | 90 | this.viewSlot.add(this.view); 91 | } 92 | }, 93 | writable: true, 94 | configurable: true 95 | } 96 | }); 97 | 98 | return UiNavBarTemplateController; 99 | })(UiElement)); 100 | } 101 | }; 102 | }); 103 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVpLW5hdi1iYXIuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O01BQVEsUUFBUSxFQUFFLGdCQUFnQixFQUFFLFFBQVEsRUFDcEMsR0FBRyxFQUNILFlBQVksRUFDWixhQUFhLEVBQ2IsU0FBUyxvREFFSiwwQkFBMEI7OztBQU4vQixjQUFRLHNCQUFSLFFBQVE7QUFBRSxzQkFBZ0Isc0JBQWhCLGdCQUFnQjtBQUFFLGNBQVEsc0JBQVIsUUFBUTs7QUFDcEMsU0FBRyxRQUFILEdBQUc7O0FBQ0gsa0JBQVksWUFBWixZQUFZO0FBQ1osbUJBQWEsWUFBYixhQUFhOztBQUNiLGVBQVMsY0FBVCxTQUFTOzs7Ozs7Ozs7QUFFSixnQ0FBMEIsb0RBQVMsU0FBUztBQXdCMUMsaUJBeEJGLDBCQUEwQixDQXdCdkIsV0FBVyxFQUFFLFFBQVE7Z0NBeEJ4QiwwQkFBMEI7O0FBeUJqQyxjQUFJLENBQUMsV0FBVyxHQUFHLFdBQVcsQ0FBQTtBQUM5QixjQUFJLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQTtBQUN4QixjQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQTs7QUFFbkIsY0FBSSxDQUFDLEtBQUssR0FBSyxNQUFNLENBQUE7QUFDckIsY0FBSSxDQUFDLElBQUksR0FBTSxLQUFLLENBQUE7QUFDcEIsY0FBSSxDQUFDLEtBQUssR0FBSyxJQUFJLENBQUE7QUFDbkIsY0FBSSxDQUFDLElBQUksR0FBTSxJQUFJLENBQUE7QUFDbkIsY0FBSSxDQUFDLE1BQU0sR0FBSSxJQUFJLENBQUM7U0FDckI7O2tCQWxDUSwwQkFBMEIsRUFBUyxTQUFTOzs2QkFBNUMsMEJBQTBCO0FBRzVCLGtCQUFRO21CQUFBLG9CQUFFO0FBRWQscUJBQU8sUUFBUSxDQUNaLGFBQWEsQ0FBQyxZQUFZLENBQUMsQ0FDM0IsWUFBWSxDQUFDLFFBQVEsQ0FBQyxDQUN0QixZQUFZLENBQUMsT0FBTyxDQUFDLENBQ3JCLFlBQVksQ0FBQyxTQUFTLENBQUMsQ0FDdkIsWUFBWSxDQUFDLE9BQU8sQ0FBQyxDQUFBO2FBSTFCOzs7O0FBR00sZ0JBQU07bUJBQUEsa0JBQUc7QUFFZCxxQkFBTyxDQUFDLGdCQUFnQixFQUFFLFFBQVEsQ0FBQyxDQUFBO2FBRXBDOzs7OztBQWVELGNBQUk7bUJBQUEsZ0JBQUU7QUFFRixrQkFBSSxDQUFDLE9BQU8sR0FBRyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUM7YUFFaEM7Ozs7QUFHRCxzQkFBWTttQkFBQSx3QkFBRTtBQUVWLGtCQUFJLFFBQVEsRUFBRTtBQUVWLG9CQUFHLElBQUksQ0FBQyxJQUFJLEVBQUM7QUFDVCxzQkFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0FBQ2hDLHNCQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO2lCQUN0Qjs7QUFFRCxvQkFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7QUFDckIsdUJBQU87ZUFDVjs7QUFFRCxrQkFBRyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUM7OztBQUdWLG9CQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsTUFBTSxFQUFFLENBQUM7ZUFDekM7O0FBRUQsa0JBQUksSUFBSSxDQUFDLE9BQU8sRUFBRTtBQUVkLG9CQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQzs7QUFFcEIsb0JBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBQztBQUVoQixzQkFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztpQkFFcEI7O0FBRUQsb0JBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztlQUNoQzthQUNKOzs7Ozs7ZUExRVEsMEJBQTBCO1NBQVMsU0FBUyIsImZpbGUiOiJ1aS1uYXYtYmFyLmpzIiwic291cmNlUm9vdCI6Ii9kaXN0LyJ9 -------------------------------------------------------------------------------- /dist/ui-nav.js: -------------------------------------------------------------------------------- 1 | System.register(["aurelia-framework", "./aside", "./bar"], function (_export) { 2 | "use strict"; 3 | 4 | var Behavior, Aside, Bar, _prototypeProperties, _classCallCheck, defaults, Nav; 5 | return { 6 | setters: [function (_aureliaFramework) { 7 | Behavior = _aureliaFramework.Behavior; 8 | }, function (_aside) { 9 | Aside = _aside.Aside; 10 | }, function (_bar) { 11 | Bar = _bar.Bar; 12 | }], 13 | execute: function () { 14 | _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); }; 15 | 16 | _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; 17 | 18 | defaults = { 19 | aside: { 20 | side: "left", 21 | open: false, 22 | fixed: true, 23 | asideId: "aside1" 24 | }, 25 | bar: { 26 | fixed: true, 27 | open: false, 28 | size: "sm", 29 | barId: "bar1" 30 | } 31 | 32 | }; 33 | Nav = _export("Nav", (function () { 34 | function Nav(aside, bar) { 35 | _classCallCheck(this, Nav); 36 | 37 | this.$aside = aside; 38 | this.$bar = bar; 39 | this.bars = {}; 40 | this.asides = {}; 41 | } 42 | 43 | _prototypeProperties(Nav, { 44 | metadata: { 45 | value: function metadata() { 46 | return Behavior.withProperty("toggle"); 47 | }, 48 | writable: true, 49 | configurable: true 50 | }, 51 | inject: { 52 | value: function inject() { 53 | return [Aside, Bar]; 54 | }, 55 | writable: true, 56 | configurable: true 57 | } 58 | }, { 59 | activate: { 60 | value: function activate() { 61 | console.log("me"); 62 | }, 63 | writable: true, 64 | configurable: true 65 | }, 66 | addBar: { 67 | value: function addBar(options) { 68 | options = _.assign(defaults.bar, options); 69 | 70 | if (this.bars[options.barId]) { 71 | return console.error("Bar " + options.barId + " already Exists"); 72 | } 73 | 74 | this.bars[options.barId] = new this.$bar(options); 75 | }, 76 | writable: true, 77 | configurable: true 78 | }, 79 | addAside: { 80 | value: function addAside() { 81 | options = _.assign(defaults.aside, options); 82 | 83 | if (this.bars[options.asideId]) { 84 | return console.error("Aside " + options.barId + " already Exists"); 85 | } 86 | 87 | this.bars[options.asideId] = new this.$aside(options); 88 | }, 89 | writable: true, 90 | configurable: true 91 | } 92 | }); 93 | 94 | return Nav; 95 | })()); 96 | } 97 | }; 98 | }); 99 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVpLW5hdi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7TUFBUSxRQUFRLEVBQ1IsS0FBSyxFQUNMLEdBQUcseUNBRVAsUUFBUSxFQWdCQyxHQUFHOzs7QUFwQlIsY0FBUSxxQkFBUixRQUFROztBQUNSLFdBQUssVUFBTCxLQUFLOztBQUNMLFNBQUcsUUFBSCxHQUFHOzs7Ozs7O0FBRVAsY0FBUSxHQUFHO0FBQ1gsYUFBSyxFQUFFO0FBQ0gsY0FBSSxFQUFNLE1BQU07QUFDaEIsY0FBSSxFQUFNLEtBQUs7QUFDZixlQUFLLEVBQUssSUFBSTtBQUNkLGlCQUFPLEVBQUcsUUFBUTtTQUNyQjtBQUNELFdBQUcsRUFBRTtBQUNELGVBQUssRUFBRyxJQUFJO0FBQ1osY0FBSSxFQUFJLEtBQUs7QUFDYixjQUFJLEVBQUksSUFBSTtBQUNaLGVBQUssRUFBRyxNQUFNO1NBQ2pCOztPQUVKO0FBRVksU0FBRztBQWtCRCxpQkFsQkYsR0FBRyxDQWtCQSxLQUFLLEVBQUUsR0FBRztnQ0FsQmIsR0FBRzs7QUFtQlIsY0FBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUE7QUFDbkIsY0FBSSxDQUFDLElBQUksR0FBSyxHQUFHLENBQUE7QUFDakIsY0FBSSxDQUFDLElBQUksR0FBSyxFQUFFLENBQUE7QUFDaEIsY0FBSSxDQUFDLE1BQU0sR0FBRyxFQUFFLENBQUE7U0FDbkI7OzZCQXZCUSxHQUFHO0FBRUwsa0JBQVE7bUJBQUEsb0JBQUU7QUFFYixxQkFBTyxRQUFRLENBQ1YsWUFBWSxDQUFDLFFBQVEsQ0FBQyxDQUFBO2FBRTlCOzs7O0FBRU0sZ0JBQU07bUJBQUEsa0JBQUc7QUFFWixxQkFBTyxDQUFDLEtBQUssRUFBRSxHQUFHLENBQUMsQ0FBQTthQUV0Qjs7Ozs7QUFDRCxrQkFBUTttQkFBQSxvQkFBRTtBQUNOLHFCQUFPLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFBO2FBQ3BCOzs7O0FBU0QsZ0JBQU07bUJBQUEsZ0JBQUMsT0FBTyxFQUFDO0FBRVgscUJBQU8sR0FBRyxDQUFDLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxHQUFHLEVBQUUsT0FBTyxDQUFDLENBQUM7O0FBRTFDLGtCQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxFQUFFO0FBRTFCLHVCQUFPLE9BQU8sQ0FBQyxLQUFLLFVBQVEsT0FBTyxDQUFDLEtBQUsscUJBQWtCLENBQUM7ZUFDL0Q7O0FBRUQsa0JBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxHQUFHLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQzthQUVyRDs7OztBQUVELGtCQUFRO21CQUFBLG9CQUFFO0FBRU4scUJBQU8sR0FBRyxDQUFDLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxLQUFLLEVBQUUsT0FBTyxDQUFDLENBQUM7O0FBRTVDLGtCQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxFQUFFO0FBRTVCLHVCQUFPLE9BQU8sQ0FBQyxLQUFLLFlBQVUsT0FBTyxDQUFDLEtBQUsscUJBQWtCLENBQUM7ZUFDakU7O0FBRUQsa0JBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxHQUFHLElBQUksSUFBSSxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQzthQUN6RDs7Ozs7O2VBaERRLEdBQUciLCJmaWxlIjoidWktbmF2LmpzIiwic291cmNlUm9vdCI6Ii9kaXN0LyJ9 -------------------------------------------------------------------------------- /dist/ui-toggle.html: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /dist/ui-toggle.js: -------------------------------------------------------------------------------- 1 | System.register(["aurelia-templating", "./ui-element"], function (_export) { 2 | "use strict"; 3 | 4 | var Behavior, UiElement, _prototypeProperties, _inherits, _classCallCheck, UiToggleCustomElement; 5 | return { 6 | setters: [function (_aureliaTemplating) { 7 | Behavior = _aureliaTemplating.Behavior; 8 | }, function (_uiElement) { 9 | UiElement = _uiElement.UiElement; 10 | }], 11 | execute: function () { 12 | _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); }; 13 | 14 | _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }; 15 | 16 | _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; 17 | 18 | UiToggleCustomElement = _export("UiToggleCustomElement", (function (UiElement) { 19 | function UiToggleCustomElement(element) { 20 | _classCallCheck(this, UiToggleCustomElement); 21 | 22 | this.element = element; 23 | } 24 | 25 | _inherits(UiToggleCustomElement, UiElement); 26 | 27 | _prototypeProperties(UiToggleCustomElement, { 28 | metadata: { 29 | value: function metadata() { 30 | return Behavior.withProperty("toggle").withProperty("icon"); 31 | }, 32 | writable: true, 33 | configurable: true 34 | }, 35 | inject: { 36 | value: function inject() { 37 | return [Element]; 38 | }, 39 | writable: true, 40 | configurable: true 41 | } 42 | }, { 43 | bind: { 44 | value: function bind() { 45 | this.element.classList.add("aside-toggle", "waves-effect", "waves-light", "no-select"); 46 | }, 47 | writable: true, 48 | configurable: true 49 | } 50 | }); 51 | 52 | return UiToggleCustomElement; 53 | })(UiElement)); 54 | } 55 | }; 56 | }); 57 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVpLXRvZ2dsZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7TUFBUSxRQUFRLEVBQ1IsU0FBUyxvREFFSixxQkFBcUI7OztBQUgxQixjQUFRLHNCQUFSLFFBQVE7O0FBQ1IsZUFBUyxjQUFULFNBQVM7Ozs7Ozs7OztBQUVKLDJCQUFxQiwrQ0FBUyxTQUFTO0FBZXJDLGlCQWZGLHFCQUFxQixDQWVsQixPQUFPO2dDQWZWLHFCQUFxQjs7QUFpQjFCLGNBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFBO1NBRXpCOztrQkFuQlEscUJBQXFCLEVBQVMsU0FBUzs7NkJBQXZDLHFCQUFxQjtBQUN2QixrQkFBUTttQkFBQSxvQkFBRTtBQUNiLHFCQUFPLFFBQVEsQ0FDVixZQUFZLENBQUMsUUFBUSxDQUFDLENBQ3RCLFlBQVksQ0FBQyxNQUFNLENBQUMsQ0FBQTthQUU1Qjs7OztBQUVNLGdCQUFNO21CQUFBLGtCQUFFO0FBRVgscUJBQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQTthQUVuQjs7Ozs7QUFVRCxjQUFJO21CQUFBLGdCQUFFO0FBRUYsa0JBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxjQUFjLEVBQUUsY0FBYyxFQUFFLGFBQWEsRUFBRSxXQUFXLENBQUMsQ0FBQzthQUUxRjs7Ozs7O2VBMUJRLHFCQUFxQjtTQUFTLFNBQVMiLCJmaWxlIjoidWktdG9nZ2xlLmpzIiwic291cmNlUm9vdCI6Ii9kaXN0LyJ9 -------------------------------------------------------------------------------- /dist/ui-waves.html: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /dist/ui-waves.js: -------------------------------------------------------------------------------- 1 | System.register([], function (_export) { 2 | "use strict"; 3 | 4 | return { 5 | setters: [], 6 | execute: function () {} 7 | }; 8 | }); 9 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJ1aS13YXZlcy5qcyIsInNvdXJjZVJvb3QiOiIvZGlzdC8ifQ== -------------------------------------------------------------------------------- /dist/view.js: -------------------------------------------------------------------------------- 1 | System.register([], function (_export) { 2 | "use strict"; 3 | 4 | return { 5 | setters: [], 6 | execute: function () {} 7 | }; 8 | }); 9 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJ2aWV3LmpzIiwic291cmNlUm9vdCI6Ii9kaXN0LyJ9 -------------------------------------------------------------------------------- /dist/welcome.html: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /dist/welcome.js: -------------------------------------------------------------------------------- 1 | System.register([], function (_export) { 2 | "use strict"; 3 | 4 | var _prototypeProperties, _classCallCheck, Welcome, UpperValueConverter; 5 | return { 6 | setters: [], 7 | execute: function () { 8 | _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); }; 9 | 10 | _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; 11 | 12 | Welcome = _export("Welcome", (function () { 13 | function Welcome() { 14 | _classCallCheck(this, Welcome); 15 | 16 | this.heading = "Aurelia ui "; 17 | this.firstName = "John"; 18 | this.lastName = "Doe"; 19 | } 20 | 21 | _prototypeProperties(Welcome, null, { 22 | fullName: { 23 | get: function () { 24 | return "" + this.firstName + " " + this.lastName; 25 | }, 26 | configurable: true 27 | }, 28 | welcome: { 29 | value: function welcome() {}, 30 | writable: true, 31 | configurable: true 32 | } 33 | }); 34 | 35 | return Welcome; 36 | })()); 37 | UpperValueConverter = _export("UpperValueConverter", (function () { 38 | function UpperValueConverter() { 39 | _classCallCheck(this, UpperValueConverter); 40 | } 41 | 42 | _prototypeProperties(UpperValueConverter, null, { 43 | toView: { 44 | value: function toView(value) { 45 | return value && value.toUpperCase(); 46 | }, 47 | writable: true, 48 | configurable: true 49 | } 50 | }); 51 | 52 | return UpperValueConverter; 53 | })()); 54 | } 55 | }; 56 | }); 57 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlbGNvbWUuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OzZDQUFhLE9BQU8sRUFnQlAsbUJBQW1COzs7Ozs7OztBQWhCbkIsYUFBTztBQUNQLGlCQURBLE9BQU87Z0NBQVAsT0FBTzs7QUFFaEIsY0FBSSxDQUFDLE9BQU8sR0FBRyxhQUFhLENBQUM7QUFDN0IsY0FBSSxDQUFDLFNBQVMsR0FBRyxNQUFNLENBQUM7QUFDeEIsY0FBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7U0FDdkI7OzZCQUxVLE9BQU87QUFPZCxrQkFBUTtpQkFBQSxZQUFFO0FBQ1osMEJBQVUsSUFBSSxDQUFDLFNBQVMsU0FBSSxJQUFJLENBQUMsUUFBUSxDQUFHO2FBQzdDOzs7QUFFRCxpQkFBTzttQkFBQSxtQkFBRSxFQUVSOzs7Ozs7ZUFiVSxPQUFPOztBQWdCUCx5QkFBbUI7aUJBQW5CLG1CQUFtQjtnQ0FBbkIsbUJBQW1COzs7NkJBQW5CLG1CQUFtQjtBQUM5QixnQkFBTTttQkFBQSxnQkFBQyxLQUFLLEVBQUM7QUFDWCxxQkFBTyxLQUFLLElBQUksS0FBSyxDQUFDLFdBQVcsRUFBRSxDQUFDO2FBQ3JDOzs7Ozs7ZUFIVSxtQkFBbUIiLCJmaWxlIjoid2VsY29tZS5qcyIsInNvdXJjZVJvb3QiOiIvZGlzdC8ifQ== -------------------------------------------------------------------------------- /doc/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 0.9.5 (2015-02-06) 2 | 3 | 4 | #### Bug Fixes 5 | 6 | * **build:** 7 | * include root attribute on path for source maps ([e3fc2d5a](http://github.com/aurelia/skeleton-navigation/commit/e3fc2d5a26f354c2afbd2c1e1e45b96fe5d92657), closes [#26](http://github.com/aurelia/skeleton-navigation/issues/26)) 8 | * add source maps; remove sourceFileName from compiler options ([1733c4ad](http://github.com/aurelia/skeleton-navigation/commit/1733c4ad032747ecb868b420a5d6f23e9dab12ae)) 9 | * **package:** update dependencies ([025154f3](http://github.com/aurelia/skeleton-navigation/commit/025154f3c9fc9d99b6ca00bfd94d9ffc8249df5c)) 10 | * **test:** removing single it execution ([31866dc3](http://github.com/aurelia/skeleton-navigation/commit/31866dc3038fe2c1b51531620a13b88c8e3ff766)) 11 | 12 | 13 | #### Features 14 | 15 | * **e2e:** add protractor locator and e2e PO test ([2509836e](http://github.com/aurelia/skeleton-navigation/commit/2509836e8406745e55c8d3d897f8a2b7f1bb1c56)) 16 | 17 | 18 | ### 0.9.4 (2015-02-03) 19 | 20 | 21 | #### Bug Fixes 22 | 23 | * **index:** per systemjs recommendation, remove error binding ([e30cefac](http://github.com/aurelia/skeleton-navigation/commit/e30cefac419f88911a4c18085ffd59d05047e254)) 24 | * **package:** add missing depdency ([c3718827](http://github.com/aurelia/skeleton-navigation/commit/c37188278816f1c540e8b038a8dfed60dfeb0d9c)) 25 | 26 | 27 | #### Features 28 | 29 | * **gulpfile:** adds protractor configuration and gulpfile tasks for E2E-Testing ([821f4868](http://github.com/aurelia/skeleton-navigation/commit/821f4868a5d4b4ba62cc12cece943cd55ed3142f)) 30 | * **tools:** Added build-dev-env task to skeleton-navigation ([4c145095](http://github.com/aurelia/skeleton-navigation/commit/4c1450956cf1e8804ddd660beeba77546e14287f)) 31 | 32 | 33 | ### 0.9.3 (2015-01-25) 34 | 35 | 36 | #### Bug Fixes 37 | 38 | * **package:** update dependencies ([0f221d2d](http://github.com/aurelia/skeleton-navigation/commit/0f221d2d8cb79ba40b745c92d0fa64d27bfd0dbf)) 39 | 40 | 41 | ### 0.9.2 (2015-01-25) 42 | 43 | 44 | #### Bug Fixes 45 | 46 | * **gulpfile:** bug in browser sync for style content ([342a2612](http://github.com/aurelia/skeleton-navigation/commit/342a26121cf5988d73847ed02d022d13e325d5f2)) 47 | 48 | 49 | ### 0.9.1 (2015-01-24) 50 | 51 | 52 | #### Bug Fixes 53 | 54 | * **package:** 55 | * update dependencies ([d05fb6c9](http://github.com/aurelia/skeleton-navigation/commit/d05fb6c9a4148e85165e8b8594b3de9e344e85d6)) 56 | * update dependencies ([da130f4f](http://github.com/aurelia/skeleton-navigation/commit/da130f4f2919c8330f455e1b9f175d693aacf43c)) 57 | * update dependencies ([ab85bc86](http://github.com/aurelia/skeleton-navigation/commit/ab85bc865cb1607f13cb7d5b3a55f37903e61785)) 58 | 59 | 60 | #### Features 61 | 62 | * **package:** update dependencies ([86b1dd90](http://github.com/aurelia/skeleton-navigation/commit/86b1dd908206abfdca2a8f89cc246f54e761bdbd)) 63 | * **welcome:** add sample local value converter ([9a2c2aa6](http://github.com/aurelia/skeleton-navigation/commit/9a2c2aa6f7fa9f5a5666aa0c19163bf49cbcc5fc)) 64 | 65 | 66 | ## 0.9.0 (2015-01-22) 67 | 68 | 69 | #### Bug Fixes 70 | 71 | * **all:** 72 | * update dependencies and links to latest ([8863e7b7](http://github.com/aurelia/skeleton-navigation/commit/8863e7b7d07e87430b0f495cd25923e401698bc9)) 73 | * update to latest version of metadata and view import ([2467e6c8](http://github.com/aurelia/skeleton-navigation/commit/2467e6c8361fc848b45ab6d92b180edf4d4bcdb5)) 74 | * **build:** improve watch functionality ([8496a78d](http://github.com/aurelia/skeleton-navigation/commit/8496a78def478bd2c53217c9e70db1d272a935ea)) 75 | * **package:** update dependencies ([2957e94d](http://github.com/aurelia/skeleton-navigation/commit/2957e94d84988207c2553395e8e0a1c943a65a16)) 76 | 77 | 78 | #### Features 79 | 80 | * **all:** update to new fluent metadata ([18382913](http://github.com/aurelia/skeleton-navigation/commit/183829132bce3f754377bf2d720a288b71ef4b64)) 81 | * **index:** add splash screen ([88e3e6f9](http://github.com/aurelia/skeleton-navigation/commit/88e3e6f956575c18fb37e72cd51e7bfac33f6941)) 82 | 83 | 84 | ## 0.8.0 (2015-01-12) 85 | 86 | 87 | #### Bug Fixes 88 | 89 | * **package:** update Aurelia dependencies ([44083541](http://github.com/aurelia/skeleton-navigation/commit/440835418d78b5d99278ec4f2fbc04beb79ff98f)) 90 | 91 | 92 | #### Features 93 | 94 | * **build:** update watch task to include style files ([ddf6c789](http://github.com/aurelia/skeleton-navigation/commit/ddf6c789c84ac267bdf4865f19a3339d7ee66253)) 95 | 96 | 97 | ### 0.7.2 (2015-01-07) 98 | 99 | 100 | #### Bug Fixes 101 | 102 | * **welcome:** typo in the last name label ([05e72aaa](http://github.com/aurelia/skeleton-navigation/commit/05e72aaaee2a8c58943f7b9e85eb59307a85f35d)) 103 | 104 | 105 | ### 0.7.1 (2015-01-07) 106 | 107 | * updates to the readme to help clarify issues around authentication and usage on windows 108 | 109 | ## 0.7.0 (2015-01-07) 110 | 111 | 112 | #### Bug Fixes 113 | 114 | * **package:** update dependencies to latest ([c11ffa0d](http://github.com/aurelia/skeleton-navigation/commit/c11ffa0d980c6058dbff6d0a16fadd27040f7214)) 115 | 116 | 117 | ## 0.6.0 (2015-01-06) 118 | 119 | 120 | #### Features 121 | 122 | * **build:** update compiler and switch to register module format ([921d6ab8](http://github.com/aurelia/skeleton-navigation/commit/921d6ab8a523fce6a410f7333650eef9dc5e8abc)) 123 | 124 | 125 | ## 0.5.0 (2014-12-22) 126 | 127 | 128 | #### Bug Fixes 129 | 130 | * **config:** update the jspm config ([9ceaa0c2](http://github.com/aurelia/skeleton-navigation/commit/9ceaa0c2af5374461d183993036984cf048261d8)) 131 | * **package:** update dependencies to latest versions ([b5cff606](http://github.com/aurelia/skeleton-navigation/commit/b5cff606059dff0ad47e78cc6ba4325d646015a5)) 132 | 133 | 134 | #### Features 135 | 136 | * **build:** add browser sync ([fe2d2fa7](http://github.com/aurelia/skeleton-navigation/commit/fe2d2fa7c10a4748cab6c86e326465e6a8327ef4)) 137 | 138 | 139 | ### 0.4.2 (2014-12-18) 140 | 141 | 142 | #### Bug Fixes 143 | 144 | * **package:** update bootstrapper to latest version ([e1d00037](http://github.com/aurelia/skeleton-navigation/commit/e1d000377c782b1bfc9c8fce0d247afb0b8702d1)) 145 | 146 | 147 | ### 0.4.1 (2014-12-18) 148 | 149 | 150 | #### Bug Fixes 151 | 152 | * **package:** update dependencies to latest versions ([275a693d](http://github.com/aurelia/skeleton-navigation/commit/275a693dcbbeec189847f97881b40d25e3b693d4)) 153 | 154 | 155 | ## 0.4.0 (2014-12-17) 156 | 157 | 158 | #### Bug Fixes 159 | 160 | * **package:** update dependencies to latest versions ([77986163](http://github.com/aurelia/skeleton-navigation/commit/779861632b7e48152ce7bed9d0316e90fda2482d)) 161 | * **package:** update dependencies to latest versions ([4f1661dc](http://github.com/aurelia/skeleton-navigation/commit/4f1661dceafe93c8c117133bd07b9edb243b913e)) 162 | 163 | -------------------------------------------------------------------------------- /doc/api.json: -------------------------------------------------------------------------------- 1 | {"classes":[],"methods":[],"properties":[],"events":[]} -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // all gulp tasks are located in the ./build/tasks directory 2 | // gulp configuration is in files in ./build directory 3 | require('require-dir')('build/tasks'); 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
Aurelia Navigation Skeleton
20 | 21 |
22 | 23 | 24 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | // Generated on Fri Dec 05 2014 16:49:29 GMT-0500 (EST) 3 | 4 | module.exports = function(config) { 5 | config.set({ 6 | 7 | // base path that will be used to resolve all patterns (eg. files, exclude) 8 | basePath: '', 9 | 10 | 11 | // frameworks to use 12 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 13 | frameworks: ['jspm', 'jasmine'], 14 | 15 | jspm: { 16 | // Edit this to your needs 17 | loadFiles: ['src/**/*.js', 'test/unit/**/*.js'] 18 | }, 19 | 20 | 21 | // list of files / patterns to load in the browser 22 | files: [], 23 | 24 | 25 | // list of files to exclude 26 | exclude: [ 27 | ], 28 | 29 | 30 | // preprocess matching files before serving them to the browser 31 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 32 | preprocessors: { 33 | 'test/**/*.js': ['6to5'], 34 | 'src/**/*.js': ['6to5'] 35 | }, 36 | '6to5Preprocessor': { 37 | options: { 38 | sourceMap: 'inline', 39 | modules: 'system', 40 | moduleIds: false 41 | } 42 | }, 43 | 44 | // test results reporter to use 45 | // possible values: 'dots', 'progress' 46 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter 47 | reporters: ['progress'], 48 | 49 | 50 | // web server port 51 | port: 9876, 52 | 53 | 54 | // enable / disable colors in the output (reporters and logs) 55 | colors: true, 56 | 57 | 58 | // level of logging 59 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 60 | logLevel: config.LOG_INFO, 61 | 62 | 63 | // enable / disable watching file and executing tests whenever any file changes 64 | autoWatch: true, 65 | 66 | 67 | // start these browsers 68 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 69 | browsers: ['Chrome'], 70 | 71 | 72 | // Continuous Integration mode 73 | // if true, Karma captures browsers, runs the tests and exits 74 | singleRun: false 75 | }); 76 | }; 77 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aurelia-skeleton-navigation", 3 | "version": "0.9.5", 4 | "description": "A starter kit for building a standard navigation-style app with Aurelia.", 5 | "keywords": [ 6 | "aurelia", 7 | "navigation", 8 | "skeleton" 9 | ], 10 | "homepage": "http://aurelia.io", 11 | "bugs": { 12 | "url": "https://github.com/aurelia/skeleton-navigation/issues" 13 | }, 14 | "license": "MIT", 15 | "author": "Rob Eisenberg (http://robeisenberg.com/)", 16 | "main": "dist/commonjs/index.js", 17 | "repository": { 18 | "type": "git", 19 | "url": "http://github.com/aurelia/skeleton-navigation" 20 | }, 21 | "devDependencies": { 22 | "aurelia-tools": "^0.1.0", 23 | "browser-sync": "^1.8.1", 24 | "conventional-changelog": "0.0.11", 25 | "del": "^1.1.0", 26 | "gulp": "^3.8.10", 27 | "gulp-6to5": "^3.0.0", 28 | "gulp-autoprefixer": "^2.1.0", 29 | "gulp-bump": "^0.1.11", 30 | "gulp-changed": "^1.1.0", 31 | "gulp-flatten": "0.0.4", 32 | "gulp-jshint": "^1.9.0", 33 | "gulp-plumber": "^0.6.6", 34 | "gulp-protractor": "^0.0.12", 35 | "gulp-sequence": "^0.3.2", 36 | "gulp-sourcemaps": "^1.3.0", 37 | "gulp-yuidoc": "^0.1.2", 38 | "jasmine-core": "^2.1.3", 39 | "jshint-stylish": "^1.0.0", 40 | "karma": "^0.12.28", 41 | "karma-6to5-preprocessor": "^3.0.0", 42 | "karma-chrome-launcher": "^0.1.7", 43 | "karma-jasmine": "^0.3.2", 44 | "karma-jspm": "^1.0.1", 45 | "object.assign": "^1.0.3", 46 | "require-dir": "^0.1.0", 47 | "run-sequence": "^1.0.2", 48 | "vinyl-paths": "^1.0.0" 49 | }, 50 | "jspm": { 51 | "directories": { 52 | "lib": "lib" 53 | }, 54 | "dependencies": { 55 | "Waves": "github:fians/Waves@^0.6.0", 56 | "aurelia-bootstrapper": "^0.9.1", 57 | "aurelia-dependency-injection": "^0.4.1", 58 | "aurelia-framework": "^0.8.4", 59 | "aurelia-http-client": "^0.4.3", 60 | "aurelia-router": "^0.5.1", 61 | "aurelia-templating": "^0.8.9", 62 | "font-awesome": "^4.2.0", 63 | "jquery": "^2.1.3", 64 | "lodash": "^3.1.0", 65 | "materialize": "github:Dogfalo/materialize@^0.95.2" 66 | } 67 | }, 68 | "dependencies": { 69 | "gulp-concat": "^2.4.3", 70 | "gulp-filter": "^2.0.1", 71 | "gulp-jade": "^0.11.0", 72 | "gulp-load-plugins": "^0.8.0", 73 | "gulp-plumber": "^0.6.6", 74 | "gulp-stylus": "^2.0.0" 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /plugins/core/ui-class-list.js: -------------------------------------------------------------------------------- 1 | 2 | export class ClassList{ 3 | 4 | 5 | constructor(){ 6 | 7 | this.addClass = function(){ 8 | 9 | var args = Array.isArray(arguments[0]) ? arguments[0] : arguments 10 | this.element.classList.add.apply(this.element.classList, args) 11 | 12 | } 13 | 14 | 15 | this.removeClass = function(){ 16 | 17 | var args = Array.isArray(arguments[0]) ? arguments[0] : arguments 18 | this.element.classList.remove.apply(this.element.classList, args) 19 | 20 | } 21 | 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /plugins/core/ui-element.js: -------------------------------------------------------------------------------- 1 | import {ClassList} from './ui-class-list' 2 | 3 | export class UiElement{ 4 | 5 | 6 | static inject(){ 7 | 8 | return [Element] 9 | 10 | } 11 | 12 | 13 | constructor(element){ 14 | 15 | this.element = element 16 | 17 | } 18 | 19 | addClass(){ 20 | 21 | var args = Array.isArray(arguments[0]) ? arguments[0] : arguments 22 | this.element.classList.add.apply(this.element.classList, args) 23 | 24 | } 25 | 26 | 27 | removeClass(){ 28 | 29 | var args = Array.isArray(arguments[0]) ? arguments[0] : arguments 30 | this.element.classList.remove.apply(this.element.classList, args) 31 | 32 | } 33 | 34 | 35 | } 36 | -------------------------------------------------------------------------------- /plugins/layout/body.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /plugins/layout/body.js: -------------------------------------------------------------------------------- 1 | import {Behavior} from 'aurelia-templating'; 2 | 3 | export class MzBody { 4 | static metadata() { 5 | return Behavior 6 | .customElement('ui-body') 7 | // .withProperty('options') 8 | // .useView('./body.html') 9 | 10 | } 11 | static inject() { 12 | return [Element]; 13 | } 14 | constructor(element) { 15 | console.log(element) 16 | this.element = element 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /plugins/layout/container.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/plugins/layout/container.js -------------------------------------------------------------------------------- /plugins/layout/flex.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/plugins/layout/flex.js -------------------------------------------------------------------------------- /plugins/layout/grid.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/plugins/layout/grid.js -------------------------------------------------------------------------------- /plugins/layout/section.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/plugins/layout/section.js -------------------------------------------------------------------------------- /plugins/layout/ui-main.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/plugins/layout/ui-main.html -------------------------------------------------------------------------------- /plugins/layout/ui-main.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/plugins/layout/ui-main.js -------------------------------------------------------------------------------- /plugins/layout/view.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/plugins/layout/view.js -------------------------------------------------------------------------------- /plugins/nav/aside.js: -------------------------------------------------------------------------------- 1 | import {Behavior} from 'aurelia-framework'; 2 | 3 | var defaults = { 4 | asideId : 'aside1', 5 | side : 'left' , 6 | open : false , 7 | fixed : true 8 | } 9 | 10 | export class Aside { 11 | 12 | static metadata(){ 13 | 14 | return Behavior 15 | .withProperty('open') 16 | .withProperty('side') 17 | .withProperty('size') 18 | .withProperty('fixed') 19 | .attachedBehavior('toggle') 20 | 21 | } 22 | 23 | 24 | constructor(options){ 25 | this.defaults = defaults; 26 | 27 | this.asideId = options.asideId || this.defaults.asideId 28 | this.fixed = options.fixed || this.defaults.fixed 29 | this.side = options.side || this.defaults.side 30 | this.open = options.open || this.defaults.open 31 | this.size = options.size || this.defaults.size 32 | 33 | } 34 | 35 | activate(options){ 36 | 37 | console.log('Aside Activated', this); 38 | 39 | } 40 | 41 | 42 | toggle(){ 43 | this.open = !this.open; 44 | 45 | } 46 | 47 | 48 | } 49 | -------------------------------------------------------------------------------- /plugins/nav/bar.js: -------------------------------------------------------------------------------- 1 | import {Behavior} from 'aurelia-framework'; 2 | 3 | export class Bar { 4 | 5 | static metadata(){ 6 | 7 | return Behavior 8 | .withProperty('showing') 9 | 10 | } 11 | 12 | constructor(options){ 13 | 14 | this.showing = false 15 | 16 | this.barId = 'bar1' 17 | this.open = false 18 | this.fixed = true 19 | this.size = 'sm' 20 | } 21 | 22 | open(){ 23 | 24 | this.showing = !this.showing; 25 | 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /plugins/nav/ui-nav-aside.jade: -------------------------------------------------------------------------------- 1 | template 2 | div.aside-container 3 | a(href="" ui-toggle="open") 4 | i(class="${icon}") 5 | 6 | -------------------------------------------------------------------------------- /plugins/nav/ui-nav-aside.js: -------------------------------------------------------------------------------- 1 | import {Behavior} from 'aurelia-templating'; 2 | import {Aside} from './aside' 3 | import {UiElement} from './ui-element' 4 | 5 | var defaults = { 6 | asideId : 'aside1', 7 | side : 'left' , 8 | open : false , 9 | fixed : true 10 | } 11 | 12 | export class UiNavAsideCustomElement extends UiElement{ 13 | 14 | 15 | static metadata(){ 16 | 17 | return Behavior 18 | .withProperty('open') 19 | .withProperty('fixed') 20 | .withProperty('side') 21 | .withProperty('size') 22 | 23 | } 24 | 25 | 26 | bind(){ 27 | 28 | var classList = ['ui-aside', 'ui-aside-nav', `aside-${this.side}`] 29 | this.fixed && classList.push('aside-fixed') 30 | this.addClass(classList) 31 | 32 | } 33 | 34 | 35 | openChanged(newValue){ 36 | if(newValue) { 37 | this.addClass('aside-open') } 38 | else { 39 | this.removeClass('aside-open') } 40 | 41 | } 42 | 43 | 44 | } 45 | -------------------------------------------------------------------------------- /plugins/nav/ui-nav-bar.html: -------------------------------------------------------------------------------- 1 | 34 | -------------------------------------------------------------------------------- /plugins/nav/ui-nav-bar.js: -------------------------------------------------------------------------------- 1 | import {Behavior, BoundViewFactory, ViewSlot} from 'aurelia-templating'; 2 | import {Bar} from './bar' 3 | import {MsgPublisher} from './message' 4 | import {MsgSubscriber} from './message' 5 | import {UiElement} from './ui-element'; 6 | 7 | export class UiNavBarTemplateController extends UiElement { 8 | 9 | 10 | static metadata(){ 11 | 12 | return Behavior 13 | .customElement('ui-nav-bar') 14 | .withProperty('router') 15 | .withProperty('aside') 16 | .withProperty('showing') 17 | .withProperty('value') 18 | // .useView('./ui-nav-bar.html') 19 | // .useShadowDOM('./ui-nav-bar.html') 20 | 21 | } 22 | 23 | 24 | static inject() { 25 | 26 | return [BoundViewFactory, ViewSlot] 27 | 28 | } 29 | 30 | 31 | constructor(viewFactory, viewSlot){ 32 | this.viewFactory = viewFactory 33 | this.viewSlot = viewSlot 34 | this.showing = true 35 | 36 | this.barId = 'bar1' 37 | this.open = false 38 | this.fixed = true 39 | this.size = 'sm' 40 | this.ripple = true; 41 | } 42 | 43 | open(){ 44 | 45 | this.showing = !this.showing; 46 | 47 | } 48 | 49 | 50 | valueChanged(){ 51 | 52 | if (newValue) { 53 | 54 | if(this.view){ 55 | this.viewSlot.remove(this.view); 56 | this.view.unbind(); 57 | } 58 | 59 | this.showing = false; 60 | return; 61 | } 62 | 63 | if(!this.view){ 64 | 65 | 66 | this.view = this.viewFactory.create(); 67 | } 68 | 69 | if (this.showing) { 70 | 71 | this.showing = true; 72 | 73 | if(!this.view.bound){ 74 | 75 | this.view.bind(); 76 | 77 | } 78 | 79 | this.viewSlot.add(this.view); 80 | } 81 | } 82 | 83 | 84 | } 85 | -------------------------------------------------------------------------------- /plugins/nav/ui-nav.js: -------------------------------------------------------------------------------- 1 | import {Behavior} from 'aurelia-framework' 2 | import {Aside} from './aside' 3 | import {Bar} from './bar' 4 | 5 | var defaults = { 6 | aside: { 7 | side : 'left', 8 | open : false, 9 | fixed : true, 10 | asideId : 'aside1' 11 | }, 12 | bar: { 13 | fixed : true, 14 | open : false, 15 | size : 'sm', 16 | barId : 'bar1' 17 | } 18 | 19 | } 20 | 21 | export class Nav { 22 | 23 | static metadata(){ 24 | 25 | return Behavior 26 | .withProperty('toggle') 27 | 28 | } 29 | 30 | static inject() { 31 | 32 | return [Aside, Bar] 33 | 34 | } 35 | activate(){ 36 | console.log('me') 37 | } 38 | 39 | constructor(aside, bar){ 40 | this.$aside = aside 41 | this.$bar = bar 42 | this.bars = {} 43 | this.asides = {} 44 | } 45 | 46 | addBar(options){ 47 | 48 | options = _.assign(defaults.bar, options); 49 | 50 | if (this.bars[options.barId]) { 51 | 52 | return console.error(`Bar ${options.barId} already Exists`); 53 | } 54 | 55 | this.bars[options.barId] = new this.$bar(options); 56 | 57 | } 58 | 59 | addAside(){ 60 | 61 | options = _.assign(defaults.aside, options); 62 | 63 | if (this.bars[options.asideId]) { 64 | 65 | return console.error(`Aside ${options.barId} already Exists`); 66 | } 67 | 68 | this.bars[options.asideId] = new this.$aside(options); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /plugins/services/message.js: -------------------------------------------------------------------------------- 1 | import {EventAggregator} from 'aurelia-event-aggregator' 2 | 3 | 4 | export class MsgPublisher{ 5 | 6 | 7 | static inject() { 8 | 9 | return [EventAggregator] 10 | 11 | } 12 | 13 | 14 | constructor(eventAggregator) { 15 | 16 | this.eventAggregator = EventAggregator 17 | 18 | } 19 | 20 | 21 | publish(channel, payload){ 22 | 23 | this.eventAggregator.publish(channel, payload) 24 | 25 | } 26 | 27 | 28 | } 29 | 30 | export class MsgSubscriber{ 31 | 32 | static inject() { 33 | 34 | return [EventAggregator] 35 | 36 | } 37 | 38 | 39 | constructor(eventAggregator){ 40 | 41 | this.eventAggregator = eventAggregator 42 | 43 | } 44 | 45 | 46 | subscribe(channel){ 47 | this.eventAggregator.subscribe(channel, payload =>{ 48 | console.log('Subscribe Payload', payload) 49 | }) 50 | } 51 | 52 | } 53 | -------------------------------------------------------------------------------- /plugins/services/ui-waves.html: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /plugins/services/ui-waves.js: -------------------------------------------------------------------------------- 1 | // /*! 2 | // * Waves v0.6.0 3 | // * http://fian.my.id/Waves 4 | // * 5 | // * Copyright 2014 Alfiana E. Sibuea and other contributors 6 | // * Released under the MIT license 7 | // * https://github.com/fians/Waves/blob/master/LICENSE 8 | // */ 9 | 10 | // import {Behavior} from 'aurelia-templating' 11 | 12 | 13 | 14 | // /* uses an integer rather than bool so there's no issues with 15 | // * needing to clear timeouts if another touch event occurred 16 | // * within the 500ms. Cannot mouseup between touchstart and 17 | // * touchend, nor in the 500ms after touchend. */ 18 | 19 | // export class TouchHandler{ 20 | 21 | // constructor(){ 22 | // var _this = this 23 | // this.touches = 0 24 | // } 25 | // allowEvent(e) { 26 | // var allow = true; 27 | 28 | // if (e.type === 'touchstart') { 29 | // _this.touches += 1; //push 30 | // } else if (e.type === 'touchend' || e.type === 'touchcancel') { 31 | // setTimeout(function() { 32 | // if (_this.touches > 0) { 33 | // _this.touches -= 1; //pop after 500ms 34 | // } 35 | // }, 500); 36 | // } else if (e.type === 'mousedown' && _this.touches > 0) { 37 | // allow = false; 38 | // } 39 | 40 | // return allow; 41 | // } 42 | 43 | // touchup(e) { 44 | 45 | // _this.allowEvent(e); 46 | // } 47 | // } 48 | 49 | 50 | 51 | 52 | // export class Effect extends TouchHandler{ 53 | 54 | // constructor(){ 55 | // var _this = this 56 | // this.duration = 750 57 | // } 58 | // show(e, element) { 59 | // console.log(this) 60 | // var _this = this; 61 | // if (e.button === 2) { 62 | // return false; 63 | // } 64 | 65 | // var el = element || this; 66 | 67 | // // Create ripple 68 | // var ripple = document.createElement('div'); 69 | // ripple.className = 'waves-ripple'; 70 | // el.appendChild(ripple); 71 | 72 | // // Get click coordinate and element witdh 73 | // var pos = offset(el); 74 | // var relativeY = (e.pageY - pos.top); 75 | // var relativeX = (e.pageX - pos.left); 76 | // var scale = 'scale('+((el.clientWidth / 100) * 3)+')'; 77 | 78 | // // Support for touch devices 79 | // if ('touches' in e) { 80 | // relativeY = (e.touches[0].pageY - pos.top); 81 | // relativeX = (e.touches[0].pageX - pos.left); 82 | // } 83 | 84 | // // Attach data to element 85 | // ripple.setAttribute('data-hold', Date.now()); 86 | // ripple.setAttribute('data-scale', scale); 87 | // ripple.setAttribute('data-x', relativeX); 88 | // ripple.setAttribute('data-y', relativeY); 89 | 90 | // // Set ripple position 91 | // var rippleStyle = { 92 | // 'top': relativeY+'px', 93 | // 'left': relativeX+'px' 94 | // }; 95 | 96 | // ripple.className = ripple.className + ' waves-notransition'; 97 | // ripple.setAttribute('style', _this.convertStyle(rippleStyle)); 98 | // ripple.className = ripple.className.replace('waves-notransition', ''); 99 | 100 | // // Scale the ripple 101 | // rippleStyle['-webkit-transform'] = scale; 102 | // rippleStyle['-moz-transform'] = scale; 103 | // rippleStyle['-ms-transform'] = scale; 104 | // rippleStyle['-o-transform'] = scale; 105 | // rippleStyle.transform = scale; 106 | // rippleStyle.opacity = '1'; 107 | 108 | // rippleStyle['-webkit-transition-duration'] = _this.duration + 'ms'; 109 | // rippleStyle['-moz-transition-duration'] = _this.duration + 'ms'; 110 | // rippleStyle['-o-transition-duration'] = _this.duration + 'ms'; 111 | // rippleStyle['transition-duration'] = _this.duration + 'ms'; 112 | 113 | // ripple.setAttribute('style', _this.convertStyle(rippleStyle)); 114 | // } 115 | // hide(){ 116 | // var _this = this; 117 | // _this.touchup(e); 118 | 119 | // var el = this; 120 | // var width = el.clientWidth * 1.4; 121 | 122 | // // Get first ripple 123 | // var ripple = null; 124 | // var ripples = el.getElementsByClassName('waves-ripple'); 125 | // if (ripples.length > 0) { 126 | // ripple = ripples[ripples.length - 1]; 127 | // } else { 128 | // return false; 129 | // } 130 | 131 | // var relativeX = ripple.getAttribute('data-x'); 132 | // var relativeY = ripple.getAttribute('data-y'); 133 | // var scale = ripple.getAttribute('data-scale'); 134 | 135 | // // Get delay beetween mousedown and mouse leave 136 | // var diff = Date.now() - Number(ripple.getAttribute('data-hold')); 137 | // var delay = 350 - diff; 138 | 139 | // if (delay < 0) { 140 | // delay = 0; 141 | // } 142 | 143 | // // Fade out ripple after delay 144 | // setTimeout(function(e) { 145 | // var style = { 146 | // 'top': relativeY+'px', 147 | // 'left': relativeX+'px', 148 | // 'opacity': '0', 149 | 150 | // // Duration 151 | // '-webkit-transition-duration': _this.duration + 'ms', 152 | // '-moz-transition-duration': _this.duration + 'ms', 153 | // '-o-transition-duration': _this.duration + 'ms', 154 | // 'transition-duration': _this.duration + 'ms', 155 | // '-webkit-transform': scale, 156 | // '-moz-transform': scale, 157 | // '-ms-transform': scale, 158 | // '-o-transform': scale, 159 | // 'transform': scale, 160 | // }; 161 | 162 | // ripple.setAttribute('style', _this.convertStyle(style)); 163 | 164 | // setTimeout(function() { 165 | // try { 166 | // el.removeChild(ripple); 167 | // } catch(e) { 168 | // return false; 169 | // } 170 | // }, _this.duration); 171 | // }, delay); 172 | // } 173 | 174 | // wrapInput(elements){ 175 | // var _this = this; 176 | // for (var a = 0; a < elements.length; a++) { 177 | // var el = elements[a]; 178 | 179 | // if (el.tagName.toLowerCase() === 'input') { 180 | // var parent = el.parentNode; 181 | 182 | // // If input already have parent just pass through 183 | // if (parent.tagName.toLowerCase() === 'i' && parent.className.indexOf('waves-effect') !== -1) { 184 | // continue; 185 | // } 186 | 187 | // // Put element class and style to the specified parent 188 | // var wrapper = document.createElement('i'); 189 | // wrapper.className = el.className + ' waves-input-wrapper'; 190 | 191 | // var elementStyle = el.getAttribute('style'); 192 | 193 | // if (!elementStyle) { 194 | // elementStyle = ''; 195 | // } 196 | 197 | // wrapper.setAttribute('style', elementStyle); 198 | 199 | // el.className = 'waves-button-input'; 200 | // el.removeAttribute('style'); 201 | 202 | // // Put element as child 203 | // parent.replaceChild(wrapper, el); 204 | // wrapper.appendChild(el); 205 | // } 206 | // } 207 | // } 208 | // } 209 | 210 | 211 | // export class UiWavesCustomElement extends Effect{ 212 | 213 | // static metadata(){ 214 | // return Behavior 215 | // // .attachedBehavior('ui-waves') 216 | // .withProperty('display-effect') 217 | // .withProperty('attach') 218 | // .withProperty('effect') 219 | // } 220 | 221 | // static inject(){ 222 | 223 | // return [Element] 224 | 225 | // } 226 | 227 | // constructor(element){ 228 | // var _this = this; 229 | // this.element = element; 230 | // this.waves = this.waves || {}; 231 | 232 | // this.$$ = document.querySelectorAll.bind(document); 233 | 234 | 235 | // this.isWindow = function(obj){ 236 | // return obj !== null && obj === obj.window; 237 | // } 238 | 239 | 240 | // this.getWindow = function(elem){ 241 | // return this.isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView; 242 | // } 243 | 244 | 245 | // this.offest = function(elem){ 246 | // var docElem, win, 247 | // box = {top: 0, left: 0}, 248 | // doc = elem && elem.ownerDocument; 249 | 250 | // docElem = doc.documentElement; 251 | 252 | // if (typeof elem.getBoundingClientRect !== typeof undefined) { 253 | // box = elem.getBoundingClientRect(); 254 | // } 255 | // win = this.getWindow(doc); 256 | // return { 257 | // top: box.top + win.pageYOffset - docElem.clientTop, 258 | // left: box.left + win.pageXOffset - docElem.clientLeft 259 | // }; 260 | // } 261 | 262 | 263 | // this.convertStyle = function(){ 264 | // var style = ''; 265 | 266 | // for (var a in obj) { 267 | // if (obj.hasOwnProperty(a)) { 268 | // style += (a + ':' + obj[a] + ';'); 269 | // } 270 | // } 271 | 272 | // return style; 273 | // } 274 | 275 | // this.showEffect = function(e) { 276 | // var element = this.getWavesEffectElement(e); 277 | 278 | // if (element !== null) { 279 | // _this.show(e, element); 280 | 281 | // if ('ontouchstart' in window) { 282 | // element.addEventListener('touchend', _this.hide, false); 283 | // element.addEventListener('touchcancel', _this.hide, false); 284 | // } 285 | 286 | // element.addEventListener('mouseup', _this.hide, false); 287 | // element.addEventListener('mouseleave', _this.hide, false); 288 | // } 289 | // } 290 | 291 | // /** 292 | // * Delegated click handler for .waves-effect element. 293 | // * returns null when .waves-effect element not in "click tree" 294 | // */ 295 | // this.getWavesEffectElement = function(e) { 296 | // if (_this.allowEvent(e) === false) { 297 | // return null; 298 | // } 299 | 300 | // var element = null; 301 | // var target = e.target || e.srcElement; 302 | 303 | // while (target.parentElement !== null) { 304 | // if (target.className.indexOf('waves-effect') !== -1) { 305 | // element = target; 306 | // break; 307 | // } 308 | // target = target.parentElement; 309 | // } 310 | 311 | // return element; 312 | // } 313 | 314 | // } 315 | 316 | // /** 317 | // * Bubble the click and show effect if .waves-effect elem was found 318 | // */ 319 | 320 | 321 | // displayEffect(options) { 322 | // var _this = this; 323 | // options = options || {}; 324 | 325 | // if ('duration' in options) { 326 | // this.duration = options.duration; 327 | // } 328 | 329 | // //Wrap input inside tag 330 | // this.wrapInput(this.$$('.waves-effect')); 331 | 332 | // if ('ontouchstart' in window) { 333 | // document.body.addEventListener('touchstart', this.showEffect, false); 334 | // } 335 | 336 | // document.body.addEventListener('mousedown', this.showEffect, false); 337 | // } 338 | 339 | // /** 340 | // * Attach Waves to an input element (or any element which doesn't 341 | // * bubble mouseup/mousedown events). 342 | // * Intended to be used with dynamically loaded forms/inputs, or 343 | // * where the user doesn't want a delegated click handler. 344 | // */ 345 | 346 | // attach(element){ 347 | // var _this = this; 348 | // //FUTURE: automatically add waves classes and allow users 349 | // // to specify them with an options param? Eg. light/classic/button 350 | // if (element.tagName.toLowerCase() === 'input') { 351 | // this.wrapInput([element]); 352 | // element = element.parentElement; 353 | // } 354 | 355 | // if ('ontouchstart' in window) { 356 | // element.addEventListener('touchstart', showEffect, false); 357 | // } 358 | 359 | // element.addEventListener('mousedown', showEffect, false); 360 | // } 361 | 362 | // } 363 | -------------------------------------------------------------------------------- /plugins/toggle/ui-toggle.html: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /plugins/toggle/ui-toggle.js: -------------------------------------------------------------------------------- 1 | import {Behavior} from 'aurelia-templating' 2 | import {UiElement} from './ui-element' 3 | 4 | export class UiToggleCustomElement extends UiElement { 5 | static metadata(){ 6 | return Behavior 7 | .withProperty('toggle') 8 | .withProperty('icon') 9 | 10 | } 11 | 12 | static inject(){ 13 | 14 | return [Element] 15 | 16 | } 17 | 18 | 19 | constructor(element){ 20 | 21 | this.element = element 22 | 23 | } 24 | 25 | 26 | bind(){ 27 | 28 | this.element.classList.add('aside-toggle', 'waves-effect', 'waves-light', 'no-select'); 29 | 30 | } 31 | 32 | 33 | } 34 | -------------------------------------------------------------------------------- /plugins/ui-aurelia.html: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /plugins/ui-aurelia.js: -------------------------------------------------------------------------------- 1 | import {All} from 'aurelia-framework'; 2 | import {Behavior} from 'aurelia-templating'; 3 | import {Aside} from './aside' 4 | import {Bar} from './bar' 5 | import {MsgPublisher} from './message' 6 | import {MsgSubscriber} from './message' 7 | 8 | 9 | var defaults = { 10 | asideId : 'aside1', 11 | size : 'md' , 12 | side : 'left' , 13 | open : false , 14 | fixed : true 15 | } 16 | 17 | export class UiAureliaCustomElement { 18 | 19 | static metadata(){ 20 | 21 | return Behavior 22 | // .noView() 23 | .withProperty('router') 24 | .withProperty('aside') 25 | .withProperty('nav') 26 | .withProperty('footer') 27 | ; 28 | 29 | } 30 | 31 | static inject() { 32 | 33 | return [Element,Bar, MsgPublisher, MsgSubscriber]; 34 | 35 | } 36 | 37 | constructor(element, bar, pub, sub) { 38 | 39 | this.element = element 40 | this.pub = pub 41 | this.sub = sub 42 | this.aside = {}; 43 | this.bar = {}; 44 | this.aside = new Aside(defaults) 45 | 46 | 47 | } 48 | 49 | attached(){ 50 | this.element.classList.add('ui-aurelia') 51 | // console.log('Aurelia UI, attahced', this) 52 | } 53 | 54 | activate(){ 55 | 56 | this.header = 'Joel' 57 | console.log('Nav Activated', this) 58 | 59 | } 60 | 61 | 62 | // valueChanged(newValue){ 63 | // Object.keys(newValue).forEach(className => { 64 | // this.element.classList[newValue[className] ? 'add' : 'remove'](className); 65 | // }); 66 | // } 67 | } 68 | -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // An example configuration file. 2 | exports.config = { 3 | directConnect: true, 4 | 5 | // Capabilities to be passed to the webdriver instance. 6 | capabilities: { 7 | 'browserName': 'chrome' 8 | }, 9 | onPrepare: function() { 10 | browser.ignoreSynchronization = true; 11 | 12 | by.addLocator('valueBind', function (bindingModel, opt_parentElement) { 13 | var using = opt_parentElement || document; 14 | var matches = using.querySelectorAll('*[value\\.bind="' + bindingModel +'"]'); 15 | var result = undefined; 16 | 17 | if (matches.length === 0) { 18 | result = null; 19 | } else if (matches.length === 1) { 20 | result = matches[0]; 21 | } else { 22 | result = matches; 23 | } 24 | 25 | return result; 26 | }); 27 | 28 | }, 29 | 30 | //seleniumAddress: 'http://0.0.0.0:4444', 31 | // add proper version number 32 | seleniumServerJar: './node_modules/gulp-protractor/node_modules/protractor/selenium/selenium-server-standalone-2.44.0.jar', 33 | specs: ['specs/e2e/dist/*.js'], 34 | 35 | // Options to be passed to Jasmine-node. 36 | jasmineNodeOpts: { 37 | showColors: true, 38 | defaultTimeoutInterval: 30000 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /src/app.jade: -------------------------------------------------------------------------------- 1 | template 2 | import(from='./ui-aurelia') 3 | 4 | ui-aurelia.is-row(router.bind="router", 5 | nav.bind="{right:true, bar:true}", 6 | bar.bind="{fixed:true, size:'sm', mobile:true}") 7 | //- main.ui-main.is-column 8 | //- ui-nav-bar.ui-nav.ui-nav-bar(aside.bind="nav.right") 9 | //- div.ui-main 10 | //- router-view 11 | //- footer.ui-footer 12 | 13 | //- ui-nav-aside(open.bind="right.open" fixed.bind="right.fixed" side.bind="right.side") 14 | 15 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | import {Router} from 'aurelia-router'; 2 | import {Behaviore} from 'aurelia-framework'; 3 | 4 | export class App { 5 | 6 | 7 | static inject() { return [Router, Element]; } 8 | 9 | 10 | constructor(router) { 11 | 12 | this.router = router; 13 | this.router.configure( 14 | config => { 15 | 16 | config.title = 'Aurelia'; 17 | config.map([ 18 | 19 | { route: ['','welcome'], moduleId: 'welcome', nav: true, title:'Welcome' }, 20 | { route: 'flickr', moduleId: 'flickr', nav: true }, 21 | { route: 'child-router', moduleId: 'child-router', nav: true, title:'Child Router' } 22 | 23 | ]); 24 | 25 | 26 | }); 27 | 28 | 29 | } 30 | 31 | 32 | } 33 | 34 | // class TempAside { 35 | 36 | // static metadata(){ 37 | 38 | // return Behaviore 39 | // .withProperty('open') 40 | 41 | // } 42 | 43 | 44 | // constructor(options){ 45 | 46 | // this.open = options.open || false; 47 | // this.side = options.side || 'right'; 48 | // this.fixed = options.fixed || true; 49 | 50 | // } 51 | 52 | 53 | // toggle(){ 54 | 55 | // this.open = !this.open; 56 | 57 | // } 58 | // } 59 | -------------------------------------------------------------------------------- /src/child-router.html: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /src/child-router.js: -------------------------------------------------------------------------------- 1 | import {Router} from 'aurelia-router'; 2 | 3 | export class Welcome{ 4 | static inject() { return [Router]; } 5 | constructor(router){ 6 | this.heading = 'Child Router'; 7 | this.router = router; 8 | router.configure(config => { 9 | config.map([ 10 | { route: ['','welcome'], moduleId: 'welcome', nav: true, title:'Welcome' }, 11 | { route: 'flickr', moduleId: 'flickr', nav: true }, 12 | { route: 'child-router', moduleId: 'child-router', nav: true, title:'Child Router' } 13 | ]); 14 | }); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/flickr.html: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /src/flickr.js: -------------------------------------------------------------------------------- 1 | import {HttpClient} from 'aurelia-http-client'; 2 | 3 | var url = 'http://api.flickr.com/services/feeds/photos_public.gne?tags=rainier&tagmode=any&format=json'; 4 | 5 | export class Flickr{ 6 | static inject() { return [HttpClient]; } 7 | constructor(http){ 8 | this.heading = 'Flickr'; 9 | this.images = []; 10 | this.http = http; 11 | } 12 | 13 | activate(){ 14 | return this.http.jsonp(url).then(response => { 15 | this.images = response.content.items; 16 | }); 17 | } 18 | 19 | canDeactivate(){ 20 | return confirm('Are you sure you want to leave?'); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/form.html: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /src/form.js: -------------------------------------------------------------------------------- 1 | export class Welcome{ 2 | constructor(){ 3 | this.heading = 'Welcome to the Aurelia Navigation App!'; 4 | this.firstName = 'John'; 5 | this.lastName = 'Doe'; 6 | } 7 | 8 | get fullName(){ 9 | return `${this.firstName} ${this.lastName}`; 10 | } 11 | 12 | welcome(){ 13 | // alert(`Welcome, ${this.fullName}!`); 14 | } 15 | } 16 | 17 | export class UpperValueConverter { 18 | toView(value){ 19 | return value && value.toUpperCase(); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | 2 | import {LogManager} from 'aurelia-framework'; 3 | import {ConsoleAppender} from 'aurelia-logging-console'; 4 | 5 | LogManager.addAppender(new ConsoleAppender()); 6 | LogManager.setLevel(LogManager.levels.debug); 7 | 8 | export function configure(aurelia) { 9 | aurelia.use 10 | .defaultBindingLanguage() 11 | .defaultResources() 12 | .router() 13 | .eventAggregator() 14 | .plugin('./ui-class-list') 15 | .plugin('./ui-element') 16 | .plugin('./ui-toggle') 17 | .plugin('./ui-aurelia') 18 | .plugin('./ui-nav-bar') 19 | .plugin('./ui-nav-aside') 20 | // .plugin('../plugins/toggle/ui-toggle') 21 | 22 | aurelia.start() 23 | .then(function(a) { 24 | console.log(a) 25 | // return 26 | return a.setRoot('app', document.body) 27 | }); 28 | } 29 | 30 | -------------------------------------------------------------------------------- /src/welcome.html: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /src/welcome.js: -------------------------------------------------------------------------------- 1 | export class Welcome{ 2 | constructor(){ 3 | this.heading = 'Aurelia ui '; 4 | this.firstName = 'John'; 5 | this.lastName = 'Doe'; 6 | } 7 | 8 | get fullName(){ 9 | return `${this.firstName} ${this.lastName}`; 10 | } 11 | 12 | welcome(){ 13 | // alert(`Welcome, ${this.fullName}!`); 14 | } 15 | } 16 | 17 | export class UpperValueConverter { 18 | toView(value){ 19 | return value && value.toUpperCase(); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /styles/components/_button.styl: -------------------------------------------------------------------------------- 1 | .btn 2 | background-color: $blue.base 3 | 4 | .btn-large 5 | background-color: $blue.base 6 | -------------------------------------------------------------------------------- /styles/components/_card.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/components/_card.styl -------------------------------------------------------------------------------- /styles/components/_collapsible.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/components/_collapsible.styl -------------------------------------------------------------------------------- /styles/components/_collection.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/components/_collection.styl -------------------------------------------------------------------------------- /styles/components/_dialog.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/components/_dialog.styl -------------------------------------------------------------------------------- /styles/components/_dropdown.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/components/_dropdown.styl -------------------------------------------------------------------------------- /styles/components/_modal.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/components/_modal.styl -------------------------------------------------------------------------------- /styles/components/_progress.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/components/_progress.styl -------------------------------------------------------------------------------- /styles/components/_select.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/components/_select.styl -------------------------------------------------------------------------------- /styles/components/_table.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/components/_table.styl -------------------------------------------------------------------------------- /styles/components/_tabs.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/components/_tabs.styl -------------------------------------------------------------------------------- /styles/components/_typehead.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/components/_typehead.styl -------------------------------------------------------------------------------- /styles/components/index.styl: -------------------------------------------------------------------------------- 1 | @import '_button' 2 | @import '_card' 3 | @import '_collapsible' 4 | @import '_collection' 5 | @import '_dialog' 6 | @import '_dropdown' 7 | @import '_modal' 8 | @import '_progress' 9 | @import '_select' 10 | @import '_table' 11 | @import '_tabs' 12 | @import '_typehead' 13 | -------------------------------------------------------------------------------- /styles/core/_colors.styl: -------------------------------------------------------------------------------- 1 | // Utility Color Classes 2 | 3 | //.success { 4 | // 5 | //} 6 | 7 | // Google Color Palette defined: http://www.google.com/design/spec/style/color.html 8 | 9 | 10 | 11 | $red = { 12 | "lighten-5": #FFEBEE, 13 | "lighten-4": #FFCDD2, 14 | "lighten-3": #EF9A9A, 15 | "lighten-2": #E57373, 16 | "lighten-1": #EF5350, 17 | "base": #F44336, 18 | "darken-1": #E53935, 19 | "darken-2": #D32F2F, 20 | "darken-3": #C62828, 21 | "darken-4": #B71C1C, 22 | "accent-1": #FF8A80, 23 | "accent-2": #FF5252, 24 | "accent-3": #FF1744, 25 | "accent-4": #D50000 26 | } 27 | 28 | $pink = { 29 | "lighten-5": #fce4ec, 30 | "lighten-4": #f8bbd0, 31 | "lighten-3": #f48fb1, 32 | "lighten-2": #f06292, 33 | "lighten-1": #ec407a, 34 | "base": #e91e63, 35 | "darken-1": #d81b60, 36 | "darken-2": #c2185b, 37 | "darken-3": #ad1457, 38 | "darken-4": #880e4f, 39 | "accent-1": #ff80ab, 40 | "accent-2": #ff4081, 41 | "accent-3": #f50057, 42 | "accent-4": #c51162 43 | } 44 | 45 | $purple = { 46 | "lighten-5": #f3e5f5, 47 | "lighten-4": #e1bee7, 48 | "lighten-3": #ce93d8, 49 | "lighten-2": #ba68c8, 50 | "lighten-1": #ab47bc, 51 | "base": #9c27b0, 52 | "darken-1": #8e24aa, 53 | "darken-2": #7b1fa2, 54 | "darken-3": #6a1b9a, 55 | "darken-4": #4a148c, 56 | "accent-1": #ea80fc, 57 | "accent-2": #e040fb, 58 | "accent-3": #d500f9, 59 | "accent-4": #aa00ff 60 | } 61 | 62 | $deep-purple = { 63 | "lighten-5": #ede7f6, 64 | "lighten-4": #d1c4e9, 65 | "lighten-3": #b39ddb, 66 | "lighten-2": #9575cd, 67 | "lighten-1": #7e57c2, 68 | "base": #673ab7, 69 | "darken-1": #5e35b1, 70 | "darken-2": #512da8, 71 | "darken-3": #4527a0, 72 | "darken-4": #311b92, 73 | "accent-1": #b388ff, 74 | "accent-2": #7c4dff, 75 | "accent-3": #651fff, 76 | "accent-4": #6200ea 77 | } 78 | 79 | $indigo = { 80 | "lighten-5": #e8eaf6, 81 | "lighten-4": #c5cae9, 82 | "lighten-3": #9fa8da, 83 | "lighten-2": #7986cb, 84 | "lighten-1": #5c6bc0, 85 | "base": #3f51b5, 86 | "darken-1": #3949ab, 87 | "darken-2": #303f9f, 88 | "darken-3": #283593, 89 | "darken-4": #1a237e, 90 | "accent-1": #8c9eff, 91 | "accent-2": #536dfe, 92 | "accent-3": #3d5afe, 93 | "accent-4": #304ffe 94 | } 95 | 96 | $blue = { 97 | "lighten-5": #E3F2FD, 98 | "lighten-4": #BBDEFB, 99 | "lighten-3": #90CAF9, 100 | "lighten-2": #64B5F6, 101 | "lighten-1": #42A5F5, 102 | "base": #2196F3, 103 | "darken-1": #1E88E5, 104 | "darken-2": #1976D2, 105 | "darken-3": #1565C0, 106 | "darken-4": #0D47A1, 107 | "accent-1": #82B1FF, 108 | "accent-2": #448AFF, 109 | "accent-3": #2979FF, 110 | "accent-4": #2962FF 111 | } 112 | 113 | $light-blue = { 114 | "lighten-5": #e1f5fe, 115 | "lighten-4": #b3e5fc, 116 | "lighten-3": #81d4fa, 117 | "lighten-2": #4fc3f7, 118 | "lighten-1": #29b6f6, 119 | "base": #03a9f4, 120 | "darken-1": #039be5, 121 | "darken-2": #0288d1, 122 | "darken-3": #0277bd, 123 | "darken-4": #01579b, 124 | "accent-1": #80d8ff, 125 | "accent-2": #40c4ff, 126 | "accent-3": #00b0ff, 127 | "accent-4": #0091ea 128 | } 129 | 130 | $cyan = { 131 | "lighten-5": #e0f7fa, 132 | "lighten-4": #b2ebf2, 133 | "lighten-3": #80deea, 134 | "lighten-2": #4dd0e1, 135 | "lighten-1": #26c6da, 136 | "base": #00bcd4, 137 | "darken-1": #00acc1, 138 | "darken-2": #0097a7, 139 | "darken-3": #00838f, 140 | "darken-4": #006064, 141 | "accent-1": #84ffff, 142 | "accent-2": #18ffff, 143 | "accent-3": #00e5ff, 144 | "accent-4": #00b8d4 145 | } 146 | 147 | $teal = { 148 | "lighten-5": #e0f2f1, 149 | "lighten-4": #b2dfdb, 150 | "lighten-3": #80cbc4, 151 | "lighten-2": #4db6ac, 152 | "lighten-1": #26a69a, 153 | "base": #009688, 154 | "darken-1": #00897b, 155 | "darken-2": #00796b, 156 | "darken-3": #00695c, 157 | "darken-4": #004d40, 158 | "accent-1": #a7ffeb, 159 | "accent-2": #64ffda, 160 | "accent-3": #1de9b6, 161 | "accent-4": #00bfa5 162 | } 163 | 164 | $green = { 165 | "lighten-5": #E8F5E9, 166 | "lighten-4": #C8E6C9, 167 | "lighten-3": #A5D6A7, 168 | "lighten-2": #81C784, 169 | "lighten-1": #66BB6A, 170 | "base": #4CAF50, 171 | "darken-1": #43A047, 172 | "darken-2": #388E3C, 173 | "darken-3": #2E7D32, 174 | "darken-4": #1B5E20, 175 | "accent-1": #B9F6CA, 176 | "accent-2": #69F0AE, 177 | "accent-3": #00E676, 178 | "accent-4": #00C853 179 | } 180 | 181 | $light-green = { 182 | "lighten-5": #f1f8e9, 183 | "lighten-4": #dcedc8, 184 | "lighten-3": #c5e1a5, 185 | "lighten-2": #aed581, 186 | "lighten-1": #9ccc65, 187 | "base": #8bc34a, 188 | "darken-1": #7cb342, 189 | "darken-2": #689f38, 190 | "darken-3": #558b2f, 191 | "darken-4": #33691e, 192 | "accent-1": #ccff90, 193 | "accent-2": #b2ff59, 194 | "accent-3": #76ff03, 195 | "accent-4": #64dd17 196 | } 197 | 198 | $lime = { 199 | "lighten-5": #f9fbe7, 200 | "lighten-4": #f0f4c3, 201 | "lighten-3": #e6ee9c, 202 | "lighten-2": #dce775, 203 | "lighten-1": #d4e157, 204 | "base": #cddc39, 205 | "darken-1": #c0ca33, 206 | "darken-2": #afb42b, 207 | "darken-3": #9e9d24, 208 | "darken-4": #827717, 209 | "accent-1": #f4ff81, 210 | "accent-2": #eeff41, 211 | "accent-3": #c6ff00, 212 | "accent-4": #aeea00 213 | } 214 | 215 | $yellow = { 216 | "lighten-5": #fffde7, 217 | "lighten-4": #fff9c4, 218 | "lighten-3": #fff59d, 219 | "lighten-2": #fff176, 220 | "lighten-1": #ffee58, 221 | "base": #ffeb3b, 222 | "darken-1": #fdd835, 223 | "darken-2": #fbc02d, 224 | "darken-3": #f9a825, 225 | "darken-4": #f57f17, 226 | "accent-1": #ffff8d, 227 | "accent-2": #ffff00, 228 | "accent-3": #ffea00, 229 | "accent-4": #ffd600 230 | } 231 | 232 | $amber = { 233 | "lighten-5": #fff8e1, 234 | "lighten-4": #ffecb3, 235 | "lighten-3": #ffe082, 236 | "lighten-2": #ffd54f, 237 | "lighten-1": #ffca28, 238 | "base": #ffc107, 239 | "darken-1": #ffb300, 240 | "darken-2": #ffa000, 241 | "darken-3": #ff8f00, 242 | "darken-4": #ff6f00, 243 | "accent-1": #ffe57f, 244 | "accent-2": #ffd740, 245 | "accent-3": #ffc400, 246 | "accent-4": #ffab00 247 | } 248 | 249 | $orange = { 250 | "lighten-5": #fff3e0, 251 | "lighten-4": #ffe0b2, 252 | "lighten-3": #ffcc80, 253 | "lighten-2": #ffb74d, 254 | "lighten-1": #ffa726, 255 | "base": #ff9800, 256 | "darken-1": #fb8c00, 257 | "darken-2": #f57c00, 258 | "darken-3": #ef6c00, 259 | "darken-4": #e65100, 260 | "accent-1": #ffd180, 261 | "accent-2": #ffab40, 262 | "accent-3": #ff9100, 263 | "accent-4": #ff6d00 264 | } 265 | 266 | $deep-orange = { 267 | "lighten-5": #fbe9e7, 268 | "lighten-4": #ffccbc, 269 | "lighten-3": #ffab91, 270 | "lighten-2": #ff8a65, 271 | "lighten-1": #ff7043, 272 | "base": #ff5722, 273 | "darken-1": #f4511e, 274 | "darken-2": #e64a19, 275 | "darken-3": #d84315, 276 | "darken-4": #bf360c, 277 | "accent-1": #ff9e80, 278 | "accent-2": #ff6e40, 279 | "accent-3": #ff3d00, 280 | "accent-4": #dd2c00 281 | } 282 | 283 | $brown = { 284 | "lighten-5": #efebe9, 285 | "lighten-4": #d7ccc8, 286 | "lighten-3": #bcaaa4, 287 | "lighten-2": #a1887f, 288 | "lighten-1": #8d6e63, 289 | "base": #795548, 290 | "darken-1": #6d4c41, 291 | "darken-2": #5d4037, 292 | "darken-3": #4e342e, 293 | "darken-4": #3e2723 294 | } 295 | 296 | $blue-grey = { 297 | "lighten-5": #eceff1, 298 | "lighten-4": #cfd8dc, 299 | "lighten-3": #b0bec5, 300 | "lighten-2": #90a4ae, 301 | "lighten-1": #78909c, 302 | "base": #607d8b, 303 | "darken-1": #546e7a, 304 | "darken-2": #455a64, 305 | "darken-3": #37474f, 306 | "darken-4": #263238 307 | } 308 | 309 | $grey = { 310 | "lighten-5": #fafafa, 311 | "lighten-4": #f5f5f5, 312 | "lighten-3": #eeeeee, 313 | "lighten-2": #e0e0e0, 314 | "lighten-1": #bdbdbd, 315 | "base": #9e9e9e, 316 | "darken-1": #757575, 317 | "darken-2": #616161, 318 | "darken-3": #424242, 319 | "darken-4": #212121 320 | } 321 | 322 | $shades = { 323 | "black": #000000, 324 | "white": #FFFFFF 325 | } 326 | 327 | $colors = { 328 | "red": $red, 329 | "pink": $pink, 330 | "purple": $purple, 331 | "deep-purple": $deep-purple, 332 | "indigo": $indigo, 333 | "blue": $blue, 334 | "light-blue": $light-blue, 335 | "cyan": $cyan, 336 | "teal": $teal, 337 | "green": $green, 338 | "light-green": $light-green, 339 | "lime": $lime, 340 | "yellow": $yellow, 341 | "amber": $amber, 342 | "orange": $orange, 343 | "deep-orange": $deep-orange, 344 | "brown": $brown, 345 | "blue-grey": $blue-grey, 346 | "grey": $grey, 347 | "shades": $shades 348 | } 349 | 350 | 351 | make-color(colorName, colorType, colorValue) 352 | if colorType is 'base' 353 | .bg-{colorName} 354 | background-color: colorValue !important 355 | 356 | .text-{colorName} 357 | color: colorValue !important 358 | else 359 | .bg-{colorName}.{colorType} 360 | background-color: colorValue !important 361 | 362 | .text-{colorName}.{colorType} 363 | color: colorValue !important 364 | 365 | 366 | // Color Classes 367 | for primaryColor, colorName in $colors 368 | for colorType, colorValue in colorName 369 | make-color(primaryColor, colorType, colorValue) 370 | 371 | 372 | for shade, shadeValue in $shades 373 | .bg-{shade} 374 | background-color: shadeValue 375 | 376 | .text-{shade} 377 | color: shadeValue 378 | 379 | 380 | // @function color($color, $type) { 381 | // @if map-has-key($colors, $color) { 382 | // $curr_color: map-get($colors, $color); 383 | // @if map-has-key($curr_color, $type) { 384 | // @return map-get($curr_color, $type); 385 | // } 386 | // } 387 | // @warn "Unknown `#{name}` in $colors."; 388 | // @return null; 389 | // } 390 | -------------------------------------------------------------------------------- /styles/core/_mixins.styl: -------------------------------------------------------------------------------- 1 | min-max-width(value) 2 | width : value 3 | min-width : value 4 | max-width : value 5 | 6 | 7 | min-max-height(value) 8 | 9 | height : value 10 | min-height : value 11 | max-height : value 12 | 13 | 14 | 15 | 16 | box-sizing(value) 17 | -webkit-box-sizing: value 18 | -moz-box-sizing: value 19 | box-sizing: value 20 | 21 | 22 | 23 | flex-container() 24 | box-sizing(border-box) 25 | display: -webkit-box; // iOS 6-, Safari 3.1-6 26 | display: -moz-box // Firefox 19- 27 | display: -ms-flexbox // IE 10 28 | display: -webkit-flex // Chrome 29 | display: flex // Opera 12.1-, Firefox 20+ 30 | 31 | 32 | 33 | align(value) 34 | align-items : value 35 | 36 | justify(value) 37 | justify-content : value 38 | 39 | overflow-scroll() 40 | -webkit-overflow-scrolling: touch 41 | overflow: scroll 42 | scroll-vertical() 43 | -webkit-overflow-scrolling: touch 44 | overflow-y: scroll 45 | 46 | scroll-horizontal() 47 | -webkit-overflow-scrolling: touch 48 | overflow-x: scroll 49 | -------------------------------------------------------------------------------- /styles/core/_util.styl: -------------------------------------------------------------------------------- 1 | .no-select 2 | -webkit-touch-callout: none 3 | -webkit-user-select: none 4 | -khtml-user-select: none 5 | -moz-user-select: none 6 | -ms-user-select: none 7 | user-select: none 8 | 9 | 10 | /*** Colors ***/ 11 | /*** Badges ***/ 12 | /*** Buttons ***/ 13 | /*** Cards ***/ 14 | /*** Collapsible ***/ 15 | /*** Dropdown ***/ 16 | /*** Forms ***/ 17 | /*** Global ***/ 18 | /*** Navbar ***/ 19 | /*** SideNav ***/ 20 | /*** Tabs ***/ 21 | /*** Tables ***/ 22 | /*** Toasts ***/ 23 | /*** Typography ***/ 24 | /*** Collections ***/ 25 | /* Progress Bar */ 26 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 27 | /** 28 | * 1. Set default font family to sans-serif. 29 | * 2. Prevent iOS text size adjust after orientation change, without disabling 30 | * user zoom. 31 | */ 32 | 33 | html 34 | font-family: sans-serif 35 | /* 1 */ 36 | -ms-text-size-adjust: 100% 37 | /* 2 */ 38 | -webkit-text-size-adjust: 100% 39 | /* 2 */ 40 | 41 | 42 | /** 43 | * Remove default margin. 44 | */ 45 | body 46 | margin: 0 47 | 48 | /* HTML5 display definitions 49 | ========================================================================== */ 50 | /** 51 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 52 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 53 | * and Firefox. 54 | * Correct `block` display not defined for `main` in IE 11. 55 | */ 56 | article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary 57 | display: block 58 | 59 | /** 60 | * 1. Correct `inline-block` display not defined in IE 8/9. 61 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 62 | */ 63 | audio, canvas, progress, video 64 | display: inline-block 65 | /* 1 */ 66 | vertical-align: baseline 67 | /* 2 */ 68 | 69 | /** 70 | * Prevent modern browsers from displaying `audio` without controls. 71 | * Remove excess height in iOS 5 devices. 72 | */ 73 | audio:not([controls]) 74 | display: none 75 | height: 0 76 | 77 | /** 78 | * Address `[hidden]` styling not present in IE 8/9/10. 79 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 80 | */ 81 | [hidden], template 82 | display: none 83 | 84 | /* Links 85 | ========================================================================== */ 86 | /** 87 | * Remove the gray background color from active links in IE 10. 88 | */ 89 | a 90 | background-color: transparent 91 | 92 | /** 93 | * Improve readability when focused and also mouse hovered in all browsers. 94 | */ 95 | a:active, a:hover 96 | outline: 0 97 | 98 | /* Text-level semantics 99 | ========================================================================== */ 100 | /** 101 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 102 | */ 103 | abbr[title] 104 | border-bottom: 1px dotted 105 | 106 | /** 107 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 108 | */ 109 | b, strong 110 | font-weight: bold 111 | 112 | /** 113 | * Address styling not present in Safari and Chrome. 114 | */ 115 | dfn 116 | font-style: italic 117 | 118 | /** 119 | * Address variable `h1` font-size and margin within `section` and `article` 120 | * contexts in Firefox 4+, Safari, and Chrome. 121 | */ 122 | h1 123 | font-size: 2em 124 | margin: 0.67em 0 125 | 126 | /** 127 | * Address styling not present in IE 8/9. 128 | */ 129 | mark 130 | background: #ff0 131 | color: #000 132 | 133 | /** 134 | * Address inconsistent and variable font size in all browsers. 135 | */ 136 | small 137 | font-size: 80% 138 | 139 | /** 140 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 141 | */ 142 | sub, sup 143 | font-size: 75% 144 | line-height: 0 145 | position: relative 146 | vertical-align: baseline 147 | 148 | sup 149 | top: -0.5em 150 | 151 | sub 152 | bottom: -0.25em 153 | 154 | /* Embedded content 155 | ========================================================================== */ 156 | /** 157 | * Remove border when inside `a` element in IE 8/9/10. 158 | */ 159 | img 160 | border: 0 161 | 162 | /** 163 | * Correct overflow not hidden in IE 9/10/11. 164 | */ 165 | svg:not(:root) 166 | overflow: hidden 167 | 168 | /* Grouping content 169 | ========================================================================== */ 170 | /** 171 | * Address margin not present in IE 8/9 and Safari. 172 | */ 173 | figure 174 | margin: 1em 40px 175 | 176 | /** 177 | * Address differences between Firefox and other browsers. 178 | */ 179 | hr 180 | -moz-box-sizing: content-box 181 | box-sizing: content-box 182 | height: 0 183 | 184 | /** 185 | * Contain overflow in all browsers. 186 | */ 187 | pre 188 | overflow: auto 189 | 190 | /** 191 | * Address odd `em`-unit font size rendering in all browsers. 192 | */ 193 | code, kbd, pre, samp 194 | font-family: monospace, monospace 195 | font-size: 1em 196 | 197 | /* Forms 198 | ========================================================================== */ 199 | 200 | /** 201 | * 1. Correct color not being inherited. 202 | * Known issue: affects color of disabled elements. 203 | * 2. Correct font properties not being inherited. 204 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 205 | */ 206 | button, input, optgroup, select, textarea 207 | color: inherit 208 | /* 1 */ 209 | font: inherit 210 | /* 2 */ 211 | margin: 0 212 | /* 3 */ 213 | 214 | /** 215 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 216 | */ 217 | button 218 | overflow: visible 219 | 220 | /** 221 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 222 | * All other form control elements do not inherit `text-transform` values. 223 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 224 | * Correct `select` style inheritance in Firefox. 225 | */ 226 | button, select 227 | text-transform: none 228 | 229 | /** 230 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 231 | * and `video` controls. 232 | * 2. Correct inability to style clickable `input` types in iOS. 233 | * 3. Improve usability and consistency of cursor style between image-type 234 | * `input` and others. 235 | */ 236 | button, html input[type="button"], input[type="reset"], input[type="submit"] 237 | -webkit-appearance: button 238 | /* 2 */ 239 | cursor: pointer 240 | /* 3 */ 241 | 242 | /** 243 | * Re-set default cursor for disabled elements. 244 | */ 245 | button[disabled], html input[disabled] 246 | cursor: default 247 | 248 | /** 249 | * Remove inner padding and border in Firefox 4+. 250 | */ 251 | button::-moz-focus-inner, input::-moz-focus-inner 252 | border: 0 253 | padding: 0 254 | 255 | /** 256 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 257 | * the UA stylesheet. 258 | */ 259 | input 260 | line-height: normal 261 | 262 | /** 263 | * It's recommended that you don't attempt to style these elements. 264 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 265 | * 266 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 267 | * 2. Remove excess padding in IE 8/9/10. 268 | */ 269 | input[type="checkbox"], input[type="radio"] 270 | box-sizing: border-box 271 | /* 1 */ 272 | padding: 0 273 | /* 2 */ 274 | 275 | /** 276 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 277 | * `font-size` values of the `input`, it causes the cursor style of the 278 | * decrement button to change from `default` to `text`. 279 | */ 280 | input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button 281 | height: auto 282 | 283 | /** 284 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 285 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 286 | * (include `-moz` to future-proof). 287 | */ 288 | input[type="search"] 289 | -webkit-appearance: textfield 290 | /* 1 */ 291 | -moz-box-sizing: content-box 292 | -webkit-box-sizing: content-box 293 | /* 2 */ 294 | box-sizing: content-box 295 | 296 | /** 297 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 298 | * Safari (but not Chrome) clips the cancel button when the search input has 299 | * padding (and `textfield` appearance). 300 | */ 301 | input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration 302 | -webkit-appearance: none 303 | 304 | /** 305 | * Define consistent border, margin, and padding. 306 | */ 307 | fieldset 308 | border: 1px solid #c0c0c0 309 | margin: 0 2px 310 | padding: 0.35em 0.625em 0.75em 311 | 312 | /** 313 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 314 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 315 | */ 316 | legend 317 | border: 0 318 | /* 1 */ 319 | padding: 0 320 | /* 2 */ 321 | 322 | /** 323 | * Remove default vertical scrollbar in IE 8/9/10/11. 324 | */ 325 | textarea 326 | overflow: auto 327 | 328 | /** 329 | * Don't inherit the `font-weight` (applied by a rule above). 330 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 331 | */ 332 | optgroup 333 | font-weight: bold 334 | 335 | /* Tables 336 | ========================================================================== */ 337 | /** 338 | * Remove most spacing between table cells. 339 | */ 340 | table 341 | border-collapse: collapse 342 | border-spacing: 0 343 | 344 | td, th 345 | padding: 0 346 | 347 | html 348 | box-sizing: border-box 349 | 350 | *, *:before, *:after 351 | box-sizing: inherit 352 | 353 | ul 354 | list-style-type: none 355 | 356 | nav a, a 357 | color: #039be5 358 | text-decoration: none 359 | 360 | 361 | .waves-effect 362 | overflow hidden 363 | -------------------------------------------------------------------------------- /styles/core/_var.styl: -------------------------------------------------------------------------------- 1 | 2 | 3 | /*==========================================| SCREEN 4 | */ 5 | $small-screen-up = 601px 6 | $medium-screen-up = 993px 7 | $large-screen-up = 1201px 8 | $small-screen = 600px 9 | $medium-screen = 992px 10 | $large-screen = 1200px 11 | 12 | 13 | 14 | /*==========================================| NAV 15 | */ 16 | $nav-bar-height-xs = 48px 17 | $nav-bar-height-sm = 64px 18 | $nav-bar-height-md = 80px 19 | $nav-bar-height-lg = 120px 20 | $nav-bar-height-xl = 240px 21 | $nav-bar-height = $nav-bar-height-sm 22 | 23 | $nav-aside-width = 250px 24 | $nav-aside-width-mobile = 80% 25 | $nav-aside-fold-width = 64px 26 | $nav-aside-heading-height = 64px 27 | $nav-aside-heading-height-tall = 250px 28 | 29 | $nav-action-width = 250px 30 | $nav-action-width-fold = 64px 31 | $nav-action-height = 64px 32 | -------------------------------------------------------------------------------- /styles/core/index.styl: -------------------------------------------------------------------------------- 1 | @import '_fonts' 2 | @import '_colors' 3 | @import '_var' 4 | @import '_mixins' 5 | @import '_util' 6 | -------------------------------------------------------------------------------- /styles/fonts/material-design-icons/Material-Design-Icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/fonts/material-design-icons/Material-Design-Icons.eot -------------------------------------------------------------------------------- /styles/fonts/material-design-icons/Material-Design-Icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/fonts/material-design-icons/Material-Design-Icons.ttf -------------------------------------------------------------------------------- /styles/fonts/material-design-icons/Material-Design-Icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/fonts/material-design-icons/Material-Design-Icons.woff -------------------------------------------------------------------------------- /styles/fonts/roboto/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/fonts/roboto/Roboto-Bold.ttf -------------------------------------------------------------------------------- /styles/fonts/roboto/Roboto-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/fonts/roboto/Roboto-Light.ttf -------------------------------------------------------------------------------- /styles/fonts/roboto/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/fonts/roboto/Roboto-Medium.ttf -------------------------------------------------------------------------------- /styles/fonts/roboto/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/fonts/roboto/Roboto-Regular.ttf -------------------------------------------------------------------------------- /styles/fonts/roboto/Roboto-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/fonts/roboto/Roboto-Thin.ttf -------------------------------------------------------------------------------- /styles/index.styl: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Roboto"; 3 | src: url(./fonts/roboto/Roboto-Thin.ttf); 4 | font-weight: 200; 5 | } 6 | @font-face { 7 | font-family: "Roboto"; 8 | src: url(./fonts/roboto/Roboto-Light.ttf); 9 | font-weight: 300; 10 | } 11 | 12 | @font-face { 13 | font-family: "Roboto"; 14 | src: url(./fonts/roboto/Roboto-Regular.ttf); 15 | font-weight: 400; 16 | } 17 | 18 | @font-face { 19 | font-family: "Roboto"; 20 | src: url(./fonts/roboto/Roboto-Medium.ttf); 21 | font-weight: 500; 22 | } 23 | 24 | @font-face { 25 | font-family: "Roboto"; 26 | src: url(./fonts/roboto/Roboto-Bold.ttf); 27 | font-weight: 700; 28 | } 29 | @import 'core' 30 | @import 'layout' 31 | @import 'toolbar' 32 | @import 'components' 33 | @import 'services' 34 | -------------------------------------------------------------------------------- /styles/layout/_aside.styl: -------------------------------------------------------------------------------- 1 | 2 | .ui-aside 3 | flex : 1 0 auto 4 | position : relative 5 | flex-direction : column 6 | min-max-height(100%) 7 | flex-container() 8 | 9 | 10 | &.ui-aside-nav 11 | background-color: $shades.white 12 | order: -1 13 | width : 0px 14 | 15 | .aside-container 16 | width: 100% 17 | height: 100% 18 | position relative 19 | 20 | .aside-toggle 21 | height : 64px 22 | width : 64px 23 | display: block 24 | 25 | &.aside-fixed 26 | position: fixed 27 | top: 0 28 | 29 | &.aside-right 30 | right : 0 31 | order : 2 32 | box-shadow: -2px 0 4px rgba(0,0,0, 0.3) 33 | 34 | 35 | &.aside-left 36 | left : 0 37 | order : -1 38 | box-shadow: 2px 0 4px rgba(0,0,0, 0.3) 39 | 40 | &.aside-open 41 | width : $nav-aside-width 42 | -------------------------------------------------------------------------------- /styles/layout/_body.styl: -------------------------------------------------------------------------------- 1 | .ui-body 2 | order : 1 3 | flex : 2 0 auto 4 | flex-direction : row 5 | min-max-width(100%) 6 | flex-container() 7 | 8 | .is-row 9 | flex-direction row !important 10 | 11 | .is-column 12 | flex-direction column !important 13 | -------------------------------------------------------------------------------- /styles/layout/_container.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/layout/_container.styl -------------------------------------------------------------------------------- /styles/layout/_flex.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/layout/_flex.styl -------------------------------------------------------------------------------- /styles/layout/_footer.styl: -------------------------------------------------------------------------------- 1 | .ui-footer 2 | order : 2 3 | flex : 1 4 | flex-direction : row 5 | background-color: $grey.darken-4 6 | flex-container() 7 | min-max-width(100%) 8 | min-max-height(auto) 9 | -------------------------------------------------------------------------------- /styles/layout/_grid.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/layout/_grid.styl -------------------------------------------------------------------------------- /styles/layout/_header.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/layout/_header.styl -------------------------------------------------------------------------------- /styles/layout/_main.styl: -------------------------------------------------------------------------------- 1 | .ui-main 2 | order : 1 3 | flex : 1 0 auto 4 | flex-direction : column 5 | max-width : 100% 6 | flex-container() 7 | -------------------------------------------------------------------------------- /styles/layout/_nav.styl: -------------------------------------------------------------------------------- 1 | .ui-nav 2 | flex : 1 0 auto 3 | order : -1 4 | position : relative 5 | flex-container() 6 | 7 | &.ui-nav-bar 8 | flex : 0 0 $nav-bar-height 9 | box-shadow : 0 2px 4px rgba(0,0,0,0.2) 10 | position : relative 11 | flex-direction : row 12 | background-color: $shades.white 13 | width 100% 14 | min-width 100% 15 | max-width 100% 16 | min-height: $nav-bar-height 17 | max-height: auto 18 | height: auto 19 | 20 | 21 | & > .nav-bar-container 22 | flex : 1 0 auto 23 | position : relative 24 | flex-direction: column 25 | width 100% 26 | min-width 100% 27 | max-width 100% 28 | flex-container() 29 | min-max-height(inherit) 30 | 31 | .nav-bar-header 32 | order : 0 33 | flex : 1 0 auto 34 | position : relative 35 | padding : 0px 8px 36 | align(center) 37 | justify(center) 38 | min-max-width(100%) 39 | min-max-height(inherit) 40 | flex-container() 41 | 42 | .nav-bar-toggle 43 | order : -1 44 | font-size : 2rem 45 | flex : 1 0 auto 46 | outline : none 47 | padding : 0 6px 48 | max-width : 64px 49 | line-height : $nav-bar-height 50 | background : none 51 | border : none 52 | cursor : pointer 53 | &.nav-right 54 | order: 1 55 | 56 | .nav-bar-brand 57 | font-size : 2rem 58 | order : 0 59 | flex : 1 0 auto 60 | position : relative 61 | line-height : $nav-bar-height 62 | &.nav-right 63 | text-align: right 64 | 65 | .nav-bar-content 66 | order : 1 67 | flex : 1 0 auto 68 | flex-direction column 69 | width(inherit) 70 | flex-container() 71 | // min-max-height(0) 72 | 73 | 74 | 75 | .nav-bar-collapse, 76 | .nav-bar-actions 77 | flex: 1 0 auto 78 | position: relative 79 | flex-container() 80 | flex-direction: column 81 | 82 | 83 | .nav-actions 84 | order : 0 85 | flex : 1 0 auto 86 | position : relative 87 | flex-direction: row 88 | flex-container() 89 | 90 | &.hide-mobile 91 | dislpay none 92 | 93 | & > * 94 | passing : 6px 12px 95 | position : relative 96 | text-align : center 97 | line-height : $nav-bar-height 98 | justify(flex-start) 99 | flex-container() 100 | 101 | & > * 102 | padding : 0 12px 103 | flex : 1 0 auto 104 | dislpay : block 105 | position : relative 106 | font-size: 1.3rem 107 | cursor : pointe 108 | transition background-color 200ms, cubic-bezier(0,.74,0,.99), color 200ms, cubic-bezier(0,.74,0,.99) 109 | 110 | &:hover 111 | background-color: $blue.base 112 | color : white 113 | 114 | &.nav-actions-right 115 | order : 2 116 | justify(flex-end) 117 | align(flex-end) 118 | // align-content: flex-end 119 | 120 | 121 | .nav-bar-collapse 122 | top : -2px 123 | position : relative 124 | overflow : hidden 125 | height : 0 126 | width : 100% 127 | background-color: $shades.white 128 | box-shadow 0px 2px 4px rgba(0,0,0,0.3) 129 | // transition max-height 1s cubic-bezier(0,.74,0,.99) 130 | &.open 131 | // animation: nav-bar-drop 132 | // animation-duration: 1s 133 | // animation-direction: both 134 | // animation-fill-mode: both 135 | 136 | height: auto 137 | 138 | .nav-actions 139 | flex-direction column 140 | justify(flex-start) 141 | align-content flex-start 142 | flex-container() 143 | dislpay:none 144 | & > * 145 | width 100% 146 | text-align left 147 | 148 | 149 | &.bar-xs 150 | flex: 0 0 $nav-bar-height 151 | min-max-height($nav-bar-height-xs) 152 | 153 | &.bar-sm 154 | flex: 0 0 $nav-bar-height 155 | min-max-height($nav-bar-height-sm) 156 | 157 | &.bar-md 158 | flex: 0 0 $nav-bar-height 159 | min-max-height($nav-bar-height-md) 160 | 161 | &.bar-lg 162 | flex: 0 0 $nav-bar-height 163 | min-max-height($nav-bar-height-lg) 164 | 165 | &.bar-xl 166 | flex: 0 0 $nav-bar-height 167 | min-max-height($nav-bar-height-xl) 168 | 169 | 170 | .hide-mobile 171 | dislpay:none !important 172 | 173 | @keyframes nav-bar-drop 174 | 0% 175 | height 0 176 | 100% 177 | height 800px 178 | 179 | @media(min-width: 640px) 180 | .ui-nav 181 | 182 | &.ui-nav-bar 183 | 184 | .nav-bar-container 185 | flex-direction row 186 | 187 | 188 | .nav-bar-header 189 | 190 | flex 0 0 $nav-aside-width 191 | align(center) 192 | justify(center) 193 | 194 | &.header-right 195 | justify(flex-end) 196 | 197 | min-max-width($nav-aside-width) 198 | 199 | .nav-bar-toggle 200 | display none 201 | 202 | .nav-bar-brand 203 | &.nav-right 204 | text-align : center 205 | 206 | .nav-bar-content 207 | flex-direction row 208 | min-max-height($nav-bar-height) 209 | 210 | .nav-actions 211 | flex-direction row 212 | flex-container() 213 | &.hide-mobile 214 | flex-container() 215 | & > li 216 | width 0 217 | // align-self flex-end 218 | 219 | .nav-bar-collapse 220 | top 0 221 | position relative 222 | flex-direction row 223 | box-shadow none 224 | min-max-height(100%) 225 | &.open 226 | height : auto 227 | .nav-actions 228 | flex-direction row 229 | justify(center) 230 | 231 | 232 | 233 | 234 | -------------------------------------------------------------------------------- /styles/layout/_section.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/layout/_section.styl -------------------------------------------------------------------------------- /styles/layout/_ui.styl: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar { 2 | height: 0px !important; 3 | width: 0px !important; 4 | display: none !important; 5 | } 6 | * 7 | box-sizing: border-box 8 | 9 | body,html 10 | margin : 0 11 | padding : 0 12 | font-size: 14px 13 | min-max-width(100vw) 14 | min-max-height(100vh) 15 | font-family: "Roboto" 16 | font-weight: 200 17 | overflow: hidden 18 | 19 | body 20 | position: relative 21 | -webkit-overflow-scrolling: touch 22 | overflow-y: scroll 23 | 24 | 25 | ul 26 | margin : 0 27 | padding : 0 28 | list-style : none 29 | 30 | a 31 | color : $blue.base 32 | text-decoration: none 33 | 34 | .ui-aurelia 35 | position : relative 36 | flex-direction : column 37 | background-color: $grey.lighten-4 38 | flex-container() 39 | min-max-height(100%) 40 | min-max-width(100%) 41 | 42 | -------------------------------------------------------------------------------- /styles/layout/_view.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/layout/_view.styl -------------------------------------------------------------------------------- /styles/layout/index.styl: -------------------------------------------------------------------------------- 1 | @import '_ui' 2 | @import '_grid' 3 | @import '_container' 4 | @import '_flex' 5 | @import '_body' 6 | @import '_nav' 7 | @import '_footer' 8 | @import '_aside' 9 | @import '_header' 10 | @import '_main' 11 | @import '_section' 12 | @import '_view' 13 | -------------------------------------------------------------------------------- /styles/services/_markdown.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/services/_markdown.styl -------------------------------------------------------------------------------- /styles/services/_notify.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/services/_notify.styl -------------------------------------------------------------------------------- /styles/services/_splitter.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/services/_splitter.styl -------------------------------------------------------------------------------- /styles/services/index.styl: -------------------------------------------------------------------------------- 1 | @import '_markdown' 2 | @import '_notify' 3 | @import '_splitter' 4 | -------------------------------------------------------------------------------- /styles/styles.css: -------------------------------------------------------------------------------- 1 | .splash { 2 | text-align: center; 3 | margin: 10% 0 0 0; 4 | } 5 | 6 | .splash .message { 7 | font-size: 5em; 8 | line-height: 1.5em; 9 | -webkit-text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px; 10 | text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px; 11 | text-transform: uppercase; 12 | } 13 | 14 | .splash .fa-spinner { 15 | text-align: center; 16 | display: inline-block; 17 | font-size: 5em; 18 | margin-top: 50px; 19 | } 20 | 21 | .page-host { 22 | position: absolute; 23 | left: 0; 24 | right: 0; 25 | top: 50px; 26 | bottom: 0; 27 | overflow-x: hidden; 28 | overflow-y: auto; 29 | } 30 | 31 | section { 32 | margin: 0 20px; 33 | } 34 | 35 | .navbar-nav li.loader { 36 | margin: 12px 24px 0 6px; 37 | } 38 | 39 | .pictureDetail { 40 | max-width: 425px; 41 | } 42 | -------------------------------------------------------------------------------- /styles/toolbar/_bottom.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/toolbar/_bottom.styl -------------------------------------------------------------------------------- /styles/toolbar/_left.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/toolbar/_left.styl -------------------------------------------------------------------------------- /styles/toolbar/_right.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/toolbar/_right.styl -------------------------------------------------------------------------------- /styles/toolbar/_top.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelcoxokc/ui-aurelia/69ed033a1f61bd21bb320e975f4b47f4600b74b1/styles/toolbar/_top.styl -------------------------------------------------------------------------------- /styles/toolbar/index.styl: -------------------------------------------------------------------------------- 1 | @import '_top' 2 | @import '_right' 3 | @import '_bottom' 4 | @import '_left' 5 | -------------------------------------------------------------------------------- /test/e2e/dist/demo.spec.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var PageObject_Welcome = require("./welcome.po.js").PageObject_Welcome; 4 | var PageObject_Skeleton = require("./skeleton.po.js").PageObject_Skeleton; 5 | 6 | 7 | describe("aurelia skeleton app", function () { 8 | var po_welcome, po_skeleton; 9 | 10 | beforeEach(function () { 11 | po_skeleton = new PageObject_Skeleton(); 12 | po_welcome = new PageObject_Welcome(); 13 | 14 | browser.get("http://localhost:9000"); 15 | 16 | browser.executeAsyncScript("var cb = arguments[arguments.length - 1];" + "document.addEventListener(\"aurelia-composed\", function (e) {" + " cb(\"Aurelia App composed\")" + "}, false);").then(function (result) { 17 | console.log(result); 18 | }); 19 | }); 20 | 21 | it("should load the page and display the initial page title", function () { 22 | expect(po_skeleton.getCurrentPageTitle()).toBe("Welcome | Aurelia"); 23 | }); 24 | 25 | it("should display greeting", function () { 26 | expect(po_welcome.getGreeting()).toBe("Welcome to the Aurelia Navigation App!"); 27 | }); 28 | 29 | it("should automatically write down the fullname", function () { 30 | po_welcome.setFirstname("Rob"); 31 | po_welcome.setLastname("Eisenberg"); 32 | 33 | // For now there is a timing issue with the binding. 34 | // Until resolved we will use a short sleep to overcome the issue. 35 | browser.sleep(200); 36 | expect(po_welcome.getFullname()).toBe("ROB EISENBERG"); 37 | }); 38 | 39 | it("should show alert message when clicking submit button", function () { 40 | expect(po_welcome.openAlertDialog()).toBe(true); 41 | }); 42 | 43 | it("should navigate to flickr page", function () { 44 | po_skeleton.navigateTo("#/flickr"); 45 | expect(po_skeleton.getCurrentPageTitle()).toBe("Flickr | Aurelia"); 46 | }); 47 | }); -------------------------------------------------------------------------------- /test/e2e/dist/skeleton.po.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); }; 4 | 5 | var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; 6 | 7 | var PageObject_Skeleton = exports.PageObject_Skeleton = (function () { 8 | function PageObject_Skeleton() { 9 | _classCallCheck(this, PageObject_Skeleton); 10 | } 11 | 12 | _prototypeProperties(PageObject_Skeleton, null, { 13 | getCurrentPageTitle: { 14 | value: function getCurrentPageTitle() { 15 | return browser.getTitle(); 16 | }, 17 | writable: true, 18 | configurable: true 19 | }, 20 | navigateTo: { 21 | value: function navigateTo(href) { 22 | var deferred = protractor.promise.defer(); 23 | element(by.css("a[href=\"" + href + "\"]")).click().then(function () { 24 | browser.sleep(2000); 25 | deferred.fulfill(true); 26 | }); 27 | 28 | return deferred.promise; 29 | }, 30 | writable: true, 31 | configurable: true 32 | } 33 | }); 34 | 35 | return PageObject_Skeleton; 36 | })(); 37 | exports.__esModule = true; -------------------------------------------------------------------------------- /test/e2e/dist/welcome.po.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); }; 4 | 5 | var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; 6 | 7 | var PageObject_Welcome = exports.PageObject_Welcome = (function () { 8 | function PageObject_Welcome() { 9 | _classCallCheck(this, PageObject_Welcome); 10 | } 11 | 12 | _prototypeProperties(PageObject_Welcome, null, { 13 | getGreeting: { 14 | value: function getGreeting() { 15 | return element(by.tagName("h2")).getText(); 16 | }, 17 | writable: true, 18 | configurable: true 19 | }, 20 | setFirstname: { 21 | value: function setFirstname(value) { 22 | return element(by.valueBind("firstName")).clear().sendKeys(value); 23 | }, 24 | writable: true, 25 | configurable: true 26 | }, 27 | setLastname: { 28 | value: function setLastname(value) { 29 | return element(by.valueBind("lastName")).clear().sendKeys(value); 30 | }, 31 | writable: true, 32 | configurable: true 33 | }, 34 | getFullname: { 35 | value: function getFullname() { 36 | return element(by.css(".help-block")).getText(); 37 | }, 38 | writable: true, 39 | configurable: true 40 | }, 41 | pressSubmitButton: { 42 | value: function pressSubmitButton() { 43 | return element(by.css("button[type=\"submit\"]")).click(); 44 | }, 45 | writable: true, 46 | configurable: true 47 | }, 48 | openAlertDialog: { 49 | value: function openAlertDialog() { 50 | var _this = this; 51 | return browser.wait(function () { 52 | _this.pressSubmitButton(); 53 | 54 | return browser.switchTo().alert().then( 55 | // use alert.accept instead of alert.dismiss which results in a browser crash 56 | function (alert) { 57 | alert.accept();return true; 58 | }, function () { 59 | return false; 60 | }); 61 | }); 62 | }, 63 | writable: true, 64 | configurable: true 65 | } 66 | }); 67 | 68 | return PageObject_Welcome; 69 | })(); 70 | exports.__esModule = true; -------------------------------------------------------------------------------- /test/e2e/src/demo.spec.js: -------------------------------------------------------------------------------- 1 | import {PageObject_Welcome} from './welcome.po.js'; 2 | import {PageObject_Skeleton} from './skeleton.po.js'; 3 | 4 | describe('aurelia skeleton app', function() { 5 | var po_welcome, 6 | po_skeleton; 7 | 8 | beforeEach( () => { 9 | po_skeleton = new PageObject_Skeleton(); 10 | po_welcome = new PageObject_Welcome(); 11 | 12 | browser.get('http://localhost:9000'); 13 | 14 | browser.executeAsyncScript( 15 | 'var cb = arguments[arguments.length - 1];' + 16 | 'document.addEventListener("aurelia-composed", function (e) {' + 17 | ' cb("Aurelia App composed")' + 18 | '}, false);' 19 | ).then(function(result){ 20 | console.log(result); 21 | }); 22 | }); 23 | 24 | it('should load the page and display the initial page title', () => { 25 | expect(po_skeleton.getCurrentPageTitle()).toBe('Welcome | Aurelia'); 26 | }); 27 | 28 | it('should display greeting', () => { 29 | expect(po_welcome.getGreeting()).toBe('Welcome to the Aurelia Navigation App!'); 30 | }); 31 | 32 | it('should automatically write down the fullname', () => { 33 | po_welcome.setFirstname('Rob'); 34 | po_welcome.setLastname('Eisenberg'); 35 | 36 | // For now there is a timing issue with the binding. 37 | // Until resolved we will use a short sleep to overcome the issue. 38 | browser.sleep(200); 39 | expect(po_welcome.getFullname()).toBe('ROB EISENBERG'); 40 | }); 41 | 42 | it('should show alert message when clicking submit button', () => { 43 | expect(po_welcome.openAlertDialog()).toBe(true); 44 | }); 45 | 46 | it('should navigate to flickr page', () => { 47 | po_skeleton.navigateTo('#/flickr'); 48 | expect(po_skeleton.getCurrentPageTitle()).toBe('Flickr | Aurelia'); 49 | }); 50 | }); 51 | -------------------------------------------------------------------------------- /test/e2e/src/skeleton.po.js: -------------------------------------------------------------------------------- 1 | export class PageObject_Skeleton { 2 | 3 | constructor() { 4 | 5 | } 6 | 7 | getCurrentPageTitle() { 8 | return browser.getTitle(); 9 | } 10 | 11 | navigateTo(href) { 12 | var deferred = protractor.promise.defer(); 13 | element(by.css('a[href="' + href + '"]')).click().then( () => { 14 | browser.sleep(2000); 15 | deferred.fulfill(true); 16 | }); 17 | 18 | return deferred.promise; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /test/e2e/src/welcome.po.js: -------------------------------------------------------------------------------- 1 | export class PageObject_Welcome { 2 | 3 | constructor() { 4 | 5 | } 6 | 7 | getGreeting() { 8 | return element(by.tagName('h2')).getText(); 9 | } 10 | 11 | setFirstname(value) { 12 | return element(by.valueBind('firstName')).clear().sendKeys(value); 13 | } 14 | 15 | setLastname(value) { 16 | return element(by.valueBind('lastName')).clear().sendKeys(value); 17 | } 18 | 19 | getFullname() { 20 | return element(by.css('.help-block')).getText(); 21 | } 22 | 23 | pressSubmitButton() { 24 | return element(by.css('button[type="submit"]')).click(); 25 | } 26 | 27 | openAlertDialog() { 28 | return browser.wait(() => { 29 | this.pressSubmitButton(); 30 | 31 | return browser.switchTo().alert().then( 32 | // use alert.accept instead of alert.dismiss which results in a browser crash 33 | function(alert) { alert.accept(); return true; }, 34 | function() { return false; } 35 | ); 36 | }); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /test/unit/app.spec.js: -------------------------------------------------------------------------------- 1 | import {App} from '../../src/app'; 2 | 3 | class RouterStub { 4 | configure(handler) { 5 | handler(this); 6 | } 7 | map(routes) { 8 | this.routes = routes; 9 | } 10 | } 11 | 12 | describe('the App module', () => { 13 | var sut; 14 | beforeEach(() => { sut = new App(new RouterStub()); }); 15 | 16 | it('contains a router property', () => { 17 | expect(sut.router).toBeDefined(); 18 | }); 19 | 20 | it('configures the router title', () => { 21 | expect(sut.router.title).toEqual('Aurelia'); 22 | }); 23 | 24 | it('should have a welcome route', () => { 25 | expect(sut.router.routes).toContain({ route: ['','welcome'], moduleId: 'welcome', nav: true, title:'Welcome' }); 26 | }); 27 | 28 | it('should have a flickr route', () => { 29 | expect(sut.router.routes).toContain({ route: 'flickr', moduleId: 'flickr', nav: true }); 30 | }); 31 | 32 | it('should have a child router route', () => { 33 | expect(sut.router.routes).toContain({ route: 'child-router', moduleId: 'child-router', nav: true, title:'Child Router' }); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /test/unit/child-router.spec.js: -------------------------------------------------------------------------------- 1 | import {Welcome} from '../../src/child-router'; 2 | 3 | class RouterStub { 4 | configure(handler) { 5 | handler(this); 6 | } 7 | map(routes) { 8 | this.routes = routes; 9 | } 10 | } 11 | 12 | describe('the Child Router module', () => { 13 | var sut; 14 | beforeEach(() => { sut = new Welcome(new RouterStub()); }); 15 | 16 | it('contains a router property', () => { 17 | expect(sut.router).toBeDefined(); 18 | }); 19 | 20 | it('configures the heading', () => { 21 | expect(sut.heading).toEqual('Child Router'); 22 | }); 23 | 24 | it('should have a welcome route', () => { 25 | expect(sut.router.routes).toContain({ route: ['','welcome'], moduleId: 'welcome', nav: true, title:'Welcome' }); 26 | }); 27 | 28 | it('should have a flickr route', () => { 29 | expect(sut.router.routes).toContain({ route: 'flickr', moduleId: 'flickr', nav: true }); 30 | }); 31 | 32 | it('should have a child router route', () => { 33 | expect(sut.router.routes).toContain({ route: 'child-router', moduleId: 'child-router', nav: true, title:'Child Router' }); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /test/unit/flickr.spec.js: -------------------------------------------------------------------------------- 1 | import {Flickr} from '../../src/flickr'; 2 | 3 | class HttpStub { 4 | jsonp(url) { 5 | var response = this.itemStub; 6 | this.url = url; 7 | return new Promise((resolve) => { 8 | resolve({ content: { items: response } }); 9 | }) 10 | } 11 | } 12 | 13 | describe('the Flickr module', () => { 14 | 15 | it('sets jsonp response to images', (done) => { 16 | var http = new HttpStub(), 17 | sut = new Flickr(http), 18 | itemStubs = [1], 19 | itemFake = [2]; 20 | 21 | http.itemStub = itemStubs; 22 | sut.activate().then(() => { 23 | expect(sut.images).toBe(itemStubs); 24 | expect(sut.images).not.toBe(itemFake); 25 | done(); 26 | }); 27 | }); 28 | 29 | it('calls confirm on canDeactivate', () => { 30 | var sut = new Flickr(), 31 | global = jasmine.getGlobal(); 32 | spyOn(global, "confirm"); 33 | sut.canDeactivate(); 34 | expect(global.confirm).toHaveBeenCalled(); 35 | }); 36 | }); 37 | --------------------------------------------------------------------------------