source: branches/version-2_12-dev/html/user_data/packages/sphone/js/jquery.flickslide.js @ 22080

Revision 22080, 16.2 KB checked in by nanasess, 11 years ago (diff)

#1961 (Android における flickslide.js の不具合修正)
  • Property svn:mime-type set to text/plain
Line 
1// FlickSlide v1.0.2
2// Copyright (c) 2011 Kosuke Araki - twitterF@kaleido_kosuke
3// Modified by Kentaro Ohkouchi <ohkouchi@loop-az.jp>
4// Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
5(function($){
6     $.fn.flickSlide=function(settings){
7         var currentX;
8         var maxX;
9         var strUA=navigator.userAgent.toLowerCase(),
10         webkitUA=['iphone','android','ipad'],
11         runiLayout=false,
12         iLayoutLocation='',
13         currentX=0,
14         maxX=0,
15         slideObj={},
16         slideLock=1,
17         slideTimer={},
18         slideLotation={},
19         slideDuration=4000,
20         slideCount=0,
21         pagerMax=0,
22         orientationChangeDelay=0;
23         for(var i=0;i<webkitUA.length;i++){
24             if(strUA.indexOf(webkitUA[i],0)!=-1){
25                 runiLayout=true;
26                 if(webkitUA[i]==='android'){
27                     orientationChangeDelay=400;
28                 }
29                 if(webkitUA[i]==='iphone'){
30                     orientationChangeDelay=0;
31                 }
32             }
33         }
34//if(runiLayout!==true){return;}
35//if(typeof $(this)===undefined||$(this).length===0){return;}
36         window.addEventListener("orientationchange",
37                                 function(){
38                                     if(runiLayout!==true){
39                                         return;
40                                     }
41                                     switch(window.orientation){
42                                     case 0:
43                                         orientationChangeCore();
44                                         break;
45
46                                     case 90:
47                                         orientationChangeCore();
48                                         break;
49
50                                     case -90:
51                                         orientationChangeCore();
52                                         break;
53                                     }
54                                 },false);
55
56         function orientationChangeCore(){
57             clearTimeout(slideTimer);
58             setTimeout(function(){
59                            var styles=getComputedStyle($('.moveWrap').get(0));
60                            if(styles){
61                                $('.resizable').css('width',styles.width);
62                                $('.slideMask').css('height',$('.move').outerHeight())
63                                               .css('width',styles.width-1);
64                                if($('#whobought_area').size()>0){
65                                    maxX = Number(
66                                        $(settings.parentArea + ' .flickSlideContainer li.slideUnit').length-1) * Number(
67                                            getComputedStyle(
68                                                $(settings.parentArea + ' .flickSlideContainer li.slideUnit').get(0))
69                                                .width.replace('px',''))*-1;
70
71                                                                       $('div.flickSlideContainer ul.move').get(0).style.webkitTransform = 'translate(0,0)';
72                                }
73                                currentX=0;
74                                slideCount=0;
75                                slidePager();
76                                slideTimer=setTimeout(lotation,slideDuration);
77                            }else{
78                            }
79                        },orientationChangeDelay);
80         }
81         function lotation(){
82             //if(slideLock===0){var slideUnitWidth=slideObj.children('li.slideUnit').outerWidth();slideObj.get(0).style.webkitTransition='-webkit-transform 0.6s ease-out';diffX=-151;if(currentX===maxX){slideObj.get(0).style.webkitTransform='translate(0, 0)';currentX=0;slideCount=0;slidePager();}else{currentX=currentX-slideUnitWidth;slideObj.get(0).style.webkitTransform='translate('+currentX+'px, 0)';slideCount++;slidePager();}}
83             //slideLock=0;slideTimer=setTimeout(lotation,slideDuration);
84         }
85         function slidePager(){
86             var currentPager=$(settings.parentArea ? settings.parentArea : '.flickSlideBottom').find('.slidePagerPointer.active');
87             var nextID='.pager'+String(slideCount);
88
89             currentPager.removeClass('active');
90             currentPager.parent().children(nextID).addClass('active');
91             switch(slideCount){
92             case 0:
93                 $('.flickSlideBottom .bottomLeft').addClass('off');
94                 $('.flickSlideBottom .bottomRight').removeClass('off');
95                 break;
96
97             case pagerMax:
98                 $('.flickSlideBottom .bottomRight').addClass('off');
99                 $('.flickSlideBottom .bottomLeft').removeClass('off');
100                 break;
101
102             default:
103                 $('.flickSlideBottom .bottomLeft').removeClass('off');
104                 $('.flickSlideBottom .bottomRight').removeClass('off');
105                 break;
106             }
107         }
108
109         $.fn.slideButton=function(settings){
110             var settings = $.extend({
111                                       direction:'prev',
112                                       widthSource:{}
113                                   },settings);
114             var self=$(this);
115             self.click(function(){
116                            var slideUnitWidth=settings.widthSource.outerWidth();
117                            slideLock=1;
118                            clearTimeout(slideTimer);
119                            slideObj.get(0).style.webkitTransition='-webkit-transform 0.6s ease-out';
120                            if(settings.direction==='prev'){
121                                if(currentX==0){
122                                                                       slideObj.get(0).style.webkitTransform='translate(0, 0)';
123                                    slideTimer=setTimeout(lotation,slideDuration);
124                                    slideLock=0;
125                                }else{
126                                    currentX = currentX+slideUnitWidth;
127                                                                       slideObj.get(0).style.webkitTransform = 'translate('+currentX+'px, 0)';
128                                    slideCount--;
129                                    slidePager();
130                                    slideTimer=setTimeout(lotation,slideDuration);
131                                    slideLock=0;
132                                }
133                            }else if(settings.direction==='next'){
134                                if(currentX===maxX){
135                                                                       slideObj.get(0).style.webkitTransform='translate('+maxX+'px, 0)';
136                                    slideTimer=setTimeout(lotation,slideDuration);
137                                    slideLock=0;
138                                }else{
139                                    currentX=currentX-slideUnitWidth;
140                                                                       slideObj.get(0).style.webkitTransform='translate('+currentX+'px, 0)';
141                                    slideCount++;
142                                    slidePager();
143                                    slideTimer=setTimeout(lotation,slideDuration);
144                                    slideLock=0;
145                                }
146                            }
147                        });
148         };
149
150         $.fn.touchDrag=function(settings){
151             var settings=$.extend({
152                                       slideDuration:4000,
153                                       targetWidth:150
154                                   },settings);
155             var diffX=0;
156             slideObj=$(this);
157             slideDuration=settings.slideDuration;
158             slideObj.bind('touchstart',{type:'start'},touchHandler);
159             slideObj.bind('touchmove',{type:'move'},touchHandler);
160             slideObj.bind('touchend',{type:'end'},touchHandler);
161             function touchHandler(e){
162                 var slideUnitWidth=slideObj.children('li.slideUnit').outerWidth();
163                 var touch=e.originalEvent.touches[0];
164                 if(e.type=="touchstart"){
165                     clearTimeout(slideTimer);
166                     diffX=0;
167                     startX=touch.pageX;
168                     startY=touch.pageY;
169                     startTime=(new Date()).getTime();
170                 }else if(e.type=="touchmove"){
171                     diffX=touch.pageX-startX;
172                     diffY=touch.pageY-startY;
173                     if(Math.abs(diffX)-Math.abs(diffY)>0){
174                         e.preventDefault();
175                         moveX=Number(currentX+diffX);
176                         slideObj.css('-webkit-transition','none');
177                                                slideObj.get(0).style.webkitTransform='translate( '+moveX+'px, 0)';
178                     }
179                 }else if(e.type=="touchend"){
180                     var endTime=(new Date()).getTime();
181                     var diffTime=endTime-startTime;
182                     if(diffTime<300){
183                         slideObj.get(0).style.webkitTransition='-webkit-transform 0.5s ease-out';
184                     }else{
185                         slideObj.get(0).style.webkitTransition='-webkit-transform 0.6s ease-out';
186                     }
187                     if(diffX>settings.targetWidth||(diffX>60&&diffTime<400&&orientationChangeDelay===0)){
188                         if(currentX==0){
189                                                        slideObj.get(0).style.webkitTransform='translate(0, 0)';
190                         }else{
191                             currentX=currentX+slideUnitWidth;
192                                                        slideObj.get(0).style.webkitTransform='translate('+currentX+'px, 0)';
193                             slideCount--;
194                             slidePager();
195                         }
196                     }else if(diffX<(settings.targetWidth*-1)||(diffX<-60&&diffTime<400&&orientationChangeDelay===0)){
197                         if(currentX===maxX){
198                                                        slideObj.get(0).style.webkitTransform='translate('+maxX+'px, 0)';
199                         }else{
200                             currentX=currentX-slideUnitWidth;
201                                                        slideObj.get(0).style.webkitTransform='translate('+currentX+'px, 0)';
202                             slideCount++;slidePager();
203                         }
204                     }else{
205                         if(currentX===0){
206                                                        slideObj.get(0).style.webkitTransform='translate(0, 0)';
207                         }else if(currentX===maxX){
208                                                        slideObj.get(0).style.webkitTransform='translate('+maxX+'px, 0)';
209                         }else{
210                                                        slideObj.get(0).style.webkitTransform='translate('+currentX+'px, 0)';
211                         }
212                     }
213                     slideTimer=setTimeout(lotation,slideDuration);slideLock=0;}}
214             slideTimer=setTimeout(lotation,slideDuration);
215         };
216
217         var settings=$.extend({
218                                   target:'',
219                                   colum:1,
220                                   height:170,
221                                   duration:4000,
222                                   parentArea:''
223                               },settings);
224         var contents=$(this);
225         var targetWidth=contents.outerWidth();
226         var contentsLength=contents.length;
227         var wrap=$('<div class="flickSlideContainer"><div class="moveWrap"><ul class="move"></ul></div></div>');
228         var slideMask=$('<div class="slideMask resizable"></div>');
229         var bottom=$('<div class="flickSlideBottom"><div class="bottomLeft off">&lt;</div><ul class="slidePager"></ul><div class="bottomRight">&gt;</div></div>');var bottom2=$('<div class="flickSlideBottom"><div class="bottomLeft off"></div><ul class="slidePager"></ul><div class="bottomRight"></div></div>');
230
231         var img = $(this).contents().find('img');
232
233         /*
234         img.removeAttr('width')
235            .removeAttr('height')
236            .css({
237                     width:'100%',
238                     height:'auto'
239                 });
240          */
241         var loop=Math.floor(contentsLength/settings.colum);
242         loop=contentsLength%settings.colum>0?loop++:loop;
243         pagerMax=loop-1;
244
245         var contentsCount=0;
246         for(var i=0;i<loop;i++){
247             var unitElem=$('<li/>')
248                 .addClass('slideUnit').
249                 addClass('resizable');
250
251                        var pager=$('<li class="pager'+i+' slidePagerPointer"></li>');
252             if(i===0){
253                 pager.addClass('active');
254             }
255             for(var j=0;j<settings.colum;j++){
256                 var itemElem=$('<div/>');
257                 if(typeof contents[contentsCount]!==undefined){
258                     itemElem.append($(contents[contentsCount]).children());
259                 }
260                 unitElem.append(itemElem);
261                 contentsCount++;
262             }
263             // 画像の高さに合わせて padding-top を入れるよう変更
264             var imgHeight = unitElem.children().find('img').attr('height');
265             if (imgHeight < 1) {
266                  imgHeight = settings.height;
267             }
268             var paddingSize = (settings.height / 2) - (imgHeight / 2);
269             unitElem.css('padding-top', paddingSize + 'px');
270             wrap.contents().find('ul.move').append(unitElem);
271             bottom.children('ul.slidePager').append(pager);
272         }
273         //スライド最大幅を表示エリアの横幅×liの数→liの横幅×liの数に変更
274         $(settings.target).after(wrap);
275         $(settings.target).remove();
276         bottom.children('.bottomLeft').slideButton({
277                                                        direction:'prev',
278                                                        widthSource:wrap.contents().find('li.slideUnit')
279                                                    });
280         bottom.children('.bottomRight').slideButton({
281                                                         direction:'next',
282                                                         widthSource:wrap.contents().find('li.slideUnit')
283                                                     });
284         wrap.contents().find('ul.move').touchDrag({
285                                                       duration:settings.duration,
286                                                       targetWidth:(targetWidth*0.4)
287                                                   });
288         if(contentsLength > 1) {
289             wrap.after(bottom);
290         } else {
291             wrap.after(bottom2);
292         };
293         $(window).bind('load',function(){
294                            var styles=getComputedStyle($('.moveWrap').get(0));
295                            if(styles){
296                                $('.resizable').css('width',styles.width);
297                                $('.slideMask').css('height',$('.move').outerHeight())
298                                               .css('width',styles.width-1);
299
300                                if ($(settings.parentArea + ' .flickSlideContainer li.slideUnit').get(0)){
301                                    maxX=Number($(settings.parentArea + ' .flickSlideContainer li.slideUnit').length-1)*Number(getComputedStyle($(settings.parentArea + ' .flickSlideContainer li.slideUnit').get(0)).width.replace('px',''))*-1;
302                                }
303                            }
304                            var slideFirstChild=$('ul.move li:first').clone();
305                            $('ul.move').show();
306                        });
307     };
308 })(jQuery);
309var is={
310    ie:navigator.appName=='Microsoft Internet Explorer',
311    java:navigator.javaEnabled(),
312    ns:navigator.appName=='Netscape',
313    ua:navigator.userAgent.toLowerCase(),
314    version:parseFloat(navigator.appVersion.substr(21))|| parseFloat(navigator.appVersion),win:navigator.platform=='Win32'
315};
316is.mac=is.ua.indexOf('mac')>=0;
317if(is.ua.indexOf('opera')>=0){
318    is.ie=is.ns=false;is.opera=true;
319}
320if(is.ua.indexOf('gecko')>=0){
321    is.ie=is.ns=false;is.gecko=true;
322}
Note: See TracBrowser for help on using the repository browser.