Aktive Seite wird nicht markiert

[kingolli]

Hallo!

Ich bin gerade mit der Umstellung von CometVisu auf SmartVisu beschäftigt, jetzt habe ich das Problem, die aktive Seite nicht korrekt markiert wird

Hier beispielhaft der Kopfbereich von Kochen/Essen/Wohnen:

	<div data-role="navbar">
		<ul>
			<li>
				<a href="index.php?page=EG.Kochen" id="kochen">
					<div >
						<div><img class="icon" style="width:24px;height:24px;" src='{{ icon0 }}scene_cooking.png'/></div> 
						<div style="font-size:16px;">Kochen </div>
					</div>
				</a>
			</li>
			<li>
				<a href="index.php?page=EG.Essen" class="ui-btn-active" id="essen">
					<div style="padding:0px;" >
						<div><img class="icon" style="width:24px;height:24px;" src='{{ icon0 }}scene_dinner.png'/></div> 
						<div style="font-size:16px;">Essen </div>
					</div>
				</a>
			</li>
			<li>
				<a href="index.php?page=EG.Wohnen" id="wohnen">
					<div style="padding:0px;" >
						<div><img class="icon" style="width:24px;height:24px;" src='{{ icon0 }}scene_livingroom.png'/></div> 
						<div style="font-size:16px;">Wohnen </div>
					</div>
				</a>
			</li>
		</ul>
	</div>

Mit PageCache=OFF funktioniert allerdings wunderbar, wenn ich den Cache aktiviere, wird der aktive Raum(Button) erst beim zweiten Click aktiviert (siehe Anhang). Es scheint, also ob der hover-Eintrag des Buttons, den active-Eintrag "überschreibt".

Hat jemand eine Idee dazu?

Danke und Grüße
David

[JensKindgen]

Mit PageCache=OFF funktioniert allerdings wunderbar, wenn ich den Cache aktiviere, wird der aktive Raum(Button) erst beim zweiten Click aktiviert (siehe Anhang). Es scheint, also ob der hover-Eintrag des Buttons, den active-Eintrag "überschreibt".

Hat jemand eine Idee dazu?

Danke und Grüße
David

Wo wird denn das im allgemeinen Menü gemacht? da geht das bei mir auch nur auf der Index Seite

Anbei mein Menu.html Code.

 

<div id="menu" class="menu">

    <a id="menu-rooms" data-ajax="false" href="index.php">
        <img class="icon" src="{{ page == 'index' ? icon1 : icon0 }}control_on_off.png"/></a>
    <a id="menu-weather" data-ajax="false" href="index.php?page=weather.current">
        <img class="icon" src="{{ page == 'weather' ? icon1 : icon0 }}weather_cloudy.png"/></a>
    <a id="menu-wp" data-ajax="false" href="index.php?page=stats.temperaturen">
        <img class="icon" src="{{ page == 'stats.temperaturen' ? icon1 : icon0 }}temp_control.png"/></a>
    <a id="menu-system" data-ajax="false" href="index.php?page=app_tv_movie">
        <img class="icon" src="{{ page == 'tv_movie' ? icon1 : icon0 }}it_television.png"/></a>			
    <a id="menu-system" data-ajax="false" href="index.php?page=stats.devices">
        <img class="icon" src="{{ page == 'config' ? icon1 : icon0 }}it_pc.png"/></a>
	<a id="menu-system" data-ajax="false" href="index.php?page=config">
        <img class="icon" src="{{ page == 'config' ? icon1 : icon0 }}message_service.png"/></a>        
</div>

Er aktiviert nur Control_on_off alle anderen werden bei Click nicht aktiv.

Gruß JEns

[Shai]

Hey David,

versuch mal zusätzlich zur class="ui-button-active" auch noch "ui-state-persist" auf dem aktiven Punkt zu setzen.

Bei mir sieht das HTML der horizontalen Navbar (2. Button aktiv) so aus und der Wechsel inkl. Hervorheben klappt einwandfrei. (mit PageCache aktiv)

<div data-role="navbar" class="nav-custom">
	<ul>
		<li><a href="index.php?page=floors/outdoor/eingang" class="eingang" data-icon="custom">Eingang</a></li>
		<li><a href="index.php?page=floors/outdoor/garage" class="ui-btn-active ui-state-persist garage" data-icon="custom">Garage</a></li>
		<li><a href="index.php?page=floors/outdoor/garten" class="garten" data-icon="custom">Garten</a></li>
	</ul>
</div>

@Jens
in den Abfragen pro Menu-Eintrag

{{ page == 'index' ? icon1 : icon0 }}

muss der Wert hinter dem "==" (also im Beispiel 'index') auf den Seitennamen passen. Bei deinem "tv_movie" sollte das stattdessen z.B. "app_tv_movie" sein.

Wenn Du mit Unterordner arbeitest geht das auch statt mit ner einfachen Gleichheitsprüfung mit nem "matches", wo man theoretisch mit nem RegEx arbeiten kann.

Bsp:

{{ pagepath matches '/stats/' ? 'icon1' : '' }}

Grüße,

Lars

[JensKindgen]

@Jens
in den Abfragen pro Menu-Eintrag

{{ page == 'index' ? icon1 : icon0 }}

muss der Wert hinter dem "==" (also im Beispiel 'index') auf den Seitennamen passen. Bei deinem "tv_movie" sollte das stattdessen z.B. "app_tv_movie" sein.

Wenn Du mit Unterordner arbeitest geht das auch statt mit ner einfachen Gleichheitsprüfung mit nem "matches", wo man theoretisch mit nem RegEx arbeiten kann.

Bsp:

{{ pagepath matches '/stats/' ? 'icon1' : '' }}

Grüße,

Lars

Hi Lars,

dein Beispiel mit den Pages == klappt wunderbar aber das mit pagepath klappt wiederum leider nicht woran kann das liegen? anbei mein code:

<div id="menu" class="menu">

    <a id="menu-rooms" data-ajax="false" href="index.php">
        <img class="icon" src="{{ page == 'index' ? icon1 : icon0 }}control_on_off.png"/></a>
    <a id="menu-weather" data-ajax="false" href="index.php?page=weather.current">
        <img class="icon" src="{{ page == 'weather.current' ? icon1 : icon0 }}weather_cloudy.png"/></a>
    <a id="menu-wp" data-ajax="false" href="index.php?page=stats.temperaturen">
        <img class="icon" src="{{ pagepath matches '/stats/' ? icon1 : icon0 }}temp_control.png"/></a>
    <a id="menu-system" data-ajax="false" href="index.php?page=app_tv_movie">
        <img class="icon" src="{{ page == 'app_tv_movie' ? icon1 : icon0 }}it_television.png"/></a>			
    <a id="menu-system" data-ajax="false" href="index.php?page=stats.devices">
        <img class="icon" src="{{ pagepath matches '/stats/' ? icon1 : icon0 }}it_pc.png"/></a>
	<a id="menu-system" data-ajax="false" href="index.php?page=config">
        <img class="icon" src="{{ page == 'config' ? icon1 : icon0 }}message_service.png"/></a>        
</div>

Eigentlich so wie du es beschrieben hast habe ich es eingebaut. muss ich noch irgendwo etwas beachten?

Gruss Jens

[Shai]

Hey Jens,

was mir auffällt ist, dass Du die "src" des Bildes setzt, da Du wohl die "png" Variante von den Icons verwendest. Bei der SVG-Variante ist die Quelle immer gleich und die Farbe wird über eine CSS-Klasse gesetzt.

Mein Menu sieht folgendermaßen aus:

<div id="menu" class="menu">
	<a id="menu-rooms" href="index.php">
		<img class="icon {{ pagepath matches '/floors/' or page == 'index' ? 'icon1' : '' }}" src="{{ icon0 }}control_building_2_s_all.svg" /></a>

	<a id="menu-wp" href="index.php?page=stats/licht">
		<img class="icon {{ pagepath matches '/stats/' ? 'icon1' : '' }}" src="{{ icon0 }}control_building_control.svg"/></a>

	<a id="menu-category" href="index.php?page=security/alarm">
		<img class="icon {{ pagepath matches '/security/' ? 'icon1' : '' }}" src="{{ icon0 }}status_protection.svg" /></a>
	
	<a id="menu-system" data-ajax="false" href="index.php?page=config">
		<img class="icon {{ page == 'config' ? 'icon1' : '' }}" src="{{ icon0 }}edit_settings.svg" /></a>
</div>

Da Du aber schreibst, das es bei Verwendung von "==" funktioniert macht mich das stutzig, dass es anders nicht funktioniert.

Arbeitest Du mit echten Unterordnern in der Struktur oder sind die Dateien einfach nur entsprechend benannt? (Bsp: "stats/temperaturen.php" vs. "stats.temperaturen.php")

Deine Seiten-Links sind mit "." getrennt, bei mir sind es "/"

Wenn du die Dateien nur strukturiert benannt hast, dann würde ich es mit

page starts with 'stats'

versuchen oder ggfs. mit matches und nem passenden RegEx:

page matches '/^stats.*/'

