Javascript Editor einbinden

Begonnen von papa, 18 Februar 2014, 20:30:04

Vorheriges Thema - Nächstes Thema

hexenmeister

Schön wäre, wenn das Ganze auch noch abschaltbar bleibt. Denkt an die "Mobile Devices" und die Bandbreite ;)
Maintainer: MQTT_GENERIC_BRIDGE, SYSMON, SMARTMON, systemd_watchdog, MQTT, MQTT_DEVICE, MQTT_BRIDGE
Contrib: dev_proxy

betateilchen

Zitat von: papa am 19 Februar 2014, 14:21:57Der Editor kann Autocompletion. Damit könnte man doch bestimmt die FHEM-Funktionen

mach nur... stell die entsprechende Datei zusammen und sie muss nur noch eingebunden werden.

Zitat von: hexenmeister am 19 Februar 2014, 15:17:55
Schön wäre, wenn das Ganze auch noch abschaltbar bleibt.

Das ist das kleinste Problem. Da ich die Einbindung des Editors inzwischen schon als Funktion gekapselt habe, muss ich den Funktionsaufruf einfach nur mit einem (neu zu schaffenden) Attribut "externalEditor:1,0" verknüpfen.

Kopfzerbrechen macht mir aber noch die Einbindung beim DEF-Editor. Da kommen sich zwei Javascripte ins Gehege, eines von fhem und eines vom codemirror, die beide die gleiche Elementeigenschaft bearbeiten wollen, die zum Ein-/Ausblenden des Editorfensters vorgesehen ist.


Und überhaupt... wieso mache ICH das eigentlich alles? 8)
-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

justme1968

weil du schneller warst als ich :)

ich hatte gestern probiert und wollte es heute hoch laden.

gruss
  andre
hue, tradfri, alexa-fhem, homebridge-fhem, LightScene, readingsGroup, ...

https://github.com/sponsors/justme-1968

betateilchen

Hallo Andre,

hast Du eine Lösung für das Toggle-Problem bei DEF gefunden?

Es klemmt massiv in der sub FW_makeEdit($$$)



sub
FW_makeEdit($$$)
{
  my ($name, $n, $val) = @_;

  # Toggle Edit-Window visibility script.
  my $pgm = "Javascript:" .
             "s=document.getElementById('edit').style;".
             "s.display = s.display=='none' ? 'block' : 'none';".
             "s=document.getElementById('disp').style;".
             "s.display = s.display=='none' ? 'block' : 'none';";
  FW_pO "<td>";
  FW_pO "<a onClick=\"$pgm\">$n</a>";
  FW_pO "</td>";

  $val =~ s,\\\n,\n,g;
  my $eval = $val;
  $eval = "<pre>$eval</pre>" if($eval =~ m/\n/);
  FW_pO "<td>";
  FW_pO   "<div class=\"dval\" id=\"disp\">$eval</div>";
  FW_pO  "</td>";

  FW_pO  "</tr><tr><td colspan=\"2\">";
  FW_pO   "<div id=\"edit\" style=\"display:none\">";
  FW_pO   "<form method=\"$FW_formmethod\">";
  FW_pO       FW_hidden("detail", $name);
  my $cmd = "modify";
  my $ncols = $FW_ss ? 30 : 60;
  FW_pO      "<textarea id=\"editor\" name=\"val.${cmd}$name\" ".
                "cols=\"$ncols\" rows=\"10\">$val</textarea>";
  FW_pO     "<br>" . FW_submit("cmd.${cmd}$name", "$cmd $name");
  FW_pO   "</form>";
  FW_pO "</div>";
#  FW_linkCodemirror('editor');
  FW_pO  "</td>";
}



weil das mit der Umschalterei der "display:none" etc nicht korrekt funktioniert. Ich bekomme zwar ein Editorfenster, das den TExt enthält, aber der TExt wird erst bei der nächsten Eingabe, und sei es auch nur ein Leerzeichen sichtbar.
-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

justme1968

#19
ja. ich habe das CodeMirror.fromTextArea ans ende des Toggle Edit-Window visibility script am anfang von FW_makeEdit gehängt.

wenn man DEF klickt wird zuerst der textarea sichtbar gemacht und dann erst der editor erzeugt.

  my $pgm = "Javascript:" .                                                                                           
             "s=document.getElementById('edit').style;".                                                             
             "s.display = s.display=='none' ? 'block' : 'none';".                                                     
             "s=document.getElementById('disp').style;".                                                             
             "s.display = s.display=='none' ? 'block' : 'none';".                                                     
             "s=document.getElementById('editarea');".                                                               
             "s.editor ? s.editor: s.editor = CodeMirror.fromTextArea(s, {lineNumbers: true,matchBrackets: true});";

