Unsichtbare Objekte / Bulletpoints etc.

[gaenseklein]

Ein Aufbau, den ich auch selbst oft benutzt habe, ist der, dass ich eine Folie habe, die erst einen Teil zeigt und dann den anderen Teil. Bspw. erst die linke Seite und dann die rechte Seite oder einen Titel und dann weiteren Text. In Powerpoint etc. mache ich das der einfachheit halber so, dass ich die Seite einfach kopiere. Das klappt so für uns nicht bzw. müsste ebenso abgefragt werden, denn die Informationen der Seiten unterscheiden sich ja drastisch - bspw. Seite 1: Titel, Liste Seite2: Titel, Liste, Liste. Seite 1 würde ja ganz anders interpretiert und gerendert als Seite 2, obwohl ja erwünscht ist, dass Seite 2 die entscheidende ist und Seite 1 genauso aussieht - nur halt ohne bspw. die zweite Liste. Um bei dem Beispiel zu bleiben: Es würde auf Seite 1 ein Titel platziert und da drunter über die Breite des Bildschirms die Liste, auf Seite 2 allerdings wird die Liste daneben gepackt und die erste Liste wandert dadurch weiter nach links... Lösung wäre, die Section zu benutzen, aber sauber ist das imho nicht. Daher wäre die sauberere Lösung in meinen Augen eine eigene Erweiterung ||hidden||. Inhalt, der ||hidden|| ist - also in einem hidden-md-block steht - wird in ein div der klasse hiddenobject gepackt und bekommt per css den style hidden. Dadurch wird er zwar mitgerendert, aber nicht dargestellt (bzw. als white-space). Wenn weitergeschaltet wird, wird statt zur nächsten Seite zu gehen den Elementen der style unset gegeben, wodurch sie wieder dargestellt werden. Dadurch wird verhindert, dass es sich verschiebt und die Elemente "an ihrem Platz" bleiben wenn der zweite Teil aufgerufen wird. Siehe unteres Beispiel, welches mit der "Seite kopieren"-Technik bei uns schief gehen muss, da der User ja nicht explizit sagen kann, wo er was wie platziert haben will. Das kann sogar erweitert werden, indem die Elemente einzeln durchgegangen werden, wenn sie mit ||hidden||Nummer stehen.

Beispiel:

#Das Fliewatüt

##Was ist ein Fliewatüt?

||hidden||
![](fliewatüt.jpg) 
Fliewatüt in der Luft

1. Ein Fliewatüüt kann fliegen wie ein Hubschrauber, deshalb Flie.
2. Es kann wie eine Ente auf dem Wasser schwimmen, deshalb wa.
3. Es kann aber auch auf der Straße fahren, genau wie ein Auto, nur viel langsamer. Autos „tüüten“ sehr häufig, deshalb tüüt. 
||hidden||

[gaenseklein]

die technik hat so probleme, wenn wir sie als eigenes div einpacken - da dann auch wieder der teil unterschiedlich gerendert wird. also wenn der inhalt im obigen beispiel in einem div ist, welches mit visibility:hidden versteckt wird, dann stimmt die struktur nicht mehr fürs grid - also fürs grid gibt es im obigen beispiel nur drei grid-items (titel, subtitel, hidden-div) anstelle vier (titel, subtitel, imageblock, liste). das kann aber auch gelöst werden, in dem der inhalt vor dem rendern aus dem eigenen div heraus gezogen wird und die direkten child-elemente eben das visibility:hidden bekommt. oder wir rendern den inhalt von hidden-section analog zur section ebenfalls wie eine page in ein eigenes grid nach dem selben schema wie die seite.

[gaenseklein]

lösung ist, sie aus ihrem data-div herauszulösen bevor weitere styles gerendert werden - insbesondere styles, die das grundschema/aufteilung der seite beeinflussen. dazu neue Hook-Funktion eingefügt: afterFinalizeHtml, welche direkt nach dem finalisieren des HTML-Codes ausgelöst wird. das plugin kann in dieser hook-funktion dann den code aus dem datadiv herauslösen und mit klassen versehen. dadurch bleibt das grundschema erhalten aber es kann später auf die elemente über ihre klassen zugegriffen werden. zusätzlich wird sich gemerkt, wo es seiten mit versteckten elementen gibt.

nachdem die seiten alle fertig gestyled sind kann dann in einer weiteren, neu deklarierten hook-funktion (afterStyleThemeSpecials) der effekt des nachträglichen anzeigens erstellt werden. dazu wird in dieser funktion die slide mit versteckten elementen kopiert, also eine neue seite in die präsentation eingefügt welche ein klon der vorherigen seite ist, und anschließend deren hidden-objects die klasse genommen.

[gaenseklein]

mehrere hidden-elements auf einer seite: um die komplexität zu verringern werden alle hiddenobjects als eine page aufgefasst - d.h. beim ersten aufruf werden alle hiddenobjects versteckt, beim zweiten aufruf werden alle dargestellt - bzw. es wird nur eine page generiert und nicht zwei.

[gaenseklein]

bulletpoints: bulletpoints sind zwar aus programmierersicht einfach nur hiddenobjects, aber die schreibweise ||hidden||bullet oder ||hidden||bulletpoints ist nicht nur nicht intuitiv, sondern darüber hinaus unterscheiden sich bulletpoints ja schon von hiddenobjects, da hier mehrere pages generiert werden und nicht nur eine (siehe oben). es macht daher imho sinn, die bulletpoints in ein eigenes plugin auszusondern. darüber kann dann auch das bulletpointsystem gezielter beeinflusst werden. bspw. dass bulletpoints dargestellt werden, aber der aktive point hervorgehoben wird: ||bulletpoints||hidden vs. ||bulletpoints||show das würde sich zwar sonst auch über css lösen lassen, aber so ist es sogar möglich, unterschiedliche bulletpoints zu verwenden.

[gaenseklein]

hiddenobjects werden jetzt doch einzeln genutzt, um logik beizubehalten. so sollte es einfacher sein später mehrere andere generatedPages hinzuzufügen, bspw. Bulletpoints. Logik ist, dass bei zwei oder mehr hidden-blocks auf einer seite zunächst keins angezeigt wird, dann das erste und dann beide usw.

[gaenseklein]

scheint, als ob alles funktioniert wie es soll