FHEMWEB: CodeMirror via JavaScripts

git-svn-id: https://svn.fhem.de/fhem/trunk@5475 2b470e98-0d58-463d-a4d8-8e2adae1ed80

fhem/FHEM/01_FHEMWEB.pm

@@ -2926,6 +2926,20 @@ FW_ActivateInform()
         FHEM-Server, and iPad/iPhone as Web-client.
         </li><br>
 
+     <a name="JavaScripts"></a>
+     <li>JavaScripts<br>
+        Space separated list of JavaScript files to be included. The filenames
+        are relative to the www directory.  For each file an additional
+        user-settable FHEMWEB attribute will be created, to pass parameters to
+        the script. The name of this additional attribute gets the Param
+        suffix,  directory and the fhem_ prefix will be deleted. Example:
+        <ul><code>
+          attr WEB JavaScripts codemirror/fhem_codemirror.js<br>
+          attr WEB codemirrorParam { "theme":"blackboard", "lineNumbers":true }
+        </code></ul>
+        </li><br>
+
+
     </ul>
   </ul>
 
@@ -3432,6 +3446,21 @@ FW_ActivateInform()
         beheben.
         </li><br>
 
+     <a name="JavaScripts"></a>
+     <li>JavaScripts<br>
+        Leerzeichen getrennte Liste von JavaScript Dateien, die geladen werden.
+        Die Dateinamen sind relativ zum www Verzeichnis anzugeben. F&uuml;r
+        jede Datei wird ein zus&auml;tzliches Attribut angelegt, damit der
+        Benutzer dem Skript Parameter weiterreichen kann. Bei diesem
+        Attributnamen werden Verzeichnisname und fhem_ Pr&auml;fix entfernt
+        und Param als Suffix hinzugef&uuml;gt. Beispiel:
+
+        <ul><code>
+          attr WEB JavaScripts codemirror/fhem_codemirror.js<br>
+          attr WEB codemirrorParam { "theme":"blackboard", "lineNumbers":true }
+        </code></ul>
+        </li><br>
+
     </ul>
   </ul>
 

fhem/www/codemirror/fhem_codemirror.js

@@ -0,0 +1,75 @@
+var cm_loaded = 0, cm_editor;
+
+loadScript("pgm2/jquery.min.js", function(){
+  $(document).ready(function(){
+    var els = document.getElementsByTagName("textarea");
+    if(els.length == 0)
+      return;
+
+    if($(els[0]).closest("div#edit").css("display")=="none") { // DEF special
+      $("table.internals a").each(function(){
+        var oc = $(this).attr("onclick");
+        if(oc) {
+          $(this).attr("onclick", oc+
+          's=document.getElementById("edit").getElementsByTagName("textarea");'+
+          'if(!s[0].editor) s[0].editor=AddCodeMirror(s[0]);');
+        }
+      });
+    } else {
+      AddCodeMirror(els[0]);
+    }
+  });
+});
+
+function
+AddCodeMirror(e)
+{
+  cm_editor = e;
+  loadLink("codemirror/codemirror.css");
+  loadLink("codemirror/show-hint.css");
+  loadScript("codemirror/codemirror.js",   function(){cm_loaded++;} );
+  loadScript("codemirror/closebrackets.js",function(){cm_loaded++;} );
+  loadScript("codemirror/matchbrackets.js",function(){cm_loaded++;} );
+  loadScript("codemirror/show-hint.js",    function(){cm_loaded++;cm_wait()});
+}
+
+function
+cm_wait()
+{
+  if(cm_loaded != 4) {
+    setTimeout(cm_wait, 10);
+    return;
+  }
+
+  var ltype,type="fhem";    // get the type from the hidden filename extension
+  $("input[name=save]").each(function(){
+    ltype = $(this).attr("value");
+    ltype = ltype.substr(ltype.lastIndexOf(".")+1);
+    if(ltype=="css") type = "css";
+    if(ltype=="svg") type = "xml";
+  });
+  var attr = {
+    theme: "blackboard",
+    lineNumbers: true,
+    matchBrackets: true,
+    autoCloseBrackets: true,
+    extraKeys:{'Ctrl-Space':'autocomplete'}
+  };
+  var userAttr = scriptAttribute("fhem_codemirror.js");
+  for(var a in userAttr)
+    attr[a] = userAttr[a];
+
+  loadLink("codemirror/"+attr.theme+".css");
+  if(ltype) {
+    $("head").append(
+      '<style type="text/css">'+
+        '.CodeMirror {height: auto;}'+
+        '.CodeMirror-scroll {overflow-y: hidden; overflow-x: auto;}'+
+      '</style>');
+  }
+
+  loadScript("codemirror/"+type+".js", function(){
+    log("Calling CodeMirror");
+    CodeMirror.fromTextArea(cm_editor, attr);
+  });
+}

fhem/www/pgm2/fhemweb.js

@@ -288,6 +288,71 @@ FW_querySetSelected(el, val)
     }
 }
 
+//////////////////////////
+// start of script functions
+function
+loadScript(sname, cb)
+{
+  var h = document.head || document.getElementsByTagName('head')[0];
+  var r = h.getAttribute("root");
+  if(!r)
+    r = "/fhem";
+  sname = r+"/"+sname;
+  var arr = h.getElementsByTagName("script");
+  for(var i1=0; i1<arr.length; i1++)
+    if(sname == arr[i1].getAttribute("src"))
+      return;
+  var script = document.createElement("script");
+  script.src = sname;
+  script.async = script.defer = false;
+  script.type = "text/javascript";
+  script.onload = cb;
+  log("Loading "+sname);
+  script.onreadystatechange = function() {
+    if(script.readyState == 'loaded' || script.readyState == 'complete') {
+      script.onreadystatechange = null;
+      if(cb)
+        cb();
+    }
+  }
+  h.appendChild(script);
+}
+
+function
+loadLink(lname)
+{
+  var h = document.head || document.getElementsByTagName('head')[0];
+  var r = h.getAttribute("root");
+  if(!r)
+    r = "/fhem";
+  lname = r+"/"+lname;
+  var arr = h.getElementsByTagName("link");
+  for(var i1=0; i1<arr.length; i1++)
+    if(lname == arr[i1].getAttribute("href"))
+      return;
+  var link = document.createElement("link");
+  link.href = lname;
+  link.rel = "stylesheet";
+  log("Loading "+lname);
+  h.appendChild(link);
+}
+
+function
+scriptAttribute(sname)
+{
+  var attr="";
+  $("head script").each(function(){
+    if($(this).attr("src").indexOf(sname) >= 0)
+      attr = $(this).attr("attr");
+  });
+
+  var ua={};
+  try {ua=JSON.parse(attr);} catch(e){FW_errmsg(sname+" Parameter "+e,5000);}
+  return ua;
+}
+// end of script functions
+//////////////////////////
+
 window.onbeforeunload = function(e)
 { 
   FW_leaving = 1;