WebYep Variationen – mit Accordion

Ich muss von Anfang an sagen dass diese Kombination vollständig machbar ist (siehe meine Implementierung) aber nur mit der Accordion Version 1.0. Ab der Version 1.1, Accordion wechselt die JavaScript Dateien (von scriptaculous auf mootools gewechselt) und dadurch auch den Code.

Normalerweise müssen die WebYep Elemente aus dem zugewiesenen Bereich im Code einen eindeutigen Namen haben (so z. B. wie FotoLinks und FotoRechts). In der Blocks Implementierung wurde das mit BlockSchleifeLinks und BlockSchleifeRechts, BlocktitelLinks und BlocktitelRechts, TextLinks und TextRechts etc. realisiert. Da war es einfach weil es zwei Bereiche auf der Seite waren und somit einfach zu disponieren.
Bei Accordion müsste eigentlich viel einfacher gehen weil die WebYep Blöcke sich in Accordion Bereiche befinden müssen.
Es ist im Grunde auch so nur das Problem ist dass Accordion ab der Version 1.1 diese Bereiche bei der Erstellung in RW nummeriert und sie im Code schreibt. Eine WebYep Implementierung kann nicht mit vorgefertigte Nummerierungen arbeiten weil diese Nummerierung von dem WebYep-System vergeben wird. Dieses Verhalten von Accordion ist anders bei der Version 1.0. Die Nummerierung von Bereiche fand nicht statt so dass leider nur diese Version kann man benutzen wenn man WebYep und Accordion zusammenmischen möchte.

Das Verfahren dafür beinhaltet drei Seiten Erstellungen und eine Zusammensetzung der Codes aus zwei Seiten davon:
1. Die Erstellung der Accordion Seite (mit der Accordion Einstellungen). Diese Seite muss zuerst publiziert werden um den Code zu haben aber auch damit die JavaScript Dateien auf dem Server auch beschrieben werden.
2. Die Erstellung der WebYep Seite (mit der Festlegung der Bereiche die auf der Seite auftauchen sollen) und ihrer Publizierung in dem gleichen Ordner der Accordion Seite
Diese zwei Seite stören sich namentlich nicht weil die Accordion Seite die html Endung hat und die WebYep Seite php Endeung hat.
3. Die Codes zusammenbauen
4. Am Schluss die Erstellung einer Weiterleitung Seite die auf der “zusammengesetzte” Seite hinweist.

1. Die Erstellung der Accordion Seite
1.1. Dafür muss Accordion 1.0 installiert werden (die aktuellere Version entfernt und die “alte” rein). Über dieses Zusammenspiel WebYep-Accordion habe ich einmal yourhead.com berichtet und nach einer Möglichkeit gefragt die 1.0er Version weiter zur Verfügung zu stellen. Eine Begeisterung habe ich nicht gespürt aber ich kann auch nicht sagen dass es unmöglich ist von yourhead.com so eine Version zu bekommen. Wege und Möglichkeiten gibt es natürlich viele.
1.2. Eine Accordion Seite erstellen und die Einstellungen vornehmen die man für Accordion haben möchte. Der Seite einen Namen für die Navigation geben, einen Ordnername und einen Dateiname vergeben. Als Ausgabe – Standard
1.3. Publizieren.
1.4. Diese Seite jetzt deaktivierem und nicht mehr in Menü erscheinen lassen.

In etwa der betreffene Code aus der publizierten Accordion Datei sieht so aus:

<style type='text/css'>
.acToggle {
	width:555px;
	height:15px;
	padding-top:5px;
	padding-bottom:5px;
	padding-right:5px;
	padding-left:5px;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	cursor:pointer;
}
.acToggle a {
	cursor:pointer;
}
.acCurrent {
	
}
.acCurrent a {
	
}
.acStretch {
	width:530px;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:50px;
	margin-right:0px;
	padding-top:10px;
	padding-bottom:10px;
	padding-right:0px;
	padding-left:0px;
}
</style>

<div id="accordion_wrapper" style="position:relative; width:97%; border:0px; margin:0px; padding:0px; overflow:hidden;">
	<div id="acAlignment" style="position:relative; border:0px; padding:0px; margin-bottom:0px; margin-top:0px; margin-right:auto; margin-left:0px; width:580px;">
		
		<DIV class="acToggle" onClick="accordion.showThisHideOpen();" >
			<a style="text-decoration:none;">Titel 1</a>
		</DIV>
		<div class="acStretchOut">
			<div class="acStretch">
				Text1 etc.
				<div style="width:99%; clear:both;">
					
				</div>
			</div>
		</div>
		
		<DIV class="acToggle" onClick="accordion.showThisHideOpen();" >
			<a style="text-decoration:none;">Titel 2</a>
		</DIV>
		<div class="acStretchOut">
			<div class="acStretch">
				Text2 etc.
				<div style="width:99%; clear:both;">
					
				</div>
			</div>
		</div>
		
		<div style="width:99%; clear:both;">
			
		</div>
	</div>
