├── .gitignore ├── AUTHORS ├── LICENSE ├── README.md ├── contrib ├── hammerjs │ ├── LICENSE │ ├── hammer.fakemultitouch.js │ ├── hammer.min.js │ └── hammer.min.map └── jquery-1.9.1.js ├── docs ├── layout-options.png ├── simple-hover-outside.png ├── simple-hover.png └── simple.png ├── drumjs.jquery.json ├── examples ├── clock.html ├── countries.html ├── datetime.html ├── datetime_range.html ├── inside_outside.html ├── layout_options.html └── simple.html ├── issues ├── lib ├── drum.css ├── drum.js ├── drum.min.css └── drum.min.js └── todo.md /.gitignore: -------------------------------------------------------------------------------- 1 | ### OSX ### 2 | .DS_Store 3 | .AppleDouble 4 | .LSOverride 5 | Icon 6 | 7 | # Thumbnails 8 | ._* 9 | 10 | # Files that might appear on external disk 11 | .Spotlight-V100 12 | .Trashes 13 | 14 | -------------------------------------------------------------------------------- /AUTHORS: -------------------------------------------------------------------------------- 1 | Authors ordered by first contribution 2 | 3 | Marcel Bretschneider 4 | Matthias Mohr 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 Marcel Bretschneider (marcel.bretschneider@gmail.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | DrumJS 2 | ====== 3 | 4 | DrumJs is a jQuery plugin, which allows to replace a simple native HTMLselect Element with 3d cylinder as an alternate selector. 5 | 6 | The user can, similar to the ios datepicker, select a value by rotating the cylinder vertically with the mouse or with touch gestures. 7 | 8 | This plugin is based on HammerJS, a JavaScript library which provides a canonical treatment of touch gestures for different operating systems and a simulation for desktop browser with the mouse. 9 | 10 | #### What does DrumJS 11 | DrumJS appends a new DOM element to the HTMLselect element, which provides all the ingredients for the 3d projection of a vertical roller, called the drum. The drum consists of a fixed amound of panels where each represends the content of one option from the HTMLselect element. 12 | 13 | The highlighted Item of the drum is the currently selected option of the HTMLselect element. The user can now dail a another option by clicking on the upper or lower area of the widget or, if HammerJS is sourced, by vertical swiping over the widget with touch gestures. 14 | 15 | To achieve a uniform presentation, the number panels is fixed. The plugin makes sure that optionlist are also added with more or less items as the panelCount properly in the drum. 16 | 17 | The root element of the appended DOM holds the className **drum-wrapper**. An element Id is added to the rootelement, if the HTMLselect itself has an {id} or {name} attribute. In this case, the id of the widgets root element is set to ```drum_{id}``` or ```drum_{name}``` in this order. 18 | 19 | 20 |
... 21 | 22 | 23 |
... 24 | 25 | Thus, the widget can be uniquely addressed with CSS. 26 | 27 | #### Demo 28 | The following examples demonstrate what is possible with the DrumJS widget: 29 | 30 | [simple example](https://3epnm.de/drumjs/examples/simple.html) 31 | 32 | [inside outside dial example](https://3epnm.de/drumjs/examples/inside_outside.html) 33 | 34 | [datetime picker](https://3epnm.de/drumjs/examples/datetime.html) 35 | 36 | [datetime range picker](https://3epnm.de/drumjs/examples/datetime_range.html) 37 | 38 | [clock example](https://3epnm.de/drumjs/examples/clock.html) 39 | 40 | [layout options example](https://3epnm.de/drumjs/examples/layout_options.html) 41 | 42 | 43 | ### Prerequisites 44 | 45 | The plugin follows the progressive enhancement approach and works on an HTMLselect element as a data source. A selected item is stored and read from the selectedIndex value of the the Htmlselect element. 46 | 47 | The plugin consists of a JavaScript and a CSS file: 48 | 49 | 50 | 51 | 52 | The enhancement to a drumjs widget is done by calling calling the plugin on a selected HTMLselect element: 53 | 54 | 62 | 65 | 66 | Doing so, the HTMLselect element is hidden and the values are shown as a cylindrical 3d projection. 67 | 68 | ![](https://raw.githubusercontent.com/3epnm/drumjs/master/docs/simple.png "simple drumjs example") 69 | 70 | Without the HammerJS library, the plugin only works by clicking on the upper and lower area of ​​the widget. This functionality allows the use even if no touch gestures are supported. 71 | 72 | ![](https://raw.githubusercontent.com/3epnm/drumjs/master/docs/simple-hover.png "simple-hover drumjs example") 73 | 74 | A hover effect indecates where the active areas are. By clicking on the areas the drum is turned up or down. The highlighted item is immediately written as selected index element in the HtmlSelect. 75 | 76 | ### Touch support with HammerJS 77 | 78 | Touch gestures are active if the HammerJS lib is loaded. 79 | 80 | 81 | 82 | HammerJS also supports the simulation of gestures with the mouse. For this purpose, the fakemultitouch-plugin could loaded and activated. 83 | 84 | 85 | 88 | 89 | ### Options and Events 90 | 91 | The plugins supports some options: 92 | 93 | ###### panelCount [integer] 94 | The panelCount option sets the amount of panels within the drum. The default value is set to 16 panels. With this option in particular the curve of the roller can be changed. Default: **16** 95 | 96 | ###### interactive [boolean] 97 | If no manual change of the value is desired, this can be disabled with set interactive to false. 98 | Default: **true** 99 | 100 | The following options relate to the icons which are displayed when hovering over the widget. The icons are SVGs which are prepared in accordance by the plugin. 101 | 102 | ###### dail_w [integer] 103 | The width of the SVG icon. 104 | Default: **20** 105 | 106 | ###### dail_h [integer] 107 | The height of the SVG icon. 108 | Default: **5** 109 | 110 | ###### dail_stroke_color [hex-color-value] 111 | The stroke color of the SVG icon. 112 | Default: **#999999** 113 | 114 | ###### dail_stroke_width [integer] 115 | The width of the SVG icons stroke. 116 | Default: **1** 117 | 118 | The plugin fires a event if the index is changed. A callback function could set to the options map to register for the event: 119 | 120 | ###### onChange 121 | If an event happens, the callback function is called with the associated HTMLselect element as the argument. This is sufficient for analysis and manipulation of the widget. 122 | 123 | $("select.drum").drum({ 124 | onChange : function (e) { 125 | alert(e.value); 126 | } 127 | }); 128 | 129 | ### Methods 130 | The plugin provides methods for reading and writing the selected index. With this methods, the drum could be set to a specific index with JavaScript. 131 | 132 | ###### (integer) getIndex 133 | The getIndex() simple returns the currently selected index of the widget (and HTMLselect element) 134 | 135 | var index = $("select").drum('getIndex'); 136 | 137 | ###### (void) setIndex 138 | The setIndex() method sets the index of the drum to a specific value. The widget is changed accordingly. 139 | 140 | $("select").drum('setIndex', 42); 141 | 142 | ### Layout Options 143 | Changing the layout is mainly done by changing and overriding the CSS provided by the plugin. In the examples is some of the options are presented. 144 | 145 | One option is already prepared in the plugin css and allows the display of the Dail icons inside or outside the drum. 146 | 147 | By default, the Icons for dailing the drum are rendered inside the drum area. For rendering the dial icons outside the drum area, the classname **outside** could added to the body element (or any other element wrapping the corresponding HTMLSelect Element) 148 | 149 | 150 | 158 | 161 | 162 | 163 | which results in a following view of the widget: 164 | 165 | ![](https://raw.githubusercontent.com/3epnm/drumjs/master/docs/simple-hover-outside.png "simple-hover-outside drumjs example") 166 | 167 | ##### Other layout options 168 | In particular, when changing the panel count an adjustment of the widget css is required. The following example demonstrates how a larger number of panels and adjusted css changes the appearance of the widget. (The ID of the widget DOM was generated from the ID of the HTMLselect element) 169 | 170 | 196 | 197 | 206 | 207 | 216 | 217 | Results into: 218 | 219 | ![](https://raw.githubusercontent.com/3epnm/drumjs/master/docs/layout-options.png "layout options drumjs example") 220 | 221 | ### Thanx 222 | 223 | Many thanks to David DeSandro for his extensive tutorial about 3d animations with css. 224 | 225 | http://desandro.github.io/3dtransforms/ 226 | -------------------------------------------------------------------------------- /contrib/hammerjs/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (C) 2013 by Jorik Tangelder (Eight Media) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. -------------------------------------------------------------------------------- /contrib/hammerjs/hammer.fakemultitouch.js: -------------------------------------------------------------------------------- 1 | (function(Hammer) { 2 | /** 3 | * enable multitouch on the desktop by pressing the shiftkey 4 | * the other touch goes in the opposite direction so the center keeps at its place 5 | * it's recommended to enable Hammer.debug.showTouches for this one 6 | */ 7 | Hammer.plugins.fakeMultitouch = function() { 8 | // keeps the start position to keep it centered 9 | var start_pos = false; 10 | 11 | // test for msMaxTouchPoints to enable this for IE10 with only one pointer (a mouse in all/most cases) 12 | Hammer.HAS_POINTEREVENTS = navigator.msPointerEnabled && 13 | navigator.msMaxTouchPoints && navigator.msMaxTouchPoints >= 1; 14 | 15 | /** 16 | * overwrites Hammer.event.getTouchList. 17 | * @param {Event} ev 18 | * @param TOUCHTYPE type 19 | * @return {Array} Touches 20 | */ 21 | Hammer.event.getTouchList = function(ev, eventType) { 22 | // get the fake pointerEvent touchlist 23 | if(Hammer.HAS_POINTEREVENTS) { 24 | return Hammer.PointerEvent.getTouchList(); 25 | } 26 | // get the touchlist 27 | else if(ev.touches) { 28 | return ev.touches; 29 | } 30 | 31 | // reset on start of a new touch 32 | if(eventType == Hammer.EVENT_START) { 33 | start_pos = false; 34 | } 35 | 36 | // when the shift key is pressed, multitouch is possible on desktop 37 | // why shift? because ctrl and alt are taken by osx and linux 38 | if(ev.shiftKey) { 39 | // on touchstart we store the position of the mouse for multitouch 40 | if(!start_pos) { 41 | start_pos = { 42 | pageX: ev.pageX, 43 | pageY: ev.pageY 44 | }; 45 | } 46 | 47 | var distance_x = start_pos.pageX - ev.pageX; 48 | var distance_y = start_pos.pageY - ev.pageY; 49 | 50 | // fake second touch in the opposite direction 51 | return [ 52 | { 53 | identifier: 1, 54 | pageX : start_pos.pageX - distance_x - 50, 55 | pageY : start_pos.pageY - distance_y - -50, 56 | target : ev.target 57 | }, 58 | { 59 | identifier: 2, 60 | pageX : start_pos.pageX + distance_x - -50, 61 | pageY : start_pos.pageY + distance_y - 50, 62 | target : ev.target 63 | } 64 | ]; 65 | } 66 | // normal single touch 67 | else { 68 | start_pos = false; 69 | return [ 70 | { 71 | identifier: 1, 72 | pageX : ev.pageX, 73 | pageY : ev.pageY, 74 | target : ev.target 75 | } 76 | ]; 77 | } 78 | }; 79 | }; 80 | 81 | })(window.Hammer); -------------------------------------------------------------------------------- /contrib/hammerjs/hammer.min.js: -------------------------------------------------------------------------------- 1 | /*! Hammer.JS - v1.0.6dev - 2013-12-14 2 | * http://eightmedia.github.com/hammer.js 3 | * 4 | * Copyright (c) 2013 Jorik Tangelder ; 5 | * Licensed under the MIT license */ 6 | 7 | !function(a,b){"use strict";function c(){d.READY||(d.event.determineEventTypes(),d.utils.each(d.gestures,function(a){d.detection.register(a)}),d.event.onTouch(d.DOCUMENT,d.EVENT_MOVE,d.detection.detect),d.event.onTouch(d.DOCUMENT,d.EVENT_END,d.detection.detect),d.READY=!0)}var d=function(a,b){return new d.Instance(a,b||{})};d.defaults={stop_browser_behavior:{userSelect:"none",touchAction:"none",touchCallout:"none",contentZooming:"none",userDrag:"none",tapHighlightColor:"rgba(0,0,0,0)"}},d.HAS_POINTEREVENTS=a.navigator.pointerEnabled||a.navigator.msPointerEnabled,d.HAS_TOUCHEVENTS="ontouchstart"in a,d.MOBILE_REGEX=/mobile|tablet|ip(ad|hone|od)|android|silk/i,d.NO_MOUSEEVENTS=d.HAS_TOUCHEVENTS&&a.navigator.userAgent.match(d.MOBILE_REGEX),d.EVENT_TYPES={},d.DIRECTION_DOWN="down",d.DIRECTION_LEFT="left",d.DIRECTION_UP="up",d.DIRECTION_RIGHT="right",d.POINTER_MOUSE="mouse",d.POINTER_TOUCH="touch",d.POINTER_PEN="pen",d.EVENT_START="start",d.EVENT_MOVE="move",d.EVENT_END="end",d.DOCUMENT=a.document,d.plugins=d.plugins||{},d.gestures=d.gestures||{},d.READY=!1,d.utils={extend:function(a,c,d){for(var e in c)a[e]!==b&&d||(a[e]=c[e]);return a},each:function(a,c,d){var e,f;if("forEach"in a)a.forEach(c,d);else if(a.length!==b){for(e=0,f=a.length;f>e;e++)if(c.call(d,a[e],e,a)===!1)return}else for(e in a)if(a.hasOwnProperty(e)&&c.call(d,a[e],e,a)===!1)return},hasParent:function(a,b){for(;a;){if(a==b)return!0;a=a.parentNode}return!1},getCenter:function(a){var b=[],c=[];return d.utils.each(a,function(a){b.push("undefined"!=typeof a.clientX?a.clientX:a.pageX),c.push("undefined"!=typeof a.clientY?a.clientY:a.pageY)}),{pageX:(Math.min.apply(Math,b)+Math.max.apply(Math,b))/2,pageY:(Math.min.apply(Math,c)+Math.max.apply(Math,c))/2}},getVelocity:function(a,b,c){return{x:Math.abs(b/a)||0,y:Math.abs(c/a)||0}},getAngle:function(a,b){var c=b.pageY-a.pageY,d=b.pageX-a.pageX;return 180*Math.atan2(c,d)/Math.PI},getDirection:function(a,b){var c=Math.abs(a.pageX-b.pageX),e=Math.abs(a.pageY-b.pageY);return c>=e?a.pageX-b.pageX>0?d.DIRECTION_LEFT:d.DIRECTION_RIGHT:a.pageY-b.pageY>0?d.DIRECTION_UP:d.DIRECTION_DOWN},getDistance:function(a,b){var c=b.pageX-a.pageX,d=b.pageY-a.pageY;return Math.sqrt(c*c+d*d)},getScale:function(a,b){return a.length>=2&&b.length>=2?this.getDistance(b[0],b[1])/this.getDistance(a[0],a[1]):1},getRotation:function(a,b){return a.length>=2&&b.length>=2?this.getAngle(b[1],b[0])-this.getAngle(a[1],a[0]):0},isVertical:function(a){return a==d.DIRECTION_UP||a==d.DIRECTION_DOWN},stopDefaultBrowserBehavior:function(a,b){b&&a&&a.style&&(d.utils.each(["webkit","khtml","moz","Moz","ms","o",""],function(c){d.utils.each(b,function(b){c&&(b=c+b.substring(0,1).toUpperCase()+b.substring(1)),b in a.style&&(a.style[b]=b)})}),"none"==b.userSelect&&(a.onselectstart=function(){return!1}),"none"==b.userDrag&&(a.ondragstart=function(){return!1}))}},d.Instance=function(a,b){var e=this;return c(),this.element=a,this.enabled=!0,this.options=d.utils.extend(d.utils.extend({},d.defaults),b||{}),this.options.stop_browser_behavior&&d.utils.stopDefaultBrowserBehavior(this.element,this.options.stop_browser_behavior),d.event.onTouch(a,d.EVENT_START,function(a){e.enabled&&d.detection.startDetect(e,a)}),this},d.Instance.prototype={on:function(a,b){var c=a.split(" ");return d.utils.each(c,function(a){this.element.addEventListener(a,b,!1)},this),this},off:function(a,b){var c=a.split(" ");return d.utils.each(c,function(a){this.element.removeEventListener(a,b,!1)},this),this},trigger:function(a,b){b||(b={});var c=d.DOCUMENT.createEvent("Event");c.initEvent(a,!0,!0),c.gesture=b;var e=this.element;return d.utils.hasParent(b.target,e)&&(e=b.target),e.dispatchEvent(c),this},enable:function(a){return this.enabled=a,this}};var e=null,f=!1,g=!1;d.event={bindDom:function(a,b,c){var e=b.split(" ");d.utils.each(e,function(b){a.addEventListener(b,c,!1)})},onTouch:function(a,b,c){var h=this;this.bindDom(a,d.EVENT_TYPES[b],function(i){var j=i.type.toLowerCase();if(!j.match(/mouse/)||!g){j.match(/touch/)||j.match(/pointerdown/)||j.match(/mouse/)&&1===i.which?f=!0:j.match(/mouse/)&&!i.which&&(f=!1),j.match(/touch|pointer/)&&(g=!0);var k=0;f&&(d.HAS_POINTEREVENTS&&b!=d.EVENT_END?k=d.PointerEvent.updatePointer(b,i):j.match(/touch/)?k=i.touches.length:g||(k=j.match(/up/)?0:1),k>0&&b==d.EVENT_END?b=d.EVENT_MOVE:k||(b=d.EVENT_END),(k||null===e)&&(e=i),c.call(d.detection,h.collectEventData(a,b,h.getTouchList(e,b),i)),d.HAS_POINTEREVENTS&&b==d.EVENT_END&&(k=d.PointerEvent.updatePointer(b,i))),k||(e=null,f=!1,g=!1,d.PointerEvent.reset())}})},determineEventTypes:function(){var a;a=d.HAS_POINTEREVENTS?d.PointerEvent.getEvents():d.NO_MOUSEEVENTS?["touchstart","touchmove","touchend touchcancel"]:["touchstart mousedown","touchmove mousemove","touchend touchcancel mouseup"],d.EVENT_TYPES[d.EVENT_START]=a[0],d.EVENT_TYPES[d.EVENT_MOVE]=a[1],d.EVENT_TYPES[d.EVENT_END]=a[2]},getTouchList:function(a){return d.HAS_POINTEREVENTS?d.PointerEvent.getTouchList():a.touches?a.touches:(a.indentifier=1,[a])},collectEventData:function(a,b,c,e){var f=d.POINTER_TOUCH;return(e.type.match(/mouse/)||d.PointerEvent.matchType(d.POINTER_MOUSE,e))&&(f=d.POINTER_MOUSE),{center:d.utils.getCenter(c),timeStamp:(new Date).getTime(),target:e.target,touches:c,eventType:b,pointerType:f,srcEvent:e,preventDefault:function(){this.srcEvent.preventManipulation&&this.srcEvent.preventManipulation(),this.srcEvent.preventDefault&&this.srcEvent.preventDefault()},stopPropagation:function(){this.srcEvent.stopPropagation()},stopDetect:function(){return d.detection.stopDetect()}}}},d.PointerEvent={pointers:{},getTouchList:function(){var a=this,b=[];return d.utils.each(a.pointers,function(a){b.push(a)}),b},updatePointer:function(a,b){return a==d.EVENT_END?this.pointers={}:(b.identifier=b.pointerId,this.pointers[b.pointerId]=b),Object.keys(this.pointers).length},matchType:function(a,b){if(!b.pointerType)return!1;var c=b.pointerType,e={};return e[d.POINTER_MOUSE]=c===b.MSPOINTER_TYPE_MOUSE||c===d.POINTER_MOUSE,e[d.POINTER_TOUCH]=c===b.MSPOINTER_TYPE_TOUCH||c===d.POINTER_TOUCH,e[d.POINTER_PEN]=c===b.MSPOINTER_TYPE_PEN||c===d.POINTER_PEN,e[a]},getEvents:function(){return["pointerdown MSPointerDown","pointermove MSPointerMove","pointerup pointercancel MSPointerUp MSPointerCancel"]},reset:function(){this.pointers={}}},d.detection={gestures:[],current:null,previous:null,stopped:!1,startDetect:function(a,b){this.current||(this.stopped=!1,this.current={inst:a,startEvent:d.utils.extend({},b),lastEvent:!1,name:""},this.detect(b))},detect:function(a){if(this.current&&!this.stopped){a=this.extendEventData(a);var b=this.current.inst.options;return d.utils.each(this.gestures,function(c){return this.stopped||b[c.name]===!1||c.handler.call(c,a,this.current.inst)!==!1?void 0:(this.stopDetect(),!1)},this),this.current&&(this.current.lastEvent=a),a.eventType==d.EVENT_END&&!a.touches.length-1&&this.stopDetect(),a}},stopDetect:function(){this.previous=d.utils.extend({},this.current),this.current=null,this.stopped=!0},extendEventData:function(a){var b=this.current.startEvent;!b||a.touches.length==b.touches.length&&a.touches!==b.touches||(b.touches=[],d.utils.each(a.touches,function(a){b.touches.push(d.utils.extend({},a))}));var c,e,f=a.timeStamp-b.timeStamp,g=a.center.pageX-b.center.pageX,h=a.center.pageY-b.center.pageY,i=d.utils.getVelocity(f,g,h);return"end"===a.eventType?(c=this.current.lastEvent&&this.current.lastEvent.interimAngle,e=this.current.lastEvent&&this.current.lastEvent.interimDirection):(c=this.current.lastEvent&&d.utils.getAngle(this.current.lastEvent.center,a.center),e=this.current.lastEvent&&d.utils.getDirection(this.current.lastEvent.center,a.center)),d.utils.extend(a,{deltaTime:f,deltaX:g,deltaY:h,velocityX:i.x,velocityY:i.y,distance:d.utils.getDistance(b.center,a.center),angle:d.utils.getAngle(b.center,a.center),interimAngle:c,direction:d.utils.getDirection(b.center,a.center),interimDirection:e,scale:d.utils.getScale(b.touches,a.touches),rotation:d.utils.getRotation(b.touches,a.touches),startEvent:b}),a},register:function(a){var c=a.defaults||{};return c[a.name]===b&&(c[a.name]=!0),d.utils.extend(d.defaults,c,!0),a.index=a.index||1e3,this.gestures.push(a),this.gestures.sort(function(a,b){return a.indexb.index?1:0}),this.gestures}},d.gestures.Drag={name:"drag",index:50,defaults:{drag_min_distance:10,correct_for_drag_min_distance:!0,drag_max_touches:1,drag_block_horizontal:!1,drag_block_vertical:!1,drag_lock_to_axis:!1,drag_lock_min_distance:25},triggered:!1,handler:function(a,b){if(d.detection.current.name!=this.name&&this.triggered)return b.trigger(this.name+"end",a),this.triggered=!1,void 0;if(!(b.options.drag_max_touches>0&&a.touches.length>b.options.drag_max_touches))switch(a.eventType){case d.EVENT_START:this.triggered=!1;break;case d.EVENT_MOVE:if(a.distance0)){var c=Math.abs(b.options.drag_min_distance/a.distance);d.detection.current.startEvent.center.pageX+=a.deltaX*c,d.detection.current.startEvent.center.pageY+=a.deltaY*c,a=d.detection.extendEventData(a)}(d.detection.current.lastEvent.drag_locked_to_axis||b.options.drag_lock_to_axis&&b.options.drag_lock_min_distance<=a.distance)&&(a.drag_locked_to_axis=!0);var e=d.detection.current.lastEvent.direction;a.drag_locked_to_axis&&e!==a.direction&&(a.direction=d.utils.isVertical(e)?a.deltaY<0?d.DIRECTION_UP:d.DIRECTION_DOWN:a.deltaX<0?d.DIRECTION_LEFT:d.DIRECTION_RIGHT),this.triggered||(b.trigger(this.name+"start",a),this.triggered=!0),b.trigger(this.name,a),b.trigger(this.name+a.direction,a),(b.options.drag_block_vertical&&d.utils.isVertical(a.direction)||b.options.drag_block_horizontal&&!d.utils.isVertical(a.direction))&&a.preventDefault();break;case d.EVENT_END:this.triggered&&b.trigger(this.name+"end",a),this.triggered=!1}}},d.gestures.Hold={name:"hold",index:10,defaults:{hold_timeout:500,hold_threshold:1},timer:null,handler:function(a,b){switch(a.eventType){case d.EVENT_START:clearTimeout(this.timer),d.detection.current.name=this.name,this.timer=setTimeout(function(){"hold"==d.detection.current.name&&b.trigger("hold",a)},b.options.hold_timeout);break;case d.EVENT_MOVE:a.distance>b.options.hold_threshold&&clearTimeout(this.timer);break;case d.EVENT_END:clearTimeout(this.timer)}}},d.gestures.Release={name:"release",index:1/0,handler:function(a,b){a.eventType==d.EVENT_END&&b.trigger(this.name,a)}},d.gestures.Swipe={name:"swipe",index:40,defaults:{swipe_min_touches:1,swipe_max_touches:1,swipe_velocity:.7},handler:function(a,b){if(a.eventType==d.EVENT_END){if(b.options.swipe_max_touches>0&&a.touches.lengthb.options.swipe_max_touches)return;(a.velocityX>b.options.swipe_velocity||a.velocityY>b.options.swipe_velocity)&&(b.trigger(this.name,a),b.trigger(this.name+a.direction,a))}}},d.gestures.Tap={name:"tap",index:100,defaults:{tap_max_touchtime:250,tap_max_distance:10,tap_always:!0,doubletap_distance:20,doubletap_interval:300},handler:function(a,b){if(a.eventType==d.EVENT_END&&"touchcancel"!=a.srcEvent.type){var c=d.detection.previous,e=!1;if(a.deltaTime>b.options.tap_max_touchtime||a.distance>b.options.tap_max_distance)return;c&&"tap"==c.name&&a.timeStamp-c.lastEvent.timeStampb.options.transform_min_rotation&&b.trigger("rotate",a),c>b.options.transform_min_scale&&(b.trigger("pinch",a),b.trigger("pinch"+(a.scale<1?"in":"out"),a));break;case d.EVENT_END:this.triggered&&b.trigger(this.name+"end",a),this.triggered=!1}}},"function"==typeof define&&"object"==typeof define.amd&&define.amd?define(function(){return d}):"object"==typeof module&&"object"==typeof module.exports?module.exports=d:a.Hammer=d}(this); 8 | //# sourceMappingURL=hammer.min.map -------------------------------------------------------------------------------- /contrib/hammerjs/hammer.min.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"hammer.min.js","sources":["hammer.js"],"names":["window","undefined","setup","Hammer","READY","event","determineEventTypes","utils","each","gestures","gesture","detection","register","onTouch","DOCUMENT","EVENT_MOVE","detect","EVENT_END","element","options","Instance","defaults","stop_browser_behavior","userSelect","touchAction","touchCallout","contentZooming","userDrag","tapHighlightColor","HAS_POINTEREVENTS","navigator","pointerEnabled","msPointerEnabled","HAS_TOUCHEVENTS","MOBILE_REGEX","NO_MOUSEEVENTS","userAgent","match","EVENT_TYPES","DIRECTION_DOWN","DIRECTION_LEFT","DIRECTION_UP","DIRECTION_RIGHT","POINTER_MOUSE","POINTER_TOUCH","POINTER_PEN","EVENT_START","document","plugins","extend","dest","src","merge","key","obj","iterator","context","i","length","forEach","call","hasOwnProperty","hasParent","node","parent","parentNode","getCenter","touches","valuesX","valuesY","touch","push","clientX","pageX","clientY","pageY","Math","min","apply","max","getVelocity","delta_time","delta_x","delta_y","x","abs","y","getAngle","touch1","touch2","atan2","PI","getDirection","getDistance","sqrt","getScale","start","end","this","getRotation","isVertical","direction","stopDefaultBrowserBehavior","css_props","style","vendor","prop","substring","toUpperCase","onselectstart","ondragstart","self","enabled","ev","startDetect","prototype","on","handler","split","addEventListener","off","removeEventListener","trigger","eventData","createEvent","initEvent","target","dispatchEvent","enable","state","last_move_event","enable_detect","touch_triggered","bindDom","type","types","eventType","sourceEventType","toLowerCase","which","count_touches","PointerEvent","updatePointer","collectEventData","getTouchList","reset","getEvents","identifier","pointerType","matchType","center","timeStamp","Date","getTime","srcEvent","preventDefault","preventManipulation","stopPropagation","stopDetect","pointers","touchlist","pointer","pointerEvent","pointerId","Object","keys","pt","MSPOINTER_TYPE_MOUSE","MSPOINTER_TYPE_TOUCH","MSPOINTER_TYPE_PEN","current","previous","stopped","inst","startEvent","lastEvent","name","extendEventData","inst_options","startEv","interimAngle","interimDirection","velocity","deltaTime","deltaX","deltaY","velocityX","velocityY","distance","angle","scale","rotation","index","sort","a","b","Drag","drag_min_distance","correct_for_drag_min_distance","drag_max_touches","drag_block_horizontal","drag_block_vertical","drag_lock_to_axis","drag_lock_min_distance","triggered","factor","drag_locked_to_axis","last_direction","Hold","hold_timeout","hold_threshold","timer","clearTimeout","setTimeout","Release","Infinity","Swipe","swipe_min_touches","swipe_max_touches","swipe_velocity","Tap","tap_max_touchtime","tap_max_distance","tap_always","doubletap_distance","doubletap_interval","prev","did_doubletap","Touch","prevent_default","prevent_mouseevents","Transform","transform_min_scale","transform_min_rotation","transform_always_block","scale_threshold","rotation_threshold","define","amd","module","exports"],"mappings":"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"} -------------------------------------------------------------------------------- /docs/layout-options.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbretschn/drumjs/adb200294de1388a1bb45765af5167081ce98c3a/docs/layout-options.png -------------------------------------------------------------------------------- /docs/simple-hover-outside.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbretschn/drumjs/adb200294de1388a1bb45765af5167081ce98c3a/docs/simple-hover-outside.png -------------------------------------------------------------------------------- /docs/simple-hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbretschn/drumjs/adb200294de1388a1bb45765af5167081ce98c3a/docs/simple-hover.png -------------------------------------------------------------------------------- /docs/simple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbretschn/drumjs/adb200294de1388a1bb45765af5167081ce98c3a/docs/simple.png -------------------------------------------------------------------------------- /drumjs.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "drumjs", 3 | "title": "DrumJS", 4 | "description": "jQuery plugin for a 3d animated value selector.", 5 | "keywords": [ 6 | "selector", 7 | "picker" 8 | ], 9 | "version": "0.1.3", 10 | "author": { 11 | "name": "Marcel Bretschneider, Matthias Mohr", 12 | "url": "https://github.com/3epnm/drumjs/blob/master/AUTHORS" 13 | }, 14 | "maintainers": [ 15 | { 16 | "name": "Marcel Bretschneider", 17 | "email": "marcel.bretschneider@gmail.com", 18 | "url": "https://mb.aquarius.uberspace.de" 19 | } 20 | ], 21 | "licenses": [ 22 | { 23 | "type": "MIT", 24 | "url": "https://github.com/3epnm/drumjs/blob/master/LICENSE" 25 | } 26 | ], 27 | "bugs": "https://github.com/3epnm/drumjs/issues", 28 | "homepage": "https://github.com/3epnm/drumjs", 29 | "docs": "https://github.com/3epnm/drumjs", 30 | "download": "http://code.jquery.com/#drumjs", 31 | "dependencies": { 32 | "jquery": ">=1.9", 33 | "hammerjs": ">=1.0.6dev" 34 | } 35 | } -------------------------------------------------------------------------------- /examples/clock.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DateTime Test 6 | 7 | 8 | 9 | 10 | 11 | 73 | 103 | 104 | 105 |

