extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-08-14 10:28:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Etemplate - add 'app_icons' option for link-entry to show app selection as a list with icons

Browse Source
This commit is contained in:
nathangray
2017-09-13 10:09:19 -06:00
parent 516015ac40
commit 95e66730c4
4 changed files with 150 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
api/js/etemplate/et2_widget_link.js
View File

@ -531,6 +531,12 @@ var et2_link_entry = (function(){ "use strict"; return et2_inputWidget.extend(
"default": "",
"description": "Limit to the listed applications (comma seperated)"
},
"app_icons": {
"name": "Application icons",
"type": "boolean",
"default": false,
"description": "Show application icons instead of names"
},
"blur": {
"name": "Placeholder",
"type": "string",
@ -601,6 +607,57 @@ var et2_link_entry = (function(){ "use strict"; return et2_inputWidget.extend(
this.div = jQuery(document.createElement("div")).addClass("et2_link_entry");
// Application selection
jQuery.widget( "custom.iconselectmenu", jQuery.ui.selectmenu, {
_setText: function(element, value){
if(element === this.buttonText){
this._setButtonText(value);
} else {
this._superApply(element, value);
}
},
_setButtonText: function( value ) {
var _value = this.focusIndex;
if(typeof this.focusIndex === 'undefined')
{
_value = this.element.find( "option:selected" ).val();
}
else
{
var selected = this.items[_value] || {};
_value = selected.value;
}
var url = self.egw().image('navbar', _value);
var buttonItem = jQuery( "<span>", {
"class": "ui-selectmenu-text",
title: value
})
jQuery('.ui-selectmenu-text', this.button).replaceWith(buttonItem);
buttonItem.css('background-image', 'url('+url+')');
},
_renderItem: function( ul, item ) {
var li = jQuery( "<li>", {class:"et2_link_entry_app_option"}),
wrapper = jQuery( "<div>", {text: item.label} );
if ( item.disabled ) {
li.addClass( "ui-state-disabled" );
}
ul.addClass(self.div.class);
var url = self.egw().image('navbar', item.value);
jQuery( "<span>", {
style: 'background-image: url("'+url+'");',
"class": "ui-icon " + item.element.attr( "data-class" ),
title: item.label
})
.appendTo( wrapper );
return li.append( wrapper ).appendTo( ul );
}
});
this.app_select = jQuery(document.createElement("select")).appendTo(this.div)
.change(function(e) {
// Clear cache when app changes
@ -624,12 +681,20 @@ var et2_link_entry = (function(){ "use strict"; return et2_inputWidget.extend(
{
this.app_select.val(this.options.only_app);
this.app_select.hide();
if(this.options.app_icons && this.app_select.iconselectmenu('instance'))
{
this.app_select.iconselectmenu('widget').hide();
}
this.div.addClass("no_app");
}
else
{
// Now that options are in, set to last used app
this.app_select.val(this.options.value.app||'');
if(this.app_select.iconselectmenu('instance'))
{
this.app_select.iconselectmenu('update');
}
}
// Search input
@ -637,8 +702,31 @@ var et2_link_entry = (function(){ "use strict"; return et2_inputWidget.extend(
// .attr("type", "search") // Fake it for all browsers below
.focus(function(){if(!self.options.only_app) {
// Adjust width, leave room for app select & link button
self.div.removeClass("no_app");self.app_select.show();
self.div.removeClass("no_app");
if(self.options.app_icons)
{
self.app_select.iconselectmenu('widget').show();
}
else
{
self.app_select.show();
}
}})
.blur(function() {
if(self.options.app_icons)
{
// Adjust width, leave room for app select & link button
self.div.addClass("no_app");
self.app_select.iconselectmenu('widget').hide();
}
else if (self.search.val())
{
if(self.options.only_app) {
// Adjust width, leave room for app select & link button
self.div.addClass("no_app");
}
}
})
.appendTo(this.div);
this.set_blur(this.options.blur ? this.options.blur : this.egw().lang("search"), this.search);
@ -795,6 +883,15 @@ var et2_link_entry = (function(){ "use strict"; return et2_inputWidget.extend(
}
this.app_select.val(this.options.value.app);
}
if(this.options.app_icons)
{
this.div.addClass('app_icons');
this.app_select.iconselectmenu({width: 50})
.iconselectmenu( "menuWidget" );
this.app_select.iconselectmenu('widget').hide();
}
return this._super.apply(this,arguments);
},
@ -875,6 +972,10 @@ var et2_link_entry = (function(){ "use strict"; return et2_inputWidget.extend(
jQuery("option[value='"+_value.app+"']",this.app_select).prop("selected",true);
this.app_select.hide();
if(this.options.app_icons && this.app_select.iconselectmenu('instance'))
{
this.app_select.iconselectmenu('widget').hide();
}
this.div.addClass("no_app");
},