</div>

<script type="text/javascript" src="files/prototype.lite.js"></script>
<script type="text/javascript" src="files/moo.fx.js"></script>
<script type="text/javascript" src="files/moo.fx.pack.js"></script>
<script type="text/javascript">
	var acStretchers = document.getElementsByClassName('acStretchOut');
	var acTogglers = document.getElementsByClassName('acToggle');
	var accordion = new fx.Accordion(acTogglers, acStretchers, {opacity: false, duration: 300});
</script>

Ich habe mich entschlossen den Code der in einer Zeile augegeben wird zu strukturien um die drei Bereiche von einem Accordion Code zu veranschauen. In allen drei Bereiche befinden sich die Accordion Einstellungen.

2. Die Erstellung der WebYep Seite
2.1. Bei der Erstellung der WebYep Seite muss man darauf achten dass die Seite auf der gleiche Ebene mit der Accordion Seite ist, den gleichen Ordnername und Dateiname wie der Accordion Seite vergibt ALLERDINGS diese Seite bekommt die Endung .php und nicht .html wie die Accordion Seite. Damit wird gewährleistet dass später die WebYepAccordion Seite auch die schon publizierten prototype.lite.js, moo.fx.js und moo.fx.pack.js Dateien aus dem Ordner files benutzen wird.
2.2. Bei der Erstellung der WebYep Seite muss man auch nicht vergessen dass die Seite einmal im Vorschau angezeigt werden muss. Dadurch übernimmt die Seite den WebYep Code in dem Präfix.
2.3. Genauso wie die Accordion Seite davor, Ausgabe Standard und die WebYep Bereiche auswählen die später in den wiederholbaren Blöcke erscheinen sollen. Allerdings für die Exemplifizierung habe ich die Standardeinstellung mit allen WebYep Elementen hier ausgehählt.
2.4. Publizieren.
2.5. Genauso wie die Accordion Seite davor, diese Seite deaktivieren und nicht mehr in Menü erscheinen lassen.

In etwa der betreffene Code aus der publizierten WebYep Datei sieht so aus:

<!-- Mode: publish -->
<?php
	$iLeftPhotoPadding = 10;
	$iRightPhotoPadding = 10;
	$iLeftPhotoWidth = true ? 150:0;
	$iRightPhotoWidth = true ? 150:0;
	$iCenterPhotoPadding = 10;
	$iCenterPhotoWidth = true ? 300:0;
	$iBlockPadding = 20;

    if (!function_exists("webyep_bCheckImage")) {
        function webyep_bCheckImage($sN, $iFixedW, &$sWCSS)
        {
            $bRet = false;

            $sWCSS = "";
            $oElement = new WYImageElement($sN, $false, $iFixedW ? "width=\"$iFixedW\"":"", "", "");
            $sContent = $oElement->sDisplay();
            if ($sContent) {
                if ($iFixedW) $iW = $iFixedW;
                else {
                    $oImg = $oElement->oImage();
                    $iW = $oImg ? $oImg->iWidth():0;
                }
                $sWCSS = $iW ? (" width: " . $iW . "px;"):"";
                $bRet = true;
            }
            return $bRet;
        }
    }

	$sWidthCSS = "";
