From b89a7ee8b956c96a1dcee995ea840feddc5d4b27 Mon Sep 17 00:00:00 2001 From: Pierre Frisch Date: Thu, 22 Dec 2011 07:25:50 -0800 Subject: First commit of Ninja to ninja-internal Signed-off-by: Valerio Virgillito --- js/components/SliderBase.js | 282 ++++++ js/components/button.reel/button.css | 40 + js/components/button.reel/button.html | 26 + js/components/button.reel/button.js | 225 +++++ js/components/checkbox.reel/checkbox.html | 24 + js/components/checkbox.reel/checkbox.js | 99 ++ js/components/colorbar.reel/colorbar.html | 37 + js/components/colorbar.reel/colorbar.js | 227 +++++ js/components/colorbar.reel/config.rb | 9 + js/components/colorbar.reel/css/colorbar.css | 12 + js/components/colorbar.reel/css/colorbar.scss | 11 + js/components/colorwheel.reel/colorwheel.html | 50 + js/components/colorwheel.reel/colorwheel.js | 536 ++++++++++ js/components/colorwheel.reel/compass_app_log.txt | 3 + js/components/colorwheel.reel/config.rb | 9 + js/components/colorwheel.reel/css/colorwheel.css | 18 + js/components/colorwheel.reel/css/colorwheel.scss | 17 + js/components/combobox.reel/combobox.html | 24 + js/components/combobox.reel/combobox.js | 140 +++ js/components/core/class-uuid.js | 45 + js/components/gradientpicker.reel/config.rb | 9 + .../gradientpicker.reel/css/gradientpicker.css | 134 +++ .../gradientpicker.reel/css/gradientpicker.scss | 151 +++ .../gradientpicker.reel/gradientpicker.html | 58 ++ .../gradientpicker.reel/gradientpicker.js | 405 ++++++++ js/components/hottext.reel/hottext.css | 27 + js/components/hottext.reel/hottext.html | 29 + js/components/hottext.reel/hottext.js | 381 ++++++++ js/components/hottextunit.reel/hottextunit.css | 41 + js/components/hottextunit.reel/hottextunit.html | 28 + js/components/hottextunit.reel/hottextunit.js | 185 ++++ .../bread-crumb-button.reel/bread-crumb-button.css | 32 + .../bread-crumb-button.html | 36 + .../bread-crumb-button.reel/bread-crumb-button.js | 58 ++ .../layout/bread-crumb.reel/bread-crumb.css | 27 + .../layout/bread-crumb.reel/bread-crumb.html | 70 ++ .../layout/bread-crumb.reel/bread-crumb.js | 110 +++ .../layout/document-bar.reel/document-bar.css | 43 + .../layout/document-bar.reel/document-bar.html | 58 ++ .../layout/document-bar.reel/document-bar.js | 101 ++ .../layout/document-entry.reel/close_button.gif | Bin 0 -> 139 bytes .../layout/document-entry.reel/document-entry.css | 38 + .../layout/document-entry.reel/document-entry.html | 34 + .../layout/document-entry.reel/document-entry.js | 110 +++ .../layout/documents-tab.reel/documents-tab.css | 40 + .../layout/documents-tab.reel/documents-tab.html | 77 ++ .../layout/documents-tab.reel/documents-tab.js | 45 + .../layout/stage-mode.reel/stage-mode.css | 24 + .../layout/stage-mode.reel/stage-mode.html | 33 + js/components/layout/stage-mode.reel/stage-mode.js | 52 + .../layout/subtool-button.reel/subtool-button.css | 22 + .../layout/subtool-button.reel/subtool-button.html | 34 + .../layout/subtool-button.reel/subtool-button.js | 65 ++ .../layout/tool-button.reel/tool-button.css | 24 + .../layout/tool-button.reel/tool-button.html | 35 + .../layout/tool-button.reel/tool-button.js | 112 +++ .../layout/tools-list.reel/tools-list.css | 9 + .../layout/tools-list.reel/tools-list.html | 174 ++++ js/components/layout/tools-list.reel/tools-list.js | 87 ++ .../tools-properties.reel/tools-properties.css | 11 + .../tools-properties.reel/tools-properties.html | 196 ++++ .../tools-properties.reel/tools-properties.js | 55 ++ js/components/menu/menu-entry.reel/menu-entry.css | 64 ++ js/components/menu/menu-entry.reel/menu-entry.html | 81 ++ js/components/menu/menu-entry.reel/menu-entry.js | 79 ++ js/components/menu/menu-item.reel/menu-item.css | 72 ++ js/components/menu/menu-item.reel/menu-item.html | 83 ++ js/components/menu/menu-item.reel/menu-item.js | 160 +++ js/components/menu/menu.reel/menu.css | 14 + js/components/menu/menu.reel/menu.html | 89 ++ js/components/menu/menu.reel/menu.js | 108 +++ js/components/package.json | 8 + .../popup-manager.reel/popup-manager.html | 34 + js/components/popup-manager.reel/popup-manager.js | 154 +++ js/components/popup.reel/compass_app_log.txt | 48 + js/components/popup.reel/config.rb | 9 + js/components/popup.reel/css/popup.css | 43 + js/components/popup.reel/css/popup.scss | 52 + js/components/popup.reel/popup.html | 37 + js/components/popup.reel/popup.js | 245 +++++ js/components/radio.reel/radio.html | 24 + js/components/radio.reel/radio.js | 178 ++++ js/components/slider.reel/knob.png | Bin 0 -> 523 bytes js/components/slider.reel/slider.css | 66 ++ js/components/slider.reel/slider.html | 38 + js/components/slider.reel/slider.js | 250 +++++ js/components/textfield.reel/textfield.html | 24 + js/components/textfield.reel/textfield.js | 88 ++ .../brush-properties.reel/brush-properties.css | 6 + .../brush-properties.reel/brush-properties.html | 32 + .../brush-properties.reel/brush-properties.js | 25 + .../eraser-properties.reel/eraser-properties.css | 6 + .../eraser-properties.reel/eraser-properties.html | 32 + .../eraser-properties.reel/eraser-properties.js | 25 + .../eyedropper-properties.css | 6 + .../eyedropper-properties.html | 32 + .../eyedropper-properties.js | 25 + .../fill-properties.reel/fill-properties.css | 6 + .../fill-properties.reel/fill-properties.html | 42 + .../fill-properties.reel/fill-properties.js | 38 + .../ink-bottle-properties.css | 6 + .../ink-bottle-properties.html | 97 ++ .../ink-bottle-properties.js | 38 + .../line-properties.reel/line-properties.css | 6 + .../line-properties.reel/line-properties.html | 30 + .../line-properties.reel/line-properties.js | 50 + .../object3d-properties.html | 41 + .../object3d-properties.js | 41 + .../oval-properties.reel/oval-properties.css | 6 + .../oval-properties.reel/oval-properties.html | 46 + .../oval-properties.reel/oval-properties.js | 52 + .../pan-properties.reel/pan-properties.css | 6 + .../pan-properties.reel/pan-properties.html | 32 + .../pan-properties.reel/pan-properties.js | 25 + .../pen-properties.reel/pen-properties.css | 6 + .../pen-properties.reel/pen-properties.html | 34 + .../pen-properties.reel/pen-properties.js | 28 + .../pencil-properties.reel/pencil-properties.css | 6 + .../pencil-properties.reel/pencil-properties.html | 32 + .../pencil-properties.reel/pencil-properties.js | 25 + .../rect-properties.reel/rect-properties.css | 40 + .../rect-properties.reel/rect-properties.html | 84 ++ .../rect-properties.reel/rect-properties.js | 128 +++ .../rotate-stage-properties.css | 6 + .../rotate-stage-properties.html | 32 + .../rotate-stage-properties.js | 25 + .../selection-properties.css | 9 + .../selection-properties.html | 49 + .../selection-properties.js | 29 + .../shape-properties.reel/shape-properties.css | 9 + .../shape-properties.reel/shape-properties.html | 158 +++ .../shape-properties.reel/shape-properties.js | 77 ++ .../subselection-properties.html | 33 + .../subselection-properties.js | 14 + .../tag-properties.reel/tag-properties.css | 6 + .../tag-properties.reel/tag-properties.html | 86 ++ .../tag-properties.reel/tag-properties.js | 57 ++ .../text-properties.reel/text-properties.css | 33 + .../text-properties.reel/text-properties.html | 235 +++++ .../text-properties.reel/text-properties.js | 59 ++ js/components/tools-properties/tool-properties.js | 47 + .../zoom-properties.reel/zoom-properties.css | 6 + .../zoom-properties.reel/zoom-properties.html | 40 + .../zoom-properties.reel/zoom-properties.js | 43 + js/components/tree.reel/tree.css | 26 + js/components/tree.reel/tree.html | 28 + js/components/tree.reel/tree.js | 789 +++++++++++++++ js/components/tree.reel/treeDisclosure.png | Bin 0 -> 995 bytes js/components/tree.reel/treeFolderClosed.png | Bin 0 -> 1345 bytes js/components/tree.reel/treeFolderOpen.png | Bin 0 -> 1323 bytes js/components/tree.reel/treeItem.png | Bin 0 -> 2935 bytes .../ui/FilePicker/file-picker-controller.js | 497 ++++++++++ js/components/ui/FilePicker/file-picker-model.js | 122 +++ .../pickerNavigator.reel/pickerNavigator.css | 201 ++++ .../pickerNavigator.reel/pickerNavigator.html | 81 ++ .../pickerNavigator.reel/pickerNavigator.js | 1019 ++++++++++++++++++++ js/components/ui/color-chip.reel/color-chip.css | 31 + js/components/ui/color-chip.reel/color-chip.html | 36 + js/components/ui/color-chip.reel/color-chip.js | 41 + js/components/ui/file-input.reel/file-input.css | 34 + js/components/ui/file-input.reel/file-input.html | 31 + js/components/ui/file-input.reel/file-input.js | 65 ++ .../ui/icon-list-basic/icon.reel/icon.css | 42 + .../ui/icon-list-basic/icon.reel/icon.html | 31 + js/components/ui/icon-list-basic/icon.reel/icon.js | 192 ++++ .../icon-list-basic/iconsList.reel/iconsList.css | 9 + .../icon-list-basic/iconsList.reel/iconsList.html | 62 ++ .../ui/icon-list-basic/iconsList.reel/iconsList.js | 42 + js/components/ui/input-group.reel/input-group.css | 33 + js/components/ui/input-group.reel/input-group.html | 78 ++ js/components/ui/input-group.reel/input-group.js | 85 ++ .../ui/modalDialog/modal-dialog-manager.js | 123 +++ js/components/ui/modalDialog/modalDialogHeader.js | 82 ++ .../modalDialogHeader.reel/modalDialogHeader.css | 30 + .../modalDialogHeader.reel/modalDialogHeader.html | 33 + .../ui/property-control.reel/property-control.css | 27 + .../ui/property-control.reel/property-control.html | 40 + .../ui/property-control.reel/property-control.js | 238 +++++ .../ui/radio-button.reel/radio-button.html | 32 + js/components/ui/radio-button.reel/radio-button.js | 44 + .../ui/row-renderer.reel/row-renderer.html | 37 + js/components/ui/row-renderer.reel/row-renderer.js | 18 + js/components/ui/tree-basic/tree.reel/tree.css | 9 + js/components/ui/tree-basic/tree.reel/tree.html | 67 ++ js/components/ui/tree-basic/tree.reel/tree.js | 43 + .../ui/tree-basic/treeItem.reel/treeItem.css | 53 + .../ui/tree-basic/treeItem.reel/treeItem.html | 35 + .../ui/tree-basic/treeItem.reel/treeItem.js | 269 ++++++ 188 files changed, 14084 insertions(+) create mode 100644 js/components/SliderBase.js create mode 100644 js/components/button.reel/button.css create mode 100644 js/components/button.reel/button.html create mode 100644 js/components/button.reel/button.js create mode 100644 js/components/checkbox.reel/checkbox.html create mode 100644 js/components/checkbox.reel/checkbox.js create mode 100644 js/components/colorbar.reel/colorbar.html create mode 100644 js/components/colorbar.reel/colorbar.js create mode 100755 js/components/colorbar.reel/config.rb create mode 100644 js/components/colorbar.reel/css/colorbar.css create mode 100755 js/components/colorbar.reel/css/colorbar.scss create mode 100644 js/components/colorwheel.reel/colorwheel.html create mode 100644 js/components/colorwheel.reel/colorwheel.js create mode 100644 js/components/colorwheel.reel/compass_app_log.txt create mode 100755 js/components/colorwheel.reel/config.rb create mode 100644 js/components/colorwheel.reel/css/colorwheel.css create mode 100755 js/components/colorwheel.reel/css/colorwheel.scss create mode 100644 js/components/combobox.reel/combobox.html create mode 100644 js/components/combobox.reel/combobox.js create mode 100644 js/components/core/class-uuid.js create mode 100755 js/components/gradientpicker.reel/config.rb create mode 100644 js/components/gradientpicker.reel/css/gradientpicker.css create mode 100755 js/components/gradientpicker.reel/css/gradientpicker.scss create mode 100644 js/components/gradientpicker.reel/gradientpicker.html create mode 100644 js/components/gradientpicker.reel/gradientpicker.js create mode 100644 js/components/hottext.reel/hottext.css create mode 100644 js/components/hottext.reel/hottext.html create mode 100644 js/components/hottext.reel/hottext.js create mode 100644 js/components/hottextunit.reel/hottextunit.css create mode 100644 js/components/hottextunit.reel/hottextunit.html create mode 100644 js/components/hottextunit.reel/hottextunit.js create mode 100644 js/components/layout/bread-crumb-button.reel/bread-crumb-button.css create mode 100644 js/components/layout/bread-crumb-button.reel/bread-crumb-button.html create mode 100644 js/components/layout/bread-crumb-button.reel/bread-crumb-button.js create mode 100644 js/components/layout/bread-crumb.reel/bread-crumb.css create mode 100644 js/components/layout/bread-crumb.reel/bread-crumb.html create mode 100644 js/components/layout/bread-crumb.reel/bread-crumb.js create mode 100644 js/components/layout/document-bar.reel/document-bar.css create mode 100644 js/components/layout/document-bar.reel/document-bar.html create mode 100644 js/components/layout/document-bar.reel/document-bar.js create mode 100644 js/components/layout/document-entry.reel/close_button.gif create mode 100644 js/components/layout/document-entry.reel/document-entry.css create mode 100644 js/components/layout/document-entry.reel/document-entry.html create mode 100644 js/components/layout/document-entry.reel/document-entry.js create mode 100644 js/components/layout/documents-tab.reel/documents-tab.css create mode 100644 js/components/layout/documents-tab.reel/documents-tab.html create mode 100644 js/components/layout/documents-tab.reel/documents-tab.js create mode 100644 js/components/layout/stage-mode.reel/stage-mode.css create mode 100644 js/components/layout/stage-mode.reel/stage-mode.html create mode 100644 js/components/layout/stage-mode.reel/stage-mode.js create mode 100644 js/components/layout/subtool-button.reel/subtool-button.css create mode 100644 js/components/layout/subtool-button.reel/subtool-button.html create mode 100644 js/components/layout/subtool-button.reel/subtool-button.js create mode 100644 js/components/layout/tool-button.reel/tool-button.css create mode 100644 js/components/layout/tool-button.reel/tool-button.html create mode 100644 js/components/layout/tool-button.reel/tool-button.js create mode 100644 js/components/layout/tools-list.reel/tools-list.css create mode 100644 js/components/layout/tools-list.reel/tools-list.html create mode 100644 js/components/layout/tools-list.reel/tools-list.js create mode 100644 js/components/layout/tools-properties.reel/tools-properties.css create mode 100644 js/components/layout/tools-properties.reel/tools-properties.html create mode 100644 js/components/layout/tools-properties.reel/tools-properties.js create mode 100644 js/components/menu/menu-entry.reel/menu-entry.css create mode 100644 js/components/menu/menu-entry.reel/menu-entry.html create mode 100644 js/components/menu/menu-entry.reel/menu-entry.js create mode 100644 js/components/menu/menu-item.reel/menu-item.css create mode 100644 js/components/menu/menu-item.reel/menu-item.html create mode 100644 js/components/menu/menu-item.reel/menu-item.js create mode 100644 js/components/menu/menu.reel/menu.css create mode 100644 js/components/menu/menu.reel/menu.html create mode 100644 js/components/menu/menu.reel/menu.js create mode 100644 js/components/package.json create mode 100644 js/components/popup-manager.reel/popup-manager.html create mode 100644 js/components/popup-manager.reel/popup-manager.js create mode 100644 js/components/popup.reel/compass_app_log.txt create mode 100755 js/components/popup.reel/config.rb create mode 100644 js/components/popup.reel/css/popup.css create mode 100755 js/components/popup.reel/css/popup.scss create mode 100644 js/components/popup.reel/popup.html create mode 100644 js/components/popup.reel/popup.js create mode 100644 js/components/radio.reel/radio.html create mode 100644 js/components/radio.reel/radio.js create mode 100644 js/components/slider.reel/knob.png create mode 100644 js/components/slider.reel/slider.css create mode 100644 js/components/slider.reel/slider.html create mode 100644 js/components/slider.reel/slider.js create mode 100644 js/components/textfield.reel/textfield.html create mode 100644 js/components/textfield.reel/textfield.js create mode 100644 js/components/tools-properties/brush-properties.reel/brush-properties.css create mode 100644 js/components/tools-properties/brush-properties.reel/brush-properties.html create mode 100644 js/components/tools-properties/brush-properties.reel/brush-properties.js create mode 100644 js/components/tools-properties/eraser-properties.reel/eraser-properties.css create mode 100644 js/components/tools-properties/eraser-properties.reel/eraser-properties.html create mode 100644 js/components/tools-properties/eraser-properties.reel/eraser-properties.js create mode 100644 js/components/tools-properties/eyedropper-properties.reel/eyedropper-properties.css create mode 100644 js/components/tools-properties/eyedropper-properties.reel/eyedropper-properties.html create mode 100644 js/components/tools-properties/eyedropper-properties.reel/eyedropper-properties.js create mode 100644 js/components/tools-properties/fill-properties.reel/fill-properties.css create mode 100644 js/components/tools-properties/fill-properties.reel/fill-properties.html create mode 100644 js/components/tools-properties/fill-properties.reel/fill-properties.js create mode 100644 js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css create mode 100644 js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html create mode 100644 js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js create mode 100644 js/components/tools-properties/line-properties.reel/line-properties.css create mode 100644 js/components/tools-properties/line-properties.reel/line-properties.html create mode 100644 js/components/tools-properties/line-properties.reel/line-properties.js create mode 100644 js/components/tools-properties/object3d-properties.reel/object3d-properties.html create mode 100644 js/components/tools-properties/object3d-properties.reel/object3d-properties.js create mode 100644 js/components/tools-properties/oval-properties.reel/oval-properties.css create mode 100644 js/components/tools-properties/oval-properties.reel/oval-properties.html create mode 100644 js/components/tools-properties/oval-properties.reel/oval-properties.js create mode 100644 js/components/tools-properties/pan-properties.reel/pan-properties.css create mode 100644 js/components/tools-properties/pan-properties.reel/pan-properties.html create mode 100644 js/components/tools-properties/pan-properties.reel/pan-properties.js create mode 100644 js/components/tools-properties/pen-properties.reel/pen-properties.css create mode 100644 js/components/tools-properties/pen-properties.reel/pen-properties.html create mode 100644 js/components/tools-properties/pen-properties.reel/pen-properties.js create mode 100644 js/components/tools-properties/pencil-properties.reel/pencil-properties.css create mode 100644 js/components/tools-properties/pencil-properties.reel/pencil-properties.html create mode 100644 js/components/tools-properties/pencil-properties.reel/pencil-properties.js create mode 100644 js/components/tools-properties/rect-properties.reel/rect-properties.css create mode 100644 js/components/tools-properties/rect-properties.reel/rect-properties.html create mode 100644 js/components/tools-properties/rect-properties.reel/rect-properties.js create mode 100644 js/components/tools-properties/rotate-stage-properties.reel/rotate-stage-properties.css create mode 100644 js/components/tools-properties/rotate-stage-properties.reel/rotate-stage-properties.html create mode 100644 js/components/tools-properties/rotate-stage-properties.reel/rotate-stage-properties.js create mode 100644 js/components/tools-properties/selection-properties.reel/selection-properties.css create mode 100644 js/components/tools-properties/selection-properties.reel/selection-properties.html create mode 100644 js/components/tools-properties/selection-properties.reel/selection-properties.js create mode 100644 js/components/tools-properties/shape-properties.reel/shape-properties.css create mode 100644 js/components/tools-properties/shape-properties.reel/shape-properties.html create mode 100644 js/components/tools-properties/shape-properties.reel/shape-properties.js create mode 100644 js/components/tools-properties/subselection-properties.reel/subselection-properties.html create mode 100644 js/components/tools-properties/subselection-properties.reel/subselection-properties.js create mode 100644 js/components/tools-properties/tag-properties.reel/tag-properties.css create mode 100644 js/components/tools-properties/tag-properties.reel/tag-properties.html create mode 100644 js/components/tools-properties/tag-properties.reel/tag-properties.js create mode 100644 js/components/tools-properties/text-properties.reel/text-properties.css create mode 100644 js/components/tools-properties/text-properties.reel/text-properties.html create mode 100644 js/components/tools-properties/text-properties.reel/text-properties.js create mode 100644 js/components/tools-properties/tool-properties.js create mode 100644 js/components/tools-properties/zoom-properties.reel/zoom-properties.css create mode 100644 js/components/tools-properties/zoom-properties.reel/zoom-properties.html create mode 100644 js/components/tools-properties/zoom-properties.reel/zoom-properties.js create mode 100644 js/components/tree.reel/tree.css create mode 100644 js/components/tree.reel/tree.html create mode 100644 js/components/tree.reel/tree.js create mode 100644 js/components/tree.reel/treeDisclosure.png create mode 100644 js/components/tree.reel/treeFolderClosed.png create mode 100644 js/components/tree.reel/treeFolderOpen.png create mode 100755 js/components/tree.reel/treeItem.png create mode 100644 js/components/ui/FilePicker/file-picker-controller.js create mode 100644 js/components/ui/FilePicker/file-picker-model.js create mode 100644 js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css create mode 100644 js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html create mode 100644 js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js create mode 100644 js/components/ui/color-chip.reel/color-chip.css create mode 100644 js/components/ui/color-chip.reel/color-chip.html create mode 100644 js/components/ui/color-chip.reel/color-chip.js create mode 100644 js/components/ui/file-input.reel/file-input.css create mode 100644 js/components/ui/file-input.reel/file-input.html create mode 100644 js/components/ui/file-input.reel/file-input.js create mode 100644 js/components/ui/icon-list-basic/icon.reel/icon.css create mode 100644 js/components/ui/icon-list-basic/icon.reel/icon.html create mode 100644 js/components/ui/icon-list-basic/icon.reel/icon.js create mode 100644 js/components/ui/icon-list-basic/iconsList.reel/iconsList.css create mode 100644 js/components/ui/icon-list-basic/iconsList.reel/iconsList.html create mode 100644 js/components/ui/icon-list-basic/iconsList.reel/iconsList.js create mode 100644 js/components/ui/input-group.reel/input-group.css create mode 100644 js/components/ui/input-group.reel/input-group.html create mode 100644 js/components/ui/input-group.reel/input-group.js create mode 100644 js/components/ui/modalDialog/modal-dialog-manager.js create mode 100644 js/components/ui/modalDialog/modalDialogHeader.js create mode 100644 js/components/ui/modalDialog/modalDialogHeader.reel/modalDialogHeader.css create mode 100644 js/components/ui/modalDialog/modalDialogHeader.reel/modalDialogHeader.html create mode 100644 js/components/ui/property-control.reel/property-control.css create mode 100644 js/components/ui/property-control.reel/property-control.html create mode 100644 js/components/ui/property-control.reel/property-control.js create mode 100644 js/components/ui/radio-button.reel/radio-button.html create mode 100644 js/components/ui/radio-button.reel/radio-button.js create mode 100644 js/components/ui/row-renderer.reel/row-renderer.html create mode 100644 js/components/ui/row-renderer.reel/row-renderer.js create mode 100644 js/components/ui/tree-basic/tree.reel/tree.css create mode 100644 js/components/ui/tree-basic/tree.reel/tree.html create mode 100644 js/components/ui/tree-basic/tree.reel/tree.js create mode 100644 js/components/ui/tree-basic/treeItem.reel/treeItem.css create mode 100644 js/components/ui/tree-basic/treeItem.reel/treeItem.html create mode 100644 js/components/ui/tree-basic/treeItem.reel/treeItem.js (limited to 'js/components') diff --git a/js/components/SliderBase.js b/js/components/SliderBase.js new file mode 100644 index 00000000..9f007456 --- /dev/null +++ b/js/components/SliderBase.js @@ -0,0 +1,282 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +// Slider, HotText and HotTextUnit will extend this class. +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +var SliderBase = exports.SliderBase = Montage.create(Component, { + + _hasFocus: { + enumerable: false, + value: false + }, + + _touchIdentifier: { + enumerable: false, + value: null + }, + + _xStart: { + enumerable: false, + value: 0 + }, + + _yStart: { + enumerable: false, + value: 0 + }, + + _previousValue: { + enumerable: false, + value: null + }, + + _isMouseDown: { + enumerable: true, + value: false + }, + + // We need to calculate some metrics on the first draw after prepareForDraw because + // styles values are not available during prepareForDraw + _firstTime: { + enumerable: false, + value: true + }, + + _enabled: { + enumerable: true, + value: true + }, + + enabled: { + enumerable: true, + get: function() { + return this._enabled; + }, + set: function(value) { + + if (value !== this._enabled) { + this._enabled = value; + if(this._enabled) + { + this.element.classList.remove("disabled"); + + this.element.addEventListener("blur", this); + this.element.addEventListener("focus", this); + + this.element.addEventListener("touchstart", this, false); + this.element.addEventListener("mousedown", this, false); + } + else + { + this.element.classList.add("disabled"); + + this.element.removeEventListener("blur", this); + this.element.removeEventListener("focus", this); + + this.element.removeEventListener("touchstart", this, false); + this.element.removeEventListener("mousedown", this, false); + } + this.needsDraw = true; + } + } + }, + + // Internal flags to determine what the change/changing events will contain + _eventType: { + enumerable: false, + value: "change" + }, + + _wasSetByCode: { + enumerable: false, + value: true + }, + + _setEventFlags: { + value: function (eventType, wasSetByCode) { + this._eventType = eventType; + this._wasSetByCode = wasSetByCode; + } + }, + + _value: { + enumerable: false, + value: 0 + }, + + value: { + enumerable: true, + get: function() { + return this._value; + }, + set: function(value) { + if (isNaN(value)) { + return; + } + + if (value < this._minValue) { + value = this._minValue; + } + else if (value > this._maxValue) { + value = this._maxValue; + } + + if (value !== this._value) { + this._value = value; + this.needsDraw = true; + this._dispatchActionEvent(); + } + } + }, + + _minValue: { + enumerable: false, + value: 0 + }, + + minValue: { + get: function() { + return this._minValue; + }, + set: function(value) { + if (value !== this._minValue) { + this._minValue = value; + this._firstTime = true; // Force layout recalculation. + if (this._value < value) + { + this.value = value; + } + this.needsDraw = true; + } + } + }, + + _maxValue: { + enumerable: false, + value: 100 + }, + + maxValue: { + get: function() { + return this._maxValue; + }, + set: function(value) { + if (value !== this._maxValue) { + this._maxValue = value; + this._firstTime = true; // Force layout recalculation. + if (this._value > value) + { + this.value = value; + } + this.needsDraw = true; + } + } + }, + + _valueCoef: { + value: 1 + }, + + _valueFromPageOffset: { + value: function(offset, pageY, isShiftKeyPressed) { + // Implement in subclass. + } + }, + + handleMousedown: { + value: function (event) { +// event.preventDefault(); // Commenting out -- other elements need to blur when we are moused down + var clickPoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(event.pageX, event.pageY)); + this._xStart = clickPoint.x; + this._yStart = clickPoint.y; + this._previousValue = this.value; + this._isMouseDown = true; + document.addEventListener("mousemove", this, false); + document.addEventListener("mouseup", this, false); + } + }, + + handleTouchstart: { + value: function (event) { + event.preventDefault(); // Not sure how to let other elements blur if we need to override mobile behavior + var touch = event.targetTouches[0]; + this._touchIdentifier = touch.identifier; + var clickPoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(touch.pageX,touch.pageY)); + this._xStart = clickPoint.x; + this._yStart = clickPoint.y; + this._previousValue = this.value; + this._isMouseDown = true; + document.addEventListener("touchmove", this, false); + document.addEventListener("touchend", this, false); + } + }, + + handleMousemove: { + value: function (event) { + event.target.style.cursor = "pointer"; + this._setEventFlags("changing", false); + this._valueFromPageOffset(event.pageX, event.pageY, event.shiftKey); + } + }, + + handleTouchmove: { + value: function (event) { + for(var i=0, iTouch; iTouch = event.changedTouches[i]; i++) { + if (iTouch.identifier === this._touchIdentifier) { + this._setEventFlags("changing", false); + this._valueFromPageOffset(iTouch.pageX, iTouch.pageY, false); + break; + } + } + } + }, + + handleMouseup: { + value: function (event) { + document.removeEventListener("mousemove", this); + document.removeEventListener("mouseup", this); + this._isMouseDown = false; + event.target.style.cursor = "default"; + this._setEventFlags("change", false); + this._valueFromPageOffset(event.pageX, event.pageY, event.shiftKey); + this._previousValue = null; + } + }, + + handleTouchend: { + enumerable: false, + value: function (event) { + for(var i=0, iTouch; iTouch = event.changedTouches[i]; i++) { + if (iTouch.identifier === this._touchIdentifier) { + this._touchIdentifier = null; + this._isMouseDown = false; + document.removeEventListener("touchmove", this); + document.removeEventListener("touchend", this); + this._setEventFlags("change", false); + this._valueFromPageOffset(iTouch.pageX, iTouch.pageY, false); + this._previousValue = null; + break; + } + } + } + }, + + _dispatchActionEvent: { + value: function() { +// console.log("dispatching event", this._element.id, this._eventType, this._wasSetByCode); + var actionEvent = document.createEvent("CustomEvent"); + actionEvent.initEvent(this._eventType, true, true); + actionEvent.type = this._eventType; + actionEvent.wasSetByCode = this._wasSetByCode; + // reset event flags + this._setEventFlags("change", true); + this.dispatchEvent(actionEvent); + } + } + +}); diff --git a/js/components/button.reel/button.css b/js/components/button.reel/button.css new file mode 100644 index 00000000..f50a9873 --- /dev/null +++ b/js/components/button.reel/button.css @@ -0,0 +1,40 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +.button { + border:none; + cursor:default; + text-align:center; + -webkit-user-select:none; + opacity:0.8; + display:table-cell; + vertical-align:middle; + width:100%; + height:100%; + background-color:#333333; + color:white; +} + +.button:hover +{ + opacity:1; +} + +.button:active +{ + outline:solid 1px black; +} + +.button.on +{ + background-color: #333333; +} + +.button.off +{ + background-color: #cccccc; + color:black; +} \ No newline at end of file diff --git a/js/components/button.reel/button.html b/js/components/button.reel/button.html new file mode 100644 index 00000000..d0398a6a --- /dev/null +++ b/js/components/button.reel/button.html @@ -0,0 +1,26 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/js/components/button.reel/button.js b/js/components/button.reel/button.js new file mode 100644 index 00000000..ce5ac1af --- /dev/null +++ b/js/components/button.reel/button.js @@ -0,0 +1,225 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +var Montage = require("montage/core/core").Montage, +Component = require("montage/ui/component").Component; + +var Button = exports.Button = Montage.create(Component, { + // Button state + _focused: { + value: false + }, + + _pressed: { + value: false + }, + + _isToggleButton: { + value: false + }, + + isToggleButton: { + serializable: true, + enumerable: true, + get: function() { + return this._isToggleButton; + }, + set: function(value) { + if (value !== this._isToggleButton) { + this._isToggleButton = value; + this.needsDraw = true; + } + } + }, + + _value: { + value: false + }, + + value: { + serializable: true, + enumerable: true, + get: function() { + return this._value; + }, + set: function(value) { + if ( (value !== null) && (value !== this._value) ) { + this._value = value; + this.needsDraw = true; + } + } + }, + + _label: { + value: "" + }, + + label: { + serializable: true, + enumerable: true, + get: function() { + return this._label; + }, + set: function(value) { + if (value !== this._label) { + this._label = value; + this.needsDraw = true; + } + } + }, + + // TODO - Allow user to specify up, over and down states + _onState: { + value: "on" + }, + + onState: { + serializable: true, + enumerable: true, + get: function() { + return this._onState; + }, + set: function(value) { + if (value !== this._onState) { + this._onState = value; + this.needsDraw = true; + } + } + }, + + _offState: { + value: "off" + }, + + offState: { + serializable: true, + enumerable: true, + get: function() { + return this._offState; + }, + set: function(value) { + if (value !== this._offState) { + this._offState = value; + this.needsDraw = true; + } + } + }, + + // Low-level event listeners + handleTouchstart: { + value: function(event) { + // TODO preventingDefault disables the magnifying class + // sadly it also disables double tapping on the button to zoom... + event.preventDefault(); + this._acknowledgeIntent(); + } + }, + + handleMousedown: { + value: function(event) { + this._acknowledgeIntent(); + } + }, + + handleTouchend: { + value: function(event) { + this._interpretInteraction(event); + } + }, + + handleTouchcancel: { + value: function(event) { + console.log("cancel!") + // this._interpretInteraction(event); + } + }, + + handleMouseup: { + value: function(event) { + this._interpretInteraction(event); + } + }, + + // Internal state management + _acknowledgeIntent: { + value: function() { + this._pressed = true; + this.element.classList.add("pressed"); + } + }, + + _interpretInteraction: { + value: function(event) { + + if (!this._pressed) { + return; + } + + this.value = !this.value; + + this._pressed = false; + this._dispatchActionEvent(); + } + }, + + _dispatchActionEvent: { + value: function() { + var actionEvent = document.createEvent("CustomEvent"); + actionEvent.initCustomEvent("action", true, true); + actionEvent.type = "action"; + this.dispatchEvent(actionEvent); + } + }, + + draw: { + enumerable: false, + value: function() { + if(this.isToggleButton) + { + if(this._value) + { + this.element.classList.remove(this.offState); + this.element.classList.add(this.onState); + } + else + { + this.element.classList.remove(this.onState); + this.element.classList.add(this.offState); + } + } + + if(this.label && this.label !== "") + { + this.element.textContent = this.label; + } + } + }, + + prepareForDraw: { + value: function() { + + // TODO only install low level event listeners for high level + // events others listen to us for + + this.element.addEventListener("touchstart", this); + // TODO listen to mouseup anywhere within the app + document.addEventListener("touchend", this); + document.addEventListener("touchcancel", this); + + + this.element.addEventListener("mousedown", this); + + // TODO listen to mouseup anywhere within the app + document.addEventListener("mouseup", this); + + // TODO accept space or enter as a way to trigger action + // if element targeted; balancing demans of multitouch + // with traditional single focus model + document.addEventListener("keydown", this, true); + } + } + +}); diff --git a/js/components/checkbox.reel/checkbox.html b/js/components/checkbox.reel/checkbox.html new file mode 100644 index 00000000..3d523a98 --- /dev/null +++ b/js/components/checkbox.reel/checkbox.html @@ -0,0 +1,24 @@ + + + + + + + + + + \ No newline at end of file diff --git a/js/components/checkbox.reel/checkbox.js b/js/components/checkbox.reel/checkbox.js new file mode 100644 index 00000000..f06e5830 --- /dev/null +++ b/js/components/checkbox.reel/checkbox.js @@ -0,0 +1,99 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +exports.Checkbox = Montage.create(Component, { + + _valueSyncedWithInputField: { + enumerable: false, + value: false + }, + + _wasSetByCode: { + enumerable: false, + value: true + }, + + prependLabel: { + value: false + }, + + label: { + value: null + }, + + value: { + value: false + }, + + _checked: { + enumerable: false, + value: false + }, + + checked: { + enumerable: true, + serializable: true, + get: function() { + return this._checked; + }, + set: function(value) { + this._checked = value; + this.needsDraw = true; + + var e = document.createEvent("CustomEvent"); + e.initEvent("change", true, true); + e.type = "change"; + e.wasSetByCode = this._wasSetByCode; + e.value = value; + this.value = value; + this.dispatchEvent(e); + + this._wasSetByCode = true; + } + }, + + handleChange: + { + value:function(event) + { + this._valueSyncedWithInputField = true; + this._wasSetByCode = false; + this.checked = this.element.checked; + } + }, + handleClick: { + value: function() { + this._wasSetByCode = false; + this.checked = !this.element.checked; + } + }, + + draw: { + value: function() { + if(!this._valueSyncedWithInputField) + { + this.element.checked = this._checked; + } + this._valueSyncedWithInputField = false; + } + }, + + prepareForDraw: { + value: function() { + if (this.label !== null) { + var b = document.createElement("label"); + b.innerHTML = this.label; + this.element.appendChild(b); + b.addEventListener("click", this, false); + } + this.element.addEventListener("change", this, false); + } + } + +}); \ No newline at end of file diff --git a/js/components/colorbar.reel/colorbar.html b/js/components/colorbar.reel/colorbar.html new file mode 100644 index 00000000..f74f1437 --- /dev/null +++ b/js/components/colorbar.reel/colorbar.html @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/js/components/colorbar.reel/colorbar.js b/js/components/colorbar.reel/colorbar.js new file mode 100644 index 00000000..e547b9bc --- /dev/null +++ b/js/components/colorbar.reel/colorbar.js @@ -0,0 +1,227 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +//////////////////////////////////////////////////////////////////////// +// +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; +//////////////////////////////////////////////////////////////////////// +//Exporting as ColorBar +exports.ColorBar = Montage.create(Component, { + //////////////////////////////////////////////////////////////////// + //No reel needed since it's just a bar component + hasTemplate: { + value: true + }, + //////////////////////////////////////////////////////////////////// + //Width of spectrum (not including b/w buttons) + _colorBarSpectrumWidth: { + enumerable: false, + value: null + }, + //////////////////////////////////////////////////////////////////// + //Width of spectrum steps (used to calculate size of B/W buttons) + _colorBarSpectrumWidthSteps: { + enumerable: false, + value: 10 + }, + //////////////////////////////////////////////////////////////////// + //Default value + _value: { + enumerable: false, + value: {h: 0, s: 0, v: 0} + }, + //////////////////////////////////////////////////////////////////// + //HSV Value selected from bar + value: { + enumerable: true, + get: function() { + return this._value; + }, + set: function(value) { + if (value) { + //Checking for limits (Max and Min HSV values) + if (value.h > Math.PI*2) { + value.h = Math.PI*2; + } else if (value.h < 0) { + value.h = 0; + } + // + if (value.s > 1) { + value.s = 1; + } else if (value.s < 0) { + value.s = 0; + } + // + if (value.v > 1) { + value.v = 1; + } else if (value.v < 0) { + value.v = 0; + } + //Setting value + this._value = value; + // + if (!this._isMouseDown) { + this._dispatchActionEvent('change', true); + } + } + } + }, + //////////////////////////////////////////////////////////////////// + // + prepareForDraw: { + enumerable: false, + value: function() { + //Nothing + } + }, + //////////////////////////////////////////////////////////////////// + //Setting up and drawing canvas to object + willDraw: { + enumerable: false, + value: function() { + //Setting the width and height of the canvas to match container + this.element.width = parseInt(window.getComputedStyle(this.element, null).width); + this.element.height = parseInt(window.getComputedStyle(this.element, null).height); + } + }, + //////////////////////////////////////////////////////////////////// + // + draw: { + value: function () { + //Local variables + var cb_canvas = this.element, cb_ctx, cb_grdnt, cb_slc, cb_gwidth, PI = Math.PI, i; + //calculating width of spectrum (remainder is used for B/W buttons) + cb_gwidth = Math.round(cb_canvas.width - cb_canvas.width/this._colorBarSpectrumWidthSteps); + //Context and Gradient + cb_ctx = cb_canvas.getContext('2d'); + cb_grdnt = cb_ctx.createLinearGradient(0, cb_canvas.height, cb_gwidth, cb_canvas.height); + //////////////////////////////////////////////////////// + //Looping through set intervals (Creating spectrum) + for (i=0; i<60; i++) { + //Calculating slice number + cb_slc = Math.round(255*i/60); + //Creating gradient slices (6 colors in color theory) + cb_grdnt.addColorStop(i/360, 'rgb(255, '+cb_slc+', 0)'); + cb_grdnt.addColorStop((i+60)/360, 'rgb('+(255-cb_slc)+', 255, 0)'); + cb_grdnt.addColorStop((i+120)/360, 'rgb(0, 255, '+cb_slc+')'); + cb_grdnt.addColorStop((i+180)/360, 'rgb(0, '+(255-cb_slc)+', 255)'); + cb_grdnt.addColorStop((i+240)/360, 'rgb('+cb_slc+', 0, 255)'); + cb_grdnt.addColorStop((i+300)/360, 'rgb(255, 0,'+(255-cb_slc)+')'); + } + //Adding Color Bar to the canvas (Gradients) + cb_ctx.fillStyle = cb_grdnt; + cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); + //////////////////////////////////////////////////////// + //White Gradient overlay to simulate L + cb_grdnt = cb_ctx.createLinearGradient(0, 0, 0, cb_canvas.height); + cb_grdnt.addColorStop(0.0, 'rgba(255, 255, 255, 1)'); + cb_grdnt.addColorStop(0.5, 'rgba(255, 255, 255, 0)'); + cb_ctx.fillStyle = cb_grdnt; + cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); + //Black Gradient overlay to simulate S + cb_grdnt = cb_ctx.createLinearGradient(0,0,0,cb_canvas.height); + cb_grdnt.addColorStop(0.5, 'rgba(0, 0, 0, 0)'); + cb_grdnt.addColorStop(1.0, 'rgba(0, 0, 0, 1)'); + cb_ctx.fillStyle = cb_grdnt; + cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); + //Black "button" + cb_ctx.fillStyle = "#000"; + cb_ctx.fillRect(cb_gwidth, cb_canvas.height/2, cb_gwidth, cb_canvas.height/2); + //Black line divider + cb_ctx.fillStyle = "#000"; + cb_ctx.fillRect(cb_gwidth-1, 0, cb_gwidth+1, cb_canvas.height); + //White "button" + cb_ctx.fillStyle = "#FFF"; + cb_ctx.fillRect(cb_gwidth, 0, cb_gwidth, cb_canvas.height/2); + //Saving + cb_ctx.restore(); + cb_ctx.save(); + //Cleaning up + cb_canvas = cb_ctx = cb_grdnt = cb_slc = cb_gwidth = PI = i = null; + } + }, + //////////////////////////////////////////////////////////////////// + //Adding ColorBar to the element + didDraw: { + value: function() { + //Adding functionality via events + this.element.addEventListener("mousedown", this, false); + this.element.addEventListener("mouseover", this, false); + this.element.addEventListener("mousemove", this, false); + } + }, + //////////////////////////////////////////////////////////////////// + //Mouse Down (adds other events and updates HSV) + handleMousedown: { + value: function (e) { + if (!this._colorBarSpectrumWidth) + this._colorBarSpectrumWidth = (this.element.width - this.element.width/this._colorBarSpectrumWidthSteps)-1; + this._isMouseDown = true; + document.addEventListener("mouseup", this, false); + this._updateHsv(e); + } + }, + //////////////////////////////////////////////////////////////////// + //Used to check mouse mode and display cursor + _isMouseDown: { + enumerable: false, + value: false + }, + //////////////////////////////////////////////////////////////////// + //Mouse Move (updates HSV) + handleMousemove: { + value: function (e) { + //Changing cursors style for appropiate user feedback + if (e.offsetX > this._colorBarSpectrumWidth) {this.element.style.cursor = 'pointer';} + else {this.element.style.cursor = 'crosshair';} + //Checking for mouse down to scan for color + if (this._isMouseDown) {this._updateHsv(e);} + } + }, + //////////////////////////////////////////////////////////////////// + //Mouse Up (Removes events) + handleMouseup: { + value: function (e) { + this._isMouseDown = false; + document.removeEventListener("mouseup", this, false); + this._dispatchActionEvent('change', false); + } + }, + //////////////////////////////////////////////////////////////////// + //Updating HSV values + _updateHsv: { + value: function (e) { + if (e.offsetX > this._colorBarSpectrumWidth) { + //Faking button functionality - Simple B/W selection + if (e.offsetY >= this.element.offsetHeight/2) { this.value = {h: this.value.h, s: 1, v: 0};} // White + else { this.value = {h: this.value.h, s: 0, v: 1};} // Black + } else { + //Checking for S or V to be applied (no mixing on bar) + if (e.offsetY >= this.element.offsetHeight/2) { //Saturation + this.value = {h: e.offsetX/this._colorBarSpectrumWidth*Math.PI*2, v: 1-(e.offsetY-this.element.offsetHeight/2)/((this.element.offsetHeight/2-1)), s: 1}; + } else { //Vibrance + this.value = {h: e.offsetX/this._colorBarSpectrumWidth*Math.PI*2, v: 1, s: (e.offsetY)/((this.element.offsetHeight/2))}; + } + } + // + this._dispatchActionEvent('changing', false); + } + }, + //////////////////////////////////////////////////////////////////// + //Dispatching "Change" event + _dispatchActionEvent: { + value: function(type, userInitiated) { + var actionEvent = document.createEvent("CustomEvent"); + actionEvent.initEvent(type, true, true); + actionEvent.type = type; + actionEvent.wasSetByCode = userInitiated; + actionEvent.hsv = this.value; + this.dispatchEvent(actionEvent); + } + } + //////////////////////////////////////////////////////////////////// +}); \ No newline at end of file diff --git a/js/components/colorbar.reel/config.rb b/js/components/colorbar.reel/config.rb new file mode 100755 index 00000000..9b55af19 --- /dev/null +++ b/js/components/colorbar.reel/config.rb @@ -0,0 +1,9 @@ +# Require any additional compass plugins here. +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "css" +images_dir = "img" +javascripts_dir = "../" +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true diff --git a/js/components/colorbar.reel/css/colorbar.css b/js/components/colorbar.reel/css/colorbar.css new file mode 100644 index 00000000..b5b3436c --- /dev/null +++ b/js/components/colorbar.reel/css/colorbar.css @@ -0,0 +1,12 @@ +@charset "UTF-8"; +/* + + This file contains proprietary software owned by Motorola Mobility, Inc. + No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder. + (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + +*/ +/* line 10, colorbar.scss */ +.colorbar { + cursor: crosshair; +} diff --git a/js/components/colorbar.reel/css/colorbar.scss b/js/components/colorbar.reel/css/colorbar.scss new file mode 100755 index 00000000..0bbc8de4 --- /dev/null +++ b/js/components/colorbar.reel/css/colorbar.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +.colorbar +{ + cursor: crosshair; +} \ No newline at end of file diff --git a/js/components/colorwheel.reel/colorwheel.html b/js/components/colorwheel.reel/colorwheel.html new file mode 100644 index 00000000..0374e6a3 --- /dev/null +++ b/js/components/colorwheel.reel/colorwheel.html @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + +
+ + + + +
+ + + + \ No newline at end of file diff --git a/js/components/colorwheel.reel/colorwheel.js b/js/components/colorwheel.reel/colorwheel.js new file mode 100644 index 00000000..343422e2 --- /dev/null +++ b/js/components/colorwheel.reel/colorwheel.js @@ -0,0 +1,536 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +//////////////////////////////////////////////////////////////////////// +// +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; +//////////////////////////////////////////////////////////////////////// +// +exports.ColorWheel = Montage.create(Component, { + //////////////////////////////////////////////////////////////////// + // + hasTemplate: { + enumerable: false, + value: true + }, + //////////////////////////////////////////////////////////////////// + //Value of wheel in HSV (360, 100, 100) + _value: { + enumerable: false, + value: {h: 0, s: 0, v: 0} + }, + //////////////////////////////////////////////////////////////////// + //Value of wheel in HSV (360, 100, 100) + value: { + enumerable: false, + get: function() { + return this._value; + }, + set: function(value) { + this._value = value; + if (this._wheelData) { + if (value && !value.wasSetByCode) { + this.wheelSelectorAngle(value.h/this.element._component.math.TAU*360); + this.drawSwatchColor(value.h/this.element._component.math.TAU*360); + this.drawSwatchSelector(value.s*100, value.v*100); + } + if (!this._isMouseDown) { + this._dispatchEvent('change', true); + } + } + } + }, + //////////////////////////////////////////////////////////////////// + //Stroke size of wheel + _strokeWidth: { + enumerable: false, + value: 2 + }, + //////////////////////////////////////////////////////////////////// + //Size must be set in digits and interpreted as pixel + strokeWidth: { + enumerable: false, + get: function() { + return this._strokeWidth; + }, + set: function(value) { + this._strokeWidth = value; + } + }, + //////////////////////////////////////////////////////////////////// + //Stroke color of wheel + _strokeColor: { + enumerable: false, + value: 'rgb(255, 255, 255)' + }, + //////////////////////////////////////////////////////////////////// + //Stroke only apply to wheel rim + strokeColor: { + enumerable: false, + get: function() { + return this._strokeColor; + }, + set: function(value) { + this._strokeColor = value; + } + }, + //////////////////////////////////////////////////////////////////// + //Width of the rim + _rimWidth: { + enumerable: false, + value: 2 + }, + //////////////////////////////////////////////////////////////////// + //Width must be set using digits interpreted as pixel + rimWidth: { + enumerable: false, + get: function() { + return this._rimWidth; + }, + set: function(value) { + this._rimWidth = value; + } + }, + //////////////////////////////////////////////////////////////////// + // + prepareForDraw: { + enumerable: false, + value: function() { + // + this.element._component = {wheel: {}, swatch: {}, wheel_select: {}, swatch_select: {}, math: {}}; + // + this.element._component.math.PI = Math.PI, + this.element._component.math.TAU = Math.PI*2, + this.element._component.