Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

Commit

Permalink
Customization modal created and working
Browse files Browse the repository at this point in the history
  • Loading branch information
Miguel Barrenechea committed Nov 12, 2015
1 parent 6b05912 commit 4086d7b
Show file tree
Hide file tree
Showing 17 changed files with 365 additions and 95 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ define([

showIndicatorModal: function() {
// mps publish an event that makes the indicator modal show
console.log("Let's show the indicator modal")
mps.publish('CompareWidgetsModal/show');
}

});
Expand Down
78 changes: 61 additions & 17 deletions app/assets/javascripts/compare/presenters/CompareGridPresenter.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ define([

status: new (Backbone.Model.extend({
defaults: {
name: 'compare-countries'
name: 'compare-countries',
widgetsActive: ["1","2","3","4","5"]
}
})),

Expand Down Expand Up @@ -52,24 +53,29 @@ define([

'Options/delete': function(id) {
this._onOptionsDelete(id);
},

'Widgets/change': function(widgetsActive) {
this.status.set('widgetsActive', widgetsActive);
this.status.set('options', this.getOptionsCustomize());
mps.publish('Place/update');
this.changeCompare();
}

}],

/**
*
* mps subscription callbacks
*/
_onPlaceGo: function(params) {
this.setParams(params);
this.setWidgets(params);
},


_onCompareUpdate: function(params) {
var params = _.extend({}, this.status.attributes, params);
this.setParams(params);
this.setWidgets(params);
},


_onOptionsUpdate: function(id,slug,wstatus) {
var options = _.clone(this.status.get('options'));
if (!!options[slug]) {
Expand All @@ -91,16 +97,25 @@ define([
this.changeCompare();
},

// SETTERS
setWidgets: function(params) {
if (! !!this.status.get('widgets')) {
new WidgetCollection()
.fetch()
.done(_.bind(function(response){
this.status.set('widgets', response.widgets);
this.setParams(params);
}, this ));
} else {
this.setParams(params);
}
},

setParams: function(params) {
if (!!params.compare1 && !!params.compare2) {
if (! !!params.options) {
// Fetching data
new WidgetCollection()
.fetch({data: {default: true}})
.done(_.bind(function(widgets){
params.options = this.getOptions(params, widgets);
this.setModels(params);
}, this ));
params.options = this.getOptions(params);
this.setModels(params);
} else {
if ((!!this.oldCompare1 && this.oldCompare1 != params.compare1) || (!!this.oldCompare2 && this.oldCompare2 != params.compare2)) {
params.options = this.moveOptions(params);
Expand All @@ -112,7 +127,6 @@ define([
}
},

// SETTER
setModels: function(params) {
this.status.set('options', params.options);
// this.status.set('widgets', this.getWidgets());
Expand All @@ -124,6 +138,9 @@ define([
this.changeCompare();
},




// COMPARE EVENTS
render: function() {
this.view.render();
Expand Down Expand Up @@ -160,21 +177,27 @@ define([
},




// HELPERS
getWidgets: function() {
var widgetIds = _.map(this.status.get('options'),function(c){
return _.map(c, function(w,k){
return k;
})
});
this.status.set('widgets',widgetIds[0]);
this.status.set('widgetsActive',widgetIds[0]);
mps.publish('Widgets/update',[this.status.get('widgetsActive')]);
return widgetIds[0];
},

// SET OPTIONS PARAMS
getOptions: function(params, widgets) {
getOptions: function(params) {
var widgets = _.filter(this.status.get('widgets'), _.bind(function(w){
return _.contains(this.status.get('widgetsActive'),w.id.toString());
}, this ));
// Get the current options
var w = _.groupBy(_.map(widgets.widgets,_.bind(function(w){
var w = _.groupBy(_.map(widgets,_.bind(function(w){
return {
id: w.id,
tabs: (!!w.tabs) ? this.getTabsOptions(w.tabs) : null
Expand All @@ -186,6 +209,25 @@ define([
r[this.objToSlug(params.compare2,'')] = w;
return r;
},

getOptionsCustomize: function() {
var widgets = _.filter(this.status.get('widgets'), _.bind(function(w){
return _.contains(this.status.get('widgetsActive'),w.id.toString());
}, this ));
// Get the current options
var w = _.groupBy(_.map(widgets,_.bind(function(w){
return {
id: w.id,
tabs: (!!w.tabs) ? this.getTabsOptions(w.tabs) : null
};
}, this)), 'id');

var r = {};
r[this.objToSlug(this.status.get('compare1'),'')] = w;
r[this.objToSlug(this.status.get('compare2'),'')] = w;
return r;
},

getTabsOptions: function(tabs) {
return _.map(tabs, function(t){
return {
Expand All @@ -199,11 +241,13 @@ define([
}
})[0];
},

getIndicatorOptions: function(indicators) {
return _.map(indicators,function(i){
return i.id;
});
},

moveOptions: function(params) {
var r = {};
var options = _.map(params.options, function(opt,key){
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
define([
'backbone',
'mps',
'compare/presenters/PresenterClass',
'widgets/collections/WidgetCollection',
], function(Backbone, mps, PresenterClass, WidgetCollection) {

'use strict';

var CompareSelectorsPresenter = PresenterClass.extend({

status: new (Backbone.Model.extend({})),

init: function(view) {
this._super();
this.view = view;
},

/**
* Application subscriptions.
*/
_subscriptions: [{
'Widgets/update': function(widgets) {
this.status.set('widgetsActive',widgets);
if (!!this.status.get('widgets')) {
this.view.render();
this.view.setWidgetsStatus();
} else {
new WidgetCollection()
.fetch()
.done(_.bind(function(response){
this.status.set('widgets',response.widgets)
this.view.render();
this.view.setWidgetsStatus();
}, this ));
}
},

'CompareWidgetsModal/show': function(tab) {
this.view.show();
}
}],


changeActiveWidgets: function(widgetId,remove) {
var widgets = _.clone(this.status.get('widgetsActive'));
(remove) ? widgets = _.without(widgets,widgetId.toString()) : widgets.push(widgetId.toString());
this.status.set('widgetsActive', widgets);
this.view.setWidgetsStatus();
},

setActiveWidgets: function() {
mps.publish('Widgets/change', [this.status.get('widgetsActive')]);
}

});

return CompareSelectorsPresenter;

});
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<h3>Area of interest (optional)</h3>
<ul class="m-field-list compare-area">
{{#each country1.areas}}
<li class="m-field-list-radio m-field-list-radio-area" data-id="{{id}}">{{this.name}}</li>
<li class="m-field-list-item is-radio js-field-list-radio js-field-list-radio-area" data-id="{{id}}">{{this.name}}</li>
{{/each}}
</ul>
</div>
Expand All @@ -33,7 +33,7 @@
{{#if country1.jurisdictions}}
<ul class="m-field-list compare-jurisdiction">
{{#each country1.jurisdictions}}
<li class="m-field-list-radio m-field-list-radio-jurisdiction" data-id="{{id}}">{{this.name}}</li>
<li class="m-field-list-item is-radio js-field-list-radio js-field-list-radio-jurisdiction" data-id="{{id}}">{{this.name}}</li>
{{/each}}
</ul>
{{else}}
Expand All @@ -59,7 +59,7 @@
<h3>Area of interest (optional)</h3>
<ul class="m-field-list compare-area">
{{#each country2.areas}}
<li class="m-field-list-radio m-field-list-radio-area" data-id="{{id}}">{{this.name}}</li>
<li class="m-field-list-item is-radio js-field-list-radio js-field-list-radio-area" data-id="{{id}}">{{this.name}}</li>
{{/each}}
</ul>
</div>
Expand All @@ -68,7 +68,7 @@
{{#if country1.jurisdictions}}
<ul class="m-field-list compare-jurisdiction">
{{#each country2.jurisdictions}}
<li class="m-field-list-radio m-field-list-radio-jurisdiction" data-id="{{id}}">{{this.name}}</li>
<li class="m-field-list-item is-radio js-field-list-radio js-field-list-radio-jurisdiction" data-id="{{id}}">{{this.name}}</li>
{{/each}}
</ul>
{{else}}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<a class="close" href="#"><svg><use xlink:href="#shape-close"></use></svg></a>
<div class="content-wrapper">
<div class="m-compare-modal">
<div class="m-modal--tab is-active">
<div class="m-field">
<h3>Indicators</h3>
<ul class="m-field-list compare-area">
{{#each widgets}}
<li class="m-field-list-item is-checkbox js-field-list-checkbox-widget" data-id="{{this.id}}"><svg class="icon-check"><use xlink:href="#icon-check"></use></svg>{{this.name}}</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
<footer class="m-compare-footer">
<span class="gradient"></span>
<ul class="m-btncontainer is-center">
<li>
<button id="btnModalWidgetsContinue" class="btn blue medium uppercase">Continue</button>
</li>
</ul>
</footer>
4 changes: 3 additions & 1 deletion app/assets/javascripts/compare/views/CompareIndexView.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ define([
'compare/views/index/CompareModalView',
'compare/views/index/CompareFixedHeaderView',
'compare/views/index/CompareGridButtonBoxView',
], function(Backbone, CompareSelectorsView, CompareGridView, CompareModalView, CompareFixedHeaderView, CompareGridButtonBoxView) {
'compare/views/index/CompareWidgetsModalView',
], function(Backbone, CompareSelectorsView, CompareGridView, CompareModalView, CompareFixedHeaderView, CompareGridButtonBoxView, CompareWidgetsModalView) {

var CompareIndexView = Backbone.View.extend({

Expand All @@ -15,6 +16,7 @@ define([
new CompareModalView();
new CompareFixedHeaderView();
new CompareGridButtonBoxView();
new CompareWidgetsModalView();
}

});
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
define([
'backbone',
'handlebars',
'compare/presenters/CompareGridButtonBoxPresenter',
'text!compare/templates/compareGridButtonBox.handlebars',
], function(Backbone, CompareGridButtonBoxPresenter, tpl) {
], function(Backbone, Handlebars, CompareGridButtonBoxPresenter, tpl) {

var CompareGridButtonBoxView = Backbone.View.extend({

Expand Down
4 changes: 2 additions & 2 deletions app/assets/javascripts/compare/views/index/CompareGridView.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ define([
this.widgets = [];
this.promises = [];

var widgetsIds = this.presenter.status.get('widgets');
var widgetsIds = this.presenter.status.get('widgetsActive');
var data = this.presenter.status.get('data');

// Loop each widget and get data of each compare
Expand Down Expand Up @@ -71,7 +71,7 @@ define([

parseData: function() {
return {
widgets: this.presenter.status.get('widgets')
widgets: this.presenter.status.get('widgetsActive')
};
},

Expand Down

0 comments on commit 4086d7b

Please sign in to comment.