From 8d2018e8f951f73b7d104020711509830df3c7b2 Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Mon, 3 Mar 2014 16:03:39 +0000 Subject: [PATCH] Implement show more apps slider menu and sidebox slider menu in idots template with jQuery --- .../idots/class.idots_framework.inc.php | 46 ---- phpgwapi/templates/idots/css/idots.css | 9 + phpgwapi/templates/idots/js/idots.js | 54 +++-- .../templates/idots/js/simple_show_hide.js | 187 --------------- phpgwapi/templates/idots/js/slidereffects.js | 217 ------------------ phpgwapi/templates/idots/navbar.tpl | 7 +- 6 files changed, 46 insertions(+), 474 deletions(-) delete mode 100644 phpgwapi/templates/idots/js/simple_show_hide.js delete mode 100644 phpgwapi/templates/idots/js/slidereffects.js diff --git a/phpgwapi/templates/idots/class.idots_framework.inc.php b/phpgwapi/templates/idots/class.idots_framework.inc.php index f1b6fd298b..fab0a1c374 100644 --- a/phpgwapi/templates/idots/class.idots_framework.inc.php +++ b/phpgwapi/templates/idots/class.idots_framework.inc.php @@ -125,15 +125,6 @@ class idots_framework extends egw_framework } self::validate_file('/phpgwapi/templates/idots/js/idots.js'); } - if ($GLOBALS['egw_info']['user']['preferences']['common']['click_or_onmouseover'] == 'onmouseover' && !html::$ua_mobile) - { - $show_menu_event = 'mouseover'; - } - else - { - $show_menu_event = 'click'; - } - $extra['slide-out'] = $this->slide_out_menus($show_menu_event); $this->tpl->set_var($this->_get_header($extra)); @@ -144,43 +135,6 @@ class idots_framework extends egw_framework return $content; } - /** - * Return slide-out-menu config for idots.js - * - * @param string $show_menu_event='click' - * @return array - */ - protected function slide_out_menus($show_menu_event='click') - { - return array( - array( - 'id' => 'menu1', - 'dir' => 'down', - 'left' => 10, - 'top' => html::$ua_mobile ? 0 : 114, - 'width' => 180, - 'height' => 200, - 'pos' => 'right', - 'bind' => array( - '#extra_icons_show' => array('event' => $show_menu_event, 'method' => 'showMenu'), - '#menu1close' => array('event' => $show_menu_event, 'method' => 'hide'), - ), - ), - array( - 'id' => 'menu2', - 'dir' => 'right', - 'left' => 0, - 'top' => html::$ua_mobile ? 0 : 105, - 'width' => 100, - 'height' => 200, - 'bind' => array( - '#menu2show' => array('event' => $show_menu_event, 'method' => 'showMenu'), - '#menu2close' => array('event' => 'click', 'method' => 'hide'), - ), - ), - ); - } - /** * Returns the html from the body-tag til the main application area (incl. opening div tag) * diff --git a/phpgwapi/templates/idots/css/idots.css b/phpgwapi/templates/idots/css/idots.css index 751e66afde..31954b3177 100644 --- a/phpgwapi/templates/idots/css/idots.css +++ b/phpgwapi/templates/idots/css/idots.css @@ -132,3 +132,12 @@ a:link, a:visited, select, input, textarea { .divLoginboxHeader { background-image: url(../images/gradient22.png); } +#menu1Container{ + position: absolute; + top: 3px; + right: -16px; + z-index: 10000; +} +#menu2Container{ + z-index: 10000; +} \ No newline at end of file diff --git a/phpgwapi/templates/idots/js/idots.js b/phpgwapi/templates/idots/js/idots.js index 4bb877a239..03051b4e6a 100644 --- a/phpgwapi/templates/idots/js/idots.js +++ b/phpgwapi/templates/idots/js/idots.js @@ -19,29 +19,43 @@ egw_LAB.wait(function() { if (quick_add) egw.link_quick_add(quick_add); // instanciate slideout menus via "data-slide-out" of egw.js script tag - var egw_script = document.getElementById('egw_script_id'); - if (egw_script) - { - var data_slide_out = egw_script.getAttribute('data-slide-out'); - if (data_slide_out) - { - data_slide_out = JSON.parse(data_slide_out); - for(var i=0; i < data_slide_out.length; ++i) - { - var args=data_slide_out[i]; - - new ypSlideOutMenu(args.id, args.dir, args.left, args.top, args.width, args.height, args.pos); - for(var selector in args.bind) + var extra_icons_show = jQuery('#extra_icons_show'); + var menu1Container = jQuery('#menu1Container') + .width(180) + .offset({top:extra_icons_show.offset().top+extra_icons_show.height()}); + var menu2show = jQuery('#menu2show'); + var menu2Container = jQuery('#menu2Container'); + //Click handler for extra apps menu + extra_icons_show.on({ + click:function (event){ + var extraIcon = event; + $j('html').on('click',function(event) { + if ($j(event.target).parents('#menu1Container').length==0 && event.target !== extraIcon.target) { - var data = args.bind[selector]; - jQuery(selector).on(data.event, {menu: args.id, method: data.method}, function(event){ - window.ypSlideOutMenu[event.data.method].call(window, event.data.menu); - event.preventDefault(); - }); + menu1Container.slideUp(); + $j(this).unbind(event); } - } + }); + menu1Container.slideToggle(); } - } + }); + // Click handler for sidebox menu + menu2show.on({ + click:function (event){ + var m2showIcon = event; + var options = { + direction: "left" + }; + $j('html').on('click',function(event) { + if (event.target !== m2showIcon.target) + { + menu2Container.toggle('slide',options); + $j(this).unbind(event); + } + }); + menu2Container.toggle("slide",options); + } + }); /** * Initialisation, when DOM is ready diff --git a/phpgwapi/templates/idots/js/simple_show_hide.js b/phpgwapi/templates/idots/js/simple_show_hide.js deleted file mode 100644 index 045c26c925..0000000000 --- a/phpgwapi/templates/idots/js/simple_show_hide.js +++ /dev/null @@ -1,187 +0,0 @@ -/***************************************************** - * ypSlideOutMenu - * 3/04/2001 - * - * a nice little script to create exclusive, slide-out - * menus for ns4, ns6, mozilla, opera, ie4, ie5 on - * mac and win32. I've got no linux or unix to test on but - * it should(?) work... - * - * --youngpup-- - *****************************************************/ - -//var isIE = false; -//var isOther = false; -//var isNS4 = false; -//var isNS6 = false; -// constructor - -var IEzindexworkaround=false; // set this true to enable the IE z-index bugfix - -function ypSlideOutMenu(id, dir, left, top, width, height,pos) -{ - - this.ie = document.all ? 1 : 0 - this.ns4 = document.layers ? 1 : 0 - this.dom = document.getElementById ? 1 : 0 - - if (this.ie || this.ns4 || this.dom) { - this.id = id - this.dir = dir - this.orientation = dir == "left" || dir == "right" ? "h" : "v" - this.dirType = dir == "right" || dir == "down" ? "-" : "+" - this.dim = this.orientation == "h" ? width : height - //this.hideTimer = false - //this.aniTimer = false - this.open = false - this.over = false - //this.startTime = 0 - - // global reference to this object - //this.gRef = "ypSlideOutMenu_"+id - //eval(this.gRef+"=this") - - // add this menu object to an internal list of all menus - //ypSlideOutMenu.Registry[id] = this - - var d = document - - var strCSS = ''; - - jQuery('head').append(strCSS); - // alert(strCSS); -// this.load() - - } - } - - ypSlideOutMenu.aLs = function(layerID) - { - - this.isIE = false; - this.isOther = false; - this.isNS4 = false; - this.isNS6 = false; - if(document.getElementById) - { - if(!document.all) - { - this.isNS6=true; - } - if(document.all) - { - this.isIE=true; - } - } - else - { - if(document.layers) - { - this.isNS4=true; - } - else - { - this.isOther=true; - } - } - - var returnLayer; - if(this.isIE) - { - returnLayer = eval("document.all." + layerID + ".style"); - } - if(this.isNS6) - { - returnLayer = eval("document.getElementById('" + layerID + "').style"); - } - if(this.isNS4) - { - returnLayer = eval("document." + layerID); - } - if(this.isOther) - { - returnLayer = "null"; - alert("Error:\nDue to your browser you will probably not\nbe able to view all of the following page\nas it was designed to be viewed. We regret\nthis error sincerely."); - } - return returnLayer; - } - // HideShow 1.0 Jim Cummins - http://www.conxiondesigns.com - - ypSlideOutMenu.ShowL = function(ID) - { - ypSlideOutMenu.aLs(ID).visibility = "visible"; - } - - ypSlideOutMenu.HideL =function(ID) - { - ypSlideOutMenu.aLs(ID).visibility = "hidden"; - } - - ypSlideOutMenu.HideShow = function(ID) - { - - if((ypSlideOutMenu.aLs(ID).visibility == "visible") || (ypSlideOutMenu.aLs(ID).visibility == "")) - { - ypSlideOutMenu.aLs(ID).visibility = "hidden"; - } - else if(ypSlideOutMenu.aLs(ID).visibility == "hidden") - { - ypSlideOutMenu.aLs(ID).visibility = "visible"; - } - } - - - ypSlideOutMenu.showMenu = function(id) - { - //temporarly hide all selectboxes to fix IE bug with z-index - if(IEzindexworkaround && document.all) - { - for (var i=0; i ms, which - // gives the user time to cancel the action if they accidentally moused out - var obj = ypSlideOutMenu.Registry[id] - if (obj.container) { - if (obj.hideTimer) window.clearTimeout(obj.hideTimer) - obj.hideTimer = window.setTimeout("ypSlideOutMenu.hide('" + id + "')", ypSlideOutMenu.hideDelay); - } - } - - ypSlideOutMenu.hide = function(id) - { - var obj = ypSlideOutMenu.Registry[id] - obj.over = false - - if (obj.hideTimer) window.clearTimeout(obj.hideTimer) - - // flag that this scheduled event has occured. - obj.hideTimer = 0 - - // if this menu is open, close it. - if (obj.open && !obj.aniTimer) obj.startSlide(false) - - //show all selectboxes again to fix IE bug with z-index - if(document.all && document.all instanceof Array) - { - for (var i=0; i ypSlideOutMenu.aniLen) this.endSlide() - else { - var d = Math.round(Math.pow(ypSlideOutMenu.aniLen-elapsed, 2) * this.accelConst) - if (this.open && this.dirType == "-") d = -d - else if (this.open && this.dirType == "+") d = -d - else if (!this.open && this.dirType == "-") d = -this.dim + d - else d = this.dim + d - - this.moveTo(d) - } -} - -ypSlideOutMenu.prototype.endSlide = function() { - this.aniTimer = window.clearTimeout(this.aniTimer) - this.moveTo(this.open ? this.outPos : this.homePos) - if (!this.open) this.setVisibility(false) - if ((this.open && !this.over) || (!this.open && this.over)) { - this.startSlide(this.over) - } -} - -ypSlideOutMenu.prototype.setVisibility = function(bShow) { - var s = this.ns4 ? this.container : this.container.style - s.visibility = bShow ? "visible" : "hidden" -} -ypSlideOutMenu.prototype.moveTo = function(p) { - this.style[this.orientation == "h" ? "left" : "top"] = this.ns4 ? p : p + "px" -} -ypSlideOutMenu.prototype.getPos = function(c) { - return parseInt(this.style[c]) -} - -// events -ypSlideOutMenu.prototype.onactivate = function() { } -ypSlideOutMenu.prototype.ondeactivate = function() { } diff --git a/phpgwapi/templates/idots/navbar.tpl b/phpgwapi/templates/idots/navbar.tpl index 3e0cde3888..e9d46757d8 100644 --- a/phpgwapi/templates/idots/navbar.tpl +++ b/phpgwapi/templates/idots/navbar.tpl @@ -2,10 +2,9 @@
-