noch nicht elegant aber damit geht es dann problemlos.

der texterea hat natürlich die id editarea bekommen.

gruss
  andre

edit: ich hatte auf pgm2 ebene ein codemiror verzeichnis angelegt und dort die relevanten teile rein getan.
        beim colorpicker war rudi das so lieber.
       
        ins edit files auch noch eingebaut das je nach extension das passende mode .js geladen wird.
hue, tradfri, alexa-fhem, homebridge-fhem, LightScene, readingsGroup, ...

https://github.com/sponsors/justme-1968

betateilchen

Zitat von: justme1968 am 19 Februar 2014, 17:16:25
        ins edit files auch noch eingebaut das je nach extension das passende mode .js geladen wird.

ach... Du hast schon eine .js für die RSS-Layouts? 8) Dann brauch ich mir ja die Arbeit nicht machen...
-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

betateilchen

in der Darstellung des DEF-Edit-Fensters ist ohnehin auch im Original noch nicht alles rund. Eigentlich sollten die rows der Tabelle ja unterschiedlich gefärbt sein, aber das funktioniert nicht wirklich anhand der Entscheidung odd:even, die Zeile mit der textarea und die nachfolgende Zeile erscheinen mir immer gleich gefärbt.
-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

AHA1805

Wie cool ist das den :-)
kann ich diese Erweiterung bei mir auch einbinden?



Gruß und Dank
Hannes

Gesendet von Unterwegs mit Tapatalk 4
AHA 1805 RIP 29.08.2016 --> RUHE IN FRIEDEN
In Gedanken Bei dir HANNES
Dein Bruder Gerd (Inputsammler) Vermisst dich Hannes (AHA1805)

betateilchen

Ich denke, das wird über kurz oder lang per update kommen, nur Geduld.

@andre: das mit dem Einbinden in das toggle-Skript funktioniert prima.

Wir sollten das aber so gestalten, dass wir den codemirror-Teil nur dann an $pgm anhängen, wenn das bereits erwähnte Attribut gesetzt ist. Ich bin da grade dran, das zu testen.
-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

justme1968

rss gibt es einfach zum runterladen.

was ich noch nicht geschafft habe ist die zusammengepackte und komprimierte version zu verwenden.

mit der bekomme ich mit safari js fehler und der editor bekommt keinen keyboard focus.
hue, tradfri, alexa-fhem, homebridge-fhem, LightScene, readingsGroup, ...

https://github.com/sponsors/justme-1968

betateilchen

rss gibts zum runterladen, das ist aber nicht das, was ich meinte. Ich meinte eine komplette Definionsdatei für die LAYOUT Dateien der fhem-RSS ;) (nicht so wichtig, werd ich irgendwann mal basteln)

Bei mir sieht das attributabhängig jetzt so aus:


  my $pgm = "Javascript:" .
             "s=document.getElementById('edit').style;".
             "s.display = s.display=='none' ? 'block' : 'none';".
             "s=document.getElementById('disp').style;".
             "s.display = s.display=='none' ? 'block' : 'none';";
    $pgm .= "s=document.getElementById('editarea');".
             "s.editor ? s.editor: s.editor = CodeMirror.fromTextArea(s, {lineNumbers: true,matchBrackets: true});"
         if AttrVal($FW_wname,'externalEditor',0);

-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

betateilchen

Zitat von: justme1968 am 19 Februar 2014, 19:18:13was ich noch nicht geschafft habe ist die zusammengepackte und komprimierte version zu verwenden.
mit der bekomme ich mit safari js fehler und der editor bekommt keinen keyboard focus.

Ich verstehe Dein Problem grade nicht, ich kann das hier problemlos auch in Safari nutzen - gerade getestet.
-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

justme1968

ich hatte mit rss schon das definitionsfile gemeint um die fhem css files richtig zu highligten. nicht das codemirror.css. oder meinst du mit definitionsdatei etwas anderes und wie reden aneinander vorbei?

ich probiere es noch mal sobald mein Internet wieder geht.
hue, tradfri, alexa-fhem, homebridge-fhem, LightScene, readingsGroup, ...

https://github.com/sponsors/justme-1968

betateilchen

wir reden aneinander vorbei, was das Thema RSS angeht  8)
-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

betateilchen