DrumJS Clock Example

106 |
107 |
108 |
109 |
:
110 |
:
111 |
112 | 145 | 159 | 168 | 194 | 256 | 318 |
319 |
320 | 321 | -------------------------------------------------------------------------------- /examples/countries.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Countries Test 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 23 | 33 | 34 | 35 |

DrumJS Country Selector

36 |
37 | 287 |
288 | 289 | -------------------------------------------------------------------------------- /examples/datetime.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DateTime Test 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 96 | 140 | 141 | 142 |

DrumJS Datetime Picker

143 |
144 |
145 | Date Time: 146 | 147 |
148 |
149 |
:
150 | 183 | 197 | 206 | 232 | 294 |
295 |
296 | 297 | -------------------------------------------------------------------------------- /examples/datetime_range.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DateTime Range Test 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 104 | 152 | 153 | 154 |

DrumJS Datetime Range Picker

155 |
156 |
157 |
158 |
159 | Begin 160 | 161 |
162 |
163 |
:
164 | 197 | 211 | 220 | 246 | 308 |
309 |
310 |
311 |
312 | End 313 | 314 |
315 |
316 |
:
317 | 350 | 364 | 373 | 399 | 461 |
462 |
463 |
464 |
465 | 466 | -------------------------------------------------------------------------------- /examples/inside_outside.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Inside Outside Test 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 40 | 56 | 57 | 58 |

