add page leave handler on image editor

website/agenda/planung/js/image_upload.js

@@ -1,6 +1,6 @@
 function initUploadDialog(){
     var url='imageUpload.cgi?project_id='+ getProjectId()+"&studio_id="+getStudioId();
-    updateContainer("image-tabs-upload", url);
+    updateContainer("image-tabs-upload", url, pageLeaveHandler);
 }
 
 function uploadImage(){

website/agenda/planung/js/page_leave_handler.js

@@ -2,8 +2,15 @@ var pageHasChangedCounter=0;
 var pageIsLoaded=0;
 
 function pageHasChanged(){
+    console.log("pageHasChanged="+pageHasChangedCounter)
     if (pageIsLoaded==0) return;
     pageHasChangedCounter++;
+    console.log("pageHasChanged="+pageHasChangedCounter)
+}
+
+function confirmPageLeave(){
+     if(pageHasChangedCounter==0) return null;
+     return "Unsaved changed! Continue?";
 }
 
 function pageLeaveHandler(){
@@ -12,14 +19,17 @@ function pageLeaveHandler(){
     $('div.editor select'  ).change(function(){pageHasChanged()});
  
     window.onbeforeunload = function() {
-         if(pageHasChangedCounter==0)return null;
+        return confirmPageLeave();
-         return "Unsaved changed! Continue?";
     };
+
     //$(window).unload(function(){});
     pageIsLoaded=1;
+    console.log("pageLeaveHandler=initialized")
+
 }
 
 function leavePage(){
     pageHasChangedCounter=0;
+    console.log("leavePage")
     return 1;
 }

website/agenda/planung/templates/edit_image.html

@@ -0,0 +1,61 @@
+
+<script src="js/edit_image.js" type="text/javascript"></script>
+<script src="js/page_leave_handler.js" type="text/javascript"></script>
+
+<TMPL_IF no_results>
+found no image
+</TMPL_IF>
+
+<TMPL_LOOP images>
+<TMPL_IF filename>
+<div id="imageEditor" class="editor">
+    <button onclick="assignImage('<TMPL_VAR filename escape=0>', '<TMPL_VAR .target>', '<TMPL_VAR .project_id>', '<TMPL_VAR .studio_id>', '<TMPL_VAR .series_id>', '<TMPL_VAR .event_id>', '<TMPL_VAR .pid>'); return false"><TMPL_VAR .loc.select_image></button/>
+
+    <div class="panel-body">
+
+    <form id="save_img_<TMPL_VAR id>"
+	    method="post" 
+	    action="image.cgi" 
+	    onsubmit="saveImage('<TMPL_VAR id>','<TMPL_VAR filename>');return false;"
+    >   
+
+        <input type="hidden" name="project_id" value="<TMPL_VAR .project_id>">
+        <input type="hidden" name="studio_id" value="<TMPL_VAR .studio_id>">
+
+        <label><TMPL_VAR .loc.label_name></label><br>
+        <input value="<TMPL_VAR name escape=0>" name="update_name" class="field" placeholder="<TMPL_VAR .loc.label_name>"><br>
+
+        <label><TMPL_VAR .loc.label_description></label><br>
+        <textarea class="field" name="update_description" cols="50" rows=5 placeholder="<TMPL_VAR .loc.label_description>"><TMPL_VAR description escape=0></textarea><br>
+
+        <label><TMPL_VAR .loc.label_author>/<TMPL_VAR .loc.label_licence></label><br>
+        <input name="licence" value="<TMPL_VAR licence>" class="field<TMPL_IF missing_licence> error</TMPL_IF>" placeholder="<TMPL_VAR .loc.label_licence_missing>"/><br>
+
+        <label><TMPL_VAR .loc.label_public></label>
+        <input type="checkbox" name="public" <TMPL_IF public>checked="checked" value="1"<TMPL_ELSE>value="0"</TMPL_IF> /><br>
+
+        <TMPL_IF name="update_image">
+            <input type="hidden" name="save_image" value="<TMPL_VAR filename escape=0>" />
+            <button onclick="this.submit"><TMPL_VAR .loc.button_save></button/>
+        </TMPL_IF>
+
+        <TMPL_IF name="delete_image">
+            <button onclick="askDeleteImage('img_<TMPL_VAR id escape=0>','<TMPL_VAR filename escape=0>');return false;"><TMPL_VAR .loc.button_delete></button>
+        </TMPL_IF>
+
+        <div id="status" ></div>
+        <TMPL_VAR .loc.label_created_at> <TMPL_VAR created_at> <TMPL_VAR .loc.label_created_by> <TMPL_VAR created_by><br>
+        <TMPL_VAR .loc.label_modified_at> <TMPL_VAR modified_at> <TMPL_VAR .loc.label_modified_by> <TMPL_VAR modified_by><br>
+        <TMPL_VAR .loc.label_link>: {{<TMPL_VAR filename escape=0>|<TMPL_VAR name>}}<br>
+
+    </form>
+
+    </div>
+</div>
+</TMPL_IF>
+</TMPL_LOOP>
+
+</main>	    
+</body>
+</html>
+

website/agenda/planung/templates/image.html

@@ -1,6 +1,8 @@
 
 <link type="text/css" href="css/image_manager.css" rel="stylesheet"/>
 <script src="js/image.js" type="text/javascript"></script>
+<script src="js/page_leave_handler.js" type="text/javascript"></script>
+
 <TMPL_IF .allow.create_image>
 <script src="js/image_upload.js" type="text/javascript"></script>
 </TMPL_IF>
@@ -28,11 +30,13 @@
                         }
                     </TMPL_IF>
 
+                    //TODO: add confirm handler
                     $('#imageList').show();
                 }
             });
             // get initially selected tab
-            selectedImageTab=getSelectedTab('image-tabs');
+            selectedImageTab = getSelectedTab('image-tabs');
+            pageLeaveHandler();
         }
     );
 </script>