| 1 |
/** |
| 2 |
* Javascript code needed to build TinyMCE button to help user building shortcodes for WPDA tables. |
| 3 |
* |
| 4 |
* @author Peter Schulz |
| 5 |
* @since 1.0.0 |
| 6 |
*/ |
| 7 |
|
| 8 |
// Default label values. |
| 9 |
var wpda_tab = 'Table'; |
| 10 |
var wpda_cols = 'Columns'; |
| 11 |
var wpda_selcols = 'SELECT COLUMNS'; |
| 12 |
var wpda_clksel = 'Click to select. Columns are displayed in the order as listed.'; |
| 13 |
var wpda_curcel = 'Current selection'; |
| 14 |
var wpda_shwcols = 'SHOW ALL COLUMNS'; |
| 15 |
var wpda_resp = 'Responsive mode'; |
| 16 |
var wpda_yes = 'Yes'; |
| 17 |
var wpda_no = 'No'; |
| 18 |
var wpda_rescols = 'Number of columns in responsive header'; |
| 19 |
var wpda_icon = 'Show expand icon'; |
| 20 |
var wpda_details = 'Show details'; |
| 21 |
var wpda_col = 'Collapsed'; |
| 22 |
var wpda_mod = 'In modal window'; |
| 23 |
var wpda_exp = 'Expanded'; |
| 24 |
var wpda_war = 'WARNING'; |
| 25 |
var wpda_wartxt = 'You currently have no access to any database tables and views'; |
| 26 |
var wpda_act = 'ACTION'; |
| 27 |
var wpda_acttxt = 'Grant access to desired tables and views in front-end settings'; |
| 28 |
|
| 29 |
function translate(txt) { |
| 30 |
if (jQuery.url( wpda_script_url ).data.param.query[txt]) { |
| 31 |
eval( 'wpda_' + txt + '= jQuery.url(wpda_script_url).data.param.query.' + txt ); |
| 32 |
} |
| 33 |
} |
| 34 |
|
| 35 |
wpda_script_url = document.currentScript.src; // Save script url. |
| 36 |
jQuery( document.currentScript ).ready( |
| 37 |
function() { |
| 38 |
// Check for translations. |
| 39 |
translate( 'tab' ); |
| 40 |
translate( 'cols' ); |
| 41 |
translate( 'selcols' ); |
| 42 |
translate( 'clksel' ); |
| 43 |
translate( 'curcel' ); |
| 44 |
translate( 'shwcols' ); |
| 45 |
translate( 'resp' ); |
| 46 |
translate( 'yes' ); |
| 47 |
translate( 'no' ); |
| 48 |
translate( 'rescols' ); |
| 49 |
translate( 'icon' ); |
| 50 |
translate( 'details' ); |
| 51 |
translate( 'col' ); |
| 52 |
translate( 'mod' ); |
| 53 |
translate( 'exp' ); |
| 54 |
translate( 'war' ); |
| 55 |
translate( 'wartxt' ); |
| 56 |
translate( 'act' ); |
| 57 |
translate( 'acttxt' ); |
| 58 |
} |
| 59 |
); |
| 60 |
|
| 61 |
function select_available(e) { |
| 62 |
|
| 63 |
var option = jQuery( "#columns_available option:selected" ); |
| 64 |
var add_to = jQuery( "#columns_selected" ); |
| 65 |
|
| 66 |
option.remove(); |
| 67 |
new_option = add_to.append( option ); |
| 68 |
|
| 69 |
if (jQuery( "#columns_selected option[value='']" ).length > 0) { |
| 70 |
// Remove ALL from selected list. |
| 71 |
jQuery( "#columns_selected option[value='']" ).remove(); |
| 72 |
} |
| 73 |
|
| 74 |
jQuery( 'select#columns_selected option' ).removeAttr( "selected" ); |
| 75 |
|
| 76 |
} |
| 77 |
|
| 78 |
function select_selected(e) { |
| 79 |
|
| 80 |
var option = jQuery( "#columns_selected option:selected" ); |
| 81 |
if (option[0].value === '') { |
| 82 |
// Cannot remove ALL. |
| 83 |
return; |
| 84 |
} |
| 85 |
|
| 86 |
var add_to = jQuery( "#columns_available" ); |
| 87 |
|
| 88 |
option.remove(); |
| 89 |
add_to.append( option ); |
| 90 |
|
| 91 |
if (jQuery( 'select#columns_selected option' ).length === 0) { |
| 92 |
jQuery( "#columns_selected" ).append( jQuery( '<option></option>' ).attr( 'value', '' ).text( wpda_shwcols ) ); |
| 93 |
} |
| 94 |
|
| 95 |
jQuery( 'select#columns_available option' ).removeAttr( "selected" ); |
| 96 |
} |
| 97 |
|
| 98 |
(function () { |
| 99 |
|
| 100 |
tinymce.create( |
| 101 |
'tinymce.plugins.wpdataaccess', { |
| 102 |
|
| 103 |
init: function (editor, url) { |
| 104 |
|
| 105 |
editor.addButton( |
| 106 |
'wpdataaccess_button', { |
| 107 |
title: 'WP Data Access', |
| 108 |
icon: 'icon dashicons-editor-table', |
| 109 |
text: ' WPDA', |
| 110 |
cmd: 'wpdataaccess_cmd' |
| 111 |
} |
| 112 |
); |
| 113 |
|
| 114 |
editor.addCommand( |
| 115 |
'wpdataaccess_cmd', function () { |
| 116 |
if (editor.settings.wpda_table_list === '') { |
| 117 |
var msg = editor.windowManager.open( |
| 118 |
{ |
| 119 |
title: "WP Data Access", |
| 120 |
width: 600, |
| 121 |
height: 300, |
| 122 |
body: [ |
| 123 |
{ |
| 124 |
type: 'label', |
| 125 |
label: wpda_war, |
| 126 |
text: wpda_wartxt |
| 127 |
}, |
| 128 |
{ |
| 129 |
type: 'label', |
| 130 |
label: wpda_act, |
| 131 |
text: wpda_acttxt |
| 132 |
} |
| 133 |
] |
| 134 |
} |
| 135 |
); |
| 136 |
} else { |
| 137 |
var win = editor.windowManager.open( |
| 138 |
{ |
| 139 |
title: "WP Data Access", |
| 140 |
width: 600, |
| 141 |
height: 300, |
| 142 |
body: [ |
| 143 |
{ |
| 144 |
type: 'listbox', |
| 145 |
name: 'table', |
| 146 |
label: wpda_tab, |
| 147 |
values: editor.settings.wpda_table_list, |
| 148 |
onselect: function () { |
| 149 |
|
| 150 |
column_selection = win.find( "#column_selection" ); |
| 151 |
column_selection.text( wpda_shwcols ); |
| 152 |
|
| 153 |
} |
| 154 |
}, |
| 155 |
{ |
| 156 |
type: 'button', |
| 157 |
name: 'columns_button', |
| 158 |
label: wpda_cols, |
| 159 |
text: wpda_selcols, |
| 160 |
onclick: function () { |
| 161 |
|
| 162 |
// Get selected value from table list for post. |
| 163 |
table = win.find( "#table" ); |
| 164 |
var wpda_data = { |
| 165 |
'action': 'wpda_tinymce_listbox_columns', |
| 166 |
'table_name': table[0].state.data.value |
| 167 |
}; |
| 168 |
|
| 169 |
// Get column list for selected table and write to listbox. |
| 170 |
jQuery.post( |
| 171 |
ajaxurl, wpda_data, function (response) { |
| 172 |
|
| 173 |
var columns_available = |
| 174 |
jQuery( |
| 175 |
'<select id="columns_available" name="columns_available[]" multiple size="8" style="width:200px" onclick="select_available()">' + |
| 176 |
'</select>' |
| 177 |
); |
| 178 |
|
| 179 |
var columns_selected = |
| 180 |
jQuery( |
| 181 |
'<select id="columns_selected" name="columns_selected[]" multiple size="8" style="width:200px" onclick="select_selected()">' + |
| 182 |
'<option value="">' + wpda_shwcols + '</option>' + |
| 183 |
'</select>' |
| 184 |
); |
| 185 |
|
| 186 |
for (var col in response) { |
| 187 |
columns_available.append( jQuery( '<option></option>' ).attr( 'value', response[col].text ).text( response[col].text ) ); |
| 188 |
} |
| 189 |
|
| 190 |
var dialog_table = jQuery( '<table style="width:410px"></table>' ); |
| 191 |
|
| 192 |
var dialog_table_row_available = dialog_table.append( jQuery( '<tr></tr>' ).append( jQuery( '<td width="50%"></td>' ) ) ); |
| 193 |
dialog_table_row_available.append( columns_available ); |
| 194 |
|
| 195 |
var dialog_table_row_selected = dialog_table.append( jQuery( '<tr></tr>' ).append( jQuery( '<td width="50%"></td>' ) ) ); |
| 196 |
dialog_table_row_selected.append( columns_selected ); |
| 197 |
|
| 198 |
var dialog_text = jQuery( '<div style="width:410px">' + wpda_clksel + '</div>' ); |
| 199 |
var dialog = jQuery( '<div></div>' ); |
| 200 |
|
| 201 |
dialog.append( dialog_text ); |
| 202 |
dialog.append( dialog_table ); |
| 203 |
|
| 204 |
dialog.dialog( |
| 205 |
{ |
| 206 |
dialogClass: 'wp-dialog no-close', |
| 207 |
title: wpda_selcols, |
| 208 |
modal: true, |
| 209 |
autoOpen: true, |
| 210 |
closeOnEscape: false, |
| 211 |
resizable: false, |
| 212 |
width: 'auto', |
| 213 |
buttons: { |
| 214 |
"Close": function () { |
| 215 |
|
| 216 |
var selected_columns = ''; |
| 217 |
jQuery( "#columns_selected option" ).each( |
| 218 |
function () { |
| 219 |
selected_columns += jQuery( this ).val() + ','; |
| 220 |
} |
| 221 |
); |
| 222 |
if (selected_columns !== '') { |
| 223 |
selected_columns = selected_columns.slice( 0, -1 ); |
| 224 |
} |
| 225 |
column_selection = win.find( '#column_selection' ); |
| 226 |
if (selected_columns === '') { |
| 227 |
column_selection.text( wpda_shwcols ); |
| 228 |
} else { |
| 229 |
column_selection.text( selected_columns ); |
| 230 |
} |
| 231 |
jQuery( this ).dialog( 'destroy' ).remove(); |
| 232 |
|
| 233 |
}, |
| 234 |
"Cancel": function () { |
| 235 |
|
| 236 |
jQuery( this ).dialog( 'destroy' ).remove(); |
| 237 |
|
| 238 |
} |
| 239 |
} |
| 240 |
} |
| 241 |
); |
| 242 |
|
| 243 |
jQuery( ".ui-button-icon-only" ).hide(); |
| 244 |
|
| 245 |
} |
| 246 |
); |
| 247 |
} |
| 248 |
}, |
| 249 |
{ |
| 250 |
type: 'label', |
| 251 |
name: 'column_selection', |
| 252 |
label: wpda_curcel, |
| 253 |
text: wpda_shwcols |
| 254 |
}, |
| 255 |
{ |
| 256 |
type: 'listbox', |
| 257 |
name: 'responsive', |
| 258 |
label: wpda_resp, |
| 259 |
values: [ |
| 260 |
{text: wpda_yes, value: 'yes'}, |
| 261 |
{text: wpda_no, value: 'no'} |
| 262 |
], |
| 263 |
onselect: function (e) { |
| 264 |
|
| 265 |
responsive_cols = win.find( "#responsive_cols" ); |
| 266 |
responsive_icon = win.find( "#responsive_icon" ); |
| 267 |
responsive_type = win.find( "#responsive_type" ); |
| 268 |
if (e.target.state.data.value === 'no') { |
| 269 |
// Disable responsive_cols. |
| 270 |
responsive_cols.disabled( true ); |
| 271 |
responsive_icon.disabled( true ); |
| 272 |
responsive_type.disabled( true ); |
| 273 |
} else { |
| 274 |
// Enable responsive_cols. |
| 275 |
responsive_cols.disabled( false ); |
| 276 |
responsive_icon.disabled( false ); |
| 277 |
responsive_type.disabled( false ); |
| 278 |
} |
| 279 |
|
| 280 |
} |
| 281 |
}, |
| 282 |
{ |
| 283 |
type: 'listbox', |
| 284 |
name: 'responsive_cols', |
| 285 |
label: wpda_rescols, |
| 286 |
values: [ |
| 287 |
{text: '1', value: '1'}, |
| 288 |
{text: '2', value: '2'}, |
| 289 |
{text: '3', value: '3'}, |
| 290 |
{text: '4', value: '4'}, |
| 291 |
{text: '5', value: '5'}, |
| 292 |
{text: '6', value: '6'} |
| 293 |
] |
| 294 |
}, |
| 295 |
{ |
| 296 |
type: 'listbox', |
| 297 |
name: 'responsive_icon', |
| 298 |
label: wpda_icon, |
| 299 |
values: [ |
| 300 |
{text: wpda_yes, value: 'yes'}, |
| 301 |
{text: wpda_no, value: 'no'} |
| 302 |
] |
| 303 |
}, |
| 304 |
{ |
| 305 |
type: 'listbox', |
| 306 |
name: 'responsive_type', |
| 307 |
label: wpda_details, |
| 308 |
values: [ |
| 309 |
{text: wpda_col, value: 'collapsed'}, |
| 310 |
{text: wpda_mod, value: 'modal'}, |
| 311 |
{text: wpda_exp, value: 'expanded'} |
| 312 |
] |
| 313 |
} |
| 314 |
], |
| 315 |
onsubmit: function (e) { |
| 316 |
|
| 317 |
column_selection = win.find( '#column_selection' )[0].state.data.text; |
| 318 |
if (column_selection === wpda_shwcols) { |
| 319 |
column_selection = '*'; |
| 320 |
} |
| 321 |
columns = ' columns="' + column_selection + '"'; |
| 322 |
responsive = ''; |
| 323 |
if (e.data.responsive === 'yes') { |
| 324 |
responsive = ' responsive="yes"' + |
| 325 |
' responsive_cols="' + e.data.responsive_cols + '"' + |
| 326 |
' responsive_type="' + e.data.responsive_type + '"' + |
| 327 |
' responsive_icon="' + e.data.responsive_icon; |
| 328 |
} |
| 329 |
editor.insertContent( |
| 330 |
'[wpdataaccess' + |
| 331 |
' table="' + e.data.table + '"' + |
| 332 |
columns + |
| 333 |
responsive + |
| 334 |
']' |
| 335 |
); |
| 336 |
|
| 337 |
} |
| 338 |
} |
| 339 |
); |
| 340 |
} |
| 341 |
} |
| 342 |
); |
| 343 |
|
| 344 |
} |
| 345 |
|
| 346 |
} |
| 347 |
); |
| 348 |
|
| 349 |
tinymce.PluginManager.add( 'wpdataaccess_button', tinymce.plugins.wpdataaccess ); |
| 350 |
|
| 351 |
})(); |
| 352 |
|
