When possible we try to group changes.
Add predefs to .jshintrc
{
"PS": true,
"$": true,
"hopscotch": true
}
Move core JS files to JS root:
mv app/js/runtime/application.js app/js/app.js
mv app/js/runtime/route.js app/js/route.js
mv app/js/runtime/router.js app/js/router.js
mv app/js/runtime/view.js app/js/view.js
Specify correct location of files in Brocfile.js:
npm install broccoli-file-remover --save-dev
npm install broccoli-merge-trees --save-dev
// in Brocfile.js
var remove = require('broccoli-file-remover');
var mergeTrees = require('broccoli-merge-trees');
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
// Redefine this method to improve performance
EmberApp.prototype.removeStylesAndTemplates = function(tree) {
return remove(tree, {
paths: ['less', 'styles', 'hbs']
});
};
var app = new EmberApp({
name: 'ps/console',
trees: {
app: mergeTrees(['app', 'app/js'], {
overwrite: true
}),
styles: 'app/less',
templates: 'app/hbs'
},
outputPaths: {
app: {
css: '/assets/app.css',
js: '/assets/app.js'
}
}
});
Rename Application controller file:
mv app/js/controller/application.js app/js/controller/app.js
Replace index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/img/icons/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="/img/icons/apple-touch-icon-precomposed.png">
<title>Pivotshare Publisher Console</title>
{{BASE_TAG}}
{{CONFIG_META}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/app.css">
</head>
<body>
<!--[if lt IE 8]>
<p class="browsehappy">
You are using an <strong>outdated</strong> browser. Please
<a href="http://browsehappy.com/">upgrade your browser</a>
to improve your experience.
</p>
<![endif]-->
<!-- Flex-related JS -->
<!-- These scripts MUST be loaded first! See CONSOLE-349 -->
<script src="//console.pivotshare.com/scripts/externalUploadUtils.js"></script>
<script src="//console.pivotshare.com/scripts/md5.js"></script>
<script src="//console.pivotshare.com/scripts/externalUpload.js"></script>
<!-- Ember -->
<script src="assets/vendor.js"></script>
<script src="assets/app.js"></script>
<!-- filepicker.io -->
<script src="//api.filepicker.io/v1/filepicker.js"></script>
<script src="//api.filepicker.io/v1/filepicker_debug.js"></script>
</body>
</html>
config/environment.js
/* jshint node: true */
module.exports = function(environment) {
var ENV = {
modulePrefix: 'ps/console',
environment: environment,
baseURL: '/',
locationType: 'auto',
EmberENV: {
FEATURES: {
// Here you can enable experimental features on an ember canary build
// e.g. 'with-controller': true
}
},
APP: {
// Here you can pass flags/options to your application instance
// when it is created
ENCODE_TRANSITION_ERRORS: true
}
};
if (environment === 'development') {
ENV.APP.LOG_RESOLVER = true;
ENV.APP.LOG_ACTIVE_GENERATION = true;
ENV.APP.LOG_TRANSITIONS = true;
ENV.APP.LOG_TRANSITIONS_INTERNAL = false;
ENV.APP.LOG_VIEW_LOOKUPS = true;
ENV.APP.ENCODE_TRANSITION_ERRORS = false;
}
if (environment === 'test') {
// Testem prefers this...
ENV.baseURL = '/';
ENV.locationType = 'auto';
// keep test console output quieter
ENV.APP.LOG_ACTIVE_GENERATION = false;
ENV.APP.LOG_VIEW_LOOKUPS = false;
ENV.APP.rootElement = '#ember-testing';
}
if (environment === 'production') {
}
return ENV;
};
Merge your third-party bower dependencies:
{
"bootstrap": "3.1.1",
"bootstrap-tokenfield": "^0.12.0",
"d3": "3.4.3",
"datatables": "1.10.0",
"datatables-plugins": "2ba2b09b5216563492d506a0d59998634fdc6f51",
"ember-animated-outlet": "1.0.0-beta.2",
"ember-computed-injection": "git://github.com/pivotshare/ember-computed-injection.git#c10d28fbb31896857f2b8d42c327071ee0d96c68",
"ember-computed-content-controller": "~0.2.0",
"ember-simple-auth": "git://github.com/simplabs/ember-simple-auth-component#0.5.1",
"ember-string-interpolate": "git://github.com/jayphelps/ember-string-interpolate.git#904847823e0655d9745f3d9668902dea886cae3a",
"hopscotch": "git://github.com/pivotshare/hopscotch.git#v0.2.2-yeah",
"jcrop": "~0.9.12",
"jquery.transit": "0.9.9",
"lesshat": "~2.0.15",
"momentjs": "~2.5.1",
"nvd3": "~1.1.15",
"pace": "0.5.1"
}
Add all your third-party JS and ember plugins via the Brocfile.js:
app.import('vendor/date-format/date-format.js');
// JavaScript library for manipulating documents based on data.
// https://github.com/mbostock/d3
app.import('bower_components/d3/d3.js');
// A reusable chart library for d3.js.
// https://github.com/novus/nvd3
app.import('bower_components/nvd3/nv.d3.js');
// Parse, validate, manipulate, and display dates in javascript.
// https://github.com/moment/moment/
app.import('bower_components/momentjs/moment.js');
// jQuery CSS transistions.
// https://github.com/rstacruz/jquery.transit
app.import('bower_components/jquery.transit/jquery.transit.js');
// Image Cropping Plugin for jQuery.
// https://github.com/tapmodo/Jcrop
app.import('bower_components/jcrop/js/jquery.Jcrop.js');
// jQuery tag/token input plugin for Twitter's Bootstrap.
// https://github.com/sliptree/bootstrap-tokenfield
app.import('bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.js');
// Table plug-in for jQuery.
// https://github.com/DataTables/DataTables
app.import('bower_components/datatables/media/js/jquery.dataTables.js');
app.import('bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.js');
// Framework to make it easy for developers to add product tours to their pages.
// http://github.com/pivotshare/hopscotch
app.import('bower_components/hopscotch/dist/js/hopscotch.js');
// Computed property for injecting any dependency into an Ember class definition.
// https://github.com/jayphelps/ember-computed-injection
app.import('bower_components/ember-computed-injection/ember-computed-injection.js');
// String interpolation as a computed property.
// https://github.com/jayphelps/ember-string-interpolate
app.import('bower_components/ember-string-interpolate/ember-string-interpolate.js');
// Computed property for injecting a unique instance of a content controller
// https://github.com/jayphelps/ember-computed-content-controller
app.import('bower_components/ember-computed-content-controller/ember-computed-content-controller.js');
// Animated route transitions.
// https://github.com/billysbilling/ember-animated-outlet
app.import('bower_components/ember-animated-outlet/dist/ember-animated-outlet.js');
See "Upgrading ember-simple-auth" and "fulcrum.core"
Install LESS preprocessor: npm install broccoli-less-single --save-dev
Prefix bower_components/ to all @import
paths:
// app/less/app.less
@import (less) "bower_components/nvd3/nv.d3.css";
@import (less) "bower_components/ember-animated-outlet/dist/ember-animated-outlet.css";
@import (less) "bower_components/jcrop/css/jquery.Jcrop.css";
@import (less) "bower_components/datatables/media/css/jquery.dataTables.css";
@import (less) "bower_components/bootstrap-tokenfield/dist/css/bootstrap-tokenfield.css";
//@import (less) "hopscotch/dist/css/hopscotch.css";
@import "bower_components/lesshat/build/lesshat";
Create a proxy server for the API:
ember generate proxy api https://console.pivotshare.com
Set correct HOST header:
// See https://github.com/nodejitsu/node-http-proxy
var proxyPath = '/api';
// ...
proxy.on('proxyReq', function(proxyReq, req, res, options) {
proxyReq.setHeader('Host', 'console.pivotshare.com');
});
Correct View import in all views since view.js is no longer in runtime folder: import View from 'ps/console/view';
# remember to use 'gsed' on mac or else this script will create backups
grep -lr "import View from 'ps/console/runtime/view';" app/js/views/ | xargs sed -i -e "s=ps/console/runtime/view=ps/console/view="
Upgrade ember-simple-auth to v0.5.3 and include appropriate app.import
statements
npm install ember-simple-auth#0.5.3 --save
Correct import
statements:
// app/js/routes/application.js
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application_route_mixin';
// app/js/routes/authorized.js
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated_route_mixin';
Import ember-simple-auth properly. Don't rename imported module.
// app/js/authenticators/oauth2.js
import Authenticator from 'ember-simple-auth-oauth2/authenticators/oauth2';
// app/js/authorizers/oauth2.js
import OAuth2 from 'ember-simple-auth-oauth2/authorizers/oauth2';
// app/js/controllers/sign-in.js
import AuthenticationControllerMixin from 'ember-simple-auth/mixins/authentication_controller_mixin';
// app/js/initializers/authentication.js
import setup from 'ember-simple-auth/setup';
Edit initializers in app/js/initializers/ to export objects. Do not call Ember.Application.initializer
. Remove the now unused import Ember
line.
Include fulcrum.core:
// fulcrum.core
// Is there a better way to do this?
// Or should we make fulcrum-core an addon?
app.import('vendor/fulcrum-core/dist/fulcrum-core-0.0.1.amd.js', {
exports: {
'ps/core': ['default'], // TODO: may be wrong
'ps/core/graphics/color': ['default'],
'ps/core/runtime/array-controller': ['default'],
'ps/core/runtime/application': ['default'],
'ps/core/runtime/collection-view': ['default'],
'ps/core/runtime/controller': ['default'],
'ps/core/runtime/controller-mixin': ['default'],
'ps/core/runtime/component': ['default'],
'ps/core/runtime/link-view': ['default'],
'ps/core/runtime/object': ['default'],
'ps/core/runtime/object-controller': ['default'],
'ps/core/runtime/object-mixin': ['default'],
'ps/core/runtime/route': ['default'],
'ps/core/runtime/text-area': ['default'],
'ps/core/runtime/text-field': ['default'],
'ps/core/runtime/view': ['default'],
'ps/core/runtime/view-mixin': ['default'],
'ps/core/utils/requestFullscreen': ['default']
}
});
Check for use of old interpolated query params: grep -r "queryParams: \['.*:.*\'],$" app/js
# GENERAL: gsed -i s/"'camelCase:snake_case'"/"{ camelCase: 'snake_case' }"/ $(find app -type f -name '*.js') # gsed is GNU sed
gsed -i s/"'startDate:start_date'"/"{ startDate: 'start_date' }"/ $(find app/js/controllers -type f -name '*.js')
gsed -i s/"'endDate:end_date'"/"{ endDate: 'end_date' }"/ $(find app/js/controllers -type f -name '*.js')
gsed -i s/"'featureType:feature_type'"/"{ featureType: 'feature_type' }"/ $(find app/js/controllers -type f -name '*.js')
Also change start_date
and end_date
to camelCase in:
- app/js/mixins/routes/report.js
- app/hbs/components/ps-time-range-selector.hbs
Import ENV wherever it is used: import ENV from 'ps/console/config/environment';
Double-check where this is happening: grep -lr window.ENV app/js
In app/js/app.js replace instances of App
with Ember.Namespace.NAMESPACES_BY_ID['']
.
Note that the application does not have a name. How can we name it, and/or access it via window
?
Comment out majority of SignInRoute.setupController
in app/js/routes/sign-in.js.
Implement this fix in app/js/serializers/application.js
In app/js/adapters/medium.js
// `|| !get(record, 'channel.id'` fixes bug where "Most Popular Video This Month" API call had undefined channel id
// channel.id was not in record
if (!record || !get(record, 'channel.id') ) {
WARNING: Several Adapter have almost the same exact code, but not this change. Unsure if they are needed there.