-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #420 from simphony/configurables_components
Resolution configurable is now a Vue component
- Loading branch information
Showing
7 changed files
with
72 additions
and
96 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,85 +1,57 @@ | ||
| define([ | ||
| "jquery", | ||
| "handlebars", | ||
| "utils" | ||
| ], function($, hb, utils) { | ||
| "utils", | ||
| "components/vue/dist/vue" | ||
| ], function(utils, Vue) { | ||
| "use strict"; | ||
|
|
||
| var view_template = hb.compile( | ||
| '<div class="form-group">' + | ||
| '<label for="resolution-model-{{index}}">Resolution</label>' + | ||
| '<select class="form-control" id="resolution-model-{{ index }}">' + | ||
| '{{#each options}}' + | ||
| '<option value="{{this}}">{{this}}</option>' + | ||
| '{{/each}}' + | ||
| '</div>' | ||
| ); | ||
| var resolution_tag = 'resolution'; | ||
| var resolution_component = Vue.component(resolution_tag + '-component', { | ||
| // Your configurable must have a "config_dict" property from the model | ||
| props: ['config_dict'], | ||
|
|
||
| var ResolutionModel = function () { | ||
| // Model for the resolution configurable. | ||
| var self = this; | ||
| this.resolution = "Window"; | ||
| this.resolution_options = ["Window", "1920x1080", "1280x1024", "1280x800", "1024x768"]; | ||
|
|
||
| self.view = function (index) { | ||
| // Creates the View to add to the application entry. | ||
| var widget = $(view_template({ | ||
| options: self.resolution_options, | ||
| index: index | ||
| })); | ||
|
|
||
| widget.find("select").change(function() { | ||
| if (this.selectedIndex) { | ||
| self.resolution = this.options[this.selectedIndex].value; | ||
| } | ||
| }); | ||
|
|
||
| return widget; | ||
| }; | ||
| template: | ||
| '<div class="form-group">' + | ||
| ' <label>Resolution</label>' + | ||
| ' <select class="form-control" v-model="resolution">' + | ||
| ' <option v-for="resolution_option in resolution_options">' + | ||
| ' {{resolution_option}}' + | ||
| ' </option>' + | ||
| ' </select>' + | ||
| '</div>', | ||
|
|
||
| data: function() { | ||
| return { | ||
| resolution: this.config_dict.resolution, | ||
| resolution_options: ['Window', '1920x1080', '1280x1024', '1280x800', '1024x768'] | ||
| }; | ||
| }, | ||
|
|
||
| watch: { | ||
| config_dict: function() { this.resolution = this.config_dict.resolution; }, // model -> view update | ||
| resolution: function() { this.$emit('update:config_dict', { resolution: this.resolution }); } // view -> model update | ||
| } | ||
| }); | ||
|
|
||
| // Your configurable class must implement a tag and default config_dict | ||
| var ResolutionModel = function() { | ||
| this.tag = resolution_tag; | ||
| this.config_dict = { resolution: 'Window' }; | ||
| }; | ||
|
|
||
| ResolutionModel.prototype.tag = "resolution"; | ||
|
|
||
|
|
||
| ResolutionModel.prototype.as_config_dict = function() { | ||
| // Returns the configuration dict to hand over to the API request. | ||
| // e.g. | ||
| // { | ||
| // "resolution" : "1024x768" | ||
| // } | ||
| // The returned dictionary must be added to the configurable | ||
| // parameter under the key given by the tag member. | ||
| var resolution = this.resolution; | ||
|
|
||
| var resolution = this.config_dict.resolution; | ||
|
|
||
| if (resolution === 'Window') { | ||
| var max_size = utils.max_iframe_size(); | ||
| resolution = max_size[0]+"x"+max_size[1]; | ||
| resolution = max_size[0] + 'x' + max_size[1]; | ||
| } | ||
|
|
||
| return { | ||
| "resolution": resolution | ||
| }; | ||
| }; | ||
|
|
||
| // Define all your configurables here. | ||
| var configurables = { | ||
| ResolutionModel: ResolutionModel | ||
| }; | ||
|
|
||
| var from_tag = function (tag) { | ||
| // Given a tag, lookup the appropriate configurable and | ||
| // return it. If the tag matches no configurable, returns null | ||
| for (var conf in configurables) { | ||
| if (configurables[conf].prototype.tag === tag) { | ||
| return configurables[conf]; | ||
| } | ||
| } | ||
| return null; | ||
| }; | ||
|
|
||
| var ns = { | ||
| from_tag: from_tag | ||
| return { resolution: resolution }; | ||
| }; | ||
|
|
||
| return $.extend(ns, configurables); | ||
|
|
||
| // Export all your configurable models here | ||
| return { | ||
| resolution: ResolutionModel, | ||
| resolution_component: resolution_component | ||
| }; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters