1// DokuWiki Plugin diagramsnet (JavaScript Component)
2//
3// @license GPL 2 http://www.gnu.org/licenses/gpl-2.0.html
4// @author https://github.com/todag
5
6var diagramsnetEdit = function(image, diagramsnetUrl , data, anonymize_xml) {
7  var iframe = document.createElement('iframe');
8  iframe.setAttribute('frameborder', '0');
9  iframe.setAttribute('class', 'dokudiagramsnet');
10
11  var close = function() {
12      window.removeEventListener('message', receive);
13      document.body.removeChild(iframe);
14  };
15
16  var receive = function(evt) {
17    if (evt.data.length > 0) {
18      var msg = JSON.parse(evt.data);
19
20      if (msg.event == 'init') {
21        // Read from AJAX
22        jQuery.post(
23          DOKU_BASE + 'lib/exe/ajax.php',
24          {
25            call: 'plugin_diagramsnet',
26            data: data,
27            action: 'get'
28          },
29          function(result)
30  	  {
31            if(result.message == 'success') {
32	      iframe.contentWindow.postMessage(JSON.stringify({action: 'load',  autosave: 1, xmlpng: result.content}), '*');
33	    }
34	    else {
35              alert('An error occured while opening the file.\nError message: ' + result.message);
36	      close();
37	    }
38          }
39        );
40      }
41      // Received if the user clicks save. This will send a request to export the diagram
42      else if (msg.event == 'save') {
43        xmlData = msg.xml;
44	  if(anonymize_xml) {
45	    xmlData = xmlData.replace(new RegExp('^<mxfile host=".*?"'), '<mxfile host="hostname"');
46	    xmlData = xmlData.replace(new RegExp('agent=".*?"'), 'agent="anonymous browser agent"');
47	  }
48	  iframe.contentWindow.postMessage(JSON.stringify({action: 'export', format: 'xmlpng', xml: xmlData, spinKey: 'saving'}), '*');
49      }
50      // This will capture the export event called above
51      else if (msg.event == 'export') {
52      // Save into dokuwiki
53        jQuery.post(
54          DOKU_BASE + 'lib/exe/ajax.php',
55          {
56            call: 'plugin_diagramsnet',
57            data: data,
58            content: msg.data,
59            action: 'save'
60          },
61          function(result)
62          {
63	    // Check if the save was successful, and if so update the img data to immediately reflect changes.
64	    // If save failed, alert with error message.
65	    if (result.message == 'success') {
66              image.setAttribute('src', msg.data);
67	      if(anonymize_xml) {
68		var save_msg = 'Diagram saved successfully! (anonymized xml)';
69	      }
70              else {
71		var save_msg = 'Diagram saved successfully!';
72	      }
73	      iframe.contentWindow.postMessage(JSON.stringify({action: 'status', message: save_msg, modified: false}), '*');
74              alert(save_msg);
75	    }
76	    else {
77	      alert("An error occured while saving the file to the Wiki. You can export and save the file locally.\n Error message: " + result.message);
78	    }
79          }
80	);
81      }
82      else if (msg.event == 'exit') {
83        close();
84      }
85    }
86  };
87
88  window.addEventListener('message', receive);
89  iframe.setAttribute('src', diagramsnetUrl);
90  document.body.appendChild(iframe);
91};
92
93// Create a simple toolbar button.
94if (typeof window.toolbar !== 'undefined')
95{
96    toolbar[toolbar.length] =
97    {
98        "type":"picker",
99        "title": "Add diagrams.net diagram",
100        "icon": "../../plugins/diagramsnet/toolbar_icon.png",
101	"list":[{
102	 	"type":"format",
103		"title":"No alignment",
104		"icon":"../../images/media_align_noalign.png",
105		"open":"{{",
106		"sample": JSINFO['namespace'] + ":filename.diagram.png",
107		"close":"|Diagram Title}}"
108	}, {
109	        "type":"format",
110        	"title":"Align left",
111	        "icon":"../../images/media_align_left.png",
112        	"open":"{{",
113		"sample": JSINFO['namespace'] + ":filename.diagram.png",
114	        "close":" |Diagram Title}}"
115	}, {
116		"type":"format",
117                "title":"Align right",
118                "icon":"../../images/media_align_right.png",
119                "open":"{{ ",
120		"sample": JSINFO['namespace'] + ":filename.diagram.png",
121                "close":"|Diagram Title}}"
122	}, {
123		"type":"format",
124                "title":"Align center",
125                "icon":"../../images/media_align_center.png",
126                "open":"{{ ",
127		"sample": JSINFO['namespace'] + ":filename.diagram.png",
128                "close":" |Diagram Title}}"
129
130	}]
131    };
132};
133