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

Revision 21995, 15.8 KB checked in by pineray, 12 years ago (diff)

#1915 Android 2.x で規格を選択できない不具合への対処

フリックスライドができなくなるようなのでいったん差し戻し.

  • 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 = 'translate3d(0,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='translate3d(0, 0, 0)';currentX=0;slideCount=0;slidePager();}else{currentX=currentX-slideUnitWidth;slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)';slideCount++;slidePager();}}
83             //slideLock=0;slideTimer=setTimeout(lotation,slideDuration);
84         }
85         function slidePager(){
86             var currentPager=$('.slidePagerPointer.active');
87             var nextID='#pager'+String(slideCount);
88             currentPager.removeClass('active');
89             $(nextID).addClass('active');
90             switch(slideCount){
91             case 0:
92                 $('.flickSlideBottom .bottomLeft').addClass('off');
93                 $('.flickSlideBottom .bottomRight').removeClass('off');
94                 break;
95
96             case pagerMax:
97                 $('.flickSlideBottom .bottomRight').addClass('off');
98                 $('.flickSlideBottom .bottomLeft').removeClass('off');
99                 break;
100
101             default:
102                 $('.flickSlideBottom .bottomLeft').removeClass('off');
103                 $('.flickSlideBottom .bottomRight').removeClass('off');
104                 break;
105             }
106         }
107
108         $.fn.slideButton=function(settings){
109             var settings = $.extend({
110                                       direction:'prev',
111                                       widthSource:{}
112                                   },settings);
113             var self=$(this);
114             self.click(function(){
115                            var slideUnitWidth=settings.widthSource.outerWidth();
116                            slideLock=1;
117                            clearTimeout(slideTimer);
118                            slideObj.get(0).style.webkitTransition='-webkit-transform 0.6s ease-out';
119                            if(settings.direction==='prev'){
120                                if(currentX==0){
121                                    slideObj.get(0).style.webkitTransform='translate3d(0, 0, 0)';
122                                    slideTimer=setTimeout(lotation,slideDuration);
123                                    slideLock=0;
124                                }else{
125                                    currentX = currentX+slideUnitWidth;
126                                    slideObj.get(0).style.webkitTransform = 'translate3d('+currentX+'px, 0, 0)';
127                                    slideCount--;
128                                    slidePager();
129                                    slideTimer=setTimeout(lotation,slideDuration);
130                                    slideLock=0;
131                                }
132                            }else if(settings.direction==='next'){
133                                if(currentX===maxX){
134                                    slideObj.get(0).style.webkitTransform='translate3d('+maxX+'px, 0, 0)';
135                                    slideTimer=setTimeout(lotation,slideDuration);
136                                    slideLock=0;
137                                }else{
138                                    currentX=currentX-slideUnitWidth;
139                                    slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)';
140                                    slideCount++;
141                                    slidePager();
142                                    slideTimer=setTimeout(lotation,slideDuration);
143                                    slideLock=0;
144                                }
145                            }
146                        });
147         };
148
149         $.fn.touchDrag=function(settings){
150             var settings=$.extend({
151                                       slideDuration:4000,
152                                       targetWidth:150
153                                   },settings);
154             var diffX=0;
155             slideObj=$(this);
156             slideDuration=settings.slideDuration;
157             slideObj.bind('touchstart',{type:'start'},touchHandler);
158             slideObj.bind('touchmove',{type:'move'},touchHandler);
159             slideObj.bind('touchend',{type:'end'},touchHandler);
160             function touchHandler(e){
161                 var slideUnitWidth=slideObj.children('li.slideUnit').outerWidth();
162                 var touch=e.originalEvent.touches[0];
163                 if(e.type=="touchstart"){
164                     clearTimeout(slideTimer);
165                     diffX=0;
166                     startX=touch.pageX;
167                     startY=touch.pageY;
168                     startTime=(new Date()).getTime();
169                 }else if(e.type=="touchmove"){
170                     diffX=touch.pageX-startX;
171                     diffY=touch.pageY-startY;
172                     if(Math.abs(diffX)-Math.abs(diffY)>0){
173                         e.preventDefault();
174                         moveX=Number(currentX+diffX);
175                         slideObj.css('-webkit-transition','none');
176                         slideObj.get(0).style.webkitTransform='translate3d( '+moveX+'px, 0, 0)';
177                     }
178                 }else if(e.type=="touchend"){
179                     var endTime=(new Date()).getTime();
180                     var diffTime=endTime-startTime;
181                     if(diffTime<300){
182                         slideObj.get(0).style.webkitTransition='-webkit-transform 0.5s ease-out';
183                     }else{
184                         slideObj.get(0).style.webkitTransition='-webkit-transform 0.6s ease-out';
185                     }
186                     if(diffX>settings.targetWidth||(diffX>60&&diffTime<400&&orientationChangeDelay===0)){
187                         if(currentX==0){
188                             slideObj.get(0).style.webkitTransform='translate3d(0, 0, 0)';
189                         }else{
190                             currentX=currentX+slideUnitWidth;
191                             slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)';
192                             slideCount--;
193                             slidePager();
194                         }
195                     }else if(diffX<(settings.targetWidth*-1)||(diffX<-60&&diffTime<400&&orientationChangeDelay===0)){
196                         if(currentX===maxX){
197                             slideObj.get(0).style.webkitTransform='translate3d('+maxX+'px, 0, 0)';
198                         }else{
199                             currentX=currentX-slideUnitWidth;
200                             slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)';
201                             slideCount++;slidePager();
202                         }
203                     }else{
204                         if(currentX===0){
205                             slideObj.get(0).style.webkitTransform='translate3d(0, 0, 0)';
206                         }else if(currentX===maxX){
207                             slideObj.get(0).style.webkitTransform='translate3d('+maxX+'px, 0, 0)';
208                         }else{
209                             slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)';
210                         }
211                     }
212                     slideTimer=setTimeout(lotation,slideDuration);slideLock=0;}}
213             slideTimer=setTimeout(lotation,slideDuration);
214         };
215
216         var settings=$.extend({
217                                   target:'',
218                                   colum:1,
219                                   height:170,
220                                   duration:4000,
221                                   parentArea:''
222                               },settings);
223         var contents=$(this);
224         var targetWidth=contents.outerWidth();
225         var contentsLength=contents.length;
226         var wrap=$('<div class="flickSlideContainer"><div class="moveWrap"><ul class="move"></ul></div></div>');
227         var slideMask=$('<div class="slideMask resizable"></div>');
228         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>');
229
230         var img = $(this).contents().find('img');
231
232         /*
233         img.removeAttr('width')
234            .removeAttr('height')
235            .css({
236                     width:'100%',
237                     height:'auto'
238                 });
239          */
240         var loop=Math.floor(contentsLength/settings.colum);
241         loop=contentsLength%settings.colum>0?loop++:loop;
242         pagerMax=loop-1;
243
244         var contentsCount=0;
245         for(var i=0;i<loop;i++){
246             var unitElem=$('<li/>')
247                 .addClass('slideUnit').
248                 addClass('resizable');
249
250             var pager=$('<li id="pager'+i+'" class="slidePagerPointer"></li>');
251             if(i===0){
252                 pager.addClass('active');
253             }
254             for(var j=0;j<settings.colum;j++){
255                 var itemElem=$('<div/>');
256                 if(typeof contents[contentsCount]!==undefined){
257                     itemElem.append($(contents[contentsCount]).children());
258                 }
259                 unitElem.append(itemElem);
260                 contentsCount++;
261             }
262             // 画像の高さに合わせて padding-top を入れるよう変更
263             var imgHeight = unitElem.children().find('img').attr('height');
264             if (imgHeight < 1) {
265                  imgHeight = settings.height;
266             }
267             var paddingSize = (settings.height / 2) - (imgHeight / 2);
268             unitElem.css('padding-top', paddingSize + 'px');
269             wrap.contents().find('ul.move').append(unitElem);
270             bottom.children('ul.slidePager').append(pager);
271         }
272         //スライド最大幅を表示エリアの横幅×liの数→liの横幅×liの数に変更
273         $(settings.target).after(wrap);
274         $(settings.target).remove();
275         bottom.children('.bottomLeft').slideButton({
276                                                        direction:'prev',
277                                                        widthSource:wrap.contents().find('li.slideUnit')
278                                                    });
279         bottom.children('.bottomRight').slideButton({
280                                                         direction:'next',
281                                                         widthSource:wrap.contents().find('li.slideUnit')
282                                                     });
283         wrap.contents().find('ul.move').touchDrag({
284                                                       duration:settings.duration,
285                                                       targetWidth:(targetWidth*0.4)
286                                                   });
287         if(contentsLength > 1) {
288             wrap.after(bottom);
289         } else {
290             wrap.after(bottom2);
291         };
292         $(window).bind('load',function(){
293                            var styles=getComputedStyle($('.moveWrap').get(0));
294                            if(styles){
295                                $('.resizable').css('width',styles.width);
296                                $('.slideMask').css('height',$('.move').outerHeight())
297                                               .css('width',styles.width-1);
298
299                                if ($(settings.parentArea + ' .flickSlideContainer li.slideUnit').get(0)){
300                                    maxX=Number($(settings.parentArea + ' .flickSlideContainer li.slideUnit').length-1)*Number(getComputedStyle($(settings.parentArea + ' .flickSlideContainer li.slideUnit').get(0)).width.replace('px',''))*-1;
301                                }
302                            }
303                            var slideFirstChild=$('ul.move li:first').clone();
304                            $('ul.move').show();
305                        });
306     };
307 })(jQuery);
308var is={
309    ie:navigator.appName=='Microsoft Internet Explorer',
310    java:navigator.javaEnabled(),
311    ns:navigator.appName=='Netscape',
312    ua:navigator.userAgent.toLowerCase(),
313    version:parseFloat(navigator.appVersion.substr(21))|| parseFloat(navigator.appVersion),win:navigator.platform=='Win32'
314};
315is.mac=is.ua.indexOf('mac')>=0;
316if(is.ua.indexOf('opera')>=0){
317    is.ie=is.ns=false;is.opera=true;
318}
319if(is.ua.indexOf('gecko')>=0){
320    is.ie=is.ns=false;is.gecko=true;
321}
Note: See TracBrowser for help on using the repository browser.