Responsive design #726
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| /* | ||
| Copyright 2016 OCAD University | ||
|
|
||
| Licensed under the Educational Community License (ECL), Version 2.0 or the New | ||
| BSD license. You may not use this file except in compliance with one these | ||
| Licenses. | ||
|
|
||
| You may obtain a copy of the ECL 2.0 License and BSD License at | ||
| https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt | ||
| */ | ||
|
|
||
| var fluid_2_0_0 = fluid_2_0_0 || {}; | ||
|
|
||
| (function ($, fluid) { | ||
| "use strict"; | ||
|
|
||
| /******************** | ||
| * Textfield Buttons * | ||
| ********************/ | ||
|
|
||
| fluid.defaults("fluid.textfieldButtons", { | ||
| gradeNames: ["fluid.viewComponent"], | ||
| distributeOptions: { | ||
| target: "{that > fluid.stepper.button}.options", | ||
| record: { | ||
| model: "{fluid.textfieldButtons}.model", | ||
| range: "{textfieldButtons}.options.range", | ||
| buttonOptions: "{fluid.textfieldButtons}.options.buttonOptions" | ||
| } | ||
| }, | ||
| components: { | ||
| textfield: { | ||
| type: "fluid.textfieldSlider.textfield", | ||
| container: "{textfieldButtons}.dom.textfield", | ||
| options: { | ||
| model: "{textfieldButtons}.model", | ||
| range: "{textfieldButtons}.options.range" | ||
| } | ||
| }, | ||
| increaseButton: { | ||
| type: "fluid.stepper.button", | ||
| container: "{textfieldButtons}.dom.increaseButton", | ||
| options: { | ||
| incrementCoefficient: 1 | ||
| } | ||
| }, | ||
| decreaseButton: { | ||
| type: "fluid.stepper.button", | ||
| container: "{textfieldButtons}.dom.decreaseButton", | ||
| options: { | ||
| incrementCoefficient: -1 | ||
| } | ||
| } | ||
| }, | ||
| selectors: { | ||
| textfield: ".flc-textfieldButtons-field", | ||
| increaseButton: ".fl-increase-button", | ||
| decreaseButton: ".fl-decrease-button" | ||
| }, | ||
| model: { | ||
| value: null | ||
| }, | ||
| modelRelay: { | ||
| target: "value", | ||
| singleTransform: { | ||
| type: "fluid.transforms.limitRange", | ||
| input: "{that}.model.value", | ||
| min: "{that}.options.range.min", | ||
| max: "{that}.options.range.max" | ||
| } | ||
| }, | ||
| range: { | ||
| min: 0, | ||
| max: 100 | ||
| } | ||
| }); | ||
|
|
||
| fluid.defaults("fluid.stepper.button", { | ||
| gradeNames: ["fluid.viewComponent"], | ||
| range: {}, // should be used to specify the min, max range e.g. {min: 0, max: 100} | ||
| invokers: { | ||
| setModel: { | ||
| changePath: "value", | ||
| value: { | ||
|
There was a problem hiding this comment. line 127-131 can be simplified to There was a problem hiding this comment. Sorry, the use of |
||
| expander: { | ||
| funcName: "{that}.calculateValue" | ||
| } | ||
| } | ||
| }, | ||
| calculateValue: { | ||
| funcName: "fluid.stepper.button.buttonCalculateValue", | ||
| args: ["{that}.options.incrementCoefficient", "{that}.options.buttonOptions.stepMultiplier", "{that}.model.value", "{that}.options.range.min", "{that}.options.range.max"] | ||
| } | ||
| }, | ||
| listeners: { | ||
| "onCreate.bindClickEvt": { | ||
| "this": "{that}.container", | ||
| "method": "click", | ||
| "args": "{that}.setModel" | ||
| } | ||
| }, | ||
| incrementCoefficient: 1, | ||
| buttonOptions: { | ||
| stepMultiplier: 10 | ||
| } | ||
| }); | ||
|
|
||
| fluid.stepper.button.buttonCalculateValue = function (value, stepMultiplier, modelValue, min, max) { | ||
| modelValue = Math.round(modelValue * stepMultiplier); | ||
| min = Math.round(min * stepMultiplier); | ||
| max = Math.round(max * stepMultiplier); | ||
| if ((modelValue + value) < min) { | ||
|
There was a problem hiding this comment. Isn't line 155-160 already guarded by There was a problem hiding this comment. I am not entirely sure how the limit Range works. Does it return the max value if the supplied value is greater than the max and what is its syntax? I use stepMultipliers to avoid rounding errors. We discussed that with jobara here. There was a problem hiding this comment. Some test cases to help you understand how limitRange works: https://github.com/fluid-project/infusion/blob/master/tests/framework-tests/core/js/ModelTransformationTests.js#L4028-L4077 The effectiveness should be tested in your test coverage for this component. From my understanding, this function simply needs one line: BTW, using the name There was a problem hiding this comment. I am not sure where to put the transform. If I put it in the setModel invoker in the place of value the model ends up being a function. I am using this transformation There was a problem hiding this comment. The transformation has already been placed in the parent component There was a problem hiding this comment. I see I have just made some unnecessary checks. |
||
| return min/stepMultiplier; | ||
| } | ||
| else if ((modelValue + value) > max) { | ||
| return max/stepMultiplier; | ||
| } | ||
| else { | ||
| return (modelValue + value)/stepMultiplier; | ||
| } | ||
| }; | ||
|
|
||
| })(jQuery, fluid_2_0_0); | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| { | ||
| "textfieldButtons": { | ||
| "name": "Textfield Buttons", | ||
| "description": "A synchronized buttons and textfield", | ||
| "cssFiles": [], | ||
| "files": [ | ||
| "./js/TextfieldButtons.js" | ||
| ], | ||
| "dependencies": [ | ||
| "jQuery", | ||
| "jQueryUICore", | ||
| "normalize", | ||
| "framework", | ||
| "jQueryUIWidgets", | ||
| "jQueryTouchPunchPlugin" | ||
| ] | ||
| } | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It would be nice to be consistent with other lines by using
{fluid.textfieldButtons}.