Skip to content

Commit cdd2d42

Browse files
MauricioFauthMauricioFauth
committed
Extract Functions.getImage() into a module
Renames it to getImageTag(). Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
1 parent 21350ee commit cdd2d42

10 files changed

Lines changed: 119 additions & 112 deletions

File tree

‎js/src/database/search.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Functions } from '../modules/functions.js';
44
import { CommonParams } from '../modules/common.js';
55
import highlightSql from '../modules/sql-highlight.js';
66
import { ajaxRemoveMessage, ajaxShowMessage } from '../modules/ajax-message.js';
7+
import getImageTag from '../modules/functions/getImageTag.js';
78

89
/**
910
* JavaScript functions used on Database Search page
@@ -35,7 +36,7 @@ AJAX.registerTeardown('database/search.js', function () {
3536

3637
AJAX.registerOnload('database/search.js', function () {
3738
/** Hide the table link in the initial search result */
38-
var icon = Functions.getImage('s_tbl', '', { 'id': 'table-image' }).toString();
39+
var icon = getImageTag('s_tbl', '', { 'id': 'table-image' }).toString();
3940
$('#table-info').prepend(icon).hide();
4041

4142
/** Hide the browse and deleted results in the new search criteria */

‎js/src/designer/history.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import $ from 'jquery';
22
import { AJAX } from '../modules/ajax.js';
33
import { Functions } from '../modules/functions.js';
4+
import getImageTag from '../modules/functions/getImageTag.js';
45

