https://snoway.jp/js/dist/v2/gelande/common.js

1/**
2 * flipsnap.js
3 *
4 * @version  0.6.2
5 * @url http://pxgrid.github.com/js-flipsnap/
6 *
7 * Copyright 2011 PixelGrid, Inc.
8 * Licensed under the MIT License:
9 * http://www.opensource.org/licenses/mit-license.php
10 */
11
12(function(window, document, undefined) {
13
14var div = document.createElement('div');
15var prefix = ['webkit', 'moz', 'o', 'ms'];
16var saveProp = {};
17var support = Flipsnap.support = {};
18var gestureStart = false;
19
20var DISTANCE_THRESHOLD = 5;
21var ANGLE_THREHOLD = 55;
22
23support.transform3d = hasProp([
24  'perspectiveProperty',
25  'WebkitPerspective',
26  'MozPerspective',
27  'OPerspective',
28  'msPerspective'
29]);
30
31support.transform = hasProp([
32  'transformProperty',
33  'WebkitTransform',
34  'MozTransform',
35  'OTransform',
36  'msTransform'
37]);
38
39support.transition = hasProp([
40  'transitionProperty',
41  'WebkitTransitionProperty',
42  'MozTransitionProperty',
43  'OTransitionProperty',
44  'msTransitionProperty'
45]);
46
47support.addEventListener = 'addEventListener' in window;
48support.mspointer = window.navigator.msPointerEnabled;
49
50support.cssAnimation = (support.transform3d || support.transform) && support.transition;
51
52var eventTypes = ['touch', 'mouse'];
53var events = {
54  start: {
55    touch: 'touchstart',
56    mouse: 'mousedown'
57  },
58  move: {
59    touch: 'touchmove',
60    mouse: 'mousemove'
61  },
62  end: {
63    touch: 'touchend',
64    mouse: 'mouseup'
65  }
66};
67
68if (support.addEventListener) {
69  document.addEventListener('gesturestart', function() {
70    gestureStart = true;
71  });
72
73  document.addEventListener('gestureend', function() {
74    gestureStart = false;

75  });
76}
77
78function Flipsnap(element, opts) {
79  return (this instanceof Flipsnap)
80    ? this.init(element, opts)
81    : new Flipsnap(element, opts);
82}
83
84Flipsnap.prototype.init = function(element, opts) {
85  var self = this;
86
87  // set element
88  self.element = element;
89  if (typeof element === 'string') {
90    self.element = document.querySelector(element);
91  }
92
93  if (!self.element) {
94    throw new Error('element not found');
95  }
96
97  if (support.mspointer) {
98    self.element.style.msTouchAction = 'pan-y';
99  }
100
101  // set opts
102  opts = opts || {};
103  self.distance = opts.distance;
104  self.maxPoint = opts.maxPoint;
105  self.disableTouch = (opts.disableTouch === undefined) ? false : opts.disableTouch;
106  self.disable3d = (opts.disable3d === undefined) ? false : opts.disable3d;
107  self.transitionDuration = (opts.transitionDuration === undefined) ? '350ms' : opts.transitionDuration + 'ms';
108
109  // set property
110  self.currentPoint = 0;
111  self.currentX = 0;
112  self.animation = false;
113  self.use3d = support.transform3d;
114  if (self.disable3d === true) {
115    self.use3d = false;
116  }
117
118  // set default style
119  if (support.cssAnimation) {
120    self._setStyle({
121      transitionProperty: getCSSVal('transform'),
122      transitionTimingFunction: 'cubic-bezier(0,0,0.25,1)',
123      transitionDuration: '0ms',
124      transform: self._getTranslate(0)
125    });
126  }
127  else {
128    self._setStyle({
129      position: 'relative',
130      left: '0px'
131    });
132  }
133
134  // initilize
135  self.refresh();
136
137  eventTypes.forEach(function(type) {
138    self.element.addEventListener(events.start[type], self, false);
139  });
140
141  return self;
142};
143
144Flipsnap.prototype.handleEvent = function(event) {
145  var self = this;
146
147  switch (event.type) {
148    // start
149    case events.start.touch: self._touchStart(event, 'touch'); break;
150    case events.start.mouse: self._touchStart(event, 'mouse'); break;
151
152    // move
153    case events.move.touch: self._touchMove(event, 'touch'); break;
154    case events.move.mouse: self._touchMove(event, 'mouse'); break;
155
156    // end
157    case events.end.touch: self._touchEnd(event, 'touch'); break;
158    case events.end.mouse: self._touchEnd(event, 'mouse'); break;
159
160    // click
161    case 'click': self._click(event); break;
162  }
163};
164
165Flipsnap.prototype.refresh = function() {
166  var self = this;
167
168  // setting max point
169  self._maxPoint = (self.maxPoint === undefined) ? (function() {
170    var childNodes = self.element.childNodes,
171      itemLength = -1,
172      i = 0,
173      len = childNodes.length,
174      node;
175    for(; i < len; i++) {
176      node = childNodes[i];
177      if (node.nodeType === 1) {
178        itemLength++;
179      }
180    }
181
182    return itemLength;
183  })() : self.maxPoint;
184
185  // setting distance
186  if (self.distance === undefined) {
187    if (self._maxPoint < 0) {
188      self._distance = 0;
189    }
190    else {
191      self._distance = self.element.scrollWidth / (self._maxPoint + 1);
192    }
193  }
194  else {
195    self._distance = self.distance;
196  }
197
198  // setting maxX
199  self._maxX = -self._distance * self._maxPoint;
200
201  self.moveToPoint();
202};
203
204Flipsnap.prototype.hasNext = function() {
205  var self = this;
206
207  return self.currentPoint < self._maxPoint;
208};
209
210Flipsnap.prototype.hasPrev = function() {
211  var self = this;
212
213  return self.currentPoint > 0;
214};
215
216Flipsnap.prototype.toNext = function(transitionDuration) {
217  var self = this;
218
219  if (!self.hasNext()) {
220    return;
221  }
222
223  self.moveToPoint(self.currentPoint + 1, transitionDuration);
224};
225
226Flipsnap.prototype.toPrev = function(transitionDuration) {
227  var self = this;
228
229  if (!self.hasPrev()) {
230    return;
231  }
232
233  self.moveToPoint(self.currentPoint - 1, transitionDuration);
234};
235
236Flipsnap.prototype.moveToPoint = function(point, transitionDuration) {
237  var self = this;
238  
239  transitionDuration = transitionDuration === undefined
240    ? self.transitionDuration : transitionDuration + 'ms';
241
242  var beforePoint = self.currentPoint;
243
244  // not called from `refresh()`
245  if (point === undefined) {
246    point = self.currentPoint;
247  }
248
249  if (point < 0) {
250    self.currentPoint = 0;
251  }
252  else if (point > self._maxPoint) {
253    self.currentPoint = self._maxPoint;
254  }
255  else {
256    self.currentPoint = parseInt(point, 10);
257  }
258
259  if (support.cssAnimation) {
260    self._setStyle({ transitionDuration: transitionDuration });
261  }
262  else {
263    self.animation = true;
264  }
265  self._setX(- self.currentPoint * self._distance, transitionDuration);
266
267  if (beforePoint !== self.currentPoint) { // is move?
268    // `fsmoveend` is deprecated
269    // `fspointmove` is recommend.
270    self._triggerEvent('fsmoveend', true, false);
271    self._triggerEvent('fspointmove', true, false);
272  }
273};
274
275Flipsnap.prototype._setX = function(x, transitionDuration) {
276  var self = this;
277
278  self.currentX = x;
279  if (support.cssAnimation) {
280    self.element.style[ saveProp.transform ] = self._getTranslate(x);
281  }
282  else {
283    if (self.animation) {
284      self._animate(x, transitionDuration || self.transitionDuration);
285    }
286    else {
287      self.element.style.left = x + 'px';
288    }
289  }
290};
291
292Flipsnap.prototype._touchStart = function(event, type) {
293  var self = this;
294
295  if (self.disableTouch || self.scrolling || gestureStart) {
296    return;
297  }
298
299  self.element.addEventListener(events.move[type], self, false);
300  document.addEventListener(events.end[type], self, false);
301
302  var tagName = event.target.tagName;
303  if (type === 'mouse' && tagName !== 'SELECT' && tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'BUTTON') {
304    event.preventDefault();
305  }
306
307  if (support.cssAnimation) {
308    self._setStyle({ transitionDuration: '0ms' });
309  }
310  else {
311    self.animation = false;

312  }
313  self.scrolling = true;
314  self.moveReady = false;
315  self.startPageX = getPage(event, 'pageX');
316  self.startPageY = getPage(event, 'pageY');
317  self.basePageX = self.startPageX;
318  self.directionX = 0;
319  self.startTime = event.timeStamp;
320  self._triggerEvent('fstouchstart', true, false);
321};
322
323Flipsnap.prototype._touchMove = function(event, type) {
324  var self = this;
325
326  if (!self.scrolling || gestureStart) {
327    return;
328  }
329
330  var pageX = getPage(event, 'pageX');
331  var pageY = getPage(event, 'pageY');
332  var distX;
333  var newX;
334
335  if (self.moveReady) {
336    event.preventDefault();
337
338    distX = pageX - self.basePageX;
339    newX = self.currentX + distX;
340    if (newX >= 0 || newX < self._maxX) {
341      newX = Math.round(self.currentX + distX / 3);
342    }
343
344    // When distX is 0, use one previous value.
345    // For android firefox. When touchend fired, touchmove also
346    // fired and distX is certainly set to 0. 
347    self.directionX =
348      distX === 0 ? self.directionX :
349      distX > 0 ? -1 : 1;
350
351    // if they prevent us then stop it
352    var isPrevent = !self._triggerEvent('fstouchmove', true, true, {
353      delta: distX,
354      direction: self.directionX
355    });
356
357    if (isPrevent) {
358      self._touchAfter({
359        moved: false,
360        originalPoint: self.currentPoint,
361        newPoint: self.currentPoint,
362        cancelled: true
363      });
364    } else {
365      self._setX(newX);
366    }
367  }
368  else {
369    // https://github.com/pxgrid/js-flipsnap/pull/36
370    var triangle = getTriangleSide(self.startPageX, self.startPageY, pageX, pageY);
371    if (triangle.z > DISTANCE_THRESHOLD) {
372      if (getAngle(triangle) > ANGLE_THREHOLD) {
373        event.preventDefault();
374        self.moveReady = true;
375        self.element.addEventListener('click', self, true);
376      }
377      else {
378        self.scrolling = false;
379      }
380    }
381  }
382
383  self.basePageX = pageX;
384};
385
386Flipsnap.prototype._touchEnd = function(event, type) {
387  var self = this;
388
389  self.element.removeEventListener(events.move[type], self, false);
390  document.removeEventListener(events.end[type], self, false);
391
392  if (!self.scrolling) {
393    return;
394  }
395
396  var newPoint = -self.currentX / self._distance;
397  newPoint =
398    (self.directionX > 0) ? Math.ceil(newPoint) :
399    (self.directionX < 0) ? Math.floor(newPoint) :
400    Math.round(newPoint);
401
402  if (newPoint < 0) {
403    newPoint = 0;
404  }
405  else if (newPoint > self._maxPoint) {
406    newPoint = self._maxPoint;
407  }
408
409  self._touchAfter({
410    moved: newPoint !== self.currentPoint,
411    originalPoint: self.currentPoint,
412    newPoint: newPoint,
413    cancelled: false
414  });
415
416  self.moveToPoint(newPoint);
417};
418
419Flipsnap.prototype._click = function(event) {
420  var self = this;
421
422  event.stopPropagation();
423  event.preventDefault();
424};
425
426Flipsnap.prototype._touchAfter = function(params) {
427  var self = this;
428
429  self.scrolling = false;
430  self.moveReady = false;
431
432  setTimeout(function() {
433    self.element.removeEventListener('click', self, true);
434  }, 200);
435
436  self._triggerEvent('fstouchend', true, false, params);
437};
438
439Flipsnap.prototype._setStyle = function(styles) {
440  var self = this;
441  var style = self.element.style;
442
443  for (var prop in styles) {
444    setStyle(style, prop, styles[prop]);
445  }
446};
447
448Flipsnap.prototype._animate = function(x, transitionDuration) {
449  var self = this;
450
451  var elem = self.element;
452  var begin = +new Date();
453  var from = parseInt(elem.style.left, 10);
454  var to = x;
455  var duration = parseInt(transitionDuration, 10);
456  var easing = function(time, duration) {
457    return -(time /= duration) * (time - 2);
458  };
459  var timer = setInterval(function() {
460    var time = new Date() - begin;
461    var pos, now;
462    if (time > duration) {
463      clearInterval(timer);
464      now = to;
465    }
466    else {
467      pos = easing(time, duration);
468      now = pos * (to - from) + from;
469    }
470    elem.style.left = now + "px";
471  }, 10);
472};
473
474Flipsnap.prototype.destroy = function() {
475  var self = this;
476
477  eventTypes.forEach(function(type) {
478    self.element.removeEventListener(events.start[type], self, false);
479  });
480};
481
482Flipsnap.prototype._getTranslate = function(x) {
483  var self = this;
484
485  return self.use3d
486    ? 'translate3d(' + x + 'px, 0, 0)'
487    : 'translate(' + x + 'px, 0)';
488};
489

490Flipsnap.prototype._triggerEvent = function(type, bubbles, cancelable, data) {
491  var self = this;
492
493  var ev = document.createEvent('Event');
494  ev.initEvent(type, bubbles, cancelable);
495
496  if (data) {
497    for (var d in data) {
498      if (data.hasOwnProperty(d)) {
499        ev[d] = data[d];
500      }
501    }
502  }
503
504  return self.element.dispatchEvent(ev);
505};
506
507function getPage(event, page) {
508  return event.changedTouches ? event.changedTouches[0][page] : event[page];
509}
510
511function hasProp(props) {
512  return some(props, function(prop) {
513    return div.style[ prop ] !== undefined;
514  });
515}
516
517function setStyle(style, prop, val) {
518  var _saveProp = saveProp[ prop ];
519  if (_saveProp) {
520    style[ _saveProp ] = val;
521  }
522  else if (style[ prop ] !== undefined) {
523    saveProp[ prop ] = prop;
524    style[ prop ] = val;
525  }
526  else {
527    some(prefix, function(_prefix) {
528      var _prop = ucFirst(_prefix) + ucFirst(prop);
529      if (style[ _prop ] !== undefined) {
530        saveProp[ prop ] = _prop;
531        style[ _prop ] = val;
532        return true;
533      }
534    });
535  }
536}
537
538function getCSSVal(prop) {
539  if (div.style[ prop ] !== undefined) {
540    return prop;
541  }
542  else {
543    var ret;
544    some(prefix, function(_prefix) {
545      var _prop = ucFirst(_prefix) + ucFirst(prop);
546      if (div.style[ _prop ] !== undefined) {
547        ret = '-' + _prefix + '-' + prop;
548        return true;
549      }
550    });
551    return ret;
552  }
553}
554
555function ucFirst(str) {
556  return str.charAt(0).toUpperCase() + str.substr(1);
557}
558
559function some(ary, callback) {
560  for (var i = 0, len = ary.length; i < len; i++) {
561    if (callback(ary[i], i)) {
562      return true;
563    }
564  }
565  return false;
566}
567
568function getTriangleSide(x1, y1, x2, y2) {
569  var x = Math.abs(x1 - x2);
570  var y = Math.abs(y1 - y2);
571  var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
572
573  return {
574    x: x,
575    y: y,
576    z: z
577  };
578}
579
580function getAngle(triangle) {
581  var cos = triangle.y / triangle.z;
582  var radina = Math.acos(cos);
583
584  return 180 / (Math.PI / radina);
585}
586
587if (typeof exports == 'object') {
588  module.exports = Flipsnap;
589}
590else if (typeof define == 'function' && define.amd) {
591  define(function() {
592    return Flipsnap;
593  });
594}
595else {
596  window.Flipsnap = Flipsnap;
597}
598
599})(window, window.document);
600
601$(function(){
602	var $snap = $(".hotelSlide .flipsnap");
603	if($snap.length > 0){
604		$snap.width($snap.find("li").length*155);
605
606		var flipsnap = Flipsnap(".flipsnap", {
607			maxPoint: 2,
608			distance: 155*5
609		});
610
611		var prev = $(".hotelSlide .prev a").on("click", function(e){
612			e.preventDefault();
613			flipsnap.toPrev();
614		});
615		var next = $(".hotelSlide .next a").on("click", function(e){
616			e.preventDefault();
617			flipsnap.toNext();
618		});
619		flipsnap.element.addEventListener('fspointmove', function() {
620			next.removeClass("disabled");
621			prev.removeClass("disabled");
622			if(!flipsnap.hasNext()){
623				next.addClass("disabled");
624			}
625			if(!flipsnap.hasPrev()){
626				prev.addClass("disabled");
627			}
628		}, false);
629		
630	}
631

632	// ゲレンデ検索絞り込み解除
633	var $narrowClear = $("#narrow_clear [data-query]");
634	$narrowClear.on("click", function(){
635		$("#narrow_clear input[value=" + $(this).data("query") + "]").remove();
636		$(this).parent().remove();
637		$("#narrow_clear").submit();
638	});
639
640	// ゲレンデソート
641	var $gelandeSort = $("#gelande_sort");
642	$gelandeSort.find("a").on("click", function(e){
643		e.preventDefault();
644		var input = $('<input type="hidden" name="s">').attr("value", $(this).data("sort"));
645		$gelandeSort.append(input);
646		$gelandeSort.submit();
647	});
648
649});