?>
<h1 class="WebYepSeitenTitel"><?php webyep_shortText("Seitentitel", false); ?></h1>
<!-- Loop Start: ======================================== -->
<?php foreach (WYLoopElement::aLoopIDs("BlockSchleife") as $webyep_oCurrentLoop->iLoopID) { $webyep_oCurrentLoop->loopStart(true); ?>
<!-- Float Container Start: ======================================== -->
<?php
    if(preg_match('/MSIE +6/', $_SERVER['HTTP_USER_AGENT'])) echo "<div style=\"overflow: hidden; zoom: 1.0\">\n";
    else echo "<div style=\"overflow: hidden;\">\n";
?>
<?php if (webyep_sShortTextContent("Blocktitel", false) || webyep_bIsEditMode()) { ?>
<h2 class="WebYepBlockTitel"><?php webyep_shortText("Blocktitel", false); ?></h2>
<?php } ?><?php
	if (webyep_bCheckImage("FotoLinks", $iLeftPhotoWidth, $sWidthCSS) || webyep_bIsEditMode()) {
?>
<!-- Left Photo: ======================================== -->
<?php
   printf('<div style="float: left; margin-right: %dpx; margin-bottom: %dpx;%s" class="WebYepFotoLinks"><div>', $iLeftPhotoPadding, $iLeftPhotoPadding, $sWidthCSS);
   webyep_image("FotoLinks", false, "", "", "", $iLeftPhotoWidth, 0, true);
   echo "</div>";
	if (webyep_sShortTextContent("FotoLinksBildtext", false) || webyep_bIsEditMode()) {
?><div style="padding-top: 4px; text-align: center;"><?php webyep_shortText("FotoLinksBildtext", false); ?></div><?php } echo "</div>"; } ?>
<?php
	if (webyep_bCheckImage("FotoRechts", $iRightPhotoWidth, $sWidthCSS) || webyep_bIsEditMode()) {
?>
<!-- Right Photo: ======================================= -->
<?php
   printf('<div style="float: right; margin-left: %dpx; margin-bottom: %dpx;%s" class="WebYepFotoRechts"><div>', $iRightPhotoPadding, $iRightPhotoPadding, $sWidthCSS);
   webyep_image("FotoRechts", false, "", "", "", $iRightPhotoWidth, 0, true);
   echo "</div>";
	if (webyep_sShortTextContent("FotoRechtsBildtext", false) || webyep_bIsEditMode()) {
?><div style="padding-top: 4px; text-align: center;"><?php webyep_shortText("FotoRechtsBildtext", false); ?></div><?php } echo "</div>"; } ?>
<!-- Text: =============================================== -->
<div class="WebYepText"><?php
   // check for installed WYSIWYG HTML editor
   if (file_exists("$webyep_sIncludePath/opt/rte") || file_exists("$webyep_sIncludePath/opt/tinymce") || file_exists("$webyep_sIncludePath/opt/fckeditor")) {
	   webyep_richText("Text", false, "/webyep_text.css");
   }
   else {
	   webyep_longText("Text", false, "", true);
   }
?></div>
<!-- Float Container End: =============================================== -->
<?php echo "</div>\n"; ?>
<!-- Attachment: ========================================= -->
<?php	if (webyep_sShortTextContent("DateianhangBeschreibung", false) || webyep_bIsEditMode()) { ?>
<p class="WebYepDateianhang"><span class="WebYepDateianhangBeschreibung"><?php webyep_shortText("DateianhangBeschreibung", false); ?> </span><span class="WebYepDateianhangDateiname"><?php webyep_attachment("Dateianhang"); ?></span></p>
<?php } ?><?php
	if (webyep_bCheckImage("FotoZentriert", $iCenterPhotoWidth, $sWidthCSS) || webyep_bIsEditMode()) {
?>
<!-- Center Photo: ======================================= -->
<?php
   printf('<div style="text-align: center;" class="WebYepFotoZentriert"><div style="margin-left: auto; margin-right: auto; padding-top: %dpx; %s"><div>', $iCenterPhotoPadding, $sWidthCSS);
   webyep_image("FotoZentriert", false, "", "", "", $iCenterPhotoWidth, 0, true);
   echo "</div>";
	if (webyep_sShortTextContent("FotoZentriertBildtext", false) || webyep_bIsEditMode()) {
?><div style="padding-top: 4px; text-align: center;"><?php webyep_shortText("FotoZentriertBildtext", false); ?></div><?php } echo "</div></div>"; } ?>
<!-- Block Padding: ====================================== -->
<?php if ($iBlockPadding) printf('<div style="font-size: 0px; line-height: 0px; height: %spx;" class="WebYepBlockAbstand"></div>', $iBlockPadding); ?>
<!-- Loop End: =========================================== -->
<?php $webyep_oCurrentLoop->loopEnd(); } ?>
<div><?php webyep_logonButton(true); ?></div>

3. Die Codes zusammenbauen
3.1. Die WebYep Plugin publizierte PHP Seite muss jetzt in bestimmten Stellen Code-Teile aus der Accordion Seite bekommen. Man kann sicherlich direkt in dem Dokument arbeiten aber man kann auch einen neuen Dokument erstellen wo man den Code zusammenbaut und dann alles kopiert und den original Code ersetzt. Auf jeden Fall würde ich diesen oberen Code erstmal abgrenzen. Vor dem Code würde ich eine Anfangsbemerkung schreiben wie: und am Ende des Codes eine Schlussbemerkung wie:
3.2. Der Code mit allen WebYep Elementen, mit dem Anmeldeknopf unter dem Seitentitel gesetzt und mit einem Header-Text und einem Footer-Text befindet sich hier unten. Zwischen den Elementen habe ich zwei leere Zeilen dazugegeben um das Entfernen von nicht gebrauchten Elementen zu vereinfachen.

