jquery-ui: replace dialog with own implementation

website/agenda/planung/css/default.css

@@ -673,3 +673,20 @@ ul.tabContainer li:last-child{
     border-top-right-radius:0.5rem;
 }
 
+#content #dialog{
+    position:absolute;
+    z-index:1000;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: auto;
+    margin-bottom: auto;
+    width: 15rem;
+    height: 4rem;
+    text-align:center;
+    vertical-align:middle;
+    display:inline;
+}

website/agenda/planung/js/calendar.js

@@ -337,50 +337,39 @@ function showMouse(){
 
 function checkStudio(){
     if($('#studio_id').val()=='-1'){
-        $("#no_studio_selected").dialog({
-            modal: true,
-            title: "please select a studio",
-        });
+        showDialog({ title: "please select a studio" });
         return 0;
     }
     return 1;
 }
 
 function show_not_assigned_to_series_dialog(){
-    $("#event_no_series").dialog({
-        resizable: false,
-        width:800,
-        height:340,
-        modal: true,
-        title: loc['label_event_not_assigned_to_series'],
-        buttons: {
-            Cancel: function() {
-                $( this ).dialog( "close" );
-            }
+    showDialog({
+        title   : loc['label_event_not_assigned_to_series'],
+        buttons : {
+            Cancel : function() { $(this).parent().remove(); }
         }
     });
 }
 
 function show_schedule_series_dialog(project_id, studio_id, series_id, start_date){
-    $("#series").dialog({
-        resizable: false,
-        width:800,
-        height:340,
-        modal: true,
-        title: loc['label_schedule_series'],
-        buttons: {
+    showDialog({
+        title   : loc['label_schedule_series'],
+        content : $('#series').html(),
+        width   : "50rem",
+        height  : "15rem",
+        buttons : {
             "Schedule": function() {
-                var series_id=$('#series_select').val();
-                var duration=$('#series_duration').val();
-                var start_date=$('#series_date').val();
+                var series_id  = $('#dialog #series_select').val();
+                var duration   = $('#dialog #series_duration').val();
+                var start_date = $('#dialog #series_date').val();
                 var url='series.cgi?project_id='+project_id+'&studio_id='+studio_id+'&series_id='+series_id+'&start='+escape(start_date)+'&duration='+duration+'&show_hint_to_add_schedule=1#tabs-schedule';
                 load(url);
             },
-            "Cancel" : function() {
-                $( this ).dialog( "close" );
-            }
+            Cancel : function() { $(this).parent().remove(); }
         }
     });
+    showDateTimePicker('#dialog #series_date');
 }
 
 function setDatePicker(){
@@ -485,12 +474,10 @@ function createId(prefix) {
 
 function showRmsPlot(id, project_id, studio_id, start){
     console.log(id+" "+project_id+" "+studio_id+" "+start)
-    $('#'+id).dialog({
+    showDialog({
         width:940, 
         height:560,
-        open: function () {
-            $(this).scrollTop(0);
-        }        
+        onOpen: function () { $(this).scrollTop(0); }
     });
     return false;
 }

website/agenda/planung/js/default.js

@@ -122,35 +122,42 @@ function setTextWidth(select, minValue){
 
 // trigger action on commit
 function commitAction (title, action){
-    if (action==null)       {alert("missing action");return}
-    if (title==null)        {alert("missing title");return}
+    if ( title  == null )  { alert("missing title");return;  }
+    if ( action == null ) { alert("missing action");return; }
 
-    if ($("#dialog-confirm").length>0) $("#dialog-confirm").remove();
-    $("#content").append(
-        '<div id="dialog-confirm" title="'+title+'" style="min-height:2em;">'
-        +'<p>'
-        +'<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>'
-            +'Are you sure?'
-        +'</p>'
-        +'</div>'
-    );
-
-    $( "#dialog-confirm" ).dialog({
-        resizable: false,
-        height: "200",
-        modal: true,
-        buttons: {
-            Okay : function() {
-                $(this).dialog( "close" );
-                action();
-            },
-            Cancel: function() {
-                $(this).dialog( "close" );
-            }
+    showDialog({
+        title   : '<img src="image/alert.svg">Are you sure?</p>',
+        buttons : {
+            OK     : function(){ action(); },
+            Cancel : function(){ $(this).parent().remove(); }
         }
     });
 }
 
+function showDialog(options){
+    if ($("#dialog").length>0) $("#dialog").remove();
+    $("#content").append(
+        '<div id="dialog" class="panel">'
+        + (options.title ? '<div>'+options.title+'</div>' :'')
+        + (options.content ? options.content :'')
+        +'</div>'
+    );
+    var dialog = $('#content #dialog');
+    if (options.width)  dialog.css("width",  options.width);
+    if (options.height) dialog.css("height", options.height);
+    if (options.buttons) {
+        Object.keys(options.buttons).forEach( function (key) {
+            var value = options.buttons[key];
+            dialog.append("<button>"+key+"</button");
+            var button=$("#content #dialog button").last();
+            button.on("click", value);
+            button.addClass( 'dialog-'+key.toLowerCase().replace( /[^a-zA-Z0-9]/g, '-') )
+        });
+    }
+    if (options.onOpen) options.onOpen();
+    return dialog;
+}
+
 // set action=<action> at form and submit the form after confirmation
 function commitForm ( formElement, action, title){
     if (formElement==null)  { alert("missing id");return }

website/agenda/planung/js/image.js

@@ -18,7 +18,7 @@ function updateActiveImage(){
     $('div.images div.image.active').click();
 }
 
-// open dialog to show or edit image properties
+// show or edit image properties
 function updateImageEditor(elem, filename, target, project_id, studio_id, series_id, event_id, pid){
     var url='image.cgi?show='+filename;
     url += '&template=edit-image.html';
@@ -126,10 +126,7 @@ function deleteImage(id, filename) {
     return false;
 }
 
-// close all open dialogs
 function hideImageDetails(id, filename){
-    try{$('#img_editor').dialog('close');}catch(e){}
-
     var url='image.cgi?show='+filename+'&template=image-single.html&project_id='+project_id+'&studio_id='+studio_id;
     console.log("hideImageDetails, load url="+url)
     $("#"+id).load(url);