Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Emberize cli islands #3

Merged
merged 21 commits into from
Jul 2, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions _ember/.bowerrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"directory": "bower_components",
"analytics": false
}
34 changes: 34 additions & 0 deletions _ember/.editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org

root = true


[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 2

[*.js]
indent_style = space
indent_size = 2

[*.hbs]
insert_final_newline = false
indent_style = space
indent_size = 2

[*.css]
indent_style = space
indent_size = 2

[*.html]
indent_style = space
indent_size = 2

[*.{diff,md}]
trim_trailing_whitespace = false
9 changes: 9 additions & 0 deletions _ember/.ember-cli
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
/**
Ember CLI sends analytics information by default. The data is completely
anonymous, but there are times when you might want to disable this behavior.

Setting `disableAnalytics` to true will prevent any data from being sent.
*/
"disableAnalytics": false
}
17 changes: 17 additions & 0 deletions _ember/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp

# dependencies
/node_modules
/bower_components

# misc
/.sass-cache
/connect.lock
/coverage/*
/libpeerconnection.log
npm-debug.log
testem.log
33 changes: 33 additions & 0 deletions _ember/.jshintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"predef": [
"server",
"document",
"window",
"-Promise"
],
"browser": true,
"boss": true,
"curly": true,
"debug": false,
"devel": true,
"eqeqeq": true,
"evil": true,
"forin": false,
"immed": false,
"laxbreak": false,
"newcap": true,
"noarg": true,
"noempty": false,
"nonew": false,
"nomen": false,
"onevar": false,
"plusplus": false,
"regexp": false,
"undef": true,
"sub": true,
"strict": false,
"white": false,
"eqnull": true,
"esnext": true,
"unused": true
}
23 changes: 23 additions & 0 deletions _ember/.travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
language: node_js
node_js:
- "0.12"

sudo: false

cache:
directories:
- node_modules

before_install:
- export PATH=/usr/local/phantomjs-2.0.0/bin:$PATH
- "npm config set spin false"
- "npm install -g npm@^2"

install:
- npm install -g bower
- npm install
- bower install

script:
- npm test
3 changes: 3 additions & 0 deletions _ember/.watchmanconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"ignore_dirs": ["tmp"]
}
32 changes: 32 additions & 0 deletions _ember/Brocfile.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/* global require, module */

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp({
storeConfigInMeta: false,
fingerprint: {
enabled: false
}
});


// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.

// see https://github.com/ember-cli/ember-cli/issues/3497
// consider ember-test-helpers
if (EmberApp.env() !== 'production') {
app.import('bower_components/ember/ember-template-compiler.js');
}

module.exports = app.toTree();
76 changes: 76 additions & 0 deletions _ember/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
# Viewtastic

## An ember-cli app for rendering components outside of Ember

1. mkdir _ember; cd _ember
1. ember init --name=viewtastic
2. ember install ember-islands
3. ember g component doc-printer // name must have a hyphen
4. Config Brocfile as needed/desired
5. edit app/index.html to add a data component, e.g. `<div data-component="doc-printer"></div>`
6. ember build -e production
7 cp dist/assets/*.js ../js // or wherever
8. edit the page(s) you want the component on to load the js and include the data-component

```html
<script src="js/vendor.js"></script>
<script src="js/viewtastic.js"></script>
<div data-component="doc-printer"></div>
```

8. profit

Gotchas, things to make it work
- Brocfile.js
- meta

Boiler-plate follows

## Prerequisites

You will need the following things properly installed on your computer.

* [Git](http://git-scm.com/)
* [Node.js](http://nodejs.org/) (with NPM)
* [Bower](http://bower.io/)
* [Ember CLI](http://www.ember-cli.com/)
* [PhantomJS](http://phantomjs.org/)

## Installation

* `git clone <repository-url>` this repository
* change into the new directory
* `npm install`
* `bower install`

## Running / Development

* `ember server`
* Visit your app at [http://localhost:4200](http://localhost:4200).

### Code Generators

Make use of the many generators for code, try `ember help generate` for more details

### Running Tests

* `ember test`
* `ember test --server`

### Building

* `ember build` (development)
* `ember build --environment production` (production)

### Deploying

Specify what it takes to deploy your app.

## Further Reading / Useful Links

* [ember.js](http://emberjs.com/)
* [ember-cli](http://www.ember-cli.com/)
* Development Browser Extensions
* [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
* [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)

18 changes: 18 additions & 0 deletions _ember/app/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
import config from './config/environment';

var App;

Ember.MODEL_FACTORY_INJECTIONS = true;

App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver: Resolver
});

loadInitializers(App, config.modulePrefix);

export default App;
Empty file added _ember/app/components/.gitkeep
Empty file.
19 changes: 19 additions & 0 deletions _ember/app/components/doc-printer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import Ember from 'ember';
import googleSpreadsheet from 'viewtastic/utils/google-spreadsheet';

export default Ember.Component.extend({
tagName: '',
config: {},
rows: null,
// hook into component initialization
init() {
this._super(...arguments);
var component = this;
var doc = googleSpreadsheet.create(this.config);
if (doc.isValid()) {
doc.getRows( function(rows) {
component.set('rows', rows);
});
}
}
});
3 changes: 3 additions & 0 deletions _ember/app/components/print-pair-data.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import DocPrinterComponent from 'viewtastic/components/doc-printer';

export default DocPrinterComponent.extend({});
Empty file added _ember/app/controllers/.gitkeep
Empty file.
Empty file added _ember/app/helpers/.gitkeep
Empty file.
29 changes: 29 additions & 0 deletions _ember/app/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Viewtastic</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

{{content-for 'head'}}

<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/viewtastic.css">

{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}

<script src="assets/vendor.js"></script>
<script src="assets/viewtastic.js"></script>

{{content-for 'body-footer'}}
<div data-component='doc-printer' data-attrs='{"config": { "key": "0AqHUOZcVEj_XdE5SMzBKSWhINjVtTlh2b0JjUFp4OEE/od6", "fields": ["appointments","link","pair","description"] } }'>
oh boy, inner content
</div>
<div data-component='print-pair-data' data-attrs='{"config": { "key": "0AqHUOZcVEj_XdE5SMzBKSWhINjVtTlh2b0JjUFp4OEE/od6", "fields": ["appointments","link","pair","description"] } }'></div>
</body>
</html>
14 changes: 14 additions & 0 deletions _ember/app/mirage/config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
export default function() {

// ignore request
// this.get("/assets/pair.json", function(db) {
// return db.pairs[0];
// });
}

/*
You can optionally export a config that is only loaded during tests
export function testConfig() {

}
*/
Empty file added _ember/app/models/.gitkeep
Empty file.
Empty file added _ember/app/styles/app.css
Empty file.
Empty file.
12 changes: 12 additions & 0 deletions _ember/app/templates/components/doc-printer.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<ul class="doc-printer">
{{innerContent}}
{{#each rows key="@index" as |row|}}
<li class="doc-item">
{{#if hasBlock}}
{{yield row}}
{{else}}
Without a block, I don't know what to do with {{row}}
{{/if}}
</li>
{{/each}}
</ul>
7 changes: 7 additions & 0 deletions _ember/app/templates/components/print-pair-data.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{{#doc-printer rows=rows as |row|}}
<a href="{{row.link}}" class="doc-link">
<span class="doc-data">
{{row.appointments}} with {{row.pair}} on {{row.description}}
</span>
</a>
{{/doc-printer}}
Loading