PageRenderTime 80ms CodeModel.GetById 44ms RepoModel.GetById 1ms app.codeStats 0ms

/ajax/libs/jquery-mobile-datebox/1.1.1/jqm-datebox.mode.customflip.js

https://gitlab.com/Mirros/cdnjs
JavaScript | 294 lines | 242 code | 32 blank | 20 comment | 38 complexity | 4a204bed2713c3534a20539ca14df74d MD5 | raw file
  1. /*
  2. * jQuery Mobile Framework : plugin to provide a date and time picker.
  3. * Copyright (c) JTSage
  4. * CC 3.0 Attribution. May be relicensed without permission/notification.
  5. * https://github.com/jtsage/jquery-mobile-datebox
  6. */
  7. /* CUSTOMFLIP Mode */
  8. (function($) {
  9. $.extend( $.mobile.datebox.prototype.options, {
  10. themeOptPick: 'b',
  11. themeOpt: 'a',
  12. useSetButton: true,
  13. customData: [
  14. {'input': true, 'name':'Letter', 'data':['a','b','c','d','e']},
  15. {'input': true, 'name':'Text', 'data':['some','bull','shtuff','here']},
  16. {'input': false, 'name':'Image', 'data':['<img src="img/slot1.png" />','<img src="img/slot2.png" />','<img src="img/slot3.png" />','<img src="img/slot4.png" />']}
  17. ],
  18. customDefault: [0,0,0],
  19. customFormat: false,
  20. customfliplang: {
  21. // This structure interfaces with __() -> if it exists, strings are looked up here after i8n fails,
  22. // and before going to 'default' - the name syntax is <mode>lang
  23. 'customSet':'Looks Good'
  24. }
  25. });
  26. $.extend( $.mobile.datebox.prototype, {
  27. '_customflipDoSet': function () {
  28. // If this function exists, it overrides the 'doset' method of the 'datebox' event.
  29. // The name syntax is _<mode>DoSet
  30. var w = this, o = this.options;
  31. if ( typeof w.customCurrent === 'undefined' ) { w.customCurrent = this._makeDate(this.d.input.val()); }
  32. w.d.input.trigger('datebox', {'method':'set', 'value':w._formatter(o.customFormat,w.customCurrent), 'date':w.customCurrent});
  33. },
  34. '_cubox_offset': function (fld, amount) {
  35. // This is *not* an automatic override, used below specificly.
  36. var w = this, x,
  37. o = this.options;
  38. tmp = (w.customCurrent[fld] + amount) % o.customData[fld]['data'].length;
  39. if ( tmp < 0 ) { tmp = o.customData[fld]['data'].length + tmp; }
  40. w.customCurrent[fld] = tmp;
  41. if ( o.useImmediate ) { w.d.input.trigger('datebox', {'method':'set', 'value':w._formatter(o.customFormat,w.customCurrent), 'date':w.customCurrent}); }
  42. w.refresh();
  43. },
  44. '_cubox_arr': function (data, choice) {
  45. var base = data, x,
  46. before = data.slice(0,choice),
  47. after = data.slice(choice+1);
  48. while ( before.length < 10 ) {
  49. for ( x = base.length; x > 0; x-- ) {
  50. before.unshift(base[x-1]);
  51. }
  52. }
  53. while ( before.length > 10 ) {
  54. before.shift();
  55. }
  56. while ( after.length < 10 ) {
  57. for ( x = 0; x < base.length; x++ ) {
  58. after.push(base[x]);
  59. }
  60. }
  61. after.length = 10;
  62. before.push(data[choice]);
  63. return $.merge($.merge([], before), after);
  64. },
  65. '_cubox_pos': function () {
  66. var w = this,
  67. ech = null,
  68. top = null,
  69. par = this.d.intHTML.find('.ui-datebox-flipcontent').innerHeight(),
  70. tot = null;
  71. w.d.intHTML.find('.ui-datebox-flipcenter').each(function() {
  72. ech = $(this);
  73. top = ech.innerHeight();
  74. ech.css('top', ((par/2)-(top/2)+4)*-1);
  75. });
  76. w.d.intHTML.find('ul').each(function () {
  77. ech = $(this);
  78. par = ech.parent().innerHeight();
  79. top = ech.find('li').first();
  80. tot = ech.find('li').size() * top.outerHeight();
  81. top.css('marginTop', ((tot/2)-(par/2)+(top.outerHeight()/2))*-1);
  82. });
  83. }
  84. });
  85. $.extend( $.mobile.datebox.prototype._parser, {
  86. // If this stucture exists, it is called instead of the usual date input parser.
  87. // The name of the structure is the same as the mode name - it recieves a string
  88. // as the input, which is the current value of the input element, pre-sanitized
  89. 'customflip' : function ( str ) {
  90. var w = this,
  91. o = this.options,
  92. adv = o.customFormat,
  93. exp_input, exp_format, tmp, tmp2, retty_val=[0,0,0,0,0,0];
  94. if ( typeof(adv) !== 'string' ) { adv = ''; }
  95. adv = adv.replace(/%X([0-9a-f])/gi, function(match, oper) {
  96. switch (oper) {
  97. case 'a':
  98. case 'b':
  99. case 'c':
  100. case 'd':
  101. case 'e':
  102. case 'f':
  103. return '(' + match + '|' + '.+?' + ')'; break;
  104. case '0':
  105. case '1':
  106. case '2':
  107. case '3':
  108. case '4':
  109. case '5':
  110. return '(' + match + '|' + '[0-9]+' + ')'; break;
  111. default:
  112. return '.+?';
  113. }
  114. });
  115. adv = new RegExp('^' + adv + '$');
  116. exp_input = adv.exec(str);
  117. exp_format = adv.exec(o.customFormat);
  118. if ( exp_input !== null ) {
  119. for ( var x = 1; x<exp_input.length; x++ ) {
  120. tmp = exp_format[x].charAt(2);
  121. console.log(tmp);
  122. if ( isNaN(parseInt(tmp)) ) {
  123. tmp2 = $.inArray(tmp, ['a','b','c','d','e','f']);
  124. retty_val[tmp2] = $.inArray(exp_input[x], o.customData[tmp2].data);
  125. } else {
  126. retty_val[parseInt(tmp)-1] = parseInt(exp_input[x]);
  127. }
  128. }
  129. }
  130. //outputty = { 'in': exp_input, 'fmt': o.customFormat, 'str': str, 'format': exp_format, 'retty': retty_val };
  131. return ( str.length < 1 || retty_val.length < 1 ) ? this.options.customDefault : retty_val;
  132. }
  133. });
  134. $.extend( $.mobile.datebox.prototype._customformat, {
  135. // If this stucture exists, the formatter will call it when it encounters a special string
  136. // %X<whatever> - it recieves the single letter operater, and the current "date" value
  137. 'customflip' : function ( oper, val, o ) {
  138. var per = parseInt(oper), tmp;
  139. if ( typeof(per) === 'number' && !isNaN(per) ) {
  140. return val[oper-1];
  141. } else {
  142. tmp = $.inArray(oper, ['a','b','c','d','e','f']);
  143. return o.customData[tmp].data[val[tmp]];
  144. }
  145. }
  146. });
  147. $.extend( $.mobile.datebox.prototype._build, {
  148. // This builds the actual interface, and is called on *every* refresh. (after each "movement")
  149. 'customflip': function () {
  150. var w = this,
  151. o = this.options, i, y, hRow, tmp, lineArr,
  152. uid = 'ui-datebox-',
  153. customCurrent = this._makeDate(this.d.input.val()),
  154. flipBase = $("<div class='ui-overlay-shadow'><ul></ul></div>"),
  155. ctrl = $("<div>", {"class":uid+'flipcontent'});
  156. if ( typeof w.customCurrent === "undefined" ) { w.customCurrent = customCurrent; }
  157. if ( o.customFormat === false ) {
  158. tmp = [];
  159. for ( i = 0; i<o.customData.length; i++ ) {
  160. tmp.push('%X'+(i+1));
  161. }
  162. o.customFormat = tmp.join(',');
  163. }
  164. if ( typeof w.d.intHTML !== 'boolean' ) {
  165. w.d.intHTML.empty().remove();
  166. }
  167. w.d.input.on('datebox', function (e,p) {
  168. if ( p.method === 'postrefresh' ) {
  169. w._cubox_pos();
  170. }
  171. });
  172. w.d.headerText = ((w._grabLabel() !== false)?w._grabLabel():w.__('tireTitleString'));
  173. w.d.intHTML = $('<span>');
  174. w.fldOrder = o.tireFieldOrder;
  175. tmp = $('<div class="'+uid+'header ui-grid-'+[0,0,'a','b','c'][o.customData.length]+'"></div>');
  176. for ( y=0; y<o.customData.length; y++ ) {
  177. $('<div class="ui-block-'+['a','b','c','d'][y]+'">'+o.customData[y]['name']+'</div>').css('textAlign','center').appendTo(tmp);
  178. }
  179. tmp.appendTo(w.d.intHTML);
  180. w.d.intHTML.append(ctrl);
  181. for ( y=0; y<o.customData.length; y++ ) {
  182. lineArr = w._cubox_arr(o.customData[y]['data'], w.customCurrent[y]);
  183. hRow = w._makeEl(flipBase, {'attr': {'field':y,'amount':1} });
  184. for ( i in lineArr ) {
  185. tmp = (i!=10)?o.themeOpt:o.themeOptPick;
  186. $('<li>', {'class':'ui-body-'+tmp})
  187. .html('<span>'+lineArr[i]+'</span>').appendTo(hRow.find('ul'));
  188. }
  189. hRow.appendTo(ctrl);
  190. }
  191. $("<div>", {"class":uid+'flipcenter ui-overlay-shadow'}).css('pointerEvents', 'none').appendTo(w.d.intHTML);
  192. if ( o.useSetButton ) {
  193. y = $('<div>', {'class':uid+'controls'});
  194. if ( o.useSetButton ) {
  195. $('<a href="#">'+w.__('customSet')+'</a>')
  196. .appendTo(y).buttonMarkup({theme: o.theme, icon: 'check', iconpos: 'left', corners:true, shadow:true})
  197. .on(o.clickEventAlt, function(e) {
  198. e.preventDefault();
  199. w.d.input.trigger('datebox', {'method':'set', 'value':w._formatter(o.customFormat,w.customCurrent), 'date':w.tireChoice});
  200. w.d.input.trigger('datebox', {'method':'close'});
  201. });
  202. }
  203. y.appendTo(w.d.intHTML);
  204. }
  205. if ( w.wheelExists ) { // Mousewheel operation, if plugin is loaded
  206. w.d.intHTML.on('mousewheel', '.ui-overlay-shadow', function(e,d) {
  207. e.preventDefault();
  208. w._cubox_offset($(this).jqmData('field'), ((d<0)?1:-1)*$(this).jqmData('amount'));
  209. });
  210. }
  211. w.d.intHTML.on(w.drag.eStart, 'ul', function(e,f) {
  212. if ( !w.drag.move ) {
  213. if ( typeof f !== "undefined" ) { e = f; }
  214. w.drag.move = true;
  215. w.drag.target = $(this).find('li').first();
  216. w.drag.pos = parseInt(w.drag.target.css('marginTop').replace(/px/i, ''),10);
  217. w.drag.start = w.touch ? e.originalEvent.changedTouches[0].pageY : e.pageY;
  218. w.drag.end = false;
  219. e.stopPropagation();
  220. e.preventDefault();
  221. }
  222. });
  223. w.d.intHTML.on(w.drag.eStart, '.'+uid+'flipcenter', function(e) { // Used only on old browsers and IE.
  224. if ( !w.drag.move ) {
  225. w.drag.target = w.touch ? e.originalEvent.changedTouches[0].pageX - $(e.currentTarget).offset().left : e.pageX - $(e.currentTarget).offset().left;
  226. w.drag.tmp = w.d.intHTML.find('.'+uid+'flipcenter').innerWidth() / (( $.inArray('a', w.fldOrder) > -1 && w.__('timeFormat') !== 12 )?w.fldOrder.length-1:w.fldOrder.length);
  227. $(w.d.intHTML.find('ul').get(parseInt(w.drag.target / w.drag.tmp,10))).trigger(w.drag.eStart,e);
  228. }
  229. });
  230. }
  231. });
  232. $.extend( $.mobile.datebox.prototype._drag, {
  233. // This contains the code that the drag and drop (or touch move) code uses
  234. 'customflip': function() {
  235. var w = this,
  236. o = this.options,
  237. g = this.drag;
  238. $(document).on(g.eMove, function(e) {
  239. if ( g.move && o.mode === 'customflip' ) {
  240. g.end = w.touch ? e.originalEvent.changedTouches[0].pageY : e.pageY;
  241. g.target.css('marginTop', (g.pos + g.end - g.start) + 'px');
  242. e.preventDefault();
  243. e.stopPropagation();
  244. return false;
  245. }
  246. });
  247. $(document).on(g.eEnd, function(e) {
  248. if ( g.move && o.mode === 'customflip' ) {
  249. g.move = false;
  250. if ( g.end !== false ) {
  251. e.preventDefault();
  252. e.stopPropagation();
  253. g.tmp = g.target.parent().parent();
  254. w._cubox_offset(g.tmp.jqmData('field'), (parseInt((g.start - g.end) / g.target.innerHeight(),10) * g.tmp.jqmData('amount')));
  255. }
  256. g.start = false;
  257. g.end = false;
  258. }
  259. });
  260. }
  261. });
  262. })( jQuery );