DrumJS Inside/Outside Example

59 |

Dial inside

60 |

61 | 123 |

124 |

125 |

126 |

Dial outside

127 |

128 | 190 |

191 |

192 | 193 | -------------------------------------------------------------------------------- /examples/layout_options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Layout Options Test 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 94 | 102 | 103 | 104 |

DrumJS Layout Options

105 |
106 | 134 |
135 |
136 | 238 |
239 |
240 | 490 |
491 | 492 | -------------------------------------------------------------------------------- /examples/simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple Test 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 24 | 25 | 26 |

DrumJS Simple Example

27 | 89 | 92 | 93 | -------------------------------------------------------------------------------- /issues: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbretschn/drumjs/adb200294de1388a1bb45765af5167081ce98c3a/issues -------------------------------------------------------------------------------- /lib/drum.css: -------------------------------------------------------------------------------- 1 | /* main container styles */ 2 | div.drum-wrapper { 3 | position: relative; 4 | -webkit-touch-callout:none; 5 | -webkit-user-select:none; 6 | -moz-user-select:none; 7 | -ms-user-select:none; 8 | user-select:none; 9 | width: 30px; 10 | } 11 | div.drum-wrapper .inner { 12 | position: relative; 13 | overflow: hidden; 14 | } 15 | div.drum-wrapper div.container { 16 | position: absolute; 17 | width: 100%; 18 | top: 48px; 19 | left: 0px; 20 | -webkit-perspective: 1100px; 21 | -moz-perspective: 1100px; 22 | -o-perspective: 1100px; 23 | perspective: 1100px; 24 | } 25 | 26 | div.drum-wrapper, 27 | div.drum-wrapper .inner { 28 | height: 120px; 29 | } 30 | 31 | .outside div.drum-wrapper { 32 | height: 140px; 33 | } 34 | .outside div.drum-wrapper .inner { 35 | top: 12px; 36 | } 37 | .outside div.drum-wrapper .container { 38 | top: 46px; 39 | } 40 | 41 | /* dail styles for mouse controls */ 42 | div.drum-wrapper .dial { 43 | position: absolute; 44 | width: 100%; 45 | left: 0px; 46 | height: 48px; 47 | background-color: rgba(255, 255, 255, 0.7); 48 | display: none; 49 | } 50 | 51 | .outside div.drum-wrapper .dial { 52 | height: 58px; 53 | } 54 | 55 | div.drum-wrapper .dial div { 56 | width: 20px; 57 | height: 10px; 58 | margin: 0 auto; 59 | } 60 | div.drum-wrapper .dial svg { 61 | position: absolute; 62 | } 63 | div.drum-wrapper .up { 64 | top: 0px; 65 | } 66 | div.drum-wrapper .up svg { 67 | top: 2px 68 | } 69 | div.drum-wrapper .down { 70 | bottom: 0px; 71 | } 72 | div.drum-wrapper .down svg { 73 | bottom: 2px; 74 | } 75 | 76 | /* actual drum styles */ 77 | div.drum { 78 | width: 100%; 79 | height: 100%; 80 | position: absolute; 81 | top: 0px; 82 | left: 0px; 83 | -webkit-transform-style: preserve-3d; 84 | -moz-transform-style: preserve-3d; 85 | -o-transform-style: preserve-3d; 86 | transform-style: preserve-3d; 87 | } 88 | div.drum figure { 89 | -webkit-box-sizing: border-box; 90 | -moz-box-sizing: border-box; 91 | box-sizing: border-box; 92 | -webkit-backface-visibility: hidden; 93 | -moz-backface-visibility: hidden; 94 | -o-backface-visibility: hidden; 95 | backface-visibility: hidden; 96 | display: block; 97 | position: absolute; 98 | left: 0px; 99 | top: 0px; 100 | line-height: 20px; 101 | color: black; 102 | margin: 0px; 103 | padding: 0px 3px; 104 | text-overflow: ellipsis; 105 | white-space: nowrap; 106 | overflow: hidden; 107 | width: 100%; 108 | text-align: left; 109 | } 110 | 111 | div.drum-wrapper div.container, div.drum-wrapper figure { 112 | height: 25px; 113 | line-height: 25px; 114 | } -------------------------------------------------------------------------------- /lib/drum.js: -------------------------------------------------------------------------------- 1 | /*! Drum.JS - v0.1dev - 2014-01-09 2 | * http://mb.aquarius.uberspace.de/drum.js 3 | * 4 | * Copyright (c) 2013 Marcel Bretschneider ; 5 | * Licensed under the MIT license */ 6 | 7 | (function($) { 8 | "use strict"; 9 | 10 | var DrumIcon = (function () { 11 | var svgelem = function (tagName) { 12 | return document.createElementNS("http://www.w3.org/2000/svg", tagName); 13 | }; 14 | var svgcanvas = function (width, height) { 15 | var svg = $(svgelem("svg")); 16 | $(svg).attr("width", width); 17 | $(svg).attr("height", height); 18 | 19 | var g = $(svgelem("g")); 20 | $(svg).append(g); 21 | 22 | return svg; 23 | }; 24 | var container = function (className) { 25 | var container = document.createElement("div"); 26 | $(container).attr("class", className); 27 | var inner = document.createElement("div"); 28 | $(container).append(inner); 29 | return container; 30 | }; 31 | var path = function (settings) { 32 | var p = $(svgelem("path")); 33 | var styles = { 34 | "fill" : "none", 35 | "stroke" : settings.dail_stroke_color, 36 | "stroke-width" : settings.dail_stroke_width + "px", 37 | "stroke-linecap" : "butt", 38 | "stroke-linejoin" : "miter", 39 | "stroke-opacity": "1" 40 | }; 41 | var style = ""; 42 | for (var i in styles) { 43 | $(p).attr(i, styles[i]); 44 | } 45 | return p; 46 | }; 47 | return { 48 | up : function (settings) { 49 | var width = settings.dail_w; 50 | var height = settings.dail_h; 51 | 52 | var svg = svgcanvas(width, height); 53 | var p = path(settings); 54 | 55 | $(p).attr("d", "m0," + (height + settings.dail_stroke_width) + "l" + (width/2) + ",-" + height + "l" + (width/2) + "," + height); 56 | $(svg).find("g").append(p); 57 | 58 | var cont = container("dial up"); 59 | $(cont).find("div").append(svg); 60 | return cont; 61 | }, 62 | down : function (settings) { 63 | var width = settings.dail_w; 64 | var height = settings.dail_h; 65 | 66 | var svg = svgcanvas(width, height); 67 | var p = path(settings); 68 | 69 | $(p).attr("d", "m0,-" + settings.dail_stroke_width + "l" + (width/2) + "," + height + "l" + (width/2) + ",-" + height); 70 | $(svg).find("g").append(p); 71 | 72 | var cont = container("dial down"); 73 | $(cont).find("div").append(svg); 74 | return cont; 75 | } 76 | }; 77 | })(); 78 | 79 | var PanelModel = function (index, data_index, settings) 80 | { 81 | this.index = index; 82 | this.dataModel = new (function (data, i) { 83 | this.data = data; 84 | this.index = i; 85 | this.getText = function () { 86 | return this.data[this.index]; 87 | }; 88 | })(settings.data, data_index); 89 | 90 | this.init = function () { 91 | this.angle = settings.theta * index; 92 | this.elem = document.createElement('figure'); 93 | $(this.elem).addClass('a' + this.angle*100); 94 | $(this.elem).css('opacity', '0.5'); 95 | $(this.elem).css( 96 | settings.transformProp, 97 | settings.rotateFn + '(' + -this.angle + 'deg) translateZ(' + settings.radius + 'px)' 98 | ); 99 | this.setText(); 100 | }; 101 | this.setText = function () { 102 | $(this.elem).text(this.dataModel.getText()); 103 | }; 104 | this.update = function (data_index) { 105 | if (this.dataModel.index != data_index) { 106 | this.dataModel.index = data_index; 107 | this.setText(); 108 | } 109 | }; 110 | }; 111 | 112 | var Drum = function(element, options, transformProp) 113 | { 114 | var HTMLselect = ($(element))[0]; 115 | var obj = this; 116 | var settings = $.extend({ 117 | panelCount : 16, 118 | rotateFn : 'rotateX', 119 | interactive: true, 120 | dail_w: 20, 121 | dail_h: 5, 122 | dail_stroke_color: '#999999', 123 | dail_stroke_width: 1 124 | }, options || {}); 125 | 126 | settings.transformProp = transformProp; 127 | settings.rotation = 0; 128 | settings.distance = 0; 129 | settings.last_angle = 0; 130 | settings.theta = 360 / settings.panelCount; 131 | 132 | settings.initselect = HTMLselect.selectedIndex; 133 | 134 | if (settings.transformProp) { 135 | settings.data = []; 136 | for (var i=0; i= (settings.panelCount / 2)) { 189 | j = settings.data.length - (settings.panelCount - c); 190 | } 191 | c++; 192 | 193 | var panel = new PanelModel(i, j, settings); 194 | panel.init(); 195 | settings.mapping.push(panel); 196 | 197 | $(drum).append(panel.elem); 198 | } 199 | 200 | var getNearest = function (deg) { 201 | deg = deg || settings.rotation; 202 | var th = (settings.theta / 2); 203 | var n = 360; 204 | var angle = ((deg + th) % n + n) % n; 205 | angle = angle - angle % settings.theta; 206 | var l = (settings.data.length - 1) * settings.theta; 207 | if (angle > l) { 208 | if (deg > 0) return l; 209 | else return 0; 210 | } 211 | return angle; 212 | }; 213 | var getSelected = function () { 214 | var nearest = getNearest(); 215 | for (var i in settings.mapping) { 216 | if (settings.mapping[i].angle == nearest) { 217 | return settings.mapping[i]; 218 | } 219 | } 220 | }; 221 | var update = function (selected) { 222 | var c, list = [], pc = settings.panelCount, ph = settings.panelCount / 2, l = settings.data.length; 223 | var i = selected.index; 224 | var j = selected.dataModel.index; 225 | for (var k=j-ph; k<=j+ph-1; k++) { 226 | c = k; 227 | if (k < 0) c = l+k; 228 | if (k > l-1) c = k-l; 229 | list.push(c); 230 | } 231 | var t = list.slice(ph-i); 232 | list = t.concat(list.slice(0, pc - t.length)); 233 | for (var i=0; i= 0) { 253 | settings.last_angle = selected.angle; 254 | update(selected); 255 | } 256 | } 257 | }; 258 | 259 | this.setIndex = function (dataindex) { 260 | var page = Math.floor(dataindex / settings.panelCount); 261 | var index = dataindex - (page * settings.panelCount); 262 | var selected = new PanelModel(index, dataindex, settings); 263 | update(selected); 264 | settings.rotation = index * settings.theta; 265 | transform(false); 266 | }; 267 | 268 | 269 | } else { 270 | this.setIndex = function (dataindex) { 271 | HTMLselect.selectedIndex = dataindex; 272 | }; 273 | } 274 | 275 | this.setIndex(settings.initselect); 276 | 277 | /* IE7 getIndex error fix by https://github.com/koas */ 278 | this.getIndex = function () { 279 | if (settings.transformProp) 280 | return getSelected().dataModel.index; 281 | else return HTMLselect.selectedIndex; 282 | }; 283 | 284 | if (settings.transformProp) { 285 | if (typeof(Hammer) != "undefined") { 286 | settings.touch = new Hammer(wrapper, { 287 | prevent_default: true, 288 | no_mouseevents: true 289 | }); 290 | 291 | settings.touch.on("dragstart", function (e) { 292 | settings.distance = 0; 293 | }); 294 | 295 | settings.touch.on("drag", function (e) { 296 | var evt = ["up", "down"]; 297 | if (evt.indexOf(e.gesture.direction)>=0) { 298 | settings.rotation += Math.round(e.gesture.deltaY - settings.distance) * -1; 299 | transform(true); 300 | settings.distance = e.gesture.deltaY; 301 | } 302 | }); 303 | 304 | settings.touch.on("dragend", function (e) { 305 | settings.rotation = getNearest(); 306 | transform(true); 307 | }); 308 | } 309 | 310 | if (settings.interactive) { 311 | $(dialUp).click(function (e) { 312 | var deg = settings.rotation + settings.theta + 1; 313 | settings.rotation = getNearest(deg); 314 | transform(true); 315 | }); 316 | $(dialDown).click(function (e) { 317 | var deg = settings.rotation - settings.theta - 1; 318 | settings.rotation = getNearest(deg); 319 | transform(true); 320 | }); 321 | } 322 | } 323 | }; 324 | 325 | var methods = { 326 | getIndex : function () { 327 | if ($(this).data('drum')) 328 | return $(this).data('drum').getIndex(); 329 | return false; 330 | }, 331 | setIndex : function (index) { 332 | if ($(this).data('drum')) 333 | $(this).data('drum').setIndex(index); 334 | }, 335 | init : function (options) { 336 | var transformProp = false; 337 | if (!navigator.userAgent.match(/Trident/i) && !navigator.userAgent.match(/MSIE/i)) { 338 | var prefixes = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '); 339 | for(var i = 0; i < prefixes.length; i++) { 340 | if(document.createElement('div').style[prefixes[i]] !== undefined) { 341 | transformProp = prefixes[i]; 342 | } 343 | } 344 | } 345 | var element = $(this); 346 | if (!element.data('drum')) { 347 | var drum = new Drum(element, options, transformProp); 348 | element.data('drum', drum); 349 | } 350 | } 351 | }; 352 | 353 | $.fn.drum = function(methodOrOptions) 354 | { 355 | var _arguments = arguments; 356 | return this.each(function() { 357 | if ( methods[methodOrOptions] ) { 358 | return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( _arguments, 1 )); 359 | } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) { 360 | return methods.init.apply( this, _arguments ); 361 | } else { 362 | $.error( 'Method ' + methodOrOptions + ' does not exist on jQuery.drum' ); 363 | } 364 | }); 365 | }; 366 | })(jQuery); -------------------------------------------------------------------------------- /lib/drum.min.css: -------------------------------------------------------------------------------- 1 | div.drum-wrapper{position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:30px}div.drum-wrapper .inner{position:relative;overflow:hidden}div.drum-wrapper div.container{position:absolute;width:100%;top:48px;left:0;-webkit-perspective:1100px;-moz-perspective:1100px;-o-perspective:1100px;perspective:1100px}div.drum-wrapper,div.drum-wrapper .inner{height:120px}.outside div.drum-wrapper{height:140px}.outside div.drum-wrapper .inner{top:12px}.outside div.drum-wrapper .container{top:46px}div.drum-wrapper .dial{position:absolute;width:100%;left:0;height:48px;background-color:rgba(255,255,255,.7);display:none}.outside div.drum-wrapper .dial{height:58px}div.drum-wrapper .dial div{width:20px;height:10px;margin:0 auto}div.drum-wrapper .dial svg{position:absolute}div.drum-wrapper .up{top:0}div.drum-wrapper .up svg{top:2px}div.drum-wrapper .down{bottom:0}div.drum-wrapper .down svg{bottom:2px}div.drum{width:100%;height:100%;position:absolute;top:0;left:0;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d}div.drum figure{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;display:block;position:absolute;left:0;top:0;line-height:20px;color:#000;margin:0;padding:0 3px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%;text-align:left}div.drum-wrapper div.container,div.drum-wrapper figure{height:25px;line-height:25px} -------------------------------------------------------------------------------- /lib/drum.min.js: -------------------------------------------------------------------------------- 1 | (function(e){"use strict";var t=function(){var t=function(e){return document.createElementNS("http://www.w3.org/2000/svg",e)};var n=function(n,r){var i=e(t("svg"));e(i).attr("width",n);e(i).attr("height",r);var s=e(t("g"));e(i).append(s);return i};var r=function(t){var n=document.createElement("div");e(n).attr("class",t);var r=document.createElement("div");e(n).append(r);return n};var i=function(n){var r=e(t("path"));var i={fill:"none",stroke:n.dail_stroke_color,"stroke-width":n.dail_stroke_width+"px","stroke-linecap":"butt","stroke-linejoin":"miter","stroke-opacity":"1"};var s="";for(var o in i){e(r).attr(o,i[o])}return r};return{up:function(t){var s=t.dail_w;var o=t.dail_h;var u=n(s,o);var a=i(t);e(a).attr("d","m0,"+(o+t.dail_stroke_width)+"l"+s/2+",-"+o+"l"+s/2+","+o);e(u).find("g").append(a);var f=r("dial up");e(f).find("div").append(u);return f},down:function(t){var s=t.dail_w;var o=t.dail_h;var u=n(s,o);var a=i(t);e(a).attr("d","m0,-"+t.dail_stroke_width+"l"+s/2+","+o+"l"+s/2+",-"+o);e(u).find("g").append(a);var f=r("dial down");e(f).find("div").append(u);return f}}}();var n=function(t,n,r){this.index=t;this.dataModel=new function(e,t){this.data=e;this.index=t;this.getText=function(){return this.data[this.index]}}(r.data,n);this.init=function(){this.angle=r.theta*t;this.elem=document.createElement("figure");e(this.elem).addClass("a"+this.angle*100);e(this.elem).css("opacity","0.5");e(this.elem).css(r.transformProp,r.rotateFn+"("+ -this.angle+"deg) translateZ("+r.radius+"px)");this.setText()};this.setText=function(){e(this.elem).text(this.dataModel.getText())};this.update=function(e){if(this.dataModel.index!=e){this.dataModel.index=e;this.setText()}}};var r=function(r,i,s){var o=e(r)[0];var u=this;var a=e.extend({panelCount:16,rotateFn:"rotateX",interactive:true,dail_w:20,dail_h:5,dail_stroke_color:"#999999",dail_stroke_width:1},i||{});a.transformProp=s;a.rotation=0;a.distance=0;a.last_angle=0;a.theta=360/a.panelCount;a.initselect=o.selectedIndex;if(a.transformProp){a.data=[];for(var f=0;f=a.panelCount/2){g=a.data.length-(a.panelCount-m)}m++;var y=new n(f,g,a);y.init();a.mapping.push(y);e(p).append(y.elem)}var b=function(e){e=e||a.rotation;var t=a.theta/2;var n=360;var r=((e+t)%n+n)%n;r=r-r%a.theta;var i=(a.data.length-1)*a.theta;if(r>i){if(e>0)return i;else return 0}return r};var w=function(){var e=b();for(var t in a.mapping){if(a.mapping[t].angle==e){return a.mapping[t]}}};var E=function(e){var t,n=[],r=a.panelCount,i=a.panelCount/2,s=a.data.length;var o=e.index;var u=e.dataModel.index;for(var f=u-i;f<=u+i-1;f++){t=f;if(f<0)t=s+f;if(f>s-1)t=f-s;n.push(t)}var l=n.slice(i-o);n=l.concat(n.slice(0,r-l.length));for(var o=0;o=0){a.last_angle=n.angle;E(n)}}};this.setIndex=function(e){var t=Math.floor(e/a.panelCount);var r=e-t*a.panelCount;var i=new n(r,e,a);E(i);a.rotation=r*a.theta;S(false)}}else{this.setIndex=function(e){o.selectedIndex=e}}this.setIndex(a.initselect);this.getIndex=function(){if(a.transformProp)return w().dataModel.index;else return o.selectedIndex};if(a.transformProp){if(typeof Hammer!="undefined"){a.touch=new Hammer(l,{prevent_default:true,no_mouseevents:true});a.touch.on("dragstart",function(e){a.distance=0});a.touch.on("drag",function(e){var t=["up","down"];if(t.indexOf(e.gesture.direction)>=0){a.rotation+=Math.round(e.gesture.deltaY-a.distance)*-1;S(true);a.distance=e.gesture.deltaY}});a.touch.on("dragend",function(e){a.rotation=b();S(true)})}if(a.interactive){e(d).click(function(e){var t=a.rotation+a.theta+1;a.rotation=b(t);S(true)});e(v).click(function(e){var t=a.rotation-a.theta-1;a.rotation=b(t);S(true)})}}};var i={getIndex:function(){if(e(this).data("drum"))return e(this).data("drum").getIndex();return false},setIndex:function(t){if(e(this).data("drum"))e(this).data("drum").setIndex(t)},init:function(t){var n=false;if(!navigator.userAgent.match(/Trident/i)&&!navigator.userAgent.match(/MSIE/i)){var i="transform WebkitTransform MozTransform OTransform msTransform".split(" ");for(var s=0;s