(ich hoffe der RegEx stimmt so)

die Variable "pagepath" ist nämlich ohne eine Verzeichnisstruktur i.d.R. leer.

Grüße,

Lars

PS: meinen Visu-Aufbau findest Du auf github. (https://github.com/lbernau/smartvisuPages)

[mhoeftx]

Hallo Jens,

prinzipiell funktioniert das was du da gemacht hast.
Hast du deine Seiten tatsächlich im Unterordner "stats" liegen??

Hier muss der Name des Ordners rein.

 <a id="menu-weather" data-ajax="false" href="index.php?page=/weather/weather.current">
        <img class="icon" src="{{ pagepath matches '/weather/' ? icon1 : icon0 }}weather_cloudy.png"/></a>

Gruß,

Mark

[JensKindgen]

[QUOTE=Shai;420873]Hey Jens,

was mir auffällt ist, dass Du die "src" des Bildes setzt, da Du wohl die "png" Variante von den Icons verwendest. Bei der SVG-Variante ist die Quelle immer gleich und die Farbe wird über eine CSS-Klasse gesetzt.

</div>[/CODE]

Da Du aber schreibst, das es bei Verwendung von "==" funktioniert macht mich das stutzig, dass es anders nicht funktioniert.

Arbeitest Du mit echten Unterordnern in der Struktur oder sind die Dateien einfach nur entsprechend benannt? (Bsp: "stats/temperaturen.php" vs. "stats.temperaturen.php")

Deine Seiten-Links sind mit "." getrennt, bei mir sind es "/"

Wenn du die Dateien nur strukturiert benannt hast, dann würde ich es mit

page starts with 'stats'

versuchen oder ggfs. mit matches und nem passenden RegEx:

page matches '/^stats.*/'

(ich hoffe der RegEx stimmt so)

die Variable "pagepath" ist nämlich ohne eine Verzeichnisstruktur i.d.R. leer.

Grüße,

Lars


Hallo meine Dateien hießen tatsächlich so, jetzt funktioniert es.

Vielen dank an alle.

Gruß Jens

[DagobertDDuck]

Nicht alle Icons liegen als SVG vor

[QUOTE=JensKindgen;421013]

Hey Jens,

was mir auffällt ist, dass Du die "src" des Bildes setzt, da Du wohl die "png" Variante von den Icons verwendest. Bei der SVG-Variante ist die Quelle immer gleich und die Farbe wird über eine CSS-Klasse gesetzt.

Mir ist aufgefallen, dass nicht alle Icons auch als svg-Variante vorliegen.
Vielleicht hängt es damit zusammen?

[JensKindgen]

[QUOTE=DagobertDDuck;421506]

Mir ist aufgefallen, dass nicht alle Icons auch als svg-Variante vorliegen.
Vielleicht hängt es damit zusammen?

Hi also es funktioniert soweit, das nur die beiden icons als aktiv gezeigt werden die nun beide mit 'Stats' beginnen. Die Datei heisst wirklich stats.yyy kann ich diese direkt aufrufen. ich hatte es so integriert wie Lars es geschildert hatte. Es funktioniert wie gesagt auch alles gut, nur die beiden Stats. html werden beim click gleichzeitig aktiv.

Gruss Jens

[Shai]

Das beide aktiv angezeigt werden liegt an dem RegEx bzw. "starts with"
Da beide mit dem gleichen String beginnen.

Damit das nicht passiert müsstest Du die Prüfung expliziter machen, oder doch komplett auf den Namen prüfen. (page == 'stats.temperaturen' bzw. page == 'stats.devices') Das was in deiner Link-Url halt hinter dem "page=" steht


Da ich meine Seiten in Unterordnern (stats/, floors/, security/..) strukturiert habe und im Menü quasi nur zwischen denen wechseln ist meine Prüfung halt nur auf den Pfad, damit das richtige Icon aktiv ist.

[JensKindgen]

Das beide aktiv angezeigt werden liegt an dem RegEx bzw. "starts with"
Da beide mit dem gleichen String beginnen.

Damit das nicht passiert müsstest Du die Prüfung expliziter machen, oder doch komplett auf den Namen prüfen. (page == 'stats.temperaturen' bzw. page == 'stats.devices') Das was in deiner Link-Url halt hinter dem "page=" steht


Da ich meine Seiten in Unterordnern (stats/, floors/, security/..) strukturiert habe und im Menü quasi nur zwischen denen wechseln ist meine Prüfung halt nur auf den Pfad, damit das richtige Icon aktiv ist.

Tja und das geht bei mir nicht, dann zeigt er garnichts aktives mehr an