Ankündigung

Einklappen
Keine Ankündigung bisher.

Anpassungen in index.html

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Anpassungen in index.html

    Hallo,

    ich musste die index.html Datei anpassen, damit die NavbarLeft auf Smartphones scrollbar wird:

    Im <head>
    Code:
              function isTouchDevice(){
                    try{
                        document.createEvent("TouchEvent");
                        return true;
                    }catch(e){
                        return false;
                    }
                }
                
                function touchScroll(id){
                    if(isTouchDevice()){ //if touch events exist...
                        var el=document.getElementById(id);
                        var scrollStartPos=0;
    
                        document.getElementById(id).addEventListener("touchstart", function(event) {
                            scrollStartPos=this.scrollTop+event.touches[0].pageY;
                            event.preventDefault();
                        },false);
    
                        document.getElementById(id).addEventListener("touchmove", function(event) {
                            this.scrollTop=scrollStartPos-event.touches[0].pageY;
                            event.preventDefault();
                        },false);
                    }
                }
    und im <body>
    Code:
    <script>    
         touchScroll("navbarLeft");
    </script>

    Außerdem kann man hiermit die Statusbar in der gewünschten Farbe bei Android Lollipop einfärben:
    Code:
    <meta name="theme-color" content="#3F51B5">
    Ich denke, das sollte aufgenommen werden.


    #2
    Zum Code hatte ich noch nicht viel geschrieben, da ich den Eindruck hatte, dass der noch reifen muss (vgl. u.a. auch https://github.com/CometVisu/CometVi...i/Coding-style ). Wenn Du denkst das alles oder ein Teil fertig ist, dann stelle bitte auf GitHub einen Pull-Request, dann können wir uns das genauer ansehen, ggf. kommentieren und dann diskutieren.

    Die index.html ist eigentlich frei von jeglichem JavaScript Code, außer dem, der zwingend notwendig ist den ganzen Code zu laden (also eigentlich nur das RequireJS - aber mit der Ausnahme des forceReload und Profiling-Handlings, da dass vorher schon bereit stehen muss).

    => Der Code gehört vermutlich eher in die templateengine.js - und dort besser integriert. Eine Touch-Device-Erkennung gibt es da bereits (Zeile 504 und 505) und in dem Code drunter geht es explizit um das Handling vom Scrollen.
    TS2, B.IQ, DALI, WireGate für 1wire so wie Server für Logik und als KNX Visu die CometVisu auf HomeCockpit Minor. - Bitte keine PNs, Fragen gehören in das Forum, damit jeder was von den Antworten hat!

    Kommentar


      #3
      Begrüsse diese Änderung aber außerordentlich, da dieses Problem schon lange existiert, siehe https://knx-user-forum.de/forum/supp...822#post837822

      Kommentar


        #4
        Ich denke, damit ist auch dieses Problem gelöst:
        SF#81 iOS scrolling

        Bin noch recht neu hier und weiß noch nicht, wo genau welcher Code zu plazieren ist.
        Ich schaue es mir am Wochenende mal an, ob ich den Code dort unterbringe.

        Und du hast Recht. Mit dem Problem habe ich länger gekämpft und einfach alles mögliche probiert. Darum habe ich diesen Code einfach quick and dirty reinkopiert.

        Kommentar


          #5
          Gut möglich.

          Das mit dem Code bekommen wir schon hin. Deswegen schreiben wir ja drüber
          TS2, B.IQ, DALI, WireGate für 1wire so wie Server für Logik und als KNX Visu die CometVisu auf HomeCockpit Minor. - Bitte keine PNs, Fragen gehören in das Forum, damit jeder was von den Antworten hat!

          Kommentar


            #6
            Ähm.
            Das liegt wohl doch nicht die Änderungen in der index.html Datei. Es funktioniert auch ganz ohne diesen Code zu scrollen.
            Ich vermute es liegt an den Anpassungen in der CSS Datei im Material Design. Die Navbar geht dort ja über die gesamte Fenstergröße...

            Kommentar


              #7
              Ich muss muich korrigieren... es lag doch am zusätzlichen Javascript in der Index.html. Der Cache hat mir nur einen Streich gespielt...
              Code:
                    function isTouchDevice(){
                      try{
                        document.createEvent("TouchEvent");
                        return true;
                      }catch(e){
                        return false;
                      }
                    }
                    
                    function touchScroll(id){
                      if(isTouchDevice()){ //if touch events exist...
                        var scrollStartPos=0;
              
                        document.getElementById(id).addEventListener("touchstart", function(event) {
                          scrollStartPos=this.scrollTop+event.touches[0].pageY;
                          event.preventDefault();
                        },false);
              
                        document.getElementById(id).addEventListener("touchmove", function(event) {
                          this.scrollTop=scrollStartPos-event.touches[0].pageY;
                          event.preventDefault();
                        },false);
                      }
                    }
              Code:
              <script>
                touchScroll("navbarLeft");
              </script>
              ​
              Aber in die templateengine.js kann man den Code nicht packen. Dort ist das Element "navbarLeft" ja nicht bekannt...

              Kommentar


                #8
                Dort ist das Element genau so bekannt wie in der index.html (taucht sogar 3x im Text auf). Aber vermutlich dürfte der pagepartshandler.js der richtige Ort sein um mit der Navbar zu interagieren.
                Die templateengine.js ist dagegen der Ort für jegliche "übergeordeten" Skripte und Funktionen.
                TS2, B.IQ, DALI, WireGate für 1wire so wie Server für Logik und als KNX Visu die CometVisu auf HomeCockpit Minor. - Bitte keine PNs, Fragen gehören in das Forum, damit jeder was von den Antworten hat!

                Kommentar


                  #9
                  Stimmt, dort funktioniert es auch. Hab die Änderung in den pagepartshandler eingebaut.

                  Thema Git: würde ja gerne dafür auch einen pull request erstellen, aber ich komme etwas durcheinander mit den branches...

                  Kommentar


                    #10
                    Deinen oder denen von CometVisu/CometVisu? Dort immer gegen develop den Pull-Request stellen.
                    TS2, B.IQ, DALI, WireGate für 1wire so wie Server für Logik und als KNX Visu die CometVisu auf HomeCockpit Minor. - Bitte keine PNs, Fragen gehören in das Forum, damit jeder was von den Antworten hat!

                    Kommentar


                      #11
                      Meinen Lokalen. Ich erstelle immer einen neuen Branch aus dem Develop Branch. Dann übernehme ich nur eine Änderung in diesen neuen Branch (touchfix).
                      Beim ersten Mal hat das ja noch geklappt. Aber beim zweiten Mal fehlt dann der Commit aus dem ersten Branch (touchfix)...
                      Muss ich den neuen Branch (scrollfix) aus dem Branch (touchfix) erstellen?

                      Kommentar


                        #12
                        Da können die Git Experten hier im Forum sicher besser helfen.

                        Ich lasse meine develop Version immer so nah wie möglich am develop vom Upstream (also CometVisu/CometVisu). Und alles was ich ändere ist dann ein Branch vom develop.
                        Sollte nun das Upstream-Develop bearbeitet werden, kann ich es mit mit einem "git fetch --all" und "git pull" holen. Und dann ggf. den Branch an dem ich dran bin auf diese aktuelle Version per "rebase" basieren lassen.
                        TS2, B.IQ, DALI, WireGate für 1wire so wie Server für Logik und als KNX Visu die CometVisu auf HomeCockpit Minor. - Bitte keine PNs, Fragen gehören in das Forum, damit jeder was von den Antworten hat!

                        Kommentar

                        Lädt...
                        X