<!-- Start Accordion & WebYep -->
<!-- Mode: publish -->
<?php
	$iLeftPhotoPadding = 10;
	$iRightPhotoPadding = 10;
	$iLeftPhotoWidth = true ? 150:0;
	$iRightPhotoWidth = true ? 150:0;
	$iCenterPhotoPadding = 10;
	$iCenterPhotoWidth = true ? 300:0;
	$iBlockPadding = 20;

    if (!function_exists("webyep_bCheckImage")) {
        function webyep_bCheckImage($sN, $iFixedW, &$sWCSS)
        {
            $bRet = false;

            $sWCSS = "";
            $oElement = new WYImageElement($sN, $false, $iFixedW ? "width=\"$iFixedW\"":"", "", "");
            $sContent = $oElement->sDisplay();
            if ($sContent) {
                if ($iFixedW) $iW = $iFixedW;
                else {
                    $oImg = $oElement->oImage();
                    $iW = $oImg ? $oImg->iWidth():0;
                }
                $sWCSS = $iW ? (" width: " . $iW . "px;"):"";
                $bRet = true;
            }
            return $bRet;
        }
    }

	$sWidthCSS = "";
?>
<h1 class="WebYepSeitenTitel"><?php webyep_shortText("Seitentitel", false); ?></h1>


<div><?php webyep_logonButton(true); ?></div><br />


<div class="WebYepText"><?php
   // check for installed WYSIWYG HTML editor
   if (file_exists("$webyep_sIncludePath/opt/rte") || file_exists("$webyep_sIncludePath/opt/tinymce")) {
	   webyep_richText("HeaderText", false, "/webyep_text.css");
   }
   else {
	   webyep_longText("HeaderText", false, "", true);
   }
?></div>


