diff --git a/js/jquery.floatmenu.js b/js/jquery.floatmenu.js index 1cea012b6..1c5fb6069 100644 --- a/js/jquery.floatmenu.js +++ b/js/jquery.floatmenu.js @@ -1,266 +1,159 @@ (function($) { - $.fn.topFloatMenu = function(timeout, duration, interval, count) + $.fn.floatTopMenu = function(option) { var cfg = { - timeout: 200, - duration: 300, - interval: 500, - count: 5 + duration: 200 }; - if(typeof timeout == "object") { - cfg = $.extend( cfg, timeout); - } else { - if(timeout) { - cfg = $.extend({ timeout: timeout }); - } - - if(duration) { - cfg = $.extend({ duration: duration }); - } - - if(interval) { - cfg = $.extend({ interval: interval }); - } - - if(count) { - cfg = $.extend({ count: count }); - } - } - - var $menu = this; + var $this = this; + var height = 0; var scroll_y = 0; - var origin_y = 0; - var timeout = null; - var interval = null; - var height = parseInt($menu.height()); - var interval_count = 0; - function init_menu() - { - hide_menu(); + var methods = { + init: function(option) + { + if($this.data("animated") == true) + return; - timeout = setTimeout(function() { - $menu.css("top", (scroll_y - height)+"px").css("display", "block"); - $menu.animate({ top: scroll_y }, cfg.duration); + $this.data("animated", true); - return; - }, cfg.timeout); - } + if(typeof option == "object") { + cfg = $.extend( cfg, option); + } - function float_menu() - { - hide_menu(); + $this.data("cfg", cfg); + $this.css({ top: "-500px", display: "block" }); - origin_y = $(window).scrollTop(); - - timeout = setTimeout(function() { - height = parseInt($menu.height()); + height = parseInt($this.outerHeight()); scroll_y = $(window).scrollTop(); - if(origin_y == scroll_y) { - $menu.css("top", (scroll_y - height)+"px").css("display", "block"); - $menu.animate({ top: scroll_y }, cfg.duration); + $this + .css("display", "none") + .clearQueue() + .stop() + .css("top", (scroll_y - height)+"px").css("display", "block") + .animate({ top: scroll_y }, cfg.duration, function() { $this.data("animated", false); }); + }, + show: function() + { + if($this.data("animated") == true) + return; + + $this.data("animated", true); + + if($this.data("cfg")) { + cfg = $.extend( cfg, $this.data("cfg")); } - }, cfg.timeout); - } - function hide_menu() - { - $menu.css("display", "none").clearQueue().stop().css("top", "-"+height+"px"); + $this.css({ top: "-"+height+"px", display: "block" }); - clearTimeout(timeout); - clearInterval(interval); + height = parseInt($this.outerHeight()); + scroll_y = $(window).scrollTop(); - interval_count = 0; - interval = setInterval(check_menu, cfg.interval); - } - - function check_menu() - { - clearTimeout(timeout); - - if(interval_count == parseInt(cfg.count)) { - clearInterval(interval); - interval_count = 0; - return; - } else { - interval_count++; + $this + .css("display", "none") + .css("top", (scroll_y - height)+"px").css("display", "block") + .animate({ top: scroll_y }, cfg.duration, function() { $this.data("animated", false); }); + }, + hide: function() + { + $this.css({ display: "none", top: "-"+height+"px" }); } + }; - origin_y = $(window).scrollTop(); - - timeout = setTimeout(function() { - scroll_y = $(window).scrollTop(); - - if(origin_y == scroll_y) { - element_y = parseInt($menu.css("top")); - - if(!$menu.is(":animated") && ($menu.is(":hidden") || (element_y - scroll_y) != 0)) { - float_menu(); - } - } - }, cfg.timeout); - } - - $(window).on("scroll",function(event) { - float_menu(); - }); - - $(window).on("resize", function(event) { - if(origin_y != scroll_y) - float_menu(); - }); - - $(window).on("load", function(event) { - init_menu(); - }); - - document.addEventListener('touchmove', function(event) { - hide_menu(); - }, false); + if (methods[option]) + return methods[option].apply(this, Array.prototype.slice.call(arguments, 1)); + else + return methods.init.apply(this, arguments); } - $.fn.bottomFloatMenu = function(timeout, duration, interval, count) + $.fn.floatBottomMenu = function(option) { var cfg = { - timeout: 200, - duration: 300, - interval: 500, - count: 5 + duration: 200 }; - if(typeof timeout == "object") { - cfg = $.extend( cfg, timeout); - } else { - if(timeout) { - cfg = $.extend({ timeout: timeout }); - } - - if(duration) { - cfg = $.extend({ duration: duration }); - } - - if(interval) { - cfg = $.extend({ interval: interval }); - } - - if(count) { - cfg = $.extend({ count: count }); - } - } - - var $menu = this; + var $this = this; + var height = 0; var scroll_y = 0; - var origin_y = 0; - var element_y = 0; - var timeout = null; - var interval = null; - var height = parseInt($menu.height()); var w_height = 0; - var interval_count = 0; + var element_y = 0; - function init_menu() - { - hide_menu(); + var methods = { + init: function(option) + { + if($this.data("animated") == true) + return; - timeout = setTimeout(function() { + $this.data("animated", true); + + if(typeof option == "object") { + cfg = $.extend( cfg, option); + } + + $this.data("cfg", cfg); + + $this.css({ top: "-500px", display: "block" }); + + height = parseInt($this.outerHeight()); scroll_y = $(window).scrollTop(); w_height = $(window).height(); element_y = scroll_y + w_height; - $menu.css("top", element_y+"px").css("display", "block"); - $menu.clearQueue().stop().animate({ top: "-="+height }, cfg.duration); - }, cfg.timeout); - } - function float_menu() - { - hide_menu(); + $this + .css("display", "none") + .clearQueue() + .stop() + .css({ top: element_y+"px", display: "block" }) + .animate({ top: "-="+height }, cfg.duration, function() { $this.data("animated", false); }); + }, + show: function() + { + if($this.data("animated") == true) + return; - origin_y = $(window).scrollTop(); + $this.data("animated", true); - timeout = setTimeout(function() { + if($this.data("cfg")) { + cfg = $.extend( cfg, $this.data("cfg")); + } + + $this.css({ top: "-"+height+"px", display: "block" }); + + height = parseInt($this.outerHeight()); scroll_y = $(window).scrollTop(); + w_height = $(window).height(); + element_y = scroll_y + w_height; - if(origin_y == scroll_y) { - height = parseInt($menu.height()); - w_height = $(window).height(); - element_y = scroll_y + w_height; + if (/iP(hone|od|ad)/.test(navigator.platform)) { + if(window.innerHeight - $(window).outerHeight(true) > 0) + element_y += (window.innerHeight - $(window).outerHeight(true)); + } - if (/iP(hone|od|ad)/.test(navigator.platform)) { - if(window.innerHeight - $(window).outerHeight(true) > 0) - element_y += (window.innerHeight - $(window).outerHeight(true)); - } - - $menu.height(0).css("top", element_y+"px").css("display", "block"); - $menu.animate({ + $this + .css("display", "none") + .clearQueue() + .stop() + .height(0) + .css({top: element_y+"px", display: "block"}) + .animate({ top: "-="+height, height: "+="+height - }, cfg.duration); - } - }, cfg.timeout); - } - - function hide_menu() - { - $menu.css("display", "none").css("top", (w_height + height)+"px").clearQueue().stop(); - - clearTimeout(timeout); - clearInterval(interval); - - interval_count = 0; - interval = setInterval(check_menu, cfg.interval); - } - - function check_menu() - { - clearTimeout(timeout); - - if(interval_count == parseInt(cfg.count)) { - clearInterval(interval); - interval_count = 0; - return; - } else { - interval_count++; + }, cfg.duration, + function() { + $this.data("animated", false); + } + ); + }, + hide: function() + { + this.css({ display: "none", top: "-"+height+"px" }); } + }; - origin_y = $(window).scrollTop(); - - timeout = setTimeout(function() { - scroll_y = $(window).scrollTop(); - - if(origin_y == scroll_y) { - w_height = $(window).height(); - element_y = parseInt($menu.css("top")); - - var h = 0; - if (/iP(hone|od|ad)/.test(navigator.platform)) { - if(window.innerHeight - $(window).outerHeight(true) > 0) - h = window.innerHeight - $(window).outerHeight(true); - } - - if(!$menu.is(":animated") && ($menu.is(":hidden") || element_y != (scroll_y + w_height + h - height))) { - float_menu(); - } - } - }, cfg.timeout); - } - - $(window).on("scroll",function(event) { - float_menu(); - }); - - $(window).on("load", function(event) { - init_menu(); - }); - - $(window).on("resize", function(event) { - if(origin_y != scroll_y) - float_menu(); - }); - - document.addEventListener('touchmove', function(event) { - hide_menu(); - }, false); + if (methods[option]) + return methods[option].apply(this, Array.prototype.slice.call(arguments, 1)); + else + return methods.init.apply(this, arguments); } }(jQuery)); \ No newline at end of file diff --git a/mobile/shop/iteminfo.php b/mobile/shop/iteminfo.php index eea26e194..7c1a44d72 100644 --- a/mobile/shop/iteminfo.php +++ b/mobile/shop/iteminfo.php @@ -101,7 +101,39 @@ switch($info) { diff --git a/mobile/skin/shop/basic/img/loading.gif b/mobile/skin/shop/basic/img/loading.gif index 3288d1035..93dc39709 100644 Binary files a/mobile/skin/shop/basic/img/loading.gif and b/mobile/skin/shop/basic/img/loading.gif differ diff --git a/mobile/skin/shop/basic/item.form.skin.php b/mobile/skin/shop/basic/item.form.skin.php index 788ed0dfb..b88d87c0a 100644 --- a/mobile/skin/shop/basic/item.form.skin.php +++ b/mobile/skin/shop/basic/item.form.skin.php @@ -385,9 +385,6 @@ $(function(){ return false; }); - // 하단 플로팅 메뉴 - $("#form_btn_layer").bottomFloatMenu(); - // 이전 다음상품 swipe $(window) .on("swipeleft", function(e) { @@ -490,6 +487,32 @@ $(function(){ }); + var scroll_timeout = null; + var timeout = 200; + + $(window).on("load", function(e) { + setTimeout(function() { + $("#form_btn_layer").floatBottomMenu(); + }, timeout); + }); + + if(navigator.userAgent.toLowerCase().indexOf("android") > -1) { + $(window).on("resize", function(e) { + setTimeout(function() { + $(window).trigger("scroll"); + }, timeout); + }); + } + + $(window).on("scroll", function(e) { + clearTimeout(scroll_timeout); + $("#form_btn_layer").floatBottomMenu("hide"); + + scroll_timeout = setTimeout(function() { + $("#form_btn_layer").floatBottomMenu("show"); + }, timeout); + }); + // scroll event enable $(window).on("movestart", function(e) { if ((e.distX > e.distY && e.distX < -e.distY) || @@ -503,11 +526,16 @@ function load_message() { var w = $(window).width(); var h = $(window).height(); - var img_w = 32; - var img_h = 32; + var img_w = 64; + var img_h = 64; var top, left; var scr_top = $(window).scrollTop(); + if (/iP(hone|od|ad)/.test(navigator.platform)) { + if(window.innerHeight - $(window).outerHeight(true) > 0) + h += (window.innerHeight - $(window).outerHeight(true)); + } + top = parseInt((h - img_h) / 2); left = parseInt((w - img_w) / 2); diff --git a/mobile/skin/shop/basic/style.css b/mobile/skin/shop/basic/style.css index e86be5e21..63a29576e 100644 --- a/mobile/skin/shop/basic/style.css +++ b/mobile/skin/shop/basic/style.css @@ -80,5 +80,5 @@ /* 로딩안내 레이어 */ -#loading_message {position:absolute;top:0;left:0;z-index:10000;background-color:#000;opacity:.5} -#loading_message img {position:relative} \ No newline at end of file +#loading_message {position:absolute;top:0;left:0;z-index:10000;background-color:#eee;opacity:0.5} +#loading_message img {position:relative;opacity:1.0} \ No newline at end of file