diff options
Diffstat (limited to 'html/lib/onyx/source')
39 files changed, 3041 insertions, 0 deletions
diff --git a/html/lib/onyx/source/Button.js b/html/lib/onyx/source/Button.js new file mode 100644 index 0000000..b13c334 --- /dev/null +++ b/html/lib/onyx/source/Button.js @@ -0,0 +1,18 @@ +/** + A button in the onyx style. The color of the button may be customized by + applying a background color. + + The *onyx-affirmative*, *onyx-negative*, and *onyx-blue* classes provide + some built-in presets. + + {kind: "onyx.Button", content: "Button"}, + {kind: "onyx.Button", content: "Affirmative", classes: "onyx-affirmative"}, + {kind: "onyx.Button", content: "Negative", classes: "onyx-negative"}, + {kind: "onyx.Button", content: "Blue", classes: "onyx-blue"}, + {kind: "onyx.Button", content: "Custom", style: "background-color: purple; color: #F1F1F1;"} +*/ +enyo.kind({ + name: "onyx.Button", + kind: "enyo.Button", + classes: "onyx-button enyo-unselectable" +});
\ No newline at end of file diff --git a/html/lib/onyx/source/Checkbox.js b/html/lib/onyx/source/Checkbox.js new file mode 100644 index 0000000..2b6143b --- /dev/null +++ b/html/lib/onyx/source/Checkbox.js @@ -0,0 +1,35 @@ +/** + A box that shows or hides a check mark when clicked. + The onChange event is fired when it is clicked. Use getValue() to fetch + the checked status. + + {kind: "onyx.Checkbox", onchange: "checkboxClicked"} + + checkboxClicked: function(inSender) { + if (inSender.getValue()) { + this.log("I've been checked!"); + } + } +*/ +enyo.kind({ + name: "onyx.Checkbox", + classes: "onyx-checkbox", + //* @protected + kind: enyo.Checkbox, + tag: "div", + handlers: { + ondown:"downHandler", + // prevent double onchange bubble in IE + onclick: "" + }, + downHandler: function(inSender, e) { + if (!this.disabled) { + this.setChecked(!this.getChecked()); + this.bubble("onchange"); + } + return true; + }, + tap: function(inSender, e) { + return !this.disabled; + } +}); diff --git a/html/lib/onyx/source/Drawer.js b/html/lib/onyx/source/Drawer.js new file mode 100644 index 0000000..3db5afd --- /dev/null +++ b/html/lib/onyx/source/Drawer.js @@ -0,0 +1,75 @@ +/** + A control that appears or disappears based on its _open_ property. + It appears or disappears with a sliding animation whose direction is + determined by the _orient_ property. +*/ +enyo.kind({ + name: "onyx.Drawer", + published: { + //* The visibility state of the drawer's associated control + open: true, + //* "v" for vertical animation; "h" for horizontal animation + orient: "v" + }, + style: "overflow: hidden; position: relative;", + tools: [ + {kind: "Animator", onStep: "animatorStep", onEnd: "animatorEnd"}, + {name: "client", style: "position: relative;", classes: "enyo-border-box"} + ], + create: function() { + this.inherited(arguments); + this.openChanged(); + }, + initComponents: function() { + this.createChrome(this.tools); + this.inherited(arguments); + }, + openChanged: function() { + this.$.client.show(); + if (this.hasNode()) { + if (this.$.animator.isAnimating()) { + this.$.animator.reverse(); + } else { + var v = this.orient == "v"; + var d = v ? "height" : "width"; + var p = v ? "top" : "left"; + // unfixing the height/width is needed to properly + // measure the scrollHeight/Width DOM property, but + // can cause a momentary flash of content on some browsers + this.applyStyle(d, null); + var s = this.hasNode()[v ? "scrollHeight" : "scrollWidth"]; + this.$.animator.play({ + startValue: this.open ? 0 : s, + endValue: this.open ? s : 0, + dimension: d, + position: p + }); + } + } else { + this.$.client.setShowing(this.open); + } + }, + animatorStep: function(inSender) { + if (this.hasNode()) { + var d = inSender.dimension; + this.node.style[d] = this.domStyles[d] = inSender.value + "px"; + } + var cn = this.$.client.hasNode(); + if (cn) { + var p = inSender.position; + var o = (this.open ? inSender.endValue : inSender.startValue); + cn.style[p] = this.$.client.domStyles[p] = (inSender.value - o) + "px"; + } + if (this.container) { + this.container.resized(); + } + }, + animatorEnd: function() { + if (!this.open) { + this.$.client.hide(); + } + if (this.container) { + this.container.resized(); + } + } +});
\ No newline at end of file diff --git a/html/lib/onyx/source/FlyweightPicker.js b/html/lib/onyx/source/FlyweightPicker.js new file mode 100644 index 0000000..4adfab4 --- /dev/null +++ b/html/lib/onyx/source/FlyweightPicker.js @@ -0,0 +1,110 @@ +/** + _onyx.FlyweightPicker_, a subkind of <a href="#onyx.Picker">onyx.Picker</a>, + is a picker that employs the flyweight pattern. It is used to display a + large list of selectable items. As with + <a href="#enyo.FlyweightRepeater">enyo.FlyweightRepeater</a>, + the _onSetupItem_ event allows for customization of item rendering. + + To initialize the FlyweightPicker to a particular value, call _setSelected_ + with the index of the item you wish to select, and call _setContent_ with + the item that should be shown in the activator button. + + FlyweightPicker will send an _onSelect_ event with a selected item's + information. This can be received by a client application to determine which + item was selected. + + enyo.kind({ + handlers: { + onSelect: "itemSelected" + }, + components: [ + {kind: "onyx.PickerDecorator", components: [ + {}, + {name: "yearPicker", kind: "onyx.FlyweightPicker", count: 200, + onSetupItem: "setupYear", components: [ + {name: "year"} + ] + } + ]} + ], + create: function() { + var d = new Date(); + var y = d.getYear(); + this.$.yearPicker.setSelected(y); + this.$.year.setContent(1900+y); + }, + setupYear: function(inSender, inEvent) { + this.$.year.setContent(1900+inEvent.index); + }, + itemSelected: function(inSender, inEvent) { + enyo.log("Picker Item Selected: " + inEvent.selected.content); + } + }) + */ +enyo.kind({ + name: "onyx.FlyweightPicker", + kind: "onyx.Picker", + classes: "onyx-flyweight-picker", + published: { + //* How many rows to render + count: 0 + }, + events: { + //* Sends the row index, and the row control, for decoration. + onSetupItem: "", + onSelect: "" + }, + handlers: { + onSelect: "itemSelect" + }, + components: [ + {name: "scroller", kind: "enyo.Scroller", strategyKind: "TouchScrollStrategy", components: [ + {name: "client", kind: "FlyweightRepeater", ontap: "itemTap"} + ]} + ], + scrollerName: "scroller", + create: function() { + this.inherited(arguments); + this.countChanged(); + }, + rendered: function() { + this.inherited(arguments); + this.selectedChanged(); + }, + scrollToSelected: function() { + var n = this.$.client.fetchRowNode(this.selected); + this.getScroller().scrollToNode(n, !this.menuUp); + }, + countChanged: function() { + this.$.client.count = this.count; + }, + processActivatedItem: function(inItem) { + this.item = inItem; + }, + selectedChanged: function(inOld) { + if (!this.item) { + return; + } + if (inOld !== undefined) { + this.item.removeClass("selected"); + this.$.client.renderRow(inOld); + } + this.item.addClass("selected"); + this.$.client.renderRow(this.selected); + // need to remove the class from control to make sure it won't apply to other rows + this.item.removeClass("selected"); + var n = this.$.client.fetchRowNode(this.selected); + this.doChange({selected: this.selected, content: n && n.textContent || this.item.content}); + }, + itemTap: function(inSender, inEvent) { + this.setSelected(inEvent.rowIndex); + //Send the select event that we want the client to receive. + this.doSelect({selected: this.item, content: this.item.content}) + }, + itemSelect: function(inSender, inEvent) { + //Block all select events that aren't coming from this control. This is to prevent select events from MenuItems since they won't have the correct value in a Flyweight context. + if (inEvent.originator != this) { + return true; + } + } +}); diff --git a/html/lib/onyx/source/Grabber.js b/html/lib/onyx/source/Grabber.js new file mode 100644 index 0000000..0fd74f5 --- /dev/null +++ b/html/lib/onyx/source/Grabber.js @@ -0,0 +1,19 @@ +/** + A control styled to indicate that an object can be grabbed and moved. It + should only be used in this limited context--to indicate that dragging the + object will result in movement. + + {kind: "onyx.Toolbar", components: [ + {kind: "onyx.Grabber", ondragstart: "grabberDragstart", + ondrag: "grabberDrag", ondragfinish: "grabberDragFinish"}, + {kind: "onyx.Button", content: "More stuff"} + ]} + + When using a Grabber inside a Fittable control, be sure to set "noStretch: true" + on the Fittable or else give it an explicit height. Otherwise, the Grabber + may not be visible. +*/ +enyo.kind({ + name: "onyx.Grabber", + classes: "onyx-grabber" +});
\ No newline at end of file diff --git a/html/lib/onyx/source/Groupbox.js b/html/lib/onyx/source/Groupbox.js new file mode 100644 index 0000000..77a0ada --- /dev/null +++ b/html/lib/onyx/source/Groupbox.js @@ -0,0 +1,37 @@ +/** + A Groupbox displays controls as a vertically stacked group. + + A header may be added by placing an <a href="#onyx.GroupboxHeader">onyx.GroupboxHeader</a> as the first control in the Groupbox. + + {kind: "onyx.Groupbox", components: [ + {kind: "onyx.GroupboxHeader", content: "Sounds"}, + {components: [ + {content: "System Sounds"}, + {kind: "onyx.ToggleButton", value: true} + ]}, + {kind: "onyx.InputDecorator", components: [ + {kind: "onyx.Input"} + ]} + ]} + ]} + +*/ +enyo.kind({ + name: "onyx.Groupbox", + classes: "onyx-groupbox" +}); + +/** + A GroupboxHeader is designed to be placed inside an <a href="#onyx.Groupbox">onyx.Groupbox</a>. When a header for a group is desired, + make a GroupboxHeader the first control inside a Groupbox. + + {kind: "onyx.Groupbox", components: [ + {kind: "onyx.GroupboxHeader", content: "Sounds"}, + {content: "Yawn"}, + {content: "Beep"} + ]} +*/ +enyo.kind({ + name: "onyx.GroupboxHeader", + classes: "onyx-groupbox-header" +});
\ No newline at end of file diff --git a/html/lib/onyx/source/Icon.js b/html/lib/onyx/source/Icon.js new file mode 100644 index 0000000..ea10a99 --- /dev/null +++ b/html/lib/onyx/source/Icon.js @@ -0,0 +1,31 @@ +/** + A control that displays an icon. The icon image is specified by setting the + *src* property to a URL. + + In onyx, icons have a size of 32x32 pixels. Since the icon image is applied + as a CSS background, the height and width of an icon must be set if an image + of a different size is used. + + {kind: "onyx.Icon", src: "images/search.png"} + + When an icon should act like a button, use an <a href="#onyx.IconButton">onyx.IconButton</a>. + +*/ +enyo.kind({ + name: "onyx.Icon", + published: { + // url path specifying the icon image + src: "" + }, + classes: "onyx-icon", + //* @protected + create: function() { + this.inherited(arguments); + if (this.src) { + this.srcChanged(); + } + }, + srcChanged: function() { + this.applyStyle("background-image", "url(" + enyo.path.rewrite(this.src) + ")"); + } +});
\ No newline at end of file diff --git a/html/lib/onyx/source/IconButton.js b/html/lib/onyx/source/IconButton.js new file mode 100644 index 0000000..7d852c5 --- /dev/null +++ b/html/lib/onyx/source/IconButton.js @@ -0,0 +1,38 @@ +/** + An icon that acts like a button. The icon image is specified by setting the + *src* property to a URL. + + {kind: "onyx.IconButton", src: "images/search.png", ontap: "buttonTap"} + + If you want to combine an icon with text inside a button, use an + <a href="#onyx.Icon">onyx.Icon</a> inside an + <a href="#onyx.Button">onyx.Button</a>, e.g.: + + {kind: "onyx.Button", ontap: "buttonTap", components: [ + {kind: "onyx.Icon", src: "images/search.png"}, + {content: "Button"} + ]} + + The image associated with the *src* property of the IconButton is assumed + to be 32x64-pixel strip with the top half showing the button's normal state + and the bottom half showing its state when hovered-over or active. +*/ +enyo.kind({ + name: "onyx.IconButton", + kind: "onyx.Icon", + published: { + active: false + }, + classes: "onyx-icon-button", + //* @protected + rendered: function() { + this.inherited(arguments); + this.activeChanged(); + }, + tap: function() { + this.setActive(true); + }, + activeChanged: function() { + this.bubble("onActivate"); + } +}); diff --git a/html/lib/onyx/source/Input.js b/html/lib/onyx/source/Input.js new file mode 100644 index 0000000..a1ebe53 --- /dev/null +++ b/html/lib/onyx/source/Input.js @@ -0,0 +1,20 @@ +/** + An onyx-styled input control. In addition to the features of + <a href="#enyo.Input">enyo.Input</a>, onyx.Input has a *defaultFocus* + property that can be set to true to focus the input when it's rendered. + Only one input should be set as the *defaultFocus*. + + Typically, an onyx.Input is placed inside an + <a href="#onyx.InputDecorator">onyx.InputDecorator</a>, which provides + styling, e.g.: + + {kind: "onyx.InputDecorator", components: [ + {kind: "onyx.Input", placeholder: "Enter some text...", onchange: "inputChange"} + ]} + +*/ +enyo.kind({ + name: "onyx.Input", + kind: "enyo.Input", + classes: "onyx-input" +}); diff --git a/html/lib/onyx/source/InputDecorator.js b/html/lib/onyx/source/InputDecorator.js new file mode 100644 index 0000000..7dded2d --- /dev/null +++ b/html/lib/onyx/source/InputDecorator.js @@ -0,0 +1,46 @@ +/** + _onyx.InputDecorator_ is a control that provides input styling. Any controls + in the InputDecorator will appear to be inside an area styled as an input. + Usually, an InputDecorator surrounds an <a href="#onyx.Input">onyx.Input</a>. + + {kind: "onyx.InputDecorator", components: [ + {kind: "onyx.Input"} + ]} + + Other controls, such as buttons, may be placed to the right or left of the + input control, e.g.: + + {kind: "onyx.InputDecorator", components: [ + {kind: "onyx.IconButton", src: "search.png"}, + {kind: "onyx.Input"}, + {kind: "onyx.IconButton", src: "cancel.png"} + ]} + + Note that the InputDecorator fits around the content inside it. If the + decorator is sized, then its contents will likely need to be sized as well. + + {kind: "onyx.InputDecorator", style: "width: 500px;", components: [ + {kind: "onyx.Input", style: "width: 100%;"} + ]} +*/ +enyo.kind({ + name: "onyx.InputDecorator", + kind: "enyo.ToolDecorator", + tag: "label", + classes: "onyx-input-decorator", + //* @protected + handlers: { + onDisabledChange: "disabledChange", + onfocus: "receiveFocus", + onblur: "receiveBlur" + }, + receiveFocus: function() { + this.addClass("onyx-focused"); + }, + receiveBlur: function() { + this.removeClass("onyx-focused"); + }, + disabledChange: function(inSender, inEvent) { + this.addRemoveClass("onyx-disabled", inEvent.originator.disabled); + } +});
\ No newline at end of file diff --git a/html/lib/onyx/source/Item.js b/html/lib/onyx/source/Item.js new file mode 100644 index 0000000..377fb5b --- /dev/null +++ b/html/lib/onyx/source/Item.js @@ -0,0 +1,60 @@ +/** + A control designed to display a group of stacked items, typically used in + lists. Items are displayed with small guide lines between them; by default, + they are highlighted when tapped. Set *tapHighlight* to false to prevent the + highlighting. + + {kind: "onyx.Item", tapHighlight: false} +*/ +enyo.kind({ + name: "onyx.Item", + classes: "onyx-item", + tapHighlight: true, + handlers: { + onhold: "hold", + onrelease: "release" + }, + //* @public + hold: function(inSender, inEvent) { + if (this.tapHighlight) { + onyx.Item.addFlyweightClass(this.controlParent || this, "onyx-highlight", inEvent); + } + }, + //* @public + release: function(inSender, inEvent) { + if (this.tapHighlight) { + onyx.Item.removeFlyweightClass(this.controlParent || this, "onyx-highlight", inEvent); + } + }, + //* @protected + statics: { + addFlyweightClass: function(inControl, inClass, inEvent, inIndex) { + var flyweight = inEvent.flyweight; + if (flyweight) { + var index = inIndex != undefined ? inIndex : inEvent.index; + flyweight.performOnRow(index, function() { + if (!inControl.hasClass(inClass)) { + inControl.addClass(inClass); + } else { + inControl.setClassAttribute(inControl.getClassAttribute()); + } + }); + inControl.removeClass(inClass); + } + }, + // FIXME: dry + removeFlyweightClass: function(inControl, inClass, inEvent, inIndex) { + var flyweight = inEvent.flyweight; + if (flyweight) { + var index = inIndex != undefined ? inIndex : inEvent.index; + flyweight.performOnRow(index, function() { + if (!inControl.hasClass(inClass)) { + inControl.setClassAttribute(inControl.getClassAttribute()); + } else { + inControl.removeClass(inClass); + } + }); + } + } + } +});
\ No newline at end of file diff --git a/html/lib/onyx/source/Menu.js b/html/lib/onyx/source/Menu.js new file mode 100644 index 0000000..53353a0 --- /dev/null +++ b/html/lib/onyx/source/Menu.js @@ -0,0 +1,130 @@ +/** + _onyx.Menu_ is a subkind of <a href="#onyx.Popup">onyx.Popup</a> that + displays a list of <a href="#onyx.MenuItems">onyx.MenuItems</a> and looks + like a popup menu. It is meant to be used in conjunction with an + <a href="#onyx.MenuDecorator">onyx.MenuDecorator</a>. The decorator couples + the menu with an activating control, which may be a button or any other + control with an _onActivate_ event. When the control is activated, the menu + shows itself in the correct position relative to the activator. + + {kind: "onyx.MenuDecorator", components: [ + {content: "Show menu"}, + {kind: "onyx.Menu", components: [ + {content: "1"}, + {content: "2"}, + {classes: "onyx-menu-divider"}, + {content: "3"}, + ]} + ]} + + A menu may be floated by setting the _floating_ property to true. When a + menu is not floating (the default), it will scroll with the activating + control, but may be obscured by surrounding content with a higher z-index. + When floating, it will never be obscured, but it will not scroll with the + activating button. + */ +enyo.kind({ + name: "onyx.Menu", + kind: "onyx.Popup", + modal: true, + defaultKind: "onyx.MenuItem", + classes: "onyx-menu", + showOnTop: false, + handlers: { + onActivate: "itemActivated", + onRequestShowMenu: "requestMenuShow", + onRequestHideMenu: "requestHide" + }, + itemActivated: function(inSender, inEvent) { + inEvent.originator.setActive(false); + return true; + }, + showingChanged: function() { + this.inherited(arguments); + this.adjustPosition(true); + }, + requestMenuShow: function(inSender, inEvent) { + if (this.floating) { + var n = inEvent.activator.hasNode(); + if (n) { + var r = this.activatorOffset = this.getPageOffset(n); + this.applyPosition({top: r.top + (this.showOnTop ? 0 : r.height), left: r.left, width: r.width}); + } + } + this.show(); + return true; + }, + applyPosition: function(inRect) { + var s = "" + for (n in inRect) { + s += (n + ":" + inRect[n] + (isNaN(inRect[n]) ? "; " : "px; ")); + } + this.addStyles(s); + }, + getPageOffset: function(inNode) { + // getBoundingClientRect returns top/left values which are relative to the viewport and not absolute + var r = inNode.getBoundingClientRect(); + + // IE8 doesn't return window.page{X/Y}Offset & r.{height/width} + // FIXME: Perhaps use an alternate universal method instead of conditionals + var pageYOffset = (window.pageYOffset === undefined) ? document.documentElement.scrollTop : window.pageYOffset; + var pageXOffset = (window.pageXOffset === undefined) ? document.documentElement.scrollLeft : window.pageXOffset; + var rHeight = (r.height === undefined) ? (r.bottom - r.top) : r.height; + var rWidth = (r.width === undefined) ? (r.right - r.left) : r.width; + + return {top: r.top + pageYOffset, left: r.left + pageXOffset, height: rHeight, width: rWidth}; + }, + //* @protected + /* Adjusts the menu position to fit inside the current window size. + belowActivator determines whether to position the top of the menu below or on top of the activator + */ + adjustPosition: function(belowActivator) { + if (this.showing && this.hasNode()) { + this.removeClass("onyx-menu-up"); + + //reset the left position before we get the bounding rect for proper horizontal calculation + this.floating ? enyo.noop : this.applyPosition({left: "auto"}); + + var b = this.node.getBoundingClientRect(); + var bHeight = (b.height === undefined) ? (b.bottom - b.top) : b.height; + var innerHeight = (window.innerHeight === undefined) ? document.documentElement.clientHeight : window.innerHeight; + var innerWidth = (window.innerWidth === undefined) ? document.documentElement.clientWidth : window.innerWidth; + + //position the menu above the activator if it's getting cut off, but only if there's more room above + this.menuUp = (b.top + bHeight > innerHeight) && ((innerHeight - b.bottom) < (b.top - bHeight)); + this.addRemoveClass("onyx-menu-up", this.menuUp); + + //if floating, adjust the vertical positioning + if (this.floating) { + var r = this.activatorOffset; + //if the menu doesn't fit below the activator, move it up + if (this.menuUp) { + this.applyPosition({top: (r.top - bHeight + (this.showOnTop ? r.height : 0)), bottom: "auto"}); + } + else { + //if the top of the menu is above the top of the activator and there's room to move it down, do so + if ((b.top < r.top) && (r.top + (belowActivator ? r.height : 0) + bHeight < innerHeight)) + { + this.applyPosition({top: r.top + (this.showOnTop ? 0 : r.height), bottom: "auto"}); + } + } + } + + //adjust the horizontal positioning to keep the menu from being cut off on the right + if ((b.right) > innerWidth) { + if (this.floating){ + this.applyPosition({left: r.left-(b.left + b.width - innerWidth)}); + } else { + this.applyPosition({left: -(b.right - innerWidth)}); + } + } + } + }, + resizeHandler: function() { + this.inherited(arguments); + this.adjustPosition(true); + }, + requestHide: function(){ + this.setShowing(false); + } +});
\ No newline at end of file diff --git a/html/lib/onyx/source/MenuDecorator.js b/html/lib/onyx/source/MenuDecorator.js new file mode 100644 index 0000000..e348821 --- /dev/null +++ b/html/lib/onyx/source/MenuDecorator.js @@ -0,0 +1,60 @@ +/** + A control that activates an <a href="#onyx.Menu">onyx.Menu</a>. It loosely + couples the Menu with an activating control, which may be a button or any + other control with an _onActivate_ event. The decorator must surround both + the activating control and the menu itself. When the control is activated, + the menu shows itself in the correct position relative to the activator. + + {kind: "onyx.MenuDecorator", components: [ + {content: "Show menu"}, + {kind: "onyx.Menu", components: [ + {content: "1"}, + {content: "2"}, + {classes: "onyx-menu-divider"}, + {content: "3"}, + ]} + ]} + */ +enyo.kind({ + name: "onyx.MenuDecorator", + kind: "onyx.TooltipDecorator", + defaultKind: "onyx.Button", + // selection on ios prevents tap events, so avoid. + classes: "onyx-popup-decorator enyo-unselectable", + handlers: { + onActivate: "activated", + onHide: "menuHidden" + }, + activated: function(inSender, inEvent) { + this.requestHideTooltip(); + if (inEvent.originator.active) { + this.menuActive = true; + this.activator = inEvent.originator; + this.activator.addClass("active"); + this.requestShowMenu(); + } + }, + requestShowMenu: function() { + this.waterfallDown("onRequestShowMenu", {activator: this.activator}); + }, + requestHideMenu: function() { + this.waterfallDown("onRequestHideMenu"); + }, + menuHidden: function() { + this.menuActive = false; + if (this.activator) { + this.activator.setActive(false); + this.activator.removeClass("active"); + } + }, + enter: function(inSender) { + if (!this.menuActive) { + this.inherited(arguments); + } + }, + leave: function(inSender, inEvent) { + if (!this.menuActive) { + this.inherited(arguments); + } + } +});
\ No newline at end of file diff --git a/html/lib/onyx/source/MenuItem.js b/html/lib/onyx/source/MenuItem.js new file mode 100644 index 0000000..1272292 --- /dev/null +++ b/html/lib/onyx/source/MenuItem.js @@ -0,0 +1,41 @@ +/** + _MenuItem_ is a button styled to look like a menu item, intended for use in + an <a href="#onyx.Menu">onyx.Menu</a>. When the MenuItem is tapped, it + tells the menu to hide itself and sends an _onSelect_ event with its + content and a reference to itself. This event and its properties may be + received by a client application to determine which menu item was selected. + + enyo.kind({ + handlers: { + onSelect: "itemSelected" + }, + components: [ + {kind: "onyx.MenuDecorator", components: [ + {content: "Open Menu (floating)"}, + {kind: "onyx.Menu", floating: true, components: [ + {content: "1"}, + {content: "2"}, + {classes: "onyx-menu-divider"}, + {content: "3"}, + ]} + ]} + ], + itemSelected: function(inSender, inEvent) { + enyo.log("Menu Item Selected: " + inEvent.originator.content); + } + }) + */ +enyo.kind({ + name: "onyx.MenuItem", + kind: "enyo.Button", + tag: "div", + classes: "onyx-menu-item", + events: { + onSelect: "" + }, + tap: function(inSender) { + this.inherited(arguments); + this.bubble("onRequestHideMenu"); + this.doSelect({selected:this, content:this.content}); + } +});
\ No newline at end of file diff --git a/html/lib/onyx/source/MoreToolbar.js b/html/lib/onyx/source/MoreToolbar.js new file mode 100644 index 0000000..83afb68 --- /dev/null +++ b/html/lib/onyx/source/MoreToolbar.js @@ -0,0 +1,141 @@ +/** + onyx.MoreToolbar is a kind of <a href="#onyx.Toolbar">onyx.Toolbar</a> that can adapt to different screen sizes by moving overflowing controls and content into an <a href="#onyx.Menu">onyx.Menu</a> + + {kind: "onyx.MoreToolbar", components: [ + {content: "More Toolbar", unmoveable: true}, + {kind: "onyx.Button", content: "Alpha"}, + {kind: "onyx.Button", content: "Beta"}, + {kind: "onyx.Button", content: "Gamma", unmoveable: true}, + {kind: "onyx.Button", content: "Epsilon"} + ]}, + + A control can be forced to never move to the menu by setting the optional unmovable property to true (default is false). + + Optionally you can specify a class to be applied to the menu via the menuClass property. You can also specify a class for items that have been moved via the the movedClass property. +*/ + +enyo.kind({ + name: "onyx.MoreToolbar", + //* @public + classes: "onyx-toolbar onyx-more-toolbar", + //* style class to be applied to the menu + menuClass: "", + //* style class to be applied to individual controls moved from the toolbar to the menu + movedClass: "", + //* @protected + layoutKind: "FittableColumnsLayout", + noStretch: true, + handlers: { + onHide: "reflow" + }, + tools: [ + {name: "client", fit: true, classes: "onyx-toolbar-inline"}, + {name: "nard", kind: "onyx.MenuDecorator", showing: false, onActivate: "activated", components: [ + {kind: "onyx.IconButton", classes: "onyx-more-button"}, + {name: "menu", kind: "onyx.Menu", classes: "onyx-more-menu", prepend: true} + ]} + ], + initComponents: function() { + if(this.menuClass && this.menuClass.length>0 && !this.$.menu.hasClass(this.menuClass)) { + this.$.menu.addClass(this.menuClass); + } + this.createChrome(this.tools); + this.inherited(arguments); + }, + reflow: function() { + this.inherited(arguments); + if (this.isContentOverflowing()) { + this.$.nard.show(); + if (this.popItem()) { + this.reflow(); + } + } else if (this.tryPushItem()) { + this.reflow(); + } else if (!this.$.menu.children.length) { + this.$.nard.hide(); + this.$.menu.hide(); + } + }, + activated: function(inSender, inEvent) { + this.addRemoveClass("active",inEvent.originator.active); + }, + popItem: function() { + var c = this.findCollapsibleItem(); + if (c) { + //apply movedClass is needed + if(this.movedClass && this.movedClass.length>0 && !c.hasClass(this.movedClass)) { + c.addClass(this.movedClass); + } + this.$.menu.addChild(c); + var p = this.$.menu.hasNode(); + if (p && c.hasNode()) { + c.insertNodeInParent(p); + } + return true; + } + }, + pushItem: function() { + var c$ = this.$.menu.children; + var c = c$[0]; + if (c) { + //remove any applied movedClass + if(this.movedClass && this.movedClass.length>0 && c.hasClass(this.movedClass)) { + c.removeClass(this.movedClass); + } + this.$.client.addChild(c); + var p = this.$.client.hasNode(); + if (p && c.hasNode()) { + var nextChild = undefined; + var currIndex; + for(var i=0; i<this.$.client.children.length; i++) { + var curr = this.$.client.children[i]; + if(curr.toolbarIndex!=undefined && curr.toolbarIndex!=i) { + nextChild = curr; + currIndex = i; + break; + } + } + if(nextChild && nextChild.hasNode()) { + c.insertNodeInParent(p, nextChild.node); + var newChild = this.$.client.children.pop(); + this.$.client.children.splice(currIndex, 0, newChild); + } else { + c.appendNodeToParent(p); + } + } + return true; + } + }, + tryPushItem: function() { + if (this.pushItem()) { + if (!this.isContentOverflowing()) { + return true; + } else { + this.popItem(); + } + } + }, + isContentOverflowing: function() { + if (this.$.client.hasNode()) { + var c$ = this.$.client.children; + var n = c$[c$.length-1].hasNode(); + if(n) { + //Workaround: scrollWidth value not working in Firefox, so manually compute + //return (this.$.client.node.scrollWidth > this.$.client.node.clientWidth); + return ((n.offsetLeft + n.offsetWidth) > this.$.client.node.clientWidth); + } + } + }, + findCollapsibleItem: function() { + var c$ = this.$.client.children; + for (var i=c$.length-1; c=c$[i]; i--) { + if (!c.unmoveable) { + return c; + } else { + if(c.toolbarIndex==undefined) { + c.toolbarIndex = i; + } + } + } + } +}); diff --git a/html/lib/onyx/source/Picker.js b/html/lib/onyx/source/Picker.js new file mode 100644 index 0000000..7e758c0 --- /dev/null +++ b/html/lib/onyx/source/Picker.js @@ -0,0 +1,87 @@ +/** + _onyx.Picker_, a subkind of <a href="#onyx.Menu">onyx.Menu</a>, is used to + display a list of items that can be selected. It is meant to be used in + conjunction with an <a href="#onyx.PickerDecorator">onyx.PickerDecorator</a>. + The decorator loosely couples the Picker with an + <a href="#onyx.PickerButton">onyx.PickerButton</a>--a button that, when + tapped, shows the picker. Once an item is selected, the list of items closes, + but the item stays selected and the PickerButton displays the choice that + was made. + + To initialize the Picker to a particular value, set the _active_ property to + true for the item that should be selected. + + {kind: "onyx.PickerDecorator", components: [ + {}, //this uses the defaultKind property of PickerDecorator to inherit from PickerButton + {kind: "onyx.Picker", components: [ + {content: "Gmail", active: true}, + {content: "Yahoo"}, + {content: "Outlook"}, + {content: "Hotmail"} + ]} + ]} + + Each item in the list is an <a href="#onyx.MenuItem">onyx.MenuItem</a>, so + an _onSelect_ event with the item can be listened to by a client application + to determine which picker item was selected. + */ +enyo.kind({ + name: "onyx.Picker", + kind: "onyx.Menu", + classes: "onyx-picker enyo-unselectable", + published: { + selected: null, + maxHeight: "200px" + }, + events: { + onChange: "" + }, + components: [ + {name: "client", kind: "enyo.Scroller", strategyKind: "TouchScrollStrategy"} + ], + floating: true, + showOnTop: true, + scrollerName: "client", + create: function() { + this.inherited(arguments); + this.maxHeightChanged(); + }, + getScroller: function() { + return this.$[this.scrollerName]; + }, + maxHeightChanged: function() { + this.getScroller().setMaxHeight(this.maxHeight); + }, + showingChanged: function() { + this.getScroller().setShowing(this.showing); + this.inherited(arguments); + if (this.showing && this.selected) { + this.scrollToSelected(); + } + }, + scrollToSelected: function() { + this.getScroller().scrollToControl(this.selected, !this.menuUp); + }, + itemActivated: function(inSender, inEvent) { + this.processActivatedItem(inEvent.originator) + return this.inherited(arguments); + }, + processActivatedItem: function(inItem) { + if (inItem.active) { + this.setSelected(inItem); + } + }, + selectedChanged: function(inOld) { + if (inOld) { + inOld.removeClass("selected"); + } + if (this.selected) { + this.selected.addClass("selected"); + this.doChange({selected: this.selected, content: this.selected.content}); + }; + }, + resizeHandler: function() { + this.inherited(arguments); + this.adjustPosition(false); + } +}); diff --git a/html/lib/onyx/source/PickerButton.js b/html/lib/onyx/source/PickerButton.js new file mode 100644 index 0000000..c5f5730 --- /dev/null +++ b/html/lib/onyx/source/PickerButton.js @@ -0,0 +1,16 @@ +/** + _onyx.PickerButton_ is a button that, when tapped, shows an + <a href="#onyx.Picker">onyx.Picker</a>. Once an item is selected, the list + of items closes, but the item stays selected and the PickerButton displays + the choice that was made. + */ +enyo.kind({ + name: "onyx.PickerButton", + kind: "onyx.Button", + handlers: { + onChange: "change" + }, + change: function(inSender, inEvent) { + this.setContent(inEvent.content); + } +});
\ No newline at end of file diff --git a/html/lib/onyx/source/PickerDecorator.js b/html/lib/onyx/source/PickerDecorator.js new file mode 100644 index 0000000..bf16109 --- /dev/null +++ b/html/lib/onyx/source/PickerDecorator.js @@ -0,0 +1,30 @@ +/** + A control that activates an <a href="#onyx.Picker">onyx.Picker</a>. It + loosely couples the Picker with an activating + <a href="#onyx.PickerButton">onyx.PickerButton</a>. The decorator must + surround both the activating button and the picker itself. When the button + is activated, the picker shows itself in the correct position relative to + the activator. + + {kind: "onyx.PickerDecorator", components: [ + {}, //this uses the defaultKind property of PickerDecorator to inherit from PickerButton + {kind: "onyx.Picker", components: [ + {content: "Gmail", active: true}, + {content: "Yahoo"}, + {content: "Outlook"}, + {content: "Hotmail"} + ]} + ]} + */ +enyo.kind({ + name: "onyx.PickerDecorator", + kind: "onyx.MenuDecorator", + classes: "onyx-picker-decorator", + defaultKind: "onyx.PickerButton", + handlers: { + onChange: "change" + }, + change: function(inSender, inEvent) { + this.waterfallDown("onChange", inEvent); + } +}); diff --git a/html/lib/onyx/source/Popup.js b/html/lib/onyx/source/Popup.js new file mode 100644 index 0000000..105431a --- /dev/null +++ b/html/lib/onyx/source/Popup.js @@ -0,0 +1,87 @@ +/** + An enhanced popup with built-in scrim and z-index handling. To avoid + obscuring popup contents, scrims require the dialog to be floating; + otherwise, they won't render. Modal popups get a transparent scrim by + default, unless the modal popup isn't floating. To get a translucent scrim + when modal, specify _scrim: true, scrimWhenModal: false_. +*/ +enyo.kind({ + name: "onyx.Popup", + kind: "Popup", + classes: "onyx-popup", + published: { + /** + Determines whether a scrim will appear when the dialog is modal. + Note that modal scrims are transparent, so you won't see them. + */ + scrimWhenModal: true, + //* Determines whether or not to display a scrim. Only displays scrims + //* when floating. + scrim: false, + /** + Optional class name to apply to the scrim. Be aware that the scrim + is a singleton and you will be modifying the scrim instance used for + other popups. + */ + scrimClassName: "" + }, + //* @protected + statics: { count: 0 }, + defaultZ: 120, + showingChanged: function() { + if(this.showing) { + onyx.Popup.count++; + this.applyZIndex(); + } + else { + if(onyx.Popup.count > 0) { + onyx.Popup.count--; + } + } + this.showHideScrim(this.showing); + this.inherited(arguments); + }, + showHideScrim: function(inShow) { + if (this.floating && (this.scrim || (this.modal && this.scrimWhenModal))) { + var scrim = this.getScrim(); + if (inShow) { + // move scrim to just under the popup to obscure rest of screen + var i = this.getScrimZIndex(); + this._scrimZ = i; + scrim.showAtZIndex(i); + } else { + scrim.hideAtZIndex(this._scrimZ); + } + enyo.call(scrim, "addRemoveClass", [this.scrimClassName, scrim.showing]); + } + }, + getScrimZIndex: function() { + // Position scrim directly below popup + return this.findZIndex()-1; + }, + getScrim: function() { + // show a transparent scrim for modal popups if scrimWhenModal is true + // if scrim is true, then show a regular scrim. + if (this.modal && this.scrimWhenModal && !this.scrim) { + return onyx.scrimTransparent.make(); + } + return onyx.scrim.make(); + }, + applyZIndex: function() { + // Adjust the zIndex so that popups will properly stack on each other. + this._zIndex = onyx.Popup.count * 2 + this.findZIndex() + 1; + // leave room for scrim + this.applyStyle("z-index", this._zIndex); + }, + findZIndex: function() { + // a default z value + var z = this.defaultZ; + if (this._zIndex) { + z = this._zIndex; + } else if (this.hasNode()) { + // Re-use existing zIndex if it has one + z = Number(enyo.dom.getComputedStyleValue(this.node, "z-index")) || z; + } + return (this._zIndex = z); + } +});
\ No newline at end of file diff --git a/html/lib/onyx/source/ProgressBar.js b/html/lib/onyx/source/ProgressBar.js new file mode 100644 index 0000000..5a41fac --- /dev/null +++ b/html/lib/onyx/source/ProgressBar.js @@ -0,0 +1,92 @@ +/** + A control that shows the current progress of a process in a horizontal bar. + + {kind: "onyx.ProgressBar", progress: 10} + + To animate progress changes, call the *animateProgressTo* method: + + this.$.progressBar.animateProgressTo(50); + + You may customize the color of the bar by applying a style via the + *barClasses* property, e.g.: + + {kind: "onyx.ProgressBar", barClasses: "onyx-dark"} + + When the *showStripes* property is true (the default), stripes are shown in + the progress bar; when *animateStripes* is true (also the default), these + stripes are animated. The animated stripes use CSS3 gradients and animation + to produce the effects. In browsers that don't support these features, the + effects will not be visible. +*/ +enyo.kind({ + name: "onyx.ProgressBar", + classes: "onyx-progress-bar", + published: { + progress: 0, + min: 0, + max: 100, + barClasses: "", + showStripes: true, + animateStripes: true + }, + events: { + onAnimateProgressFinish: "" + }, + components: [ + {name: "progressAnimator", kind: "Animator", onStep: "progressAnimatorStep", onEnd: "progressAnimatorComplete"}, + {name: "bar", classes: "onyx-progress-bar-bar"} + ], + //* @protected + create: function() { + this.inherited(arguments); + this.progressChanged(); + this.barClassesChanged(); + this.showStripesChanged(); + this.animateStripesChanged(); + }, + barClassesChanged: function(inOld) { + this.$.bar.removeClass(inOld); + this.$.bar.addClass(this.barClasses); + }, + showStripesChanged: function() { + this.$.bar.addRemoveClass("striped", this.showStripes); + }, + animateStripesChanged: function() { + this.$.bar.addRemoveClass("animated", this.animateStripes); + }, + progressChanged: function() { + this.progress = this.clampValue(this.min, this.max, this.progress); + var p = this.calcPercent(this.progress); + this.updateBarPosition(p); + }, + clampValue: function(inMin, inMax, inValue) { + return Math.max(inMin, Math.min(inValue, inMax)); + }, + calcRatio: function(inValue) { + return (inValue - this.min) / (this.max - this.min); + }, + calcPercent: function(inValue) { + return this.calcRatio(inValue) * 100; + }, + updateBarPosition: function(inPercent) { + this.$.bar.applyStyle("width", inPercent + "%"); + }, + //* @public + //* Animates progress to the given value. + animateProgressTo: function(inValue) { + this.$.progressAnimator.play({ + startValue: this.progress, + endValue: inValue, + node: this.hasNode() + }); + }, + //* @protected + progressAnimatorStep: function(inSender) { + this.setProgress(inSender.value); + return true; + }, + progressAnimatorComplete: function(inSender) { + this.doAnimateProgressFinish(inSender); + return true; + } +});
\ No newline at end of file diff --git a/html/lib/onyx/source/ProgressButton.js b/html/lib/onyx/source/ProgressButton.js new file mode 100644 index 0000000..05779e0 --- /dev/null +++ b/html/lib/onyx/source/ProgressButton.js @@ -0,0 +1,28 @@ +/** + A progress bar that can have controls inside of it and has a cancel button on the right. + + {kind: "onyx.ProgressButton"}, + {kind: "onyx.ProgressButton", barClasses: "onyx-light", progress: 20, components: [ + {content: "0"}, + {content: "100", style: "float: right;"} + ]} + +*/ +enyo.kind({ + name: "onyx.ProgressButton", + kind: "onyx.ProgressBar", + classes: "onyx-progress-button", + events: { + onCancel: "" + }, + components: [ + {name: "progressAnimator", kind: "Animator", onStep: "progressAnimatorStep", onEnd: "progressAnimatorComplete"}, + {name: "bar", classes: "onyx-progress-bar-bar onyx-progress-button-bar"}, + {name: "client", classes: "onyx-progress-button-client"}, + {kind: "onyx.Icon", src: "$lib/onyx/images/progress-button-cancel.png", classes: "onyx-progress-button-icon", ontap: "cancelTap"} + ], + //* @protected + cancelTap: function() { + this.doCancel(); + } +}); diff --git a/html/lib/onyx/source/RadioButton.js b/html/lib/onyx/source/RadioButton.js new file mode 100644 index 0000000..972f23f --- /dev/null +++ b/html/lib/onyx/source/RadioButton.js @@ -0,0 +1,8 @@ +/** + A radio button designed for use within an <a href="#onyx.RadioGroup">onyx.RadioGroup</a>. +*/ +enyo.kind({ + name: "onyx.RadioButton", + kind: "Button", + classes: "onyx-radiobutton" +}); diff --git a/html/lib/onyx/source/RadioGroup.js b/html/lib/onyx/source/RadioGroup.js new file mode 100644 index 0000000..50f0124 --- /dev/null +++ b/html/lib/onyx/source/RadioGroup.js @@ -0,0 +1,18 @@ +/** + A group of <a href="#onyx.RadioButton">onyx.RadioButton</a> objects + laid out horizontally. Within the same radio group, tapping on one radio button + will release any previously tapped radio button. + + {kind: "onyx.RadioGroup", components: [ + {content: "foo", active: true}, + {content: "bar"}, + {content: "baz"} + ]} +*/ +enyo.kind({ + name: "onyx.RadioGroup", + kind: "Group", + highlander: true, + defaultKind: "onyx.RadioButton" +}); + diff --git a/html/lib/onyx/source/RichText.js b/html/lib/onyx/source/RichText.js new file mode 100644 index 0000000..8a7f388 --- /dev/null +++ b/html/lib/onyx/source/RichText.js @@ -0,0 +1,22 @@ +/** + An onyx-styled RichText control. In addition to the features of + <a href="#enyo.RichText">enyo.RichText</a>, onyx.RichText has a + *defaultFocus* property that can be set to true to focus the RichText when + it's rendered. Only one RichText should be set as the *defaultFocus*. + + Typically, an onyx.RichText is placed inside an + <a href="#onyx.InputDecorator">onyx.InputDecorator</a>, which provides + styling, e.g.: + + {kind: "onyx.InputDecorator", components: [ + {kind: "onyx.RichText", style: "width: 100px;", onchange: "inputChange"} + ]} + + Note that RichTexts must be explicitly sized for width. In addition, + RichText is not supported on Android < 3. +*/ +enyo.kind({ + name: "onyx.RichText", + kind: "enyo.RichText", + classes: "onyx-richtext" +}); diff --git a/html/lib/onyx/source/Scrim.js b/html/lib/onyx/source/Scrim.js new file mode 100644 index 0000000..e2cdb29 --- /dev/null +++ b/html/lib/onyx/source/Scrim.js @@ -0,0 +1,93 @@ +enyo.kind({ + name: "onyx.Scrim", + showing: false, + classes: "onyx-scrim enyo-fit", + floating: false, + //* @protected + create: function() { + this.inherited(arguments); + this.zStack = []; + if (this.floating) { + this.setParent(enyo.floatingLayer); + } + }, + showingChanged: function() { + // auto render when shown. + if (this.floating && this.showing && !this.hasNode()) { + this.render(); + } + this.inherited(arguments); + //this.addRemoveClass(this.showingClassName, this.showing); + }, + //* @protected + addZIndex: function(inZIndex) { + if (enyo.indexOf(inZIndex, this.zStack) < 0) { + this.zStack.push(inZIndex); + } + }, + removeZIndex: function(inControl) { + enyo.remove(inControl, this.zStack); + }, + //* @public + //* Show Scrim at the specified ZIndex. Note: If you use showAtZIndex you + //* must call hideAtZIndex to properly unwind the zIndex stack + showAtZIndex: function(inZIndex) { + this.addZIndex(inZIndex); + if (inZIndex !== undefined) { + this.setZIndex(inZIndex); + } + this.show(); + }, + //* Hide Scrim at the specified ZIndex + hideAtZIndex: function(inZIndex) { + this.removeZIndex(inZIndex); + if (!this.zStack.length) { + this.hide(); + } else { + var z = this.zStack[this.zStack.length-1]; + this.setZIndex(z); + } + }, + //* @protected + // Set scrim to show at `inZIndex` + setZIndex: function(inZIndex) { + this.zIndex = inZIndex; + this.applyStyle("z-index", inZIndex); + }, + make: function() { + return this; + } +}); + +//* @protected +// +// Scrim singleton exposing a subset of Scrim API. +// is replaced with a proper enyo.Scrim instance. +// +enyo.kind({ + name: "onyx.scrimSingleton", + kind: null, + constructor: function(inName, inProps) { + this.instanceName = inName; + enyo.setObject(this.instanceName, this); + this.props = inProps || {}; + }, + make: function() { + var s = new onyx.Scrim(this.props); + enyo.setObject(this.instanceName, s); + return s; + }, + showAtZIndex: function(inZIndex) { + var s = this.make(); + s.showAtZIndex(inZIndex); + }, + // in case somebody does this out of order + hideAtZIndex: enyo.nop, + show: function() { + var s = this.make(); + s.show(); + } +}); + +new onyx.scrimSingleton("onyx.scrim", {floating: true, classes: "onyx-scrim-translucent"}); +new onyx.scrimSingleton("onyx.scrimTransparent", {floating: true, classes: "onyx-scrim-transparent"}); diff --git a/html/lib/onyx/source/Slider.js b/html/lib/onyx/source/Slider.js new file mode 100644 index 0000000..037adb0 --- /dev/null +++ b/html/lib/onyx/source/Slider.js @@ -0,0 +1,109 @@ +/** + A control that presents a range of selection options in the form of a + horizontal slider with a control knob. The knob may be tapped and dragged + to the desired location. + + {kind: "onyx.Slider", value: 30} + + The *onChanging* event is fired when dragging the control knob. + The *onChange* event is fired when the position is set, either by finishing + a drag or by tapping the bar. +*/ +enyo.kind({ + name: "onyx.Slider", + kind: "onyx.ProgressBar", + classes: "onyx-slider", + published: { + value: 0, + lockBar: true, + tappable: true + }, + events: { + onChange: "", + onChanging: "", + onAnimateFinish: "" + }, + showStripes: false, + //* @protected + handlers: { + ondragstart: "dragstart", + ondrag: "drag", + ondragfinish: "dragfinish" + }, + moreComponents: [ + {kind: "Animator", onStep: "animatorStep", onEnd: "animatorComplete"}, + {classes: "onyx-slider-taparea"}, + {name: "knob", classes: "onyx-slider-knob"} + ], + create: function() { + this.inherited(arguments); + this.createComponents(this.moreComponents); + this.valueChanged(); + }, + valueChanged: function() { + this.value = this.clampValue(this.min, this.max, this.value); + var p = this.calcPercent(this.value); + this.updateKnobPosition(p); + if (this.lockBar) { + this.setProgress(this.value); + } + }, + updateKnobPosition: function(inPercent) { + this.$.knob.applyStyle("left", inPercent + "%"); + }, + calcKnobPosition: function(inEvent) { + var x = inEvent.clientX - this.hasNode().getBoundingClientRect().left; + return (x / this.getBounds().width) * (this.max - this.min) + this.min; + }, + dragstart: function(inSender, inEvent) { + if (inEvent.horizontal) { + inEvent.preventDefault(); + this.dragging = true; + return true; + } + }, + drag: function(inSender, inEvent) { + if (this.dragging) { + var v = this.calcKnobPosition(inEvent); + this.setValue(v); + this.doChanging({value: this.value}); + return true; + } + }, + dragfinish: function(inSender, inEvent) { + this.dragging = false; + inEvent.preventTap(); + this.doChange({value: this.value}); + return true; + }, + tap: function(inSender, inEvent) { + if (this.tappable) { + var v = this.calcKnobPosition(inEvent); + this.tapped = true; + this.animateTo(v); + return true; + } + }, + //* @public + //* Animates to the given value. + animateTo: function(inValue) { + this.$.animator.play({ + startValue: this.value, + endValue: inValue, + node: this.hasNode() + }); + }, + //* @protected + animatorStep: function(inSender) { + this.setValue(inSender.value); + return true; + }, + animatorComplete: function(inSender) { + if (this.tapped) { + this.tapped = false; + this.doChange({value: this.value}); + } + this.doAnimateFinish(inSender); + return true; + } +});
\ No newline at end of file diff --git a/html/lib/onyx/source/Spinner.js b/html/lib/onyx/source/Spinner.js new file mode 100644 index 0000000..3bb923e --- /dev/null +++ b/html/lib/onyx/source/Spinner.js @@ -0,0 +1,31 @@ +/** + A control that displays a spinner animation to indicate that activity is + taking place. By default, onyx.Spinner will display a light spinner, + suitable for displaying against a dark background. To render a dark spinner + to be shown on a lighter background, add the "onyx-light" class to the + spinner: + + {kind: "onyx.Spinner", classes: "onyx-light"} + + Typically, a spinner is shown to indicate activity and hidden to indicate + that the activity has ended. The spinner animation will automatically start + when a spinner is shown. If you wish, you may control the animation directly + by calling the *start*, *stop*, and *toggle* methods. +*/ +enyo.kind({ + name: "onyx.Spinner", + classes: "onyx-spinner", + //* @public + //* Stops the spinner animation. + stop: function() { + this.setShowing(false); + }, + //* Starts the spinner animation. + start: function() { + this.setShowing(true); + }, + //* Toggles the spinner animation on or off. + toggle: function() { + this.setShowing(!this.getShowing()); + } +}); diff --git a/html/lib/onyx/source/SwipeableItem.js b/html/lib/onyx/source/SwipeableItem.js new file mode 100644 index 0000000..efa8811 --- /dev/null +++ b/html/lib/onyx/source/SwipeableItem.js @@ -0,0 +1,142 @@ +/** + An item that slides to the left to reveal Delete and Cancel buttons. Pressing the Cancel button will slide the item back into place and generate + an onCancel event. Pressing the Delete button will immediately position the content back in place and generate an onDelete event. + + A SwipeableItem contains methods for styling its content and these should be used to effect styling on the row content. Add css classes via + the contentClasses property and the methods add|remove|has|addRemove<ContentClass>. Alter css styles via the applyContentStyle method. + + {kind: "onyx.SwipeableItem", onCancel: "canceled", onDelete: "deleted"} + +*/ +enyo.kind({ + name: "onyx.SwipeableItem", + kind: "onyx.Item", + classes: "onyx-swipeable-item", + published: { + //* Add custom CSS classes via the contentClasses property to style the SwipeableItem's content + contentClasses: "", + //* Set to true to prevent a drag from bubbling beyond the SwipeableItem. + preventDragPropagation: false + }, + defaultContentClasses: "onyx-swipeable-item-content", + handlers: { + ondown: "down" + }, + events: { + /** + Fires when a SwipeableItem's delete button has been triggered + This event does not fire when programatically deleting a SwipeableItem instance + */ + onDelete: "", + /** + Fires when a SwipeableItem's cancel button has been triggered + This event does not fire when selecting a second SwipeableItem, causing the first to cancel itself programatically + */ + onCancel: "" + }, + components: [ + {name: "client", kind: "Slideable", min: -100, unit: "%", ondragstart: "clientDragStart"}, + {name: "confirm", kind: "onyx.Toolbar", canGenerate: false, classes: "onyx-swipeable-item-confirm enyo-fit", style: "text-align: center;", ontap: "confirmTap", components: [ + {kind: "onyx.Button", content: "Delete", ontap: "deleteTap"}, + {kind: "onyx.Button", content: "Cancel", ontap: "cancelTap"} + ]} + ], + //* @protected + swiping: -1, + create: function() { + this.inherited(arguments); + this.contentClassesChanged(); + }, + //* @public + //* Resets the sliding position of the SwipeableItem currently displaying confirmation options + reset: function() { + this.applyStyle("position", null); + this.$.confirm.setShowing(false); + // stop animating if we reset. + this.$.client.getAnimator().stop(); + this.$.client.setValue(0); + }, + //* @protected + contentClassesChanged: function() { + this.$.client.setClasses(this.defaultContentClasses + " " + this.contentClasses); + }, + //* @public + //* Applies a single style value to the SwipeableItem + applyContentStyle: function(inStyle, inValue) { + this.$.client.applyStyle(inStyle, inValue); + }, + //* Applies a CSS class to the SwipeableItem's contentClasses + addContentClass: function(inClass) { + this.$.client.addClass(inClass); + }, + //* Removes a CSS class to the SwipeableItem's contentClasses + removeContentClass: function(inClass) { + this.$.client.removeClass(inClass); + }, + //* Returns true if the _class_ attribute contains a substring matching _inClass_ + hasContentClass: function(inClass) { + return this.$.client.hasClass(inClass); + }, + /** + Adds or removes substring _inClass_ from the _class_ attribute of this object based + on the value of _inTrueToAdd_. + + If _inTrueToAdd_ is truthy, then _inClass_ is added; otherwise, _inClass_ is removed. + */ + addRemoveContentClass: function(inClass, inAdd) { + this.$.client.addRemoveClass(inClass, inAdd); + }, + //* @protected + generateHtml: function() { + this.reset(); + return this.inherited(arguments); + }, + contentChanged: function() { + this.$.client.setContent(this.content); + }, + confirmTap: function() { + return true; + }, + deleteTap: function(inSender, inEvent) { + this.reset(); + this.doDelete(); + return true; + }, + cancelTap: function(inSender, inEvent) { + this.$.client.animateToMax(); + this.doCancel(); + return true; + }, + down: function(inSender, inEvent) { + // on down, remove swiping state + var last = this.swiping; + this.swiping = inEvent.index; + var flyweight = inEvent.flyweight; + if (this.swiping != last && last >= 0 && flyweight) { + flyweight.performOnRow(last, enyo.bind(this, function() { + this.reset(); + })); + } + }, + clientDragStart: function(inSender, inEvent) { + if (inSender.dragging) { + var flyweight = inEvent.flyweight; + if (flyweight) { + flyweight.prepareRow(inEvent.index); + // if needed, render confirm. + // NOTE: position relative so can enyo-fit confirm; apply only when confirm needed + // because it's a known rendering slowdown. + this.applyStyle("position", "relative"); + this.$.confirm.setShowing(true); + if (!this.$.confirm.hasNode()) { + // NOTE: prepend so Slideable will be on top. + this.$.confirm.prepend = true; + this.$.confirm.render(); + this.$.confirm.prepend = false; + } + // note: can't teardown. + } + } + return this.preventDragPropagation; + } +});
\ No newline at end of file diff --git a/html/lib/onyx/source/TabPanels.js b/html/lib/onyx/source/TabPanels.js new file mode 100644 index 0000000..ae4d6da --- /dev/null +++ b/html/lib/onyx/source/TabPanels.js @@ -0,0 +1,128 @@ +/** +enyo.TabPanels is a subkind of <a href="#enyo.Panels">enyo.Panels</a> that +displays a set of tabs, which allow navigation between the individual panels. +Unlike enyo.Panels, by default, the user cannot drag between the panels of a +TabPanels. This behavior can be enabled by setting *draggable* to true. + +Here's an example: + + enyo.kind({ + name: "App", + kind: "TabPanels", + fit: true, + components: [ + {kind: "MyStartPanel"}, + {kind: "MyMiddlePanel"}, + {kind: "MyLastPanel"} + ] + }); + new App().write(); +*/ +enyo.kind({ + name: "enyo.TabPanels", + kind: "Panels", + //* @protected + draggable: false, + tabTools: [ + {name: "scroller", kind: "Scroller", maxHeight: "100px", strategyKind: "TranslateScrollStrategy", thumb: false, vertical: "hidden", horizontal: "auto", components: [ + {name: "tabs", kind: "onyx.RadioGroup", style: "text-align: left; white-space: nowrap", controlClasses: "onyx-tabbutton", onActivate: "tabActivate"} + ]}, + {name: "client", fit: true, kind: "Panels", classes: "enyo-tab-panels", onTransitionStart: "clientTransitionStart"} + ], + create: function() { + this.inherited(arguments); + this.$.client.getPanels = enyo.bind(this, "getClientPanels"); + this.draggableChanged(); + this.animateChanged(); + this.wrapChanged(); + }, + initComponents: function() { + this.createChrome(this.tabTools); + this.inherited(arguments); + }, + getClientPanels: function() { + return this.getPanels(); + }, + flow: function() { + this.inherited(arguments); + this.$.client.flow(); + }, + reflow: function() { + this.inherited(arguments); + this.$.client.reflow(); + }, + draggableChanged: function() { + this.$.client.setDraggable(this.draggable); + this.draggable = false; + }, + animateChanged: function() { + this.$.client.setAnimate(this.animate); + this.animate = false; + }, + wrapChanged: function() { + this.$.client.setWrap(this.wrap); + this.wrap = false; + }, + isPanel: function(inControl) { + var n = inControl.name; + return !(n == "tabs" || n == "client" || n == "scroller"); + }, + addControl: function(inControl) { + this.inherited(arguments); + if (this.isPanel(inControl)) { + var c = inControl.caption || ("Tab " + this.$.tabs.controls.length); + var t = inControl._tab = this.$.tabs.createComponent({content: c}); + if (this.hasNode()) { + t.render(); + } + } + }, + removeControl: function(inControl) { + if (this.isPanel(inControl) && inControl._tab) { + inControl._tab.destroy(); + } + this.inherited(arguments); + }, + layoutKindChanged: function() { + if (!this.layout) { + this.layout = enyo.createFromKind("FittableRowsLayout", this); + } + this.$.client.setLayoutKind(this.layoutKind); + }, + indexChanged: function() { + // FIXME: initialization order problem + if (this.$.client.layout) { + this.$.client.setIndex(this.index); + } + this.index = this.$.client.getIndex(); + }, + tabActivate: function(inSender, inEvent) { + if (this.hasNode()) { + if (inEvent.originator.active) { + var i = inEvent.originator.indexInContainer(); + if (this.getIndex() != i) { + this.setIndex(i); + } + } + } + }, + clientTransitionStart: function(inSender, inEvent) { + var i = inEvent.toIndex; + var t = this.$.tabs.getClientControls()[i]; + if (t && t.hasNode()) { + this.$.tabs.setActive(t); + var tn = t.node; + var tl = tn.offsetLeft; + var tr = tl + tn.offsetWidth; + var sb = this.$.scroller.getScrollBounds(); + if (tr < sb.left || tr > sb.left + sb.clientWidth) { + this.$.scroller.scrollToControl(t); + } + } + return true; + }, + startTransition: enyo.nop, + finishTransition: enyo.nop, + stepTransition: enyo.nop, + refresh: enyo.nop +});
\ No newline at end of file diff --git a/html/lib/onyx/source/TextArea.js b/html/lib/onyx/source/TextArea.js new file mode 100644 index 0000000..0a50808 --- /dev/null +++ b/html/lib/onyx/source/TextArea.js @@ -0,0 +1,19 @@ +/** + An onyx-styled TextArea control. In addition to the features of + <a href="#enyo.TextArea">enyo.TextArea</a>, onyx.TextArea has a + *defaultFocus* property that can be set to true to focus the TextArea when + it's rendered. Only one TextArea should be set as the *defaultFocus*. + + Typically, an onyx.TextArea is placed inside an + <a href="#onyx.InputDecorator">onyx.InputDecorator</a>, which provides + styling, e.g.: + + {kind: "onyx.InputDecorator", components: [ + {kind: "onyx.TextArea", onchange: "inputChange"} + ]} +*/ +enyo.kind({ + name: "onyx.TextArea", + kind: "enyo.TextArea", + classes: "onyx-textarea" +}); diff --git a/html/lib/onyx/source/ToggleButton.js b/html/lib/onyx/source/ToggleButton.js new file mode 100644 index 0000000..cbc5fa3 --- /dev/null +++ b/html/lib/onyx/source/ToggleButton.js @@ -0,0 +1,114 @@ +/** + A control that looks like a switch with labels for two states. Each time a ToggleButton is tapped, + it switches its value and fires an onChange event. + + {kind: "onyx.ToggleButton", onContent: "foo", offContent: "bar", onChange: "buttonToggle"} + + buttonToggle: function(inSender, inEvent) { + this.log("Toggled to value " + inEvent.value); + } + + To find out the value of the button, use getValue: + + queryToggleValue: function() { + return this.$.toggleButton.getValue(); + } + + The color of the toggle button can be customized by applying a background color: + + {kind: "onyx.ToggleButton", style: "background-color: #35A8EE;"} +*/ +enyo.kind({ + name: "onyx.ToggleButton", + classes: "onyx-toggle-button", + published: { + active: false, + value: false, + onContent: "On", + offContent: "Off", + disabled: false + }, + events: { + /** + The onChange event fires when the user changes the value of the toggle button, + but not when the value is changed programmatically. + */ + onChange: "" + }, + //* @protected + handlers: { + ondragstart: "dragstart", + ondrag: "drag", + ondragfinish: "dragfinish" + }, + components: [ + {name: "contentOn", classes: "onyx-toggle-content on"}, + {name: "contentOff", classes: "onyx-toggle-content off"}, + {classes: "onyx-toggle-button-knob"} + ], + create: function() { + this.inherited(arguments); + this.value = Boolean(this.value || this.active); + this.onContentChanged(); + this.offContentChanged(); + this.disabledChanged(); + }, + rendered: function() { + this.inherited(arguments); + this.valueChanged(); + }, + valueChanged: function() { + this.addRemoveClass("off", !this.value); + this.$.contentOn.setShowing(this.value); + this.$.contentOff.setShowing(!this.value); + this.setActive(this.value); + }, + activeChanged: function() { + this.setValue(this.active); + this.bubble("onActivate"); + }, + onContentChanged: function() { + this.$.contentOn.setContent(this.onContent || ""); + this.$.contentOn.addRemoveClass("empty", !this.onContent); + }, + offContentChanged: function() { + this.$.contentOff.setContent(this.offContent || ""); + this.$.contentOff.addRemoveClass("empty", !this.onContent); + }, + disabledChanged: function() { + this.addRemoveClass("disabled", this.disabled); + }, + updateValue: function(inValue) { + if (!this.disabled) { + this.setValue(inValue); + this.doChange({value: this.value}); + } + }, + tap: function() { + this.updateValue(!this.value); + }, + dragstart: function(inSender, inEvent) { + if (inEvent.horizontal) { + inEvent.preventDefault(); + this.dragging = true; + this.dragged = false; + return true; + } + }, + drag: function(inSender, inEvent) { + if (this.dragging) { + var d = inEvent.dx; + if (Math.abs(d) > 10) { + this.updateValue(d > 0); + this.dragged = true; + } + return true; + } + }, + dragfinish: function(inSender, inEvent) { + this.dragging = false; + if (this.dragged) { + inEvent.preventTap(); + } + } +}) diff --git a/html/lib/onyx/source/Toolbar.js b/html/lib/onyx/source/Toolbar.js new file mode 100644 index 0000000..d28e18b --- /dev/null +++ b/html/lib/onyx/source/Toolbar.js @@ -0,0 +1,26 @@ +/** + A horizontal bar containing controls used to perform common UI actions. + + A Toolbar customizes the styling of the controls it hosts, including + buttons, icons, and inputs. + + {kind: "onyx.Toolbar", components: [ + {kind: "onyx.Button", content: "Favorites"}, + {kind: "onyx.InputDecorator", components: [ + {kind: "onyx.Input", placeholder: "Enter a search term..."} + ]}, + {kind: "onyx.IconButton", src: "go.png"} + ]} + + Note that it's possible to style a set of controls to look like they are in + a toolbar without having the container itself look like a toolbar. To do so, + apply the "onyx-toolbar-inline" CSS class to the container that houses the + controls. +*/ +enyo.kind({ + name: "onyx.Toolbar", + classes: "onyx onyx-toolbar onyx-toolbar-inline", + handlers: { + onHide: "render" + } +});
\ No newline at end of file diff --git a/html/lib/onyx/source/Tooltip.js b/html/lib/onyx/source/Tooltip.js new file mode 100644 index 0000000..9cbe4e4 --- /dev/null +++ b/html/lib/onyx/source/Tooltip.js @@ -0,0 +1,80 @@ +/** + _onyx.Tooltip_ is a kind of <a href="#onyx.Popup">onyx.Popup</a> that works + with an <a href="#onyx.TooltipDecorator">onyx.TooltipDecorator</a>. It + automatically displays a tooltip when the user hovers over the decorator. + The tooltip is positioned around the decorator where there is available + window space. + + {kind: "onyx.TooltipDecorator", components: [ + {kind: "onyx.Button", content: "Tooltip"}, + {kind: "onyx.Tooltip", content: "I'm a tooltip for a button."} + ]} + + You may manually display the tooltip by calling its _show_ method. +*/ +enyo.kind({ + name: "onyx.Tooltip", + kind: "onyx.Popup", + classes: "onyx-tooltip below left-arrow", + autoDismiss: false, + showDelay: 500, + defaultLeft: -6, //default margin-left value + handlers: { + onRequestShowTooltip: "requestShow", + onRequestHideTooltip: "requestHide" + }, + requestShow: function() { + this.showJob = setTimeout(enyo.bind(this, "show"), this.showDelay); + return true; + }, + cancelShow: function() { + clearTimeout(this.showJob); + }, + requestHide: function() { + this.cancelShow(); + return this.inherited(arguments); + }, + showingChanged: function() { + this.cancelShow(); + this.adjustPosition(true); + this.inherited(arguments); + }, + applyPosition: function(inRect) { + var s = "" + for (n in inRect) { + s += (n + ":" + inRect[n] + (isNaN(inRect[n]) ? "; " : "px; ")); + } + this.addStyles(s); + }, + adjustPosition: function(belowActivator) { + if (this.showing && this.hasNode()) { + var b = this.node.getBoundingClientRect(); + + //when the tooltip bottom goes below the window height move it above the decorator + if (b.top + b.height > window.innerHeight) { + this.addRemoveClass("below", false); + this.addRemoveClass("above", true); + } else { + this.addRemoveClass("above", false); + this.addRemoveClass("below", true); + } + + //when the tooltip's right edge is out of the window, align it's right edge with the decorator left edge (approx) + if (b.left + b.width > window.innerWidth){ + this.applyPosition({'margin-left': -b.width, bottom: "auto"}); + //use the right-arrow + this.addRemoveClass("left-arrow", false); + this.addRemoveClass("right-arrow", true); + } + } + }, + resizeHandler: function() { + //reset the tooltip to align it's left edge with the decorator + this.applyPosition({'margin-left': this.defaultLeft, bottom: "auto"}); + this.addRemoveClass("left-arrow", true); + this.addRemoveClass("right-arrow", false); + + this.adjustPosition(true); + this.inherited(arguments); + } +}); diff --git a/html/lib/onyx/source/TooltipDecorator.js b/html/lib/onyx/source/TooltipDecorator.js new file mode 100644 index 0000000..a97167d --- /dev/null +++ b/html/lib/onyx/source/TooltipDecorator.js @@ -0,0 +1,44 @@ +/** + A control that activates an <a href="#onyx.Tooltip">onyx.Tooltip</a>. It + surrounds a control such as a button and displays the tooltip when the + control generates an _onEnter_ event: + + {kind: "onyx.TooltipDecorator", components: [ + {kind: "onyx.Button", content: "Tooltip"}, + {kind: "onyx.Tooltip", content: "I'm a tooltip for a button."} + ]} + + Here's an example with an <a href="#onyx.Input">onyx.Input</a> control and a + decorator around the input: + + {kind: "onyx.TooltipDecorator", components: [ + {kind: "onyx.InputDecorator", components: [ + {kind: "onyx.Input", placeholder: "Just an input..."} + ]}, + {kind: "onyx.Tooltip", content: "I'm a tooltip for an input."} + ]} +*/ +enyo.kind({ + name: "onyx.TooltipDecorator", + defaultKind: "onyx.Button", + classes: "onyx-popup-decorator", + handlers: { + onenter: "enter", + onleave: "leave" + }, + enter: function() { + this.requestShowTooltip(); + }, + leave: function() { + this.requestHideTooltip(); + }, + tap: function() { + this.requestHideTooltip(); + }, + requestShowTooltip: function() { + this.waterfallDown("onRequestShowTooltip"); + }, + requestHideTooltip: function() { + this.waterfallDown("onRequestHideTooltip"); + } +});
\ No newline at end of file diff --git a/html/lib/onyx/source/css/onyx.css b/html/lib/onyx/source/css/onyx.css new file mode 100644 index 0000000..4ebde3c --- /dev/null +++ b/html/lib/onyx/source/css/onyx.css @@ -0,0 +1,896 @@ +/* onyx.css - combined CSS file for all released Onyx controls. + converted from single files to get around IE bug that allows + a maximum of 31 style sheets to be loaded before silently failing */ + +.onyx { + color: #333333; + font-family: 'Helvetica Neue', 'Nimbus Sans L', Arial, sans-serif; + /*font-family: Prelude, Prelude Medium, Segoe UI, Neue Helvetica, Arial, Helvetica, Sans-Serif;**/ + font-size: 20px; + cursor: default; + background-color: #EAEAEA; + /* remove automatic tap highlight color */ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +/* prevent IE from inheriting line-height for these elements */ +.onyx button, .onyx label, .onyx input { + line-height: normal; +} + +.onyx-selected { + background-color: #C4E3FE; +} + +/* Icon.css */ +.onyx-icon { + width: 32px; + height: 32px; + background-repeat: no-repeat; + display: inline-block; + vertical-align: middle; +} + +.onyx-icon.active, .onyx-icon:active:hover { + background-position: 0 -32px; +} + +/* Button.css */ +.onyx-button { + outline: 0; + /**/ + color: #292929; + font-size: 16px; + text-align: center; + white-space: nowrap; + /**/ + margin: 0; + padding: 6px 18px; + overflow: hidden; + /**/ + border-radius: 3px; + /* for IE8 */ + border: 1px solid #777; + border: 1px solid rgba(15, 15, 15, 0.2); + /* + The border and the gradient interact in a strange way that + causes the bottom-border (top if the gradient is aligned top) + to be lighter than other borders. + We can fix it by using the darker bottom border below, but + then there are a few rogue pixels that end up very dark. + */ + /* border-bottom: 1px solid rgba(15, 15, 15, 0.5); */ + box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2); + /* + box-shadow: 0px 1px 0px rgba(164,164,164,0.1), inset 0px 1px 1px rgba(164,164,164,0.35); + text-shadow: 0 -1px 1px rgba(0,0,0,0.2); + background-color: #E1E1E1; + */ + /**/ + background: #E1E1E1 url(../../images/gradient.png) repeat-x bottom; + background-size: contain; + /**/ + text-overflow: ellipsis; + /* the following cause arcane problems on IE */ + /* + min-width: 14px; + min-height: 20px; + */ +} + +/* + IE8 can't handle these selectors in tandem: + .onyx-button.active, .onyx-button:active:not([disabled]) { + + the effect is as if .onyx-button.active doesn't exist +*/ +.onyx-button.active { + background-image: url(../../images/gradient-invert.png); + background-position: top; + border-top: 1px solid rgba(15, 15, 15, 0.6); + box-shadow: inset 0px 1px 0px rgba(0,0,0,0.1); +} + +.onyx-button:active:hover:not([disabled]) { + background-image: url(../../images/gradient-invert.png); + background-position: top; + border-top: 1px solid rgba(15, 15, 15, 0.6); + box-shadow: inset 0px 1px 0px rgba(0,0,0,0.1); +} + +.onyx-button[disabled] { + opacity: 0.4; +} + +.onyx-button > img { + padding: 0px 3px; +} + +/* optional */ + +button.onyx-button.onyx-affirmative { + background-color: #91BA07; + color: #F1F1F1; +} + +button.onyx-button.onyx-negative { + background-color: #C51616; + color: #F1F1F1; +} + +button.onyx-button.onyx-blue { + background-color: #35A8EE; + color: #F1F1F1; +} + +/* Checkbox.css */ +.onyx-checkbox { + cursor: pointer; + height: 32px; + width: 32px; + background: url(../../images/checkbox.png) no-repeat; + /* reset for ? */ + margin: 0px; + /* these entries cause toggle-button and checkbox to line up properly*/ + display: inline-block; + vertical-align: middle; +} + +.onyx-checkbox[checked] { + background-position: 0px -32px; +} + +.onyx-checkbox[disabled] { + opacity: 0.4; +} + +/* Grabber.css */ +.onyx-grabber { + background: url(../../images/grabbutton.png) no-repeat center; + width: 23px; + height: 27px; +} + +/* Popup.css */ +.onyx-popup { + font-size: 16px; + box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); + border: 1px solid rgba(0,0,0,0.2); + border-radius: 8px; + padding: 6px; + color: white; + background: #4C4C4C url(../../images/gradient.png) repeat-x 0 bottom; +} + +.onyx-popup-decorator { + position: relative; +} + +/* Groupbox.css */ +.onyx-groupbox { +} + +.onyx-groupbox > * { + display: block; + /*box-shadow: inset 0px 1px 1px rgba(255,255,255,0.5);*/ + border-color: #aaaaaa; + border-style: solid; + border-width: 0 1px 1px 1px; + /*padding: 10px;*/ + /* reset styles that make 'item' look bad if they happen to be there */ + border-radius: 0; + margin: 0; +} + +.onyx-groupbox > *:first-child { + border-top-color: #aaaaaa; + border-width: 1px; + border-radius: 4px 4px 0 0; +} + +.onyx-groupbox > *:last-child { + border-radius: 0 0 4px 4px; +} + +.onyx-groupbox > *:first-child:last-child { + border-radius: 4px; +} + +.onyx-groupbox-header { + padding: 2px 10px; + /**/ + color: white; + font-family: Segoe UI, Neue Helvetica, Helvectica, Arial, sans-serif; + font-size: 14px; + font-weight: bold; + text-transform: uppercase; + /**/ + background-color: #343434; + border: none; + background: #4c4c4c url(../../images/gradient.png) repeat-x 0 10px; +} + +.onyx-groupbox .onyx-input-decorator { + display: block; +} + +.onyx-groupbox > .onyx-input-decorator { + border-color: #aaaaaa; + border-width: 0 1px 1px 1px; + border-radius: 0; +} + +.onyx-groupbox > .onyx-input-decorator:first-child { + border-width: 1px; + border-radius: 4px 4px 0 0; +} + +.onyx-groupbox > .onyx-input-decorator:last-child { + border-radius: 0 0 4px 4px; +} + +.onyx-groupbox > .onyx-input-decorator:first-child:last-child { + border-radius: 4px; +} + +/* Input.css */ +.onyx-input-decorator { + padding: 6px 8px 10px 8px; + border-radius: 3px; + border: 1px solid; + border-color: rgba(0,0,0,0.1); + margin: 0; +} + +.onyx-input-decorator.onyx-focused { + box-shadow: inset 0px 1px 4px rgba(0,0,0,0.3); + border-color: rgba(0,0,0,0.3); + background-color: white; +} + +.onyx-input-decorator.onyx-disabled { + /* FIXME: needed to color a disabled input placeholder. */ + /*-webkit-text-fill-color: #888;*/ + opacity: 0.4; +} + +.onyx-input-decorator > input { + /* reset */ + margin: 0; + padding: 0; + border: none; + outline: none; + cursor: pointer; + background-color: transparent; + font-size: 16px; + box-shadow: none; + /* FIXME: hack for styling reset on Android */ + /* -webkit-appearance: caret;*/ +} + +.onyx-input-decorator.onyx-focused > input { + cursor: text; +} + +.onyx-input-decorator.onyx-disabled > input { + cursor: default; +} + +/* Menu.css */ +.onyx-menu, .onyx.onyx-menu { + min-width: 160px; + top: 100%; + left: 0; + margin-top: 2px; + padding: 3px 0; + border-radius: 3px; +} + +.onyx-menu.onyx-menu-up { + top: auto; + bottom: 100%; + margin-top: 0; + margin-bottom: 2px; +} + +.onyx-toolbar .onyx-menu { + margin-top: 11px; + border-radius: 0 0 3px 3px; +} + + +.onyx-toolbar .onyx-menu.onyx-menu-up { + margin-top: 0; + margin-bottom: 10px; + border-radius: 3px 3px 0 0; +} + +.onyx-menu-item { + display: block; + padding: 10px; +} + +.onyx-menu-item:hover { + background: #284152; +} + +.onyx-menu-divider, .onyx-menu-divider:hover { + margin: 6px 0; + padding: 0; + border-bottom: 1px solid #aaa; +} + +/* customize a toolbar to support menus */ +.onyx-menu-toolbar, .onyx-toolbar.onyx-menu-toolbar { + z-index: 10; + overflow: visible; + position: relative; +} + +/* Picker.css */ +.onyx-picker-decorator .onyx-button { + padding: 10px 18px; +} + +.onyx-picker { + top: 0; + margin-top: -3px; + min-width: 0; + width: 100%; + box-sizing: border-box; + -moz-box-sizing: border-box; + color: black; + background: #E1E1E1; +} + +.onyx-picker.onyx-menu-up { + top: auto; + bottom: 0; + margin-top: 3px; + margin-bottom: -3px; +} + +.onyx-picker .onyx-menu-item { + text-align: center; +} + +.onyx-picker .onyx-menu-item:hover { + background-color: transparent; +} + +.onyx-picker .onyx-menu-item.selected, .onyx-picker .onyx-menu-item.active, .onyx-picker .onyx-menu-item:active:hover { + border-top: 1px solid rgba(0, 0, 0, 0.1); + background-color: #cde7fe; + box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.2); +} + +.onyx-picker .onyx-menu-item { + border-top: 1px solid rgba(255,255,255,0.5); + border-bottom: 1px solid rgba(0,0,0,0.2); +} + +.onyx-picker:not(.onyx-flyweight-picker) .onyx-menu-item:first-child, .onyx-flyweight-picker :first-child > .onyx-menu-item { + border-top: none; +} + +.onyx-picker:not(.onyx-flyweight-picker) .onyx-menu-item:last-child, .onyx-flyweight-picker :last-child > .onyx-menu-item { + border-bottom: none; +} + +/* TextArea.css */ +.onyx-input-decorator > textarea { + /* reset */ + margin: 0; + padding: 0; + border: none; + outline: none; + cursor: pointer; + background-color: transparent; + font-size: 16px; + box-shadow: none; + /* Remove scrollbars and resize handle */ + resize: none; + overflow: auto; + /* FIXME: hack for styling reset on Android */ + /* -webkit-appearance: caret;*/ +} + +.onyx-input-decorator.onyx-focused > textarea { + cursor: text; +} + +.onyx-input-decorator.onyx-disabled > textarea { + cursor: default; +} + +.onyx-textarea { + /* need >=50px for scrollbar to be usable on mac */ + min-height: 50px; +} + +/* RichText.css */ +.onyx-input-decorator > .onyx-richtext { + /* reset */ + margin: 0; + padding: 0; + border: none; + outline: none; + cursor: pointer; + background-color: transparent; + font-size: 16px; + min-height: 20px; + min-width: 100px; + box-shadow: none; + /* FIXME: hack for styling reset on Android */ + /* -webkit-appearance: caret;*/ +} + +.onyx-input-decorator.onyx-focused > .onyx-richtext { + cursor: text; +} + +.onyx-input-decorator.onyx-disabled > .onyx-richtext { + cursor: default; +} + +/* RadioButton.css */ +.onyx-radiobutton { + padding: 8px 12px; + margin: 0; + outline: 0; + /**/ + font-size: 16px; + text-shadow: 0 1px 1px rgba(0,0,0,0.2); + text-align: center; + /**/ + background: #E7E7E7 url(../../images/gradient.png) repeat-x bottom; + /* IE8 */ + border: 1px solid #333; + border: 1px solid rgba(15, 15, 15, 0.2); + /* turn off right-border in a way IE8 ignores, because IE8 does not support :last-child */ + border-right-color: rgba(0,0,0,0); + box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.2); +} + +.onyx-radiobutton:first-child { + border-radius: 3px 0 0 3px; +} + +.onyx-radiobutton:last-child { + border-radius: 0px 3px 3px 0px; + /* IE8 */ + border-right: 1px solid #333; + border-right: 1px solid rgba(15, 15, 15, 0.2); +} + +.onyx-radiobutton.active { + color: White; + background: #0091F2 url(../../images/gradient-invert.png) repeat-x top; + border-top: 1px solid rgba(15, 15, 15, 0.6); + box-shadow: inset 1px 2px 2px rgba(0, 0, 0, 0.2); +} + +/* Scrim.css */ +.onyx-scrim { + z-index: 1; + /* + note: by using pointer-events we allow tapping on scrim + while it is fading out; however, this requires any showing classes + to set pointer events to auto or scrim will not function as expected. + */ + pointer-events: none; +} + +.onyx-scrim.onyx-scrim-translucent{ + pointer-events: auto; + background-color: rgb(0,0,0); + opacity: 0.65; + filter: alpha(opacity=65); +} + +.onyx-scrim.onyx-scrim-transparent { + pointer-events: auto; + background: transparent; +} + +/* TabButton.css */ +.onyx-radiobutton.onyx-tabbutton { + padding: 8px 34px; + font-size: 20px; + border-radius: 0px; +} + +/* ToggleButton.css */ +.onyx-toggle-button { + display: inline-block; + height: 32px; + line-height: 32px; + min-width: 64px; + vertical-align: middle; + text-align: center; + /* */ + border-radius: 3px; + box-shadow: inset 0px 1px 3px rgba(0,0,0,0.4); + background: #8BBA3D url(../../images/gradient-invert.png) repeat-x bottom; + background-size: auto 100%; + /* label */ + color: white; + font-size: 14px; + font-weight: bold; + text-transform: uppercase; +} + +.onyx-toggle-button.off { + background-color: #B1B1B1 !important; +} + +.onyx-toggle-button-knob { + display: inline-block; + width: 30px; + height: 30px; + margin: 1px; + border-radius: 3px; + background: #F6F6F6 url(../../images/gradient.png) repeat-x; + background-size: auto 100%; +} + +.onyx-toggle-button .onyx-toggle-button-knob { + box-shadow: -1px 0px 4px rgba(0,0,0,0.35), inset 0 -1px 0 rgba(0,0,0,0.4); + float: right; +} + +.onyx-toggle-button.off .onyx-toggle-button-knob { + box-shadow: 1px 0px 4px rgba(0,0,0,0.35), inset 0 -1px 0 rgba(0,0,0,0.4); + float: left; +} + +.onyx-toggle-button.disabled { + opacity: 0.4; +} + +.onyx-toggle-content { + min-width: 32px; + padding: 0 6px; +} + +.onyx-toggle-content.empty { + padding: 0; +} + +.onyx-toggle-content.off { + float: right; +} + +.onyx-toggle-content.on { + float: left; +} + +/* Toolbar.css */ +.onyx-toolbar { + /* + line-height is unreliable for centering, instead + use vertical-align: middle to align + elements along a common centerline and use + padding to fill out the space. + */ + padding: 9px 8px 10px 8px; + /**/ + border: 1px solid #3A3A3A; + background: #4C4C4C url(../../images/gradient.png) repeat-x 0 bottom; + color: white; + /**/ + white-space: nowrap; + overflow: hidden; +} + +.onyx-toolbar-inline > * { + display: inline-block; + vertical-align: middle; + margin: 4px 6px 5px; + box-sizing: border-box; +} + +.onyx-toolbar .onyx-icon-button { + margin: 3px 2px 1px; +} + +.onyx-toolbar .onyx-button { + color: #F2F2F2; + background-color: #555656; + border-color: rgba(15, 15, 15, 0.5); + margin-top: 0; + margin-bottom: 0; + height: 36px; +} + +.onyx-toolbar .onyx-input-decorator { + margin: 1px 3px; + box-shadow: inset 0px 1px 4px rgba(0,0,0,0.1); + background-color: rgba(0, 0, 0, 0.1); + padding: 0px 6px 5px 6px; +} + +.onyx-toolbar .onyx-input-decorator.onyx-focused { + box-shadow: inset 0px 1px 4px rgba(0,0,0,0.3); + background-color: white; +} + +.onyx-toolbar .onyx-input-decorator .onyx-input { + color: #e5e5e5; + font-size: 14px; +} + +.onyx-toolbar .onyx-input-decorator .onyx-input:focus { + color: #000; +} + +.onyx-toolbar .onyx-input-decorator .onyx-input:focus::-webkit-input-placeholder { + color: #ddd; +} + +/* Tooltip.css */ +.onyx-tooltip { + z-index: 20; + left: 0; + padding: 4px 6px; + margin-top: 4px; + margin-left: -6px; + box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); + border: 1px solid rgba(0,0,0,0.2); + color: white; + background: #216593 url(../../images/gradient.png) repeat-x 0 bottom; + border-radius: 3px; + white-space: nowrap; +} + +/*move the tooltip over to the right when displaying the right arrow so it aligns better with the decorator*/ +.onyx-tooltip.right-arrow { + left: 30px; +} + +/*prep the left & right arrows using before & after - left arrow uses before & right arrow uses after*/ +.onyx-tooltip::before { + content: ''; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + position: absolute; + top: -6px; + left: 16px; +} + +.onyx-tooltip::after { + content: ''; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + position: absolute; + top: -6px; + margin-left: -12px; +} + +/*The following 3 rules handle the left & right arrows when the tooltip is displayed below the activator*/ +.onyx-tooltip.below { + top: 100%; +} + +.onyx-tooltip.below.right-arrow::after { + border-bottom: 6px solid #1D587F; + top: -6px; +} + +.onyx-tooltip.below.left-arrow::before { + border-bottom: 6px solid #1D587F; + top: -6px; +} + +/*The following 3 rules handle the left & right arrows when the tooltip is displayed above the activator*/ +.onyx-tooltip.above { + top: -100%; +} + +.onyx-tooltip.above.right-arrow::after { + content: ''; + border-top: 6px solid #1D587F; + top: 100%; +} + +.onyx-tooltip.above.left-arrow::before { + content: ''; + border-top: 6px solid #1D587F; + top: 100%; +} + +/* ProgressBar.css */ +.onyx-progress-bar { + margin: 8px; + height: 8px; + border: 1px solid rgba(15, 15, 15, 0.2); + border-radius: 3px; + background: #B8B8B8 url(../../images/gradient-invert.png) repeat-x; + background-size: auto 100%; +} + +.onyx-progress-bar-bar { + height: 100%; + border-radius: 3px; + background: #58ABEF url(../../images/gradient.png) repeat-x; + background-size: auto 100%; +} + +.onyx-progress-bar-bar.striped { + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} + +.onyx-progress-bar-bar.striped.animated { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -moz-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} + +@-webkit-keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} + +@-moz-keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} + +@keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} + +/* optional */ + +.onyx-dark { + background-color: #626368; +} + +.onyx-light { + background-color: #cacaca; +} + +/* ProgressButton.css */ +.onyx-progress-button { + position: relative; + height: 36px; + line-height: 36px; + color: #F1F1F1; + font-size: 16px; + text-overflow: ellipsis; +} + +.onyx-progress-button-bar { + height: 36px; +} + +.onyx-progress-button-icon { + display: inline-block; + position: absolute; + top: 2px; + right: 0; +} + +.onyx-progress-button-client { + display: inline-block; + position: absolute; + top: 0; + left: 0; + right: 36px; + margin-left: 8px; +} + +.onyx-progress-button-client > * { + display: inline-block; +} + +/* Slider.css */ +.onyx-slider { + position: relative; + margin: 8px 20px; +} + +.onyx-slider-taparea { + position: absolute; + top: -11px; + height: 28px; + width: 100%; +} + +.onyx-slider-knob { + position: relative; + height: 40px; + width: 40px; + background: url(../../images/slider-handle.png) left top no-repeat; + margin: -23px -20px; +} + +.onyx-slider-knob.active, .onyx-slider-knob:active:hover { + background-position: 0 -40px; +} + +/* Item.css */ +.onyx-item { + padding: 14px; +} + +.onyx-highlight, .onyx-highlight.onyx-swipeable-item-content { + background-color: #DEDFDF; +} + +.enyo-selected, .enyo-selected.onyx-swipeable-item-content { + background-color: #C4E3FE; +} + +.onyx-item.onyx-swipeable-item { + overflow: hidden; + padding: 0; +} + +.onyx-swipeable-item-content { + background-color: #EAEAEA; + box-sizing: border-box; + padding: 18px 6px; + min-height: 40px; +} + +/* Spinner.css */ +.onyx-spinner { + width: 58px; + height: 59px; + display: inline-block; + background: url(../../images/spinner-dark.gif) no-repeat 0 0; +} + +.onyx-spinner.onyx-light { + background: url(../../images/spinner-light.gif) no-repeat 0 0; +} + +/* MoreToolbar.css */ +.onyx-more-toolbar { + overflow: visible; + position: relative; + z-index: 10; +} + +.onyx-more-toolbar.active { + z-index:11; +} + +.onyx-more-menu { + left: auto; + right: 0px; + min-width: 0; +} + +.onyx-more-toolbar .onyx-more-menu > * { + float: right; + clear: both; + margin: 5px; + margin-top: 5px; + margin-bottom: 5px; +} + +.onyx-more-button { + background-image: url(../../images/more.png); + margin: 4px 6px 5px; +} diff --git a/html/lib/onyx/source/css/package.js b/html/lib/onyx/source/css/package.js new file mode 100644 index 0000000..a0e03d4 --- /dev/null +++ b/html/lib/onyx/source/css/package.js @@ -0,0 +1,3 @@ +enyo.depends( + "onyx.css" +); diff --git a/html/lib/onyx/source/design.js b/html/lib/onyx/source/design.js new file mode 100644 index 0000000..430dc70 --- /dev/null +++ b/html/lib/onyx/source/design.js @@ -0,0 +1,66 @@ +//* @protected +// This is an in-progress design description of the Onyx controls for use in the Ares designer tool. +Palette.model.push( + {name: "onyx", items: [ + {name: "onyx.Button", title: "Foofoofoo", icon: "box_software.png", stars: 4, version: 2.0, blurb: "Use as a simple page header, or add an optional navigation menu.", + inline: {content: "onyx.Button", kind: "onyx.Button"}, + config: {content: "$name", isContainer: true, kind: "onyx.Button"} + }, + {name: "onyx.InputDecorator", title: "Foofoofoo", icon: "box_software.png", stars: 4, version: 2.0, blurb: "Use as a simple page header, or add an optional navigation menu.", + inline: {kind: "onyx.InputDecorator", components: [ + {kind: "Input", placeholder: "Enter text here"} + ]}, + config: {kind: "onyx.InputDecorator", components: [ + {kind: "Input", placeholder: "Enter text here"} + ]} + }, + {name: "onyx.Input", title: "Foofoofoo", icon: "box_software.png", stars: 4, version: 2.0, blurb: "Use as a simple page header, or add an optional navigation menu.", + inline: {value: "onyx.Input", kind: "onyx.Input"}, + config: {kind: "onyx.Input"} + }, + {name: "onyx.ToggleButton", title: "Foofoofoo", icon: "box_software.png", stars: 4, version: 2.0, blurb: "Use as a simple page header, or add an optional navigation menu.", + inline: {kind: "onyx.ToggleButton"}, + config: {kind: "onyx.ToggleButton"} + }, + {name: "onyx.Checkbox", title: "Foofoofoo", icon: "box_software.png", stars: 4, version: 2.0, blurb: "Use as a simple page header, or add an optional navigation menu.", + inline: {kind: "onyx.Checkbox"}, + config: {kind: "onyx.Checkbox"} + }, + {name: "onyx.RadioGroup", + inline: {kind: "onyx.RadioGroup", components: [ + {content: "A"}, + {content: "B"}, + {content: "C"} + ]}, + config: {kind: "onyx.RadioGroup", isContainer: true, components: [ + {content: "RadioButton"} + ]} + }, + {name: "onyx.RadioButton", + inline: {content: "RadioButton", kind: "onyx.RadioButton"}, + config: {content: "$name", kind: "onyx.RadioButton"} + }, + {name: "onyx.Toolbar", title: "Foofoofoo", icon: "box_software.png", stars: 4, version: 2.0, blurb: "Use as a simple page header, or add an optional navigation menu.", + inline: {kind: "onyx.Toolbar"}, + config: {isContainer: true, kind: "onyx.Toolbar"} + }, + {name: "onyx.Grabber", title: "Foofoofoo", icon: "box_software.png", stars: 4, version: 2.0, blurb: "Use as a simple page header, or add an optional navigation menu.", + inline: {kind: "onyx.Grabber", style: "background-color: #333; padding: 4px 12px;"}, + config: {kind: "onyx.Grabber"} + }, + {name: "onyx.Groupbox", title: "Foofoofoo", icon: "box_software.png", stars: 4, version: 2.0, blurb: "Use as a simple page header, or add an optional navigation menu.", + inline: {kind: "onyx.Groupbox", components: [ + {content: "Header", kind: "onyx.GroupboxHeader"}, + {content: "Item", style: "padding: 10px;"} + ]}, + config: {kind: "onyx.Groupbox", isContainer: true, components: [ + {content: "Header", kind: "onyx.GroupboxHeader", isContainer: true}, + {content: "Item", style: "padding: 10px;"} + ]} + }, + {name: "onyx.GroupboxHeader", title: "Foofoofoo", icon: "box_software.png", stars: 4, version: 2.0, blurb: "Use as a simple page header, or add an optional navigation menu.", + inline: {content: "Header", kind: "onyx.GroupboxHeader"}, + config: {content: "$name", kind: "onyx.GroupboxHeader", isContainer: true} + } + ]} +);
\ No newline at end of file diff --git a/html/lib/onyx/source/package.js b/html/lib/onyx/source/package.js new file mode 100644 index 0000000..4a5ff50 --- /dev/null +++ b/html/lib/onyx/source/package.js @@ -0,0 +1,37 @@ +enyo.depends( + "css/", + "Icon.js", + "Button.js", + "IconButton.js", + "Checkbox.js", + "Drawer.js", + "Grabber.js", + "Groupbox.js", + "Input.js", + "Popup.js", + "TextArea.js", + "RichText.js", + "InputDecorator.js", + "Tooltip.js", + "TooltipDecorator.js", + "MenuDecorator.js", + "Menu.js", + "MenuItem.js", + "PickerDecorator.js", + "PickerButton.js", + "Picker.js", + "FlyweightPicker.js", + "RadioButton.js", + "RadioGroup.js", + "ToggleButton.js", + "Toolbar.js", + "Tooltip.js", + "TooltipDecorator.js", + "ProgressBar.js", + "ProgressButton.js", + "Scrim.js", + "Slider.js", + "Item.js", + "Spinner.js", + "MoreToolbar.js" +); diff --git a/html/lib/onyx/source/wip-package.js b/html/lib/onyx/source/wip-package.js new file mode 100644 index 0000000..7901550 --- /dev/null +++ b/html/lib/onyx/source/wip-package.js @@ -0,0 +1,4 @@ +enyo.depends( + "SwipeableItem.js", + "TabPanels.js" +);
\ No newline at end of file |