<div class="contentSpacer">
</div><!-- this makes sure the content is long enough for the design -->
<div id="accordion_wrapper" style="position:relative; width:97%; border:0px; margin:0px; padding:0px; overflow:hidden;">
	<div id="acAlignment" style="position:relative; border:0px; padding:0px; margin-bottom:0px; margin-top:0px; margin-right:auto; margin-left:0px;">
		<!-- Loop Start: ======================================== -->
		<?php foreach (WYLoopElement::aLoopIDs("BlockSchleife") as $webyep_oCurrentLoop->iLoopID) { $webyep_oCurrentLoop->loopStart(true); ?>


			<div class="acToggle" onclick="accordion.showThisHideOpen();">
				<!-- Float Container Start: ======================================== -->
				<?php
				    if(preg_match('/MSIE +6/', $_SERVER['HTTP_USER_AGENT'])) echo "<div style=\"overflow: hidden; zoom: 1.0\">\n";
				    else echo "<div style=\"overflow: hidden;\">\n";
				?>
				<?php if (webyep_sShortTextContent("Blocktitel", false) || webyep_bIsEditMode()) { ?>
				<span class="WebYepBlockTitel"><?php webyep_shortText("Blocktitel", false); ?></span>
				<?php } ?>
			</div>
			<div class="acStretchOut">
				<div class="acStretch">


					<?php
						if (webyep_bCheckImage("FotoLinks", $iLeftPhotoWidth, $sWidthCSS) || webyep_bIsEditMode()) {
					?>
					<!-- Left Photo: ======================================== -->
					<?php
					   printf('<div style="float: left; margin-right: %dpx; margin-bottom: %dpx;%s" class="WebYepFotoLinks"><div>', $iLeftPhotoPadding, $iLeftPhotoPadding, $sWidthCSS);
					   webyep_image("FotoLinks", false, "", "", "", $iLeftPhotoWidth, 0, true);
					   echo "</div>";
						if (webyep_sShortTextContent("FotoLinksBildtext", false) || webyep_bIsEditMode()) {
					?><div style="padding-top: 4px; text-align: center;"><?php webyep_shortText("FotoLinksBildtext", false); ?></div><?php } echo "</div>"; } ?>


					<?php
						if (webyep_bCheckImage("FotoRechts", $iRightPhotoWidth, $sWidthCSS) || webyep_bIsEditMode()) {
					?>
					<!-- Right Photo: ======================================= -->
					<?php
					   printf('<div style="float: right; margin-left: %dpx; margin-bottom: %dpx;%s" class="WebYepFotoRechts"><div>', $iRightPhotoPadding, $iRightPhotoPadding, $sWidthCSS);
					   webyep_image("FotoRechts", false, "", "", "", $iRightPhotoWidth, 0, true);
					   echo "</div>";
						if (webyep_sShortTextContent("FotoRechtsBildtext", false) || webyep_bIsEditMode()) {
					?><div style="padding-top: 4px; text-align: center;"><?php webyep_shortText("FotoRechtsBildtext", false); ?></div><?php } echo "</div>"; } ?>


					<!-- Text: =============================================== -->
					<div class="WebYepText"><?php
					   // check for installed WYSIWYG HTML editor
					   if (file_exists("$webyep_sIncludePath/opt/rte") || file_exists("$webyep_sIncludePath/opt/tinymce") || file_exists("$webyep_sIncludePath/opt/fckeditor")) {
						   webyep_richText("Text", false, "/webyep_text.css");
					   }
					   else {
						   webyep_longText("Text", false, "", true);
					   }
					?></div>
					<!-- Float Container End: =============================================== -->
					<?php echo "</div>\n"; ?>


					<!-- Attachment: ========================================= -->
					<?php	if (webyep_sShortTextContent("DateianhangBeschreibung", false) || webyep_bIsEditMode()) { ?>
					<p class="WebYepDateianhang"><span class="WebYepDateianhangBeschreibung"><?php webyep_shortText("DateianhangBeschreibung", false); ?> </span><span class="WebYepDateianhangDateiname"><?php webyep_attachment("Dateianhang"); ?></span></p>
					<?php } ?>


					<?php
						if (webyep_bCheckImage("FotoZentriert", $iCenterPhotoWidth, $sWidthCSS) || webyep_bIsEditMode()) {
					?>
					<!-- Center Photo: ======================================= -->
					<?php
					   printf('<div style="text-align: center;" class="WebYepFotoZentriert"><div style="margin-left: auto; margin-right: auto; padding-top: %dpx; %s"><div>', $iCenterPhotoPadding, $sWidthCSS);
					   webyep_image("FotoZentriert", false, "", "", "", $iCenterPhotoWidth, 0, true);
					   echo "</div>";
						if (webyep_sShortTextContent("FotoZentriertBildtext", false) || webyep_bIsEditMode()) {
					?><div style="padding-top: 4px; text-align: center;"><?php webyep_shortText("FotoZentriertBildtext", false); ?></div><?php } echo "</div></div>"; } ?>


					<!-- Block Padding: ====================================== -->
					<?php if ($iBlockPadding) printf('<div style="font-size: 0px; line-height: 0px; height: %spx;" class="WebYepBlockAbstand"></div>', $iBlockPadding); ?>


				</div>
				<div style="width:99%; clear:both;">
				</div>
			</div>
		<!-- Loop End: =========================================== -->
		<?php $webyep_oCurrentLoop->loopEnd(); } ?>


	</div>
	<div style="width:99%; clear:both;">
	</div>
</div>
<br />


<div class="WebYepText"><?php
   // check for installed WYSIWYG HTML editor
   if (file_exists("$webyep_sIncludePath/opt/rte") || file_exists("$webyep_sIncludePath/opt/tinymce")) {
	   webyep_richText("FooterText", false, "/webyep_text.css");
   }
   else {
	   webyep_longText("FooterText", false, "", true);
   }
?></div>


<script type="text/javascript" src="files/prototype.lite.js">
</script> <script type="text/javascript" src="files/moo.fx.js">
</script> <script type="text/javascript" src="files/moo.fx.pack.js">
</script> <script type="text/javascript">
//<![CDATA[
  var acStretchers = document.getElementsByClassName('acStretchOut');  var acTogglers = document.getElementsByClassName('acToggle');  var accordion = new fx.Accordion(acTogglers, acStretchers, {opacity: false, duration: 300});
//]]>
</script>
<div class="clear"></div>
<div class="clearer"></div>
<!-- End Accordion & WebYep -->

4. Die Erstellung einer Weiterleitung Seite
Man muss jetzt eine Weiterleitungsseite erstellen die den gleichen Name, Ordnername und Dateiname bekommt die WebYep Seite hatte (hat, aber sie ist jetzt in RW nicht mehr aktiv).
Diese Weiterleitung Seite muss auch den Pfad zu der WebYep Seite zeigen. Dazu in der Seiteneinstellungen in dem Feld URL aus dem Plugin-Parameter Tab den absoluten Pfad schreiben.

Das müsste aber alles sein.
Hoffe wieder dass ich nicht Fehler gemacht habe und dass jemandem diese Codes nützlich sind.

Kommentieren ist momentan nicht möglich.