mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-07 16:44:07 +01:00
Implement show more apps slider menu and sidebox slider menu in idots template with jQuery
This commit is contained in:
Hadi Nategh
parent
44fc850d75
commit
8d2018e8f9
@ -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)
|
||||
*
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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 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_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 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
|
||||
|
||||
@ -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 = '<style type="text/css">';
|
||||
strCSS += '#' + this.id + 'Container { visibility:hidden; '
|
||||
if(pos)
|
||||
{
|
||||
strCSS += pos+':' + left + 'px; '
|
||||
}
|
||||
else
|
||||
{
|
||||
strCSS += 'left:' + left + 'px; '
|
||||
}
|
||||
strCSS += 'top:' + top + 'px; '
|
||||
strCSS += 'overflow:visible; z-index:10000; }'
|
||||
strCSS += '#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; '
|
||||
strCSS += 'width:' + width + 'px; '
|
||||
// strCSS += 'height:' + height + 'px; '
|
||||
// strCSS += 'clip:rect(0 ' + width + ' ' + height + ' 0); '
|
||||
strCSS += '}'
|
||||
strCSS += '</style>';
|
||||
|
||||
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<document.all.length; i++) {
|
||||
o = document.all(i)
|
||||
if (o.type == 'select-one' || o.type == 'select-multiple') {
|
||||
if (o.style) o.style.display = 'none';// todo: add check for select in div?
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ypSlideOutMenu.ShowL(id+'Container');
|
||||
|
||||
}
|
||||
|
||||
ypSlideOutMenu.hide = function(id)
|
||||
{
|
||||
ypSlideOutMenu.HideL(id+'Container');
|
||||
//show all selectboxes again to fix IE bug with z-index
|
||||
if(document.all)
|
||||
{
|
||||
for (var i=0; i<document.all.length; i++) {
|
||||
o = document.all(i)
|
||||
if (o.type == 'select-one' || o.type == 'select-multiple') {
|
||||
// todo: add check for select in div?
|
||||
if (o.style) o.style.display = 'inline';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,217 +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--
|
||||
*****************************************************/
|
||||
|
||||
ypSlideOutMenu.Registry = []
|
||||
ypSlideOutMenu.aniLen = 250
|
||||
ypSlideOutMenu.hideDelay = 1000
|
||||
ypSlideOutMenu.minCPUResolution = 10
|
||||
|
||||
// constructor
|
||||
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 = '<style type="text/css">';
|
||||
strCSS += '#' + this.id + 'Container { visibility:hidden; '
|
||||
if(pos)
|
||||
{
|
||||
strCSS += pos+':' + left + 'px; '
|
||||
}
|
||||
else
|
||||
{
|
||||
strCSS += 'left:' + left + 'px; '
|
||||
}
|
||||
strCSS += 'top:' + top + 'px; '
|
||||
strCSS += 'overflow:visible; z-index:10000; }'
|
||||
strCSS += '#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; '
|
||||
strCSS += 'width:' + width + 'px; '
|
||||
// strCSS += 'height:' + height + 'px; '
|
||||
// strCSS += 'clip:rect(0 ' + width + ' ' + height + ' 0); '
|
||||
strCSS += '}'
|
||||
strCSS += '</style>';
|
||||
|
||||
jQuery('head').append(strCSS);
|
||||
|
||||
|
||||
this.load()
|
||||
}
|
||||
}
|
||||
|
||||
ypSlideOutMenu.prototype.load = function() {
|
||||
var d = document
|
||||
var lyrId1 = this.id + "Container"
|
||||
var lyrId2 = this.id + "Content"
|
||||
var obj1 = this.dom ? d.getElementById(lyrId1) : this.ie ? d.all[lyrId1] : d.layers[lyrId1]
|
||||
if (obj1) var obj2 = this.ns4 ? obj1.layers[lyrId2] : this.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
|
||||
var temp
|
||||
|
||||
if (!obj1 || !obj2) window.setTimeout(this.gRef + ".load()", 100)
|
||||
else {
|
||||
this.container = obj1
|
||||
this.menu = obj2
|
||||
this.style = this.ns4 ? this.menu : this.menu.style
|
||||
this.homePos = eval("0" + this.dirType + this.dim)
|
||||
this.outPos = 0
|
||||
this.accelConst = (this.outPos - this.homePos) / ypSlideOutMenu.aniLen / ypSlideOutMenu.aniLen
|
||||
|
||||
// set event handlers.
|
||||
if (this.ns4) this.menu.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
|
||||
this.menu.onmouseover = new Function("ypSlideOutMenu.showMenu('" + this.id + "')")
|
||||
this.menu.onmouseout = new Function("ypSlideOutMenu.hideMenu('" + this.id + "')")
|
||||
|
||||
//set initial state
|
||||
this.endSlide()
|
||||
}
|
||||
}
|
||||
|
||||
ypSlideOutMenu.showMenu = function(id)
|
||||
{
|
||||
var reg = ypSlideOutMenu.Registry
|
||||
var obj = ypSlideOutMenu.Registry[id]
|
||||
|
||||
//document.all.select.style="visibily:hidden";
|
||||
|
||||
|
||||
//temporarly hide all selectboxes to fix IE bug with z-index
|
||||
if(document.all && document.all instanceof Array)
|
||||
{
|
||||
for (var i=0; i<document.all.length; i++) {
|
||||
o = document.all(i)
|
||||
if (o.type == 'select-one' || o.type == 'select-multiple') {
|
||||
// todo: add check for select in div?
|
||||
if (o.style) o.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (obj.container) {
|
||||
obj.over = true
|
||||
|
||||
// close other menus.
|
||||
for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)
|
||||
|
||||
// if this menu is scheduled to close, cancel it.
|
||||
if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }
|
||||
|
||||
// if this menu is closed, open it.
|
||||
if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
|
||||
}
|
||||
}
|
||||
|
||||
ypSlideOutMenu.hideMenu = function(id)
|
||||
{
|
||||
// schedules the menu to close after <hideDelay> 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<document.all.length; i++) {
|
||||
o = document.all(i)
|
||||
if (o.type == 'select-one' || o.type == 'select-multiple') {
|
||||
// todo: add check for select in div?
|
||||
if (o.style) o.style.display = 'inline';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
ypSlideOutMenu.prototype.startSlide = function(open) {
|
||||
this[open ? "onactivate" : "ondeactivate"]()
|
||||
this.open = open
|
||||
if (open) this.setVisibility(true)
|
||||
this.startTime = (new Date()).getTime()
|
||||
this.aniTimer = window.setInterval(this.gRef + ".slide()", ypSlideOutMenu.minCPUResolution)
|
||||
}
|
||||
|
||||
ypSlideOutMenu.prototype.slide = function() {
|
||||
var elapsed = (new Date()).getTime() - this.startTime
|
||||
if (elapsed > 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() { }
|
||||
@ -2,10 +2,9 @@
|
||||
<div style="position:relative"><div id="divLogo"><a href="{logo_url}" target="_blank"><img src="{logo_file}" border="0" title="{logo_title}" alt="EGroupware"/></a></div></div>
|
||||
|
||||
<!-- BEGIN app_extra_icons_div -->
|
||||
<div id="menu1Container" style="visibility: hidden; position:absolute;">
|
||||
<div id="menu1Content" style="position: relative; left: 0; text-align: left;">
|
||||
<div id="menu1Container" style="display: none; position:absolute;">
|
||||
<div id="menu1Content" style="position: relative; text-align: left;">
|
||||
<div id="extraIcons">
|
||||
<a id="menu1close" href="#" title="{lang_close}"><img style="" border="0" src="{img_root}/close.png"/></a>
|
||||
<table cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<!-- BEGIN app_extra_block -->
|
||||
<tr>
|
||||
@ -80,7 +79,7 @@
|
||||
<a id="menu2show" href="#" title="{lang_show_menu}"><img src="{img_root}/dragarea_right.png" /></a>
|
||||
</div>
|
||||
|
||||
<div id="menu2Container" style="visibility: hidden; position:absolute;">
|
||||
<div id="menu2Container" style="display: none; position:absolute;">
|
||||
<!--[if lte IE 6.5]><div class="selectbg" id="dd3"><div class="bdforselection"><![endif]-->
|
||||
<div id="menu2Content" style="position: relative; left: 0; text-align: left;">
|
||||
<table cellspacing="0" cellpadding="0">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user