Einführung ThumbPages und Fahrzeug-Farbwechsler

.config/config_global.php

@@ -100,5 +100,7 @@ define('TBL_IMAGE_TEXT', 'ahd_image_text');
 define('TBL_IMAGE', 'ahd_image');
 define('TBL_TEXT', 'ahd_text');
 define('TBL_SUBLINE', 'ahd_subline');
+define('TBL_CAR_COLOR', 'ahd_car_color');
+define('TBL_THUMB', 'ahd_thumb');
 
 require_once(PATH_CNF . 'config_version.php');

css/ahd.css

@@ -1,5 +1,5 @@
 body {
-    padding: 50px 0;
+    padding: 50px 0 100px 0;
     font-family: Verdana, Arial, sans-serif;
     text-align: justify;
 }
@@ -81,6 +81,29 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
     display: none;
 }
 
+.car-color img:not(:first-of-type) {
+    display: none;
+}
+
+.car-color-thumbs img {
+    padding: 0 15px;
+}
+
+.thumbnail {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    border: none;
+}
+
+.thumbnail .caption {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.caption {
+    text-align: left;
+}
+
 @media screen and (min-width: 768px) {
     .subaru_logo {
         margin-top: 12px;

css/ahd.min.css

@@ -1 +1 @@
-body{padding:50px 0;font-family:Verdana,Arial,sans-serif;text-align:justify}li.dropdown-submenu{position:relative}li.dropdown-submenu:hover>ul.dropdown-menu{display:block}li.dropdown:hover>ul.dropdown-menu{display:block}ul.dropdown-menu.pull-left{margin-top:-6px;border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;top:0;left:100%}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-weight:bold}#footer h3{text-decoration:underline}#footer:hover .navbar-brand{height:auto}#footer .navbar-brand{margin-left:0}#footer .navbar-brand p{font-size:14px}.container-fluid{max-width:1600px}.container-fluid .img-responsive{margin:0 auto}.caret.rotate-left{transform:rotate(270deg)}.navbar-fixed-top .pull-right img{margin-top:15px;margin-left:30px}.keyvisual{height:285px;overflow:hidden;position:relative}.carousel-inner{height:100%}.keyvisual img{position:absolute}.slider img:not(:first-of-type){display:none}@media screen and (min-width:768px){.subaru_logo{margin-top:12px;width:149px;height:25px;background-image:url('../images/subaru_logo.png')}.daihatsu_logo{width:150px;height:25px;margin-left:15px;margin-top:12px;background-image:url('../images/daihatsu_logo.png')}}@media(max-width:767px){#main-navbar{position:absolute;left:80px}.navbar-collapse.in{overflow-y:visible}#main-navbar a.dropdown-toggle{display:block}#main-navbar ul.dropdown-menu{float:left}.container>.navbar-header{margin:0}.subaru_logo{margin-top:12px;width:48px;height:25px;background-image:url('../images/subaru_logo.png')}.daihatsu_logo{width:42px;height:25px;margin-left:15px;margin-top:12px;background-image:url('../images/daihatsu_logo.png')}}@media(max-width:642px){#footer .ahd{display:none}}
+body{padding:50px 0 100px 0;font-family:Verdana,Arial,sans-serif;text-align:justify}li.dropdown-submenu{position:relative}li.dropdown-submenu:hover>ul.dropdown-menu{display:block}li.dropdown:hover>ul.dropdown-menu{display:block}ul.dropdown-menu.pull-left{margin-top:-6px;border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;top:0;left:100%}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-weight:bold}#footer h3{text-decoration:underline}#footer:hover .navbar-brand{height:auto}#footer .navbar-brand{margin-left:0}#footer .navbar-brand p{font-size:14px}.container-fluid{max-width:1600px}.container-fluid .img-responsive{margin:0 auto}.caret.rotate-left{transform:rotate(270deg)}.navbar-fixed-top .pull-right img{margin-top:15px;margin-left:30px}.keyvisual{height:285px;overflow:hidden;position:relative}.carousel-inner{height:100%}.keyvisual img{position:absolute}.slider img:not(:first-of-type){display:none}.car-color img:not(:first-of-type){display:none}.car-color-thumbs img{padding:0 15px}.thumbnail{-webkit-box-shadow:none;box-shadow:none;border:0}.thumbnail .caption{padding-left:0;padding-right:0}.caption{text-align:left}@media screen and (min-width:768px){.subaru_logo{margin-top:12px;width:149px;height:25px;background-image:url('../images/subaru_logo.png')}.daihatsu_logo{width:150px;height:25px;margin-left:15px;margin-top:12px;background-image:url('../images/daihatsu_logo.png')}}@media(max-width:767px){#main-navbar{position:absolute;left:80px}.navbar-collapse.in{overflow-y:visible}#main-navbar a.dropdown-toggle{display:block}#main-navbar ul.dropdown-menu{float:left}.container>.navbar-header{margin:0}.subaru_logo{margin-top:12px;width:48px;height:25px;background-image:url('../images/subaru_logo.png')}.daihatsu_logo{width:42px;height:25px;margin-left:15px;margin-top:12px;background-image:url('../images/daihatsu_logo.png')}}@media(max-width:642px){#footer .ahd{display:none}}

js/ahd.js

@@ -7,13 +7,16 @@
  */
 
 $(document).ready(function () {
+    carColor.init();
     slider.init();
     kenBurns.init();
+    thumbPage.init();
 });
 
 $(window).resize(function () {
     slider.initVariables();
     kenBurns.initVariables();
+    thumbPage.init();
 });
 
 var slider = {
@@ -364,4 +367,53 @@ var kenBurns = {
             })
     }
 
