' + JSON.stringify(code, null, 2) + '');
+ }.property('model.manifest'),
+ isProcessing: function() {
+ var model = this.get('model');
+ return model.get('isBuilding') || model.get('isSaving');
+ }.property('model.isBuilding', 'model.isSaving'),
steps: Ember.Object.create({
step1: {
name: 'step1',
@@ -15,14 +29,11 @@ export default Ember.Controller.extend({
step3: {
name: 'step3',
isCurrent: false
- },
- step4: {
- name: 'step4',
- isCurrent: false
}
}),
selectedDisplay: null,
selectedOrientation: null,
+ buildReady: false,
valueOrEmptyString: function (value) {
if(value) {
return value;
@@ -48,7 +59,6 @@ export default Ember.Controller.extend({
};
return data;
});
-
return customProps;
}.property('model'),
actions: {
@@ -56,16 +66,19 @@ export default Ember.Controller.extend({
if(currentStep) {
ga('send', 'event', 'item', 'click', 'generator-step-'+currentStep);
this.set('steps.step'+currentStep+'.isCurrent', false);
- if(currentStep === '1') {
- this.set('step1Complete',true);
- this.model.create();
- } else {
- this.model.save();
- }
+ this.model.save();
}
if(nextStep){
this.set('steps.step'+nextStep+'.isCurrent', true);
}
+ },
+ startOver: function(){
+ this.set('startReady', false);
+ return true;
+ },
+ startComplete: function() {
+ this.set('startReady', true);
+ return true;
}
}
});
diff --git a/app/models/generator.js b/app/models/generator.js
index 9c80a74c8..973ec1ac8 100644
--- a/app/models/generator.js
+++ b/app/models/generator.js
@@ -38,9 +38,6 @@ export default Ember.Object.extend({
orientation: {
names: ['any', 'natural', 'landscape', 'portrait', 'portrait-primary', 'portrait-secondary', 'landscape-primary', 'landscape-secondary']
},
- formattedManifest: function () {
- return new Ember.Handlebars.SafeString(""+JSON.stringify(this.get('manifest'), null, ' ')+"");
- }.property('manifest'),
save: function () {
this.set('isSaving', true);
if(!this.manifestId) {
@@ -49,6 +46,24 @@ export default Ember.Object.extend({
this.update();
}
},
+ processResult: function(result){
+ this.set('manifest', result.content);
+ this.set('manifestId', result.id);
+ this.set('manifest.display', 'fullscreen');
+ this.set('manifest.orientation', 'any');
+ if(!this.get('manifest.icons')) {
+ this.set('manifest.icons',[]);
+ }
+ if(result.suggestions) {
+ this.set('suggestions', result.suggestions);
+ }
+ if(result.warnings) {
+ this.set('warnings', result.warnings);
+ }
+ if(result.errors) {
+ this.set('errors', result.errors);
+ }
+ },
create: function(){
var self = this;
ajax({
@@ -58,51 +73,23 @@ export default Ember.Object.extend({
dataType: 'json',
contentType: 'application/json; charset=utf-8'
}).then(function(result) {
- self.set('manifest', result.content);
- self.set('manifestId', result.id);
-
- //Set Defaults
- self.set('manifest.display', 'fullscreen');
- self.set('manifest.orientation', 'any');
-
- if(!self.get('manifest.icons')) {
- self.set('manifest.icons',[]);
- }
-
- if(result.suggestions) {
- self.set('suggestions', result.suggestions);
- }
-
- if(result.warnings) {
- self.set('warnings', result.warnings);
- }
-
- if(result.errors) {
- self.set('errors', result.errors);
- }
-
- self.save();
-
+ self.processResult(result);
self.set('isSaving', false);
-
}).catch(function(){
self.set('isSaving', false);
});
},
update: function(){
- var self = this,
- manifest = self.get('manifest');
-
+ var self = this;
+ var manifest = self.get('manifest');
manifest = _.omit(manifest,function(prop){
- if(_.isString(prop)){
- return _.isEmpty(prop);
- }else if(_.isObject(prop)){
- return _.isUndefined(prop);
- }
-
- return false;
+ if(_.isString(prop)){
+ return _.isEmpty(prop);
+ }else if(_.isObject(prop)){
+ return _.isUndefined(prop);
+ }
+ return false;
});
-
ajax({
url: config.APP.API_URL + '/manifests/' + this.get('manifestId'),
type: 'PUT',
@@ -110,22 +97,8 @@ export default Ember.Object.extend({
dataType: 'json',
contentType: 'application/json; charset=utf-8'
}).then(function(result) {
- self.set('manifest',result.content);
-
- if(result.suggestions){
- self.set('suggestions', result.suggestions);
- }
-
- if(result.warnings){
- self.set('warnings', result.warnings);
- }
-
- if(result.errors) {
- self.set('errors', result.errors);
- }
-
+ self.processResult(result);
self.set('isSaving', false);
-
}).catch(function(){
self.set('isSaving', false);
});
@@ -142,5 +115,28 @@ export default Ember.Object.extend({
}).catch(function(){
self.set('isBuilding', false);
});
+ },
+ generateFormData: function(file) {
+ var formData = new FormData();
+ formData.append('file', file);
+ return formData;
+ },
+ upload: function(file) {
+ var self = this;
+ var data = this.generateFormData(file);
+ this.set('isSaving', true);
+ ajax({
+ url: config.APP.API_URL + '/manifests',
+ type: 'POST',
+ data: data,
+ contentType: false,
+ processData: false,
+ cache: false
+ }).then(function(result) {
+ self.processResult(result);
+ self.set('isSaving', false);
+ }).catch(function(){
+ self.set('isSaving', false);
+ });
}
});
diff --git a/app/routes/generator.js b/app/routes/generator.js
index 900f5d976..3e4ca1365 100644
--- a/app/routes/generator.js
+++ b/app/routes/generator.js
@@ -19,6 +19,15 @@ export default Ember.Route.extend({
Ember.$('footer').removeClass('is-small');
},
actions: {
+ startComplete: function(siteUrl, file) {
+ var model = this.modelFor('generator');
+ if(siteUrl){
+ model.set('siteUrl', siteUrl);
+ model.save();
+ } else if (file) {
+ model.upload(file);
+ }
+ },
updateLogos: function(logos) {
var model = this.modelFor('generator');
model.set('manifest.icons',logos);
@@ -30,28 +39,11 @@ export default Ember.Route.extend({
model.build();
},
downloadArchive: function(archiveLink){
+ var controller = this.controllerFor('generator');
+ controller.set('buildReady', true);
ga('send', 'event', 'item', 'click', 'generator-build-download');
window.location.href = archiveLink;
},
- updateManifest: function (result) {
- var model = this.modelFor('generator');
- var controller = this.controllerFor('generator');
- controller.set('step1Complete', true);
- model.set('manifestId', result.id);
- model.set('manifest', result.content);
- if(result.content.display === undefined) {
- model.set('manifest.display', 'fullscreen');
- }
- if(!result.content.orientation) {
- model.set('manifest.orientation', 'any');
- }
-
- if(!model.get('manifest.icons')) {
- model.set('manifest.icons',[]);
- }
-
- model.save();
- },
updateModelProperty: function(name, value) {
var model = this.modelFor('generator');
model.set('manifest.'+ name, value);
@@ -73,6 +65,9 @@ export default Ember.Route.extend({
updateModel: function(){
var model = this.modelFor('generator');
model.save();
+ },
+ startOver: function(){
+ this.refresh();
}
}
});
diff --git a/app/styles/_base/_b-elements.scss b/app/styles/_base/_b-elements.scss
index a5675c9d0..aff42e180 100644
--- a/app/styles/_base/_b-elements.scss
+++ b/app/styles/_base/_b-elements.scss
@@ -44,6 +44,7 @@ button, .btn {
background:$primary-accent;
border:none;
color:#fff;
+ margin: 0;
padding: .5em 1.125em;
border-radius: 5px;
line-height:1.2em;
@@ -173,4 +174,4 @@ hr {
.hidden {
display: none;
-}
\ No newline at end of file
+}
diff --git a/app/styles/_layout/_l-mq.scss b/app/styles/_layout/_l-mq.scss
index 062eaac9d..7889aa788 100644
--- a/app/styles/_layout/_l-mq.scss
+++ b/app/styles/_layout/_l-mq.scss
@@ -80,12 +80,19 @@
.aboutfp h4 {
line-height: 2rem;
}
+ .more-info {
+ padding-bottom: 0;
+ }
.more-info .copy {
margin-bottom: 1rem;
}
- .more-info button {
+ .more-info .l-box {
margin-bottom: 2rem;
}
+ .more-info button, .more-info .btn {
+ display: inline-block;
+ margin-bottom: 1rem;
+ }
.whoisusingmjs .sitelogo_yummly, .whoisusingmjs .sitelogo_22tracks, .whoisusingmjs .sitelogo_boostmedia, .whoisusingmjs .sitelogo_nickelodeon {
display: block;
width: 35%;
@@ -157,6 +164,17 @@
font-size: .875rem;
line-height: 1.375rem;
}
+ .more-info {
+ padding: 2rem;
+ }
+ .more-info h4 {
+ font-size: 1.25rem;
+ line-height: 1.5rem;
+ }
+ .more-info .copy {
+ font-size: .85rem;
+ line-height: 1.25rem;
+ }
}
/* 850px to 899px */
@@ -198,6 +216,10 @@
font-size: .875rem;
line-height: 1.375rem;
}
+ .more-info h4 {
+ font-size: 1.375rem;
+ line-height: 1.75rem;
+ }
}
/* 900px to 1000px */
@@ -239,6 +261,10 @@
font-size: .875rem;
line-height: 1.375rem;
}
+ .more-info h4 {
+ font-size: 1.5rem;
+ line-height: 1.75rem;
+ }
}
/* 1000px to 1099px */
@@ -259,4 +285,7 @@
font-size: 3.125rem;
line-height:1.2em;
}
+ .more-info h4 {
+ line-height: 1.875rem;
+ }
}
\ No newline at end of file
diff --git a/app/styles/_modules/_m-generator.scss b/app/styles/_modules/_m-generator.scss
index e5a0af4ea..c86c4b8ed 100644
--- a/app/styles/_modules/_m-generator.scss
+++ b/app/styles/_modules/_m-generator.scss
@@ -202,6 +202,10 @@ $form-accent:#999999;
margin-top:1.5rem;
}
+.generator .generator-members {
+ margin-top:1rem;
+}
+
.generator table {
width:66%;
float:right;
@@ -211,6 +215,7 @@ $form-accent:#999999;
.generator th {
font-family:$sans-stack-semibold;
text-align: center;
+ border:none;
}
.generator td {
@@ -263,38 +268,42 @@ $form-accent:#999999;
cursor: not-allowed;
}
-.generator .step1 .url label {
+.generator .generator-start {
+ padding: 0 1rem 1rem 0;
+}
+
+.generator-start .url label {
width:8%;
text-align:left;
}
-.generator .step1 .url input {
+.generator-start .url input {
width:90%;
}
-.generator .step1 .manifest label {
+.generator-start .manifest label {
width:28%;
text-align: left;
}
-.generator .step4 label {
+.generator .step3 label {
width:42%;
}
-.generator .step4 input {
+.generator .step3 input {
width:34%;
float:left;
margin-left:.5rem;
}
-.generator .step4 .fa {
+.generator .step3 .fa {
float:left;
line-height:2.125rem;
margin-left:.4rem;
}
.generator .fa {
- font-size:1.3rem;
+ font-size:1rem;
}
.generator .fa-windows {
@@ -317,14 +326,24 @@ $form-accent:#999999;
color:$primary-accent;
}
+.alert {
+ color:$primary-accent;
+}
+
.generator .usage-link {
font-size:.8rem;
padding:.5rem 0;
display:block;
+ background:$tertiary-accent;
+ width:100%;
+ color:white;
+ text-align: center;
+ cursor:pointer;
+ display:none;
}
-.generator .step:last-child .next-step {
- display:none;
+.generator .usage-link.btn.show {
+ display:block;
}
//Manifest section
@@ -397,16 +416,19 @@ $form-accent:#999999;
color: $primary-accent;
}
-.download-archive .btn {
+.download-archive .btn,
+.btn.highlighted {
cursor: not-allowed;
background-color: $secondary-accent - 90;
}
-.download-archive .btn:hover {
+.download-archive .btn:hover,
+.generator-start .btn:hover {
color: #fff;
}
-.download-archive .btn.isEnabled {
+.download-archive .btn.isEnabled,
+.generator-start .btn {
cursor: pointer;
background-color: $secondary-accent;
}
diff --git a/app/styles/_modules/_m-more-info.scss b/app/styles/_modules/_m-more-info.scss
index ded037896..1724634bd 100644
--- a/app/styles/_modules/_m-more-info.scss
+++ b/app/styles/_modules/_m-more-info.scss
@@ -8,6 +8,10 @@
margin-bottom: 1rem;
}
+.more-info h4 {
+ line-height: 1.875rem;
+}
+
.more-info .copy {
color:#fff;
margin-bottom: 2rem;
diff --git a/app/templates/components/download-archive.hbs b/app/templates/components/download-archive.hbs
index 175fc0237..068582f75 100644
--- a/app/templates/components/download-archive.hbs
+++ b/app/templates/components/download-archive.hbs
@@ -1,6 +1,6 @@
-
+
+
{{yield}}
diff --git a/app/templates/components/formatted-manifest.hbs b/app/templates/components/formatted-manifest.hbs
index 9fb9825fd..367d1bbb7 100644
--- a/app/templates/components/formatted-manifest.hbs
+++ b/app/templates/components/formatted-manifest.hbs
@@ -1 +1 @@
-{{data.formattedManifest}}
\ No newline at end of file
+{{data}}
diff --git a/app/templates/components/generator-start.hbs b/app/templates/components/generator-start.hbs
new file mode 100644
index 000000000..3c88f74d1
--- /dev/null
+++ b/app/templates/components/generator-start.hbs
@@ -0,0 +1,25 @@
+Provide your URL or upload your manifest and we'll help fill in the gaps if there are any.
+ {{#if message}}{{fa-icon "exclamation"}} {{message}}
{{/if}} +{{memberAlert}}
{{memberAlert}}
@@ -16,7 +16,6 @@Here are the values we picked up from your site. Update or add any details below.
+Specify custom members to be added to the manifest.
+We need a bit more info to get your apps ready for the different stores. If you provide us with the details below, we’ll make sure your projects are ready for each of the stores.
+ManifoldJS takes simple meta-data about your site and uses that to generate native "hosted" apps for Android, ChromeOS, FirefoxOS, iOS, and Windows.
-Provide your URL or upload your manifest and we'll help fill in the gaps if there are any.
-Here are the values we picked up from your site. Update or add any details below.
-Specify custom members to be added to the manifest.
-We need a bit more info to get your apps ready for the different stores. If you provide us with the details below, we’ll make sure your projects are ready for each of the stores.
-{{#link-to 'deploy' class="usage-link"}}Now: Learn how to distribute this package across different platforms{{/link-to}}
- {{/download-archive}} -{{#skip-link class="issues-title-errors" anchor="#errors_list"}}Errors ({{model.errorsTotal}}){{/skip-link}}, {{#skip-link class="issues-title-warnings" anchor="#warnings_list"}}Warnings ({{model.warningsTotal}}){{/skip-link}}, {{#skip-link class="issues-title-suggestions" anchor="#suggestions_list"}}Suggestions ({{model.suggestionsTotal}}){{/skip-link}}