forked from lichen-community-systems/Flocking
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adds as-yet untested MIDI selectbox widget.
Updates Infusion to the 1.5 release.
- Loading branch information
1 parent
ff90e60
commit 607a177
Showing
14 changed files
with
274 additions
and
5 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
Large diffs are not rendered by default.
Oops, something went wrong.
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
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
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 |
|---|---|---|
| @@ -0,0 +1,263 @@ | ||
| /* | ||
| * Flocking UI Select Box | ||
| * Copyright 2014, Colin Clark | ||
| * | ||
| * Dual licensed under the MIT and GPL Version 2 licenses. | ||
| */ | ||
|
|
||
| /*global require*/ | ||
|
|
||
| var fluid = fluid || require("infusion"), | ||
| flock = fluid.registerNamespace("flock"); | ||
|
|
||
| (function () { | ||
| "use strict"; | ||
|
|
||
| fluid.setLogging(true); | ||
|
|
||
| var $ = fluid.registerNamespace("jQuery"); | ||
|
|
||
| /************** | ||
| * Select Box * | ||
| **************/ | ||
|
|
||
| fluid.defaults("flock.ui.selectBox", { | ||
| gradeNames: ["fluid.viewComponent", "autoInit"], | ||
|
|
||
| model: { | ||
| /* | ||
| Example model for a selectBox instance: | ||
| groups: [ | ||
| { | ||
| name: "Cats", | ||
| options: [ | ||
| { | ||
| id: "hugo", | ||
| name: "Hugo" | ||
| }, | ||
| { | ||
| id: "sirius", | ||
| name: "Sirius" | ||
| } | ||
| ] | ||
| } | ||
| ], | ||
| options: [ | ||
| { | ||
| id: "doge", | ||
| name: "Doge" | ||
| } | ||
| ], | ||
| selection: "hugo" | ||
| */ | ||
| }, | ||
|
|
||
| markup: { | ||
| group: "<optgroup label='%label'></optgroup", | ||
| option: "<option value='%value'>%label</option>" | ||
| }, | ||
|
|
||
| invokers: { | ||
| render: { | ||
| funcName: "flock.ui.selectBox.render", | ||
| args: [ | ||
| "{that}.container", | ||
| "{that}.model", | ||
| "{that}.applier", | ||
| "{that}.options.markup", | ||
| "{that}.events.afterRender.fire" | ||
| ] | ||
| }, | ||
|
|
||
| select: { | ||
| funcName: "flock.ui.selectBox.select", | ||
| args: ["{that}", "{arguments}.0", "{that}.container"] | ||
| }, | ||
|
|
||
| handleChange: { | ||
| funcName: "flock.ui.selectBox.handleChange", | ||
| args: ["{that}.container", "{that}.updateSelection"] | ||
| }, | ||
|
|
||
| updateSelection: { | ||
| funcName: "flock.ui.selectBox.updateSelection", | ||
| args: ["{arguments}.0", "{that}.container", "{that}.applier", "{that}.events.onSelect.fire"] | ||
| } | ||
| }, | ||
|
|
||
| events: { | ||
| onSelect: null, | ||
| afterRender: null | ||
| }, | ||
|
|
||
| listeners: { | ||
| onCreate: [ | ||
| { | ||
| "this": "{that}.container", | ||
| method: "change", | ||
| args: ["{that}.handleChange"] | ||
| }, | ||
| { | ||
| funcName: "{that}.render" | ||
| } | ||
| ] | ||
| } | ||
| }); | ||
|
|
||
| flock.ui.selectBox.handleChange = function (container, updateSelection) { | ||
| var id = container.val(); | ||
| updateSelection(id); | ||
| }; | ||
|
|
||
| flock.ui.selectBox.updateSelection = function (id, container, applier, onSelect) { | ||
| var selectedEl = container.find("[value='" + id + "']").eq(0), | ||
| selectedDemo = selectedEl.data("flock-selectBox-model-binding"); | ||
|
|
||
| applier.requestChange("selection", id); | ||
| onSelect(selectedDemo); | ||
| }; | ||
|
|
||
| flock.ui.selectBox.select = function (that, id, container) { | ||
| var optionToSelect = container.find("[value='" + id + "']").eq(0); | ||
| container.find("option").removeAttr("selected"); | ||
| optionToSelect.attr("selected", "selected"); | ||
| that.updateSelection(id); | ||
| }; | ||
|
|
||
| flock.ui.selectBox.render = function (container, model, applier, markup, afterRender) { | ||
| if (model.groups) { | ||
| flock.ui.selectBox.render.groups(container, model.groups, markup); | ||
| } | ||
|
|
||
| if (model.options) { | ||
| flock.ui.selectBox.render.options(container, model.options, markup); | ||
| } | ||
|
|
||
| if (!model.selection) { | ||
| var defaultSelection = (model.groups && model.groups.options) ? model.group.options[0] : | ||
| model.options ? model.options : undefined; | ||
|
|
||
| if (defaultSelection) { | ||
| applier.requestChange("selection", defaultSelection); | ||
| } | ||
| } | ||
|
|
||
| afterRender(); | ||
| }; | ||
|
|
||
| flock.ui.selectBox.render.groups = function (container, groups, markup) { | ||
| fluid.each(groups, function (group) { | ||
| flock.ui.selectBox.render.group(container, group, markup); | ||
| }); | ||
| }; | ||
|
|
||
| flock.ui.selectBox.render.group = function (container, group, markup) { | ||
| var renderedMarkup = fluid.stringTemplate(markup.group, { | ||
| label: group.name | ||
| }); | ||
|
|
||
| var optGroupEl = $(renderedMarkup); | ||
| container.append(optGroupEl); | ||
| flock.ui.selectBox.render.options(optGroupEl, group.options, markup); | ||
| }; | ||
|
|
||
| flock.ui.selectBox.render.options = function (container, options, markup) { | ||
| fluid.each(options, function (option) { | ||
| flock.ui.selectBox.render.option(container, option, markup); | ||
| }); | ||
| }; | ||
|
|
||
| flock.ui.selectBox.render.option = function (container, option, markup) { | ||
| var renderedMarkup = fluid.stringTemplate(markup.option, { | ||
| label: option.name, | ||
| value: option.id | ||
| }); | ||
|
|
||
| var optionEl = $(renderedMarkup); | ||
| container.append(optionEl); | ||
| optionEl.data("flock-selectBox-model-binding", option); | ||
| }; | ||
|
|
||
|
|
||
| fluid.defaults("flock.ui.midiPortSelector", { | ||
| gradeNames: ["flock.ui.selectBox", "autoInit"], | ||
|
|
||
| sysex: false, | ||
|
|
||
| model: { | ||
| options: [], | ||
| selection: null | ||
| }, | ||
|
|
||
| invokers: { | ||
| refreshPorts: { | ||
| funcName: "flock.ui.midiPortSelector.refreshPorts", | ||
| args: ["{that}.applier", "{arguments}.0", "{that}.options.selectionDefaults"] | ||
| } | ||
| }, | ||
|
|
||
| events: { | ||
| onAccessGranted: null, | ||
| onAccessError: null | ||
| }, | ||
|
|
||
| modelListeners: { | ||
| "*": { | ||
| func: "{that}.render" | ||
| } | ||
| }, | ||
|
|
||
| listeners: { | ||
| onCreate: { | ||
| funcName: "flock.midi.requestAccess", | ||
| args: [ | ||
| "{that}.options.sysex", | ||
| "{that}.events.onAccessGranted.fire", | ||
| "{that}.events.onAccessError.fire" | ||
| ] | ||
| }, | ||
|
|
||
| onAccessGranted: { | ||
| func: "{that}.refreshPorts" | ||
| }, | ||
|
|
||
| onAccessError: { | ||
| func: "fluid.log", | ||
| args: [fluid.logLevel.WARN, "{arguments}.0"] | ||
| } | ||
| }, | ||
|
|
||
| selectionDefaults: { | ||
| prompt: { | ||
| id: "choose", | ||
| name: "Select a MIDI input..." | ||
| }, | ||
|
|
||
| noPorts: { | ||
| id: "none", | ||
| name: "No MIDI inputs found." | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| flock.ui.midiPortSelector.refreshPorts = function (applier, access, selectionDefaults) { | ||
| var ports = flock.midi.getPorts(access); | ||
|
|
||
| var portsModel = fluid.transform(ports.inputs, function (port) { | ||
| return { | ||
| id: port.id, | ||
| name: port.manufacturer + " " + port.name | ||
| } | ||
| }); | ||
|
|
||
| var firstOption = portsModel.length > 0 ? selectionDefaults.prompt : selectionDefaults.noPorts; | ||
| portsModel.unshift(firstOption); | ||
|
|
||
| // Update the model with the new options. | ||
| applier.change("options", []); | ||
| applier.change("options", portsModel); | ||
| }; | ||
|
|
||
| }()); |