$(function(){ function owlOptions(amount) { const owl_options = { responsive:{ 0:{ items : 2 }, 481:{ items: 3 }, 1000:{ items: 4 }, 1151:{ items: (5 - amount) } }, dots: false, nav : true, onRefresh : callback, } return owl_options } function callback(event){ setTimeout(function(){ $('.hidebox').animate({'opacity':1}).removeClass('hidebox'); }, 300); } var box_n=0; var owl_red = {}, owl_green = {}, owl_blue = {}, owl_orange = {}; if($('.fourbox').length>0){ box_n = 4; var owl_red = $(".fourbox .redBox"); owl_red.find('.orderSlideRGP').owlCarousel(owlOptions(4)); var owl_green = $(".fourbox .greenBox"); owl_green.find('.orderSlideRGP').owlCarousel(owlOptions(4)); var owl_orange = $(".fourbox .orangeBox"); owl_orange.find('.orderSlideRGP').owlCarousel(owlOptions(4)); //標籤3 var owl_blue = $(".fourbox .blueBox"); owl_blue.find('.orderSlideRGP').owlCarousel(owlOptions(4)); owl_orange.on('click','.orderSlideRGP .delete',function(){ var delitem = $(this).parents('.owl-item'); delitem.find('.title').remove(); delitem.animate({'opacity':0},300).animate({'width':0},300); setTimeout(function(){ owl_orange.find('.orderSlideRGP').trigger('remove.owl.carousel',delitem.index()) .trigger('refresh.owl.carousel'); if(owl_orange.find('.owl-item').length==0){ var html = '
'; owl_orange.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true]) .trigger('add.owl.carousel',[$(html),0]) .trigger('refresh.owl.carousel'); } }, 700); }); }else if($('.twobox').length>0){ box_n = 4; var owl_red = $(".twobox .redBox"); owl_red.find('.orderSlideRGP').owlCarousel(owlOptions(2)); var owl_green = $(".twobox .greenBox"); owl_green.find('.orderSlideRGP').owlCarousel(owlOptions(2)); //標籤3 var owl_blue = $(".twobox .blueBox"); owl_blue.find('.orderSlideRGP').owlCarousel(owlOptions(2)); }else{ box_n = 3; var owl_red = $(".threebox .redBox"); owl_red.find('.orderSlideRGP').owlCarousel(owlOptions(3)); var owl_green = $(".threebox .greenBox"); owl_green.find('.orderSlideRGP').owlCarousel(owlOptions(3)); var owl_orange = $(".threebox .orangeBox"); owl_orange.find('.orderSlideRGP').owlCarousel(owlOptions(3)); //標籤3 var owl_blue = $(".threebox .blueBox"); owl_blue.find('.orderSlideRGP').owlCarousel(owlOptions(3)); owl_orange.on('click','.orderSlideRGP .delete',function(){ var delitem = $(this).parents('.owl-item'); delitem.find('.title').remove(); delitem.animate({'opacity':0},300).animate({'width':0},300); setTimeout(function(){ owl_orange.find('.orderSlideRGP').trigger('remove.owl.carousel',delitem.index()) .trigger('refresh.owl.carousel'); if(owl_orange.find('.owl-item').length==0){ var html = '
'; owl_orange.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true]) .trigger('add.owl.carousel',[$(html),0]) .trigger('refresh.owl.carousel'); } }, 700); }); }; owl_red.on('click','.orderSlideRGP .delete',function(){ var delitem = $(this).parents('.owl-item'); delitem.find('.title').remove(); delitem.animate({'opacity':0},300).animate({'width':0},300); setTimeout(function(){ owl_red.find('.orderSlideRGP').trigger('remove.owl.carousel',delitem.index()) .trigger('refresh.owl.carousel'); if(owl_red.find('.owl-item').length==0){ var html = '
'; owl_red.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true]) .trigger('add.owl.carousel',[$(html),0]) .trigger('refresh.owl.carousel'); } }, 700); }); owl_green.on('click','.orderSlideRGP .delete',function(){ var delitem = $(this).parents('.owl-item'); delitem.find('.title').remove(); delitem.animate({'opacity':0},300).animate({'width':0},300); setTimeout(function(){ owl_green.find('.orderSlideRGP').trigger('remove.owl.carousel',delitem.index()) .trigger('refresh.owl.carousel'); if(owl_green.find('.owl-item').length==0){ var html = '
'; owl_green.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true]) .trigger('add.owl.carousel',[$(html),0]) .trigger('refresh.owl.carousel'); } }, 700); }); //標籤3 owl_blue.on('click','.orderSlideRGP .delete',function(){ var delitem = $(this).parents('.owl-item'); delitem.find('.title').remove(); delitem.animate({'opacity':0},300).animate({'width':0},300); setTimeout(function(){ owl_blue.find('.orderSlideRGP').trigger('remove.owl.carousel',delitem.index()) .trigger('refresh.owl.carousel'); if(owl_blue.find('.owl-item').length==0){ var html = '
'; owl_blue.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true]) .trigger('add.owl.carousel',[$(html),0]) .trigger('refresh.owl.carousel'); } }, 700); }); $('article').on('click','.button5',function(){ $('.user-orderBox').removeClass('none'); var sid = $(this).attr('sid'), img = $(this).parents('.productBox'), img_src = img.find('.productImg').find('img').attr('src'), img_title = img.find('.productTitle').find('.title').html(), img_price = img.find('.productTitle').find('.font-big').html(), img_amount= img.find('.num-select').val(), add_array = new Array(); add_array[0] = 0; switch($(this).parents('.productBox').attr('class').substring(11)){ case "redBox": var _pair = 1; break; case "greenBox": var _pair = 2; break; case "blueBox": var _pair = 3; break; case "orangeBox": var _pair = 4; break; } // $(".delete[pair="+_pair+"]").each(function(){ // add_array.push(parseInt($(this).attr("del_id"))); // }); // var img_index = Math.max.apply(null,add_array); if($(this).parents('.redBox').length != 0){ if($('.redBox .pic-bg').length == 1){ owl_red.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.redBox .pic-bg').parents('.owl-item').index()) .trigger('refresh.owl.carousel'); } var smailBox = $('.user-orderBox .redBox .owl-stage-outer'), smailBox_top = smailBox.offset().top, smailBox_left = smailBox.offset().left+20, smailBox_width = smailBox.width()/box_n, smailBox_height = smailBox.height(); var same = false; $(".delete").each(function(){ var o_sid = $(this).attr('sid'); if(o_sid == sid){ same = true; $(this).prev('.pricebox').find('.font-red').html(_jsLang.Language_Currency+img_price+' x '+img_amount+'件'); } }); // for($i=0;$i
'+img_title+'
'+_jsLang.Language_Currency+img_price+' x '+img_amount+'件'+'
'+_jsLang.刪除+'
'; owl_red.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true]) .trigger('add.owl.carousel',[$(html),0]) .trigger('refresh.owl.carousel'); } var choseImg = $(this).parents('.productBox').find('.productImg'), Img_html = choseImg.clone().addClass('moveImg'), choseImg_top = choseImg.offset().top, choseImg_left = choseImg.offset().left, choseImg_width = choseImg.width(), choseImg_height = choseImg.height(); $('body').append(Img_html); $('.moveImg').css({'top':choseImg_top,'left':choseImg_left,'width':choseImg_width,'height':choseImg_height}) .animate({ 'top': smailBox_top, 'left': smailBox_left, 'width': smailBox_width, 'height': smailBox_height },350, function() { $(this).remove(); }); }else if($(this).parents('.greenBox').length != 0){ if($('.greenBox .pic-bg').length == 1){ owl_green.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.greenBox .pic-bg').parents('.owl-item').index()) .trigger('refresh.owl.carousel'); } var smailBox = $('.user-orderBox .greenBox .owl-stage-outer'), smailBox_top = smailBox.offset().top, smailBox_left = smailBox.offset().left+20, smailBox_width = smailBox.width()/box_n, smailBox_height = smailBox.height(); var same = false; $(".delete").each(function(){ var o_sid = $(this).attr('sid'); if(o_sid == sid){ same = true; $(this).prev('.pricebox').find('.font-red').html(_jsLang.Language_Currency+img_price+' x '+img_amount+'件'); } }); // for($i=0;$i
'+img_title+'
'+_jsLang.Language_Currency+img_price+' x '+img_amount+'件'+'
'+_jsLang.刪除+'
'; owl_green.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true]) .trigger('add.owl.carousel',[$(html),0]) .trigger('refresh.owl.carousel'); } var choseImg = $(this).parents('.productBox').find('.productImg'), Img_html = choseImg.clone().addClass('moveImg'), choseImg_top = choseImg.offset().top, choseImg_left = choseImg.offset().left, choseImg_width = choseImg.width(), choseImg_height = choseImg.height(); $('body').append(Img_html); $('.moveImg').css({'top':choseImg_top,'left':choseImg_left,'width':choseImg_width,'height':choseImg_height}) .animate({ 'top': smailBox_top, 'left': smailBox_left, 'width': smailBox_width, 'height': smailBox_height },350, function() { $(this).remove(); }); }else if($(this).parents('.orangeBox').length != 0){ if($('.orangeBox .pic-bg').length == 1){ owl_orange.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.orangeBox .pic-bg').parents('.owl-item').index()) .trigger('refresh.owl.carousel'); } var smailBox = $('.user-orderBox .orangeBox .owl-stage-outer'), smailBox_top = smailBox.offset().top, smailBox_left = smailBox.offset().left+20, smailBox_width = smailBox.width()/box_n, smailBox_height = smailBox.height(); var same = false; $(".delete").each(function(){ var o_sid = $(this).attr('sid'); if(o_sid == sid){ same = true; $(this).prev('.pricebox').find('.font-red').html(_jsLang.Language_Currency+img_price+' x '+img_amount+'件'); } }); // for($i=0;$i
'+img_title+'
'+_jsLang.Language_Currency+img_price+' x '+img_amount+'件'+'
'+_jsLang.刪除+'
'; owl_orange.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true]) .trigger('add.owl.carousel',[$(html),0]) .trigger('refresh.owl.carousel'); } var choseImg = $(this).parents('.productBox').find('.productImg'), Img_html = choseImg.clone().addClass('moveImg'), choseImg_top = choseImg.offset().top, choseImg_left = choseImg.offset().left, choseImg_width = choseImg.width(), choseImg_height = choseImg.height(); $('body').append(Img_html); $('.moveImg').css({'top':choseImg_top,'left':choseImg_left,'width':choseImg_width,'height':choseImg_height}) .animate({ 'top': smailBox_top, 'left': smailBox_left, 'width': smailBox_width, 'height': smailBox_height },350, function() { $(this).remove(); }); }else if($(this).parents('.blueBox').length != 0){ //標籤3 if($('.blueBox .pic-bg').length == 1){ owl_blue.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.blueBox .pic-bg').parents('.owl-item').index()) .trigger('refresh.owl.carousel'); } var smailBox = $('.user-orderBox .blueBox .owl-stage-outer'), smailBox_top = smailBox.offset().top, smailBox_left = smailBox.offset().left+20, smailBox_width = smailBox.width()/box_n, smailBox_height = smailBox.height(); var same = false; $(".delete").each(function(){ var o_sid = $(this).attr('sid'); if(o_sid == sid){ same = true; $(this).prev('.pricebox').find('.font-red').html(_jsLang.Language_Currency+img_price+' x '+img_amount+'件'); } }); // for($i=0;$i
'+img_title+'
'+_jsLang.Language_Currency+img_price+' x '+img_amount+'件'+'
'+_jsLang.刪除+'
'; owl_blue.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true]) .trigger('add.owl.carousel',[$(html),0]) .trigger('refresh.owl.carousel'); } var choseImg = $(this).parents('.productBox').find('.productImg'), Img_html = choseImg.clone().addClass('moveImg'), choseImg_top = choseImg.offset().top, choseImg_left = choseImg.offset().left, choseImg_width = choseImg.width(), choseImg_height = choseImg.height(); $('body').append(Img_html); $('.moveImg').css({'top':choseImg_top,'left':choseImg_left,'width':choseImg_width,'height':choseImg_height}) .animate({ 'top': smailBox_top, 'left': smailBox_left, 'width': smailBox_width, 'height': smailBox_height },350, function() { $(this).remove(); }); }; callback(); }); }); // ========================================================== // 水平滑動功能 // ========================================================== ;(function($) { let mouseStart = null const initObj = { nav: '.dropmove-nav', prev: '.nav-prev', next: '.nav-next', parent: '.dropmove-wrapper', target: '.dropmove-list', move: 500, delay: 750, } let fullChildWidth $(window).on('resize', function(e) { fullChildWidth = 0 $(initObj.target).children().each(function(i, item) { fullChildWidth += $(item).outerWidth(true) }) arrowCheck({}, fullChildWidth) }).trigger('resize') function arrowCheck(obj, fullWidth) { const setting = (obj)? $.extend({}, initObj, obj): $.extend({}, initObj) if($(setting.target).scrollLeft() >= fullWidth - $(setting.target).width()) { $(setting.next).addClass('in-disable') } else { $(setting.next).removeClass('in-disable') } if($(setting.target).scrollLeft() <= 0) { $(setting.prev).addClass('in-disable') } else { $(setting.prev).removeClass('in-disable') } // console.log($(setting.target).scrollLeft(), fullWidth - $(setting.target).width()) } function clickMove(obj) { const setting = (obj)? $.extend({}, initObj, obj): $.extend({}, initObj) if($(setting.target).width() < fullChildWidth) { $(setting.nav).removeClass('in-disable') } else { $(setting.nav).addClass('in-disable') } arrowCheck(obj, fullChildWidth) $(setting.prev).on('click', function(e) { const targetItem = $(this).parents(setting.parent).find(setting.target) targetItem.stop(true, false) let scrollTarget if(targetItem.scrollLeft() - setting.move <= 0) { scrollTarget = 0 $(setting.prev).addClass('in-disable') $(setting.next).removeClass('in-disable') } else { scrollTarget = targetItem.scrollLeft() - setting.move $(setting.next).removeClass('in-disable') } targetItem.animate({ scrollLeft: scrollTarget }, setting.delay) }) $(setting.next).on('click', function(e) { const targetItem = $(this).parents(setting.parent).find(setting.target) targetItem.stop(true, false) let scrollTarget if(targetItem.scrollLeft() + setting.move >= fullChildWidth - targetItem.width()) { scrollTarget = fullChildWidth - targetItem.width() $(setting.next).addClass('in-disable') $(setting.prev).removeClass('in-disable') } else { scrollTarget = targetItem.scrollLeft() + setting.move $(setting.prev).removeClass('in-disable') } targetItem.animate({ scrollLeft: scrollTarget }, setting.delay) }) } // mouse event $('.dropmove-list').on('mousedown', function(e) { e.preventDefault() mouseStart = e.screenX }) $('.dropmove-list').on('mouseup', function(e) { e.preventDefault() mouseStart = null }) $('.dropmove-list').on('mousemove', function(e) { e.preventDefault() if(mouseStart !== null) { $('.dropmove-list').scrollLeft($('.dropmove-list').scrollLeft()+(mouseStart - e.screenX)) mouseStart = e.screenX arrowCheck({}, fullChildWidth) } }) // touch event $('.dropmove-list').on('touchstart', function(e) { const touchEvent = e.originalEvent.touches[0] // e.preventDefault() mouseStart = touchEvent.clientX }) $('.dropmove-list').on('touchend', function(e) { // e.preventDefault() mouseStart = null }) $('.dropmove-list').on('touchmove', function(e) { const touchEvent = e.originalEvent.touches[0] // e.preventDefault() if(mouseStart !== null) { $('.dropmove-list').scrollLeft($('.dropmove-list').scrollLeft()+(mouseStart - touchEvent.clientX)) mouseStart = touchEvent.clientX arrowCheck({}, fullChildWidth) } }) clickMove({ move: 200, delay: 250, }) })($)