#29
So... bei mir läuft die 01_FHEMWEB jetzt sauber und (per Attribut steuerbar) wahlweise mit externem Editor oder mit dem Standard-Textfeld für die Eingabe.
Integriert für das DEF und für den Bereich "edit files".

(http://up.picr.de/17416023hk.png)

(http://up.picr.de/17416004ah.png)

Offen ist derzeit noch die Frage, wie man die Themes auswählbar machen will. Ich arbeite aus Kontrastgründen generell mit blackboard.



Index: 01_FHEMWEB.pm
===================================================================
--- 01_FHEMWEB.pm (Revision 4990)
+++ 01_FHEMWEB.pm (Arbeitskopie)
@@ -21,6 +21,7 @@
sub FW_fileList($);
sub FW_parseColumns();
sub FW_htmlEscape($);
+sub FW_linkCodemirror;
sub FW_logWrapper($);
sub FW_makeEdit($$$);
sub FW_makeImage(@);
@@ -128,6 +129,7 @@
     defaultRoom
     endPlotNow:1,0
     endPlotToday:1,0
+    externalEditor:1,0
     fwcompress:0,1
     hiddengroup
     hiddenroom
@@ -1571,9 +1573,15 @@
     FW_pO     FW_textfieldv("saveName", 30, "saveName", $fileName);
     FW_pO     "<br><br>";
     FW_pO     FW_hidden("cmd", "style save $fileName");
-    FW_pO     "<textarea name=\"data\" cols=\"$ncols\" rows=\"30\">" .
+    FW_pO     "<textarea id=\"data\" name=\"data\" cols=\"$ncols\" rows=\"30\">" .
                 "$data</textarea>";
     FW_pO "</form>";
+
+    FW_linkCodemirror if AttrVal($FW_wname,'externalEditor',0);
+    FW_pO "<script>var editor = CodeMirror.fromTextArea(document.getElementById(\"data\"), ".
+          "{theme: \"blackboard\", perl: true, lineNumbers: true, matchBrackets: true, closeBrackets: true});</script>"
+      if AttrVal($FW_wname,'externalEditor',0);
+
     FW_pO "</div>";

   } elsif($a[1] eq "save") {
@@ -1981,6 +1989,11 @@
              "s.display = s.display=='none' ? 'block' : 'none';".
              "s=document.getElementById('disp').style;".
              "s.display = s.display=='none' ? 'block' : 'none';";
+    $pgm .= "s=document.getElementById('editarea');".
+             "s.editor ? s.editor: s.editor = CodeMirror.fromTextArea(s, ".
+             "{theme: 'blackboard', perl: true, lineNumbers: true, matchBrackets: true, closeBrackets: true});"
+         if AttrVal($FW_wname,'externalEditor',0);
+
   FW_pO "<td>";
   FW_pO "<a onClick=\"$pgm\">$n</a>";
   FW_pO "</td>";
@@ -1998,13 +2011,23 @@
   FW_pO       FW_hidden("detail", $name);
   my $cmd = "modify";
   my $ncols = $FW_ss ? 30 : 60;
-  FW_pO      "<textarea name=\"val.${cmd}$name\" ".
+  FW_pO      "<textarea id=\"editarea\" name=\"val.${cmd}$name\" ".
                 "cols=\"$ncols\" rows=\"10\">$val</textarea>";
   FW_pO     "<br>" . FW_submit("cmd.${cmd}$name", "$cmd $name");
   FW_pO   "</form></div>";
+  FW_linkCodemirror if AttrVal($FW_wname,'externalEditor',0);
   FW_pO  "</td>";
}

+sub FW_linkCodemirror{
+  FW_pO "<link rel=\"stylesheet\" href=\"$FW_ME/codemirror/lib/codemirror.css\">";
+  FW_pO "<script type=\"text/javascript\" src=\"$FW_ME/codemirror/lib/codemirror.js\"></script>";
+  FW_pO "<link rel=\"stylesheet\" href=\"$FW_ME/codemirror/theme/blackboard.css\">";
+  FW_pO "<script type=\"text/javascript\" src=\"$FW_ME/codemirror/addon/edit/closebrackets.js\"></script>";
+  FW_pO "<script type=\"text/javascript\" src=\"$FW_ME/codemirror/addon/edit/matchbrackets.js\"></script>";
+  FW_pO "<script type=\"text/javascript\" src=\"$FW_ME/codemirror/mode/perl/perl.js\"></script>";
+  return;
+}

sub
FW_roomStatesForInform($)

-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!