56
/**
67
* @fileoverview function used in this file builds history tab and generates query.
@@ -96,19 +97,19 @@ DesignerHistory.display = function (init, finit) {
9697
} else {
9798
str += '<img src="' + themeImagePath + 'designer/and_icon.png" onclick="DesignerHistory.andOr(' + i + ')" title="AND"></td>';
9899
}
99-
str += '<td style="padding-left: 5px;" class="text-end">' + Functions.getImage('b_sbrowse', window.Messages.strColumnName) + '</td>' +
100+
str += '<td style="padding-left: 5px;" class="text-end">' + getImageTag('b_sbrowse', window.Messages.strColumnName) + '</td>' +
100101
'<td width="175" style="padding-left: 5px">' + $('<div/>').text(historyArray[i].getColumnName()).html() + '<td>';
101102
if (historyArray[i].getType() === 'GroupBy' || historyArray[i].getType() === 'OrderBy') {
102103
var detailDescGroupBy = $('<div/>').text(DesignerHistory.detail(i)).html();
103-
str += '<td class="text-center">' + Functions.getImage('s_info', DesignerHistory.detail(i)) + '</td>' +
104+
str += '<td class="text-center">' + getImageTag('s_info', DesignerHistory.detail(i)) + '</td>' +
104105
'<td title="' + detailDescGroupBy + '">' + historyArray[i].getType() + '</td>' +
105-
'<td onclick=DesignerHistory.historyDelete(' + i + ')>' + Functions.getImage('b_drop', window.Messages.strDelete) + '</td>';
106+
'<td onclick=DesignerHistory.historyDelete(' + i + ')>' + getImageTag('b_drop', window.Messages.strDelete) + '</td>';
106107
} else {
107108
var detailDesc = $('<div/>').text(DesignerHistory.detail(i)).html();
108-
str += '<td class="text-center">' + Functions.getImage('s_info', DesignerHistory.detail(i)) + '</td>' +
109+
str += '<td class="text-center">' + getImageTag('s_info', DesignerHistory.detail(i)) + '</td>' +
109110
'<td title="' + detailDesc + '">' + historyArray[i].getType() + '</td>' +
110-
'<td onclick=DesignerHistory.historyEdit(' + i + ')>' + Functions.getImage('b_edit', window.Messages.strEdit) + '</td>' +
111-
'<td onclick=DesignerHistory.historyDelete(' + i + ')>' + Functions.getImage('b_drop', window.Messages.strDelete) + '</td>';
111+
'<td onclick=DesignerHistory.historyEdit(' + i + ')>' + getImageTag('b_edit', window.Messages.strEdit) + '</td>' +
112+
'<td onclick=DesignerHistory.historyDelete(' + i + ')>' + getImageTag('b_drop', window.Messages.strDelete) + '</td>';
112113
}
113114
str += '</tr></thead>';
114115
i++;

‎js/src/error_report.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import $ from 'jquery';
22
import { AJAX } from './modules/ajax.js';
3-
import { Functions } from './modules/functions.js';
43
import { CommonParams } from './modules/common.js';
54
import { ajaxShowMessage } from './modules/ajax-message.js';
5+
import getImageTag from './modules/functions/getImageTag.js';
66

77
/**
88
* general function, usually for data manipulation pages
@@ -132,7 +132,7 @@ var ErrorReport = {
132132
var $div = $(
133133
'<div class="alert alert-danger" role="alert" id="error_notification_' + key + '"></div>'
134134
).append(
135-
Functions.getImage('s_error') + window.Messages.strErrorOccurred
135+
getImageTag('s_error') + window.Messages.strErrorOccurred
136136
);
137137

138138
var $buttons = $('<div class="float-end"></div>');
@@ -142,11 +142,11 @@ var ErrorReport = {
142142

143143
var settingsUrl = 'index.php?route=/preferences/features&server=' + CommonParams.get('server');
144144
buttonHtml += '<a class="ajax" href="' + settingsUrl + '">';
145-
buttonHtml += Functions.getImage('s_cog', window.Messages.strChangeReportSettings);
145+
buttonHtml += getImageTag('s_cog', window.Messages.strChangeReportSettings);
146146
buttonHtml += '</a>';
147147

148148
buttonHtml += '<a href="#" id="ignore_error_' + key + '" data-notification-id="' + key + '">';
149-
buttonHtml += Functions.getImage('b_close', window.Messages.strIgnore);
149+
buttonHtml += getImageTag('b_close', window.Messages.strIgnore);
150150
buttonHtml += '</a>';
151151

152152
$buttons.html(buttonHtml);

‎js/src/menu_resizer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import $ from 'jquery';
2-
import { Functions } from './modules/functions.js';
2+
import getImageTag from './modules/functions/getImageTag.js';
33

44
/**
55
* Handles the resizing of a menu according to the available screen width
@@ -45,7 +45,7 @@ import { Functions } from './modules/functions.js';
4545

4646
var img = $container.find('li img');
4747
if (img.length) {
48-
$(Functions.getImage('b_more').toString()).prependTo(link);
48+
$(getImageTag('b_more').toString()).prependTo(link);
4949
}
5050
var $submenu = $('<li></li>', { 'class': 'nav-item dropdown d-none' })
5151
.append(link)

‎js/src/modules/ajax.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { CommonParams } from './common.js';
55
import highlightSql from './sql-highlight.js';
66
import { ajaxRemoveMessage, ajaxShowMessage } from './ajax-message.js';
77
import { escapeHtml } from './functions/escape.js';
8+
import getImageTag from './functions/getImageTag.js';
89

910
/**
1011
* This object handles ajax requests for pages. It also
@@ -204,7 +205,7 @@ const AJAX = {
204205
// Show lock icon if locked targets is not empty.
205206
// otherwise remove lock icon
206207
if (! $.isEmptyObject(AJAX.lockedTargets)) {
207-
$('#lock_page_icon').html(Functions.getImage('s_lock', window.Messages.strLockToolTip).toString());
208+
$('#lock_page_icon').html(getImageTag('s_lock', window.Messages.strLockToolTip).toString());
208209
} else {
209210
$('#lock_page_icon').html('');
210211
}

‎js/src/modules/functions.js‎

Lines changed: 5 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import highlightSql from './sql-highlight.js';
99
import { ajaxRemoveMessage, ajaxShowMessage } from './ajax-message.js';
1010
import handleCreateViewModal from './functions/handleCreateViewModal.js';
1111
import { escapeHtml } from './functions/escape.js';
12+
import getImageTag from './functions/getImageTag.js';
1213

1314
/* global DatabaseStructure */ // js/database/structure.js
1415
/* global firstDayOfCalendar, maxInputVars, themeImagePath */ // templates/javascript/variables.twig
@@ -1019,7 +1020,7 @@ Functions.getForeignKeyCheckboxLoader = function () {
10191020
var html = '';
10201021
html += '<div class="mt-1 mb-2">';
10211022
html += '<div class="load-default-fk-check-value">';
1022-
html += Functions.getImage('ajax_clock_small');
1023+
html += getImageTag('ajax_clock_small');
10231024
html += '</div>';
10241025
html += '</div>';
10251026
return html;
@@ -2360,7 +2361,7 @@ Functions.onloadEnumSetEditor = function () {
23602361
values.push('', '', '', '');
23612362
}
23622363
// Add the parsed values to the editor
2363-
var dropIcon = Functions.getImage('b_drop');
2364+
var dropIcon = getImageTag('b_drop');
23642365
for (i = 0; i < values.length; i++) {
23652366
fields += '<tr><td>' +
23662367
'<input type=\'text\' value=\'' + values[i] + '\'>' +
@@ -2374,7 +2375,7 @@ Functions.onloadEnumSetEditor = function () {
23742375
var dialog = '<div id=\'enum_editor\'>' +
23752376
'<fieldset class="pma-fieldset">' +
23762377
'<legend>' + title + '</legend>' +
2377-
'<p>' + Functions.getImage('s_notice') +
2378+
'<p>' + getImageTag('s_notice') +
23782379
window.Messages.enum_hint + '</p>' +
23792380
'<table class="table table-borderless values">' + fields + '</table>' +
23802381
'</fieldset><fieldset class="pma-fieldset tblFooters">' +
@@ -2576,7 +2577,7 @@ Functions.onloadEnumSetEditor = function () {
25762577
'<tr class=\'hide\'><td>' +
25772578
'<input type=\'text\'>' +
25782579
'</td><td class=\'drop\'>' +
2579-
Functions.getImage('b_drop') +
2580+
getImageTag('b_drop') +
25802581
'</td></tr>'
25812582
)
25822583
.find('tr').last()
@@ -3677,86 +3678,6 @@ Functions.onloadSortLinkMouseEvent = function () {
36773678
});
36783679
};
36793680

3680-
/**
3681-
* Returns an HTML IMG tag for a particular image from a theme,
3682-
* which may be an actual file or an icon from a sprite
3683-
*
3684-
* @param {string} image The name of the file to get
3685-
* @param {string} alternate Used to set 'alt' and 'title' attributes of the image
3686-
* @param {object} attributes An associative array of other attributes
3687-
*
3688-
* @return {object} The requested image, this object has two methods:
3689-
* .toString() - Returns the IMG tag for the requested image
3690-
* .attr(name) - Returns a particular attribute of the IMG
3691-
* tag given it's name
3692-
* .attr(name, value) - Sets a particular attribute of the IMG
3693-
* tag to the given value
3694-
*/
3695-
Functions.getImage = function (image, alternate, attributes) {
3696-
var alt = alternate;
3697-
var attr = attributes;
3698-
// custom image object, it will eventually be returned by this functions
3699-
var retval = {
3700-
data: {
3701-
// this is private
3702-
alt: '',
3703-
title: '',
3704-
src: 'themes/dot.gif',
3705-
},
3706-
attr: function (name, value) {
3707-
if (value === undefined) {
3708-
if (this.data[name] === undefined) {
3709-
return '';
3710-
} else {
3711-
return this.data[name];
3712-
}
3713-
} else {
3714-
this.data[name] = value;
3715-
}
3716-
},
3717-
toString: function () {
3718-
var retval = '<' + 'img';
3719-
for (var i in this.data) {
3720-
retval += ' ' + i + '="' + this.data[i] + '"';
3721-
}
3722-
retval += ' /' + '>';
3723-
return retval;
3724-
}
3725-
};
3726-
// initialise missing parameters
3727-
if (attr === undefined) {
3728-
attr = {};
3729-
}
3730-
if (alt === undefined) {
3731-
alt = '';
3732-
}
3733-
// set alt
3734-
if (attr.alt !== undefined) {
3735-
retval.attr('alt', escapeHtml(attr.alt));
3736-
} else {
3737-
retval.attr('alt', escapeHtml(alt));
3738-
}
3739-
// set title
3740-
if (attr.title !== undefined) {
3741-
retval.attr('title', escapeHtml(attr.title));
3742-
} else {
3743-
retval.attr('title', escapeHtml(alt));
3744-
}
3745-
// set css classes
3746-
retval.attr('class', 'icon ic_' + image);
3747-
// set all other attributes
3748-
for (var i in attr) {
3749-
if (i === 'src') {
3750-
// do not allow to override the 'src' attribute
3751-
continue;
3752-
}
3753-
3754-
retval.attr(i, attr[i]);
3755-
}
3756-
3757-
return retval;
3758-
};
3759-
37603681
/**
37613682
* Return POST data as stored by Generator::linkOrButton
37623683
*

‎js/src/modules/functions/getImageTag.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { escapeHtml } from './escape.js';
2+
3+
/**
4+
* Returns an HTML IMG tag for a particular image from a theme,
5+
* which may be an actual file or an icon from a sprite
6+
*
7+
* @param {string} image The name of the file to get
8+
* @param {string} alternate Used to set 'alt' and 'title' attributes of the image
9+
* @param {object} attributes An associative array of other attributes
10+
*
11+
* @return {object} The requested image, this object has two methods:
12+
* .toString() - Returns the IMG tag for the requested image
13+
* .attr(name) - Returns a particular attribute of the IMG
14+
* tag given it's name
15+
* .attr(name, value) - Sets a particular attribute of the IMG
16+
* tag to the given value
17+
*/
18+
export default function getImageTag (image, alternate, attributes) {
19+
var alt = alternate;
20+
var attr = attributes;
21+
// custom image object, it will eventually be returned by this functions
22+
var retval = {
23+
data: {
24+
// this is private
25+
alt: '',
26+
title: '',
27+
src: 'themes/dot.gif',
28+
},
29+
attr: function (name, value) {
30+
if (value === undefined) {
31+
if (this.data[name] === undefined) {
32+
return '';
33+
} else {
34+
return this.data[name];
35+
}
36+
} else {
37+
this.data[name] = value;
38+
}
39+
},
40+
toString: function () {
41+
var retval = '<' + 'img';
42+
for (var i in this.data) {
43+
retval += ' ' + i + '="' + this.data[i] + '"';
44+
}
45+
retval += ' /' + '>';
46+
return retval;
47+
}
48+
};
49+
// initialise missing parameters
50+
if (attr === undefined) {
51+
attr = {};
52+
}
53+
if (alt === undefined) {
54+
alt = '';
55+
}
56+
// set alt
57+
if (attr.alt !== undefined) {
58+
retval.attr('alt', escapeHtml(attr.alt));
59+
} else {
60+
retval.attr('alt', escapeHtml(alt));
61+
}
62+
// set title
63+
if (attr.title !== undefined) {
64+
retval.attr('title', escapeHtml(attr.title));
65+
} else {
66+
retval.attr('title', escapeHtml(alt));
67+
}
68+
// set css classes
69+
retval.attr('class', 'icon ic_' + image);
70+
// set all other attributes
71+
for (var i in attr) {
72+
if (i === 'src') {
73+
// do not allow to override the 'src' attribute
74+
continue;
75+
}
76+
77+
retval.attr(i, attr[i]);
78+
}
79+
80+
return retval;
81+
}

‎js/src/server/privileges.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Functions } from '../modules/functions.js';
44
import { CommonParams } from '../modules/common.js';
55
import { Navigation } from '../modules/navigation.js';
66
import { ajaxRemoveMessage, ajaxShowMessage } from '../modules/ajax-message.js';
7+
import getImageTag from '../modules/functions/getImageTag.js';
78

89
/**
910
* Export privileges modal handler
@@ -114,12 +115,12 @@ const AccountLocking = {
114115
}
115116

116117
if (isLocked) {
117-
const lockIcon = Functions.getImage('s_lock', window.Messages.strLock, {}).toString();
118+
const lockIcon = getImageTag('s_lock', window.Messages.strLock, {}).toString();
118119
button.innerHTML = '<span class="text-nowrap">' + lockIcon + ' ' + window.Messages.strLock + '</span>';
119120
button.title = window.Messages.strLockAccount;
120121
button.dataset.isLocked = 'false';
121122
} else {
122-
const unlockIcon = Functions.getImage('s_unlock', window.Messages.strUnlock, {}).toString();
123+
const unlockIcon = getImageTag('s_unlock', window.Messages.strUnlock, {}).toString();
123124
button.innerHTML = '<span class="text-nowrap">' + unlockIcon + ' ' + window.Messages.strUnlock + '</span>';
124125
button.title = window.Messages.strUnlockAccount;
125126
button.dataset.isLocked = 'true';

0 commit comments

Comments
 (0)