+};
+
+
+var carColor = {
+    activePreview: 0,
+    previewElement: null,
+    previewImages: null,
+    thumbElement: null,
+    thumbImages: null,
+
+
+    init: function () {
+        carColor.initVariables();
+        carColor.thumbImages.on('mouseenter', function () {
+            $(carColor.previewImages.get(carColor.activePreview)).hide();
+            carColor.activePreview = parseInt($(this).data('thumb'));
+            $(carColor.previewImages.get(carColor.activePreview)).css('display', 'block');
+        });
+    },
+
+
+    initVariables: function () {
+        carColor.previewElement = $('.car-color');
+        carColor.previewImages = $('img', carColor.previewElement);
+        carColor.thumbElement = $('.car-color-thumbs');
+        carColor.thumbImages = $('img', carColor.thumbElement);
+    }
+};
+
+
+var thumbPage = {
+    init: function () {
+        var thumbElement = $('.thumbPage');
+        var thumbImages = $('.thumbnail', '.thumbPage');
+        var left = 0;
+
+        if (thumbElement.length === 0) {
+            return false;
+        }
+
+        $('.clearfix', thumbElement).remove();
+
+        $.each(thumbImages, function(key, image) {
+            if($(image).offset().left <= left) {
+                $(image).parent().before('<div class="clearfix"></div>');
+            }
+            left = $(image).offset().left;
+        });
+    }
 };

rendering/Model/CarColorModel.php

@@ -0,0 +1,23 @@
+<?php
+/**
+ * Created by CS medien- & kommunikationssysteme.
+ * @author Christian Steinle
+ * @date 09.01.2017
+ *
+ * @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
+ */
+
+namespace Model;
+
+
+use Helper\Database;
+
+class CarColorModel extends Database
+{
+	const TBL_NAME = TBL_CAR_COLOR;
+
+	const PRIMARY_KEY = 'carColorID';
+
+	const ORDER_BY = '';
+
+}

rendering/Model/ThumbModel.php

@@ -0,0 +1,23 @@
+<?php
+/**
+ * Created by CS medien- & kommunikationssysteme.
+ * @author Christian Steinle
+ * @date 09.01.2017
+ *
+ * @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
+ */
+
+namespace Model;
+
+
+use Helper\Database;
+
+class ThumbModel extends Database
+{
+	const TBL_NAME = TBL_THUMB;
+
+	const PRIMARY_KEY = 'thumbID';
+
+	const ORDER_BY = '';
+
+}

templates/carcolor.phtml

@@ -0,0 +1,44 @@
+<?php
+$registry = \Helper\Registry::getInstance();
+$imagePath = $registry->editorConfig['mediaPrefix'] . $registry->navID . '/';
+$imageData = json_decode($this->data['carColorImages']);
+
+$images = array();
+$thumbs = array();
+
+$editorData = '';
+if ($this->isEditable === true)
+{
+	$editorData = ' data-editor="CarColor" data-id="' . $this->data['carColorID'] . '" data-element="CarColor_' . $this->data['carColorID'] . '"';
+}
+
+?>
+<div class="row"<?php echo $editorData; ?>>
+	<div class="col-md-12 car-color">
+		<?php
+		foreach ($imageData as $key => $image)
+		{
+			$imageName = explode('.', $image);
+			$extension = '.' . end($imageName);
+			$thumb = str_replace($extension, '-thumb' . $extension, $image);
+			$thumbs[] = '<img data-thumb="' . $key . '" src="' . $imagePath . $thumb . '"/>';
+
+			?>
+			<img class="center-block img-responsive" data-image="<?php echo $key; ?>" src="<?php echo $imagePath . $image; ?>"/>
+			<?php
+		}
+		?>
+	</div>
+	<div class="col-md-12 car-color-thumbs text-center">
+<?php
+
+foreach ($thumbs as $thumb)
+{
+	echo $thumb;
+}
+
+?>
+	</div>
+</div>
+<div class="col-md-12">&nbsp;</div>
+

templates/thumb.phtml

@@ -0,0 +1,43 @@
+<?php
+$registry = \Helper\Registry::getInstance();
+$imagePath = $registry->editorConfig['mediaPrefix'] . $registry->navID . '/';
+$images = json_decode($this->data['thumbImages']);
+$headlines = json_decode($this->data['thumbHeadlines']);
+$texts = json_decode($this->data['thumbTexts']);
+
+$editorData = '';
+if ($this->isEditable === true)
+{
+	$editorData = ' data-editor="Thumb" data-id="' . $this->data['thumbID'] . '" data-element="Thumb_' . $this->data['thumbID'] . '"';
+}
+
+?>
+<div class="row thumbPage"<?php echo $editorData; ?>>
+	<?php
+	foreach ($images as $key => $image)
+	{
+		?>
+		<div class="col-xs-6 col-md-3">
+			<div class="thumbnail">
+				<img src="<?php echo $imagePath . $image; ?>"/>
+				<div class="caption">
+					<p><b><?php echo $headlines[$key]; ?></b></p>
+					<?php
+
+					if (isset($texts[$key]))
+					{
+						?>
+						<p><?php echo $texts[$key]; ?></p>
+						<?php
+					}
+
+					?>
+				</div>
+			</div>
+		</div>
+		<?php
+	}
+	?>
+</div>
+<div class="row">&nbsp;</div>
+