Skip to content

Commit 6982325

Browse files
ryancramerdesignryancramerdesign
committed
Update ProcessWire.alert(), ProcessWire.confirm() and ProcessWire.prompt() Javascript functions to use Uikit modals rather than Vex modals. This also should also help to solve processwire/processwire-issues#2063 ...also added ProcessWire.entities1() and ProcessWire.unentities() JS functions to mirror those in Sanitizer.
1 parent 436a0ed commit 6982325

File tree

3 files changed

+231
-21
lines changed

3 files changed

+231
-21
lines changed

‎wire/modules/AdminTheme/AdminThemeUikit/AdminThemeUikit.module

+13-2
Original file line numberDiff line numberDiff line change
@@ -1052,8 +1052,13 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
10521052
}
10531053

10541054
if($logoQS) $logoURL .= '?' . $sanitizer->entities($logoQS);
1055-
1056-
$img = "<img src='$logoURL' $attr/>";
1055+
1056+
if($native && false) { // @todo
1057+
$logoURL = $config->urls($this) . 'pw.svg';
1058+
$img = file_get_contents(__DIR__ . '/pw.svg');
1059+
} else {
1060+
$img = "<img src='$logoURL' $attr/>";
1061+
}
10571062

10581063
return $options['getURL'] ? $logoURL : $img;
10591064
}
@@ -1147,6 +1152,12 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
11471152
$data['logoAction'] = (int) $this->logoAction;
11481153
$data['toggleBehavior'] = (int) $this->toggleBehavior;
11491154
$config->js('adminTheme', $data);
1155+
$config->js('AdminThemeUikit', [
1156+
'labels' => [
1157+
'ok' => $this->_('Ok'), // Dialog box text for "Ok" // If not translated it will pull from common translations
1158+
'cancel' => $this->_('Cancel'), // Dialog box text for "Cancel" // If not translated it will pull from common translations
1159+
],
1160+
]);
11501161

11511162
return parent::getHeadJS();
11521163
}

‎wire/templates-admin/scripts/main.js

+217-18
Original file line numberDiff line numberDiff line change
@@ -462,24 +462,78 @@ var ProcessWireAdmin = {
462462
};
463463

464464
if(typeof ProcessWire != "undefined") {
465+
465466
/**
466467
* Confirmation dialog
467468
*
468469
* ~~~~~
469470
* ProcessWire.confirm('Send this message now?', function() {
470-
* // user clicked Ok
471+
* console.log('Ok');
471472
* }, function() {
472-
* // user clicked Cancel
473+
* console.log('Cancel');
473474
* });
474475
* ~~~~~
476+
* More options and syntax available in ProcessWire 3.0.248+ (only message argument is required):
477+
* ~~~~~
478+
* ProcessWire.confirm({
479+
* message: '<h2>Send this message now?</h2>',
480+
* allowMarkup: true,
481+
* funcOk: function() { console.log('Ok') },
482+
* funcCancel: function() { console.log('Cancel') },
483+
* labelOk: 'Send now', // Uikit admin only
484+
* labelCancel: 'Cancel send' // Uikit admin only
485+
* });
486+
* ~~~~~
475487
*
476488
* @param message Message to display (or question to ask)
477489
* @param funcOk Callback called on "Ok"
478490
* @param funcCancel Callback called on "Cancel" (optional)
491+
* @param bool Allow markup in confirm message? (default=false)
479492
*
480493
*/
481-
ProcessWire.confirm = function(message, funcOk, funcCancel) {
482-
if(typeof vex != "undefined" && typeof funcOk != "undefined") {
494+
ProcessWire.confirm = function(message, funcOk, funcCancel, allowMarkup) {
495+
496+
var settings = {};
497+
if(typeof message === 'object') {
498+
settings = message;
499+
if(typeof settings.funcOk != 'undefined') funcOk = settings.funcOk;
500+
if(typeof settings.funcCancel != 'undefined') funcCancel = settings.funcCancel;
501+
if(typeof settings.allowMarkup != 'undefined') allowMarkup = settings.allowMarkup;
502+
message = settings.message;
503+
}
504+
505+
if(typeof allowMarkup == "undefined") allowMarkup = false;
506+
507+
if(typeof UIkit != "undefined") {
508+
var messageHtml = '';
509+
if(allowMarkup) {
510+
messageHtml = message;
511+
message = '<!--message-->';
512+
} else {
513+
message = ProcessWire.entities1(message);
514+
}
515+
var labels = ProcessWire.config.AdminThemeUikit.labels;
516+
var options = { i18n: {} };
517+
if(typeof labels != 'undefined') {
518+
options.i18n = { ok: labels['ok'], cancel: labels['cancel'] };
519+
}
520+
if(typeof settings.labelOk != 'undefined' && settings.labelOk.length) {
521+
options.i18n['ok'] = settings.labelOk;
522+
}
523+
if(typeof settings.labelCancel != 'undefined' && settings.labelCancel.length) {
524+
options.i18n['cancel'] = settings.labelCancel;
525+
}
526+
var modal = UIkit.modal.confirm(message, options);
527+
if(allowMarkup) {
528+
$(modal.dialog.$el).find('.uk-modal-body').html(messageHtml);
529+
}
530+
modal.then(function() {
531+
if(funcOk != "undefined") funcOk();
532+
}, function () {
533+
if(funcCancel != "undefined") funcCancel();
534+
});
535+
536+
} else if(typeof vex != "undefined" && typeof funcOk != "undefined") {
483537
vex.dialog.confirm({
484538
message: message,
485539
callback: function(v) {
@@ -496,15 +550,68 @@ if(typeof ProcessWire != "undefined") {
496550
} else if(typeof funcCancel != "undefined") {
497551
funcCancel();
498552
}
553+
499554
} else {
500555
// regular JS confirm behavior
501556
return confirm(message);
502557
}
503558
};
504-
505-
ProcessWire.alert = function(message, allowMarkup, expire) {
506-
if(typeof allowMarkup == "undefined") var allowMarkup = false;
507-
if(typeof vex != "undefined") {
559+
560+
/**
561+
* Show an alert dialog box
562+
*
563+
* ~~~~~
564+
* // simple example
565+
* ProcessWire.alert('Please correct your mistakes');
566+
*
567+
* // verbose example (PW 3.0.248+) only message argument is required
568+
* ProcessWire.alert({
569+
* message: '<h2>Please correct your mistakes</h2>',
570+
* allowMarkup: true,
571+
* expire: 5000, // 5 seconds
572+
* func: function() { console.log('alert box closed'),
573+
* labelOk: 'I understand' // Uikit admin only
574+
* });
575+
* ~~~~~
576+
*
577+
* @param string message Message to display
578+
* @param bool allowMarkup Allow markup in message? (default=false)
579+
* @param int expire Automatically close after this many seconds (default=0, off)
580+
* @param callable func Function to call when alert box is closed
581+
*
582+
*
583+
*/
584+
ProcessWire.alert = function(message, allowMarkup, expire, func) {
585+
586+
var settings = {};
587+
if(typeof message === 'object') {
588+
settings = message;
589+
if(typeof settings.allowMarkup != 'undefined') allowMarkup = settings.allowMarkup;
590+
if(typeof settings.expire != 'undefined') expire = settings.expire;
591+
if(typeof settings.func != 'undefined') func = settings.func;
592+
message = settings.message;
593+
}
594+
595+
if(typeof allowMarkup == "undefined") allowMarkup = false;
596+
597+
if(typeof UIkit != "undefined") {
598+
if(!allowMarkup) message = ProcessWire.entities1(message);
599+
var options = {};
600+
var labels = ProcessWire.config.AdminThemeUikit.labels;
601+
if(typeof settings.labelOk != 'undefined' && settings.labelOk.length) {
602+
options.i18n = { ok: settings.labelOk };
603+
} else if(typeof labels != 'undefined') {
604+
options.i18n = { ok: labels['ok'] };
605+
}
606+
var alert = UIkit.modal.alert(message, options);
607+
if(typeof func != 'undefined') alert.then(func);
608+
if(typeof expire !== 'undefined' && expire > 0) {
609+
setTimeout(function() {
610+
$(alert.dialog.$el).find('.uk-modal-close').trigger('click');
611+
}, expire);
612+
}
613+
614+
} else if(typeof vex != "undefined") {
508615
if(allowMarkup) {
509616
vex.dialog.alert({unsafeMessage: message});
510617
} else {
@@ -521,27 +628,119 @@ if(typeof ProcessWire != "undefined") {
521628
$('.vex-dialog-button-primary').trigger('click');
522629
}, expire);
523630
}
631+
524632
} else {
525633
alert(message);
526634
}
527635
};
528-
529-
ProcessWire.prompt = function(message, placeholder, func) {
530-
if(typeof vex == "undefined") {
531-
alert("prompt function requires vex");
636+
637+
/**
638+
* Show dialog box prompting user to enter a text value
639+
*
640+
* ~~~~~
641+
* // simple example
642+
* ProcessWire.prompt('Enter your name', 'First and last name', function(value) {
643+
* ProcessWire.alert('You entered: ' + value);
644+
* });
645+
*
646+
* // verbose example (3.0.248+) all optional except message and func
647+
* ProcessWire.prompt({
648+
* message: '<h2>Enter your name</h2>',
649+
* allowMarkup: true,
650+
* placeholder: 'First and last name',
651+
* func: function(value) { ProcessWire.alert('You entered: ' + value); },
652+
* labelOk: 'Finished', // Uikit admin only
653+
* labelCancel: 'Skip for now' // Uikit admin only
654+
* });
655+
* ~~~~~
656+
*
657+
* @param string message Message to display
658+
* @param string placeholder Placeholder or default value text to show in text input
659+
* @param callable func Function to call after user clicks "Ok"
660+
* @param bool allowMarkup Allow markup in message? (default=false)
661+
*
662+
*/
663+
ProcessWire.prompt = function(message, placeholder, func, allowMarkup) {
664+
665+
var settings = {};
666+
if(typeof message === 'object') {
667+
settings = message;
668+
if(typeof settings.placeholder != 'undefined') placeholder = settings.placeholder;
669+
if(typeof settings.func != 'undefined') func = settings.func;
670+
if(typeof settings.allowMarkup != 'undefined') allowMarkup = settings.allowMarkup;
671+
message = settings.message;
672+
}
673+
674+
if(typeof allowMarkup === 'undefined') allowMarkup = false;
675+
if(typeof placeholder === 'undefined') placeholder = '';
676+
677+
if(typeof UIkit != 'undefined') {
678+
if(!allowMarkup) message = ProcessWire.entities1(message);
679+
var labels = ProcessWire.config.AdminThemeUikit.labels;
680+
var options = { i18n: {} };
681+
if(typeof labels != 'undefined') {
682+
options.i18n = { ok: labels['ok'], cancel: labels['cancel'] };
683+
}
684+
if(typeof settings.labelOk != 'undefined' && settings.labelOk.length) {
685+
options.i18n['ok'] = settings.labelOk;
686+
}
687+
if(typeof settings.labelCancel != 'undefined' && settings.labelCancel.length) {
688+
options.i18n['cancel'] = settings.labelCancel;
689+
}
690+
var prompt = UIkit.modal.prompt(message, placeholder, options);
691+
prompt.then(function(value) {
692+
if(value !== null) func(value);
693+
});
694+
return prompt;
695+
696+
} else if(typeof vex == "undefined") {
697+
alert("prompt function requires UIkit or vex");
532698
return;
699+
700+
} else {
701+
return vex.dialog.prompt({
702+
message: message,
703+
placeholder: placeholder,
704+
callback: func
705+
})
533706
}
534-
return vex.dialog.prompt({
535-
message: message,
536-
placeholder: placeholder,
537-
callback: func
538-
})
539707
};
540-
708+
709+
/**
710+
* Entity encode given text
711+
*
712+
* @param str
713+
* @returns {string}
714+
*
715+
*/
541716
ProcessWire.entities = function(str) {
542717
return $('<textarea />').text(str).html();
543718
};
544719

720+
/**
721+
* Entity encode given text without double entity encoding anything
722+
*
723+
* @param str
724+
* @returns {string}
725+
* @since 3.0.248
726+
*
727+
*/
728+
ProcessWire.entities1 = function(str) {
729+
return ProcessWire.entities(ProcessWire.unentities(str));
730+
};
731+
732+
/**
733+
* Decode entities in given string
734+
*
735+
* @param sring str
736+
* @returns {string}
737+
* @since 3.0.248
738+
*
739+
*/
740+
ProcessWire.unentities = function(str) {
741+
return $('<div>').html(str).text();
742+
};
743+
545744
/**
546745
* Trim any type of given value and return a trimmed string
547746
*

0 commit comments

Comments
 (0)