some fixes and improvements

postyou · Feb 4, 2019 · 617803a · 617803a
1 parent 6d1f025
commit 617803a
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 24 deletions.
diff --git a/assets/css/comparison_slider.css b/assets/css/comparison_slider.css
@@ -1,11 +1,11 @@
-.comparison-slider {
+.ce_comparison-slider {
     position:relative;
     overflow:hidden;
     margin-right:auto;
     margin-left:auto;
 }
 
-.comparison-slider .ce_image {
+.ce_comparison-slider .ce_image {
     width:50.01%;
     height:100%;
     left:0;
@@ -15,18 +15,19 @@
     background-size:auto 100%;
 }
 
-.comparison-slider .ce_image:first-child {
+.ce_comparison-slider .ce_image:first-child {
     overflow:visible;
+    /*z-index:1;*/
 }
 
-.comparison-slider .ce_image:last-child {
+.ce_comparison-slider .ce_image:last-child {
     left:auto;
     right:0;
     background-position:right top;
     overflow: hidden;
 }
 
-.comparison-slider .ce_image .drag-button {
+.ce_comparison-slider .ce_image .drag-button {
     width:30px;
     height:30px;
     right:0;
@@ -43,6 +44,28 @@
     cursor:pointer;
 }
 
-.comparison-slider .comparison-slider-text {
+.ce_comparison-slider .comparison-slider-text {
     position: absolute;
 }
+
+.ce_comparison-slider .comparison-slider-top-left {
+    top: 0;
+    left: 0;
+    text-align: left;
+}
+
+.ce_comparison-slider .comparison-slider-top-right {
+    top: 0;
+    right: 0;
+    text-align: right;
+}
+.ce_comparison-slider .comparison-slider-bottom-left {
+    bottom: 0;
+    left: 0;
+    text-align: left;
+}
+.ce_comparison-slider .comparison-slider-bottom-right {
+    bottom: 0;
+    right: 0;
+    text-align: right;
+}
diff --git a/assets/js/comparison_slider.js b/assets/js/comparison_slider.js
@@ -7,8 +7,8 @@
 
 		var comparisonSliderClicked = false;
 
-		if ($(".comparison-slider").length > 0) {
-			$('.comparison-slider').each(function() {
+		if ($(".ce_comparison-slider ").length > 0) {
+			$('.ce_comparison-slider ').each(function() {
 
 				if ($(this).parents().hasClass("vbox-content")) {
 					comparisonSliderWidth = $(this).parents(".vbox-content").width();
@@ -21,31 +21,31 @@
 					comparisonSliderRatio = $(this).attr("img-width") / $(this).attr("img-height");
 					$(this).css("height", comparisonSliderWidth / comparisonSliderRatio);
 				});
-				
+
 				$(this).css("height", comparisonSliderWidth / comparisonSliderRatio);
 				$(this).find(".ce_image:first-child").css("width", "");
 				$(this).find(".ce_image:first-child").css("max-width", comparisonSliderWidth);
 				$(this).find(".ce_image:last-child").css("width", "");
 				$(this).find(".drag-button").remove();
 				$(this).find(".ce_image:first-child").append('<div class="drag-button"></div>');
 			});
-		
-			$('.comparison-slider .drag-button').tapstart(function() {
+
+			$('.ce_comparison-slider  .drag-button').tapstart(function() {
 		        comparisonSliderClicked = true;
 		        $(this).addClass("dragged");
 		    });
 
-		    $('.comparison-slider').tapend(function() {
+		    $('.ce_comparison-slider ').tapend(function() {
 		        comparisonSliderClicked = false;
 		        $(this).find(".drag-button").removeClass("dragged");
 		    });
 
-		    $('.comparison-slider').tapmove(function(e, touch) {
+		    $('.ce_comparison-slider ').tapmove(function(e, touch) {
 		        if (comparisonSliderClicked === false) {
 		            return;
 		        }
 
-				
+
 		        $(this).find(".ce_image:first-child").css("width", touch.offset.x);
 				$(this).find(".ce_image:last-child").css("width", parseInt(comparisonSliderWidth) - touch.offset.x);
 
@@ -55,11 +55,11 @@
 
 	}
 
-	$(document).ready(function() {
+	$(window).on('load', function() {
 		initComparisonSlider();
 	});
 
-	$(window).resize(function() {
+	$(window).on('resize', function() {
 		initComparisonSlider();
 	});
 

diff --git a/elements/ContentComparisonSlider.php b/elements/ContentComparisonSlider.php
@@ -51,10 +51,12 @@ public function generate() {
 
         protected function compile() {
 
+
+            $this->Template->classNames .= "ce_comparison-slider ";
+
             foreach ($this->Template->classes as $class) {
                 $this->Template->classNames .= $class." ";
             }
-            $this->Template->classNames .= "comparison-slider";
 
             if (isset($this->pictureLeftSRC) && isset($this->pictureRightSRC)) {
                 $pictureLeft = \FilesModel::findByUuid($this->pictureLeftSRC);
@@ -73,22 +75,23 @@ protected function compile() {
 
                 $textPositions = array("textLeftPosition" => $this->textLeftPosition, "textRightPosition" => $this->textRightPosition);
 
+
                 foreach ($textPositions as $k => $v) {
                     switch ($v) {
                         case 'top-left':
-                            $this->Template->$k = "top: 0; left: 0;";
+                            $this->Template->$k = "comparison-slider-top-left";
                             break;
                         case 'top-right':
-                            $this->Template->$k = "top: 0; right: 0;";
+                            $this->Template->$k = "comparison-slider-top-right";
                             break;
                         case 'bottom-left':
-                            $this->Template->$k = "bottom: 0; left: 0;";
+                            $this->Template->$k = "comparison-slider-bottom-left";
                             break;
                         case 'bottom-right':
-                            $this->Template->$k = "bottom: 0; right: 0;";
+                            $this->Template->$k = "comparison-slider-bottom-right";
                             break;
                         default:
-                            $this->Template->$k = "top: 0; left: 0;";
+                            $this->Template->$k = "comparison-slider-top-left";
                             break;
                     }
                 }

diff --git a/templates/ce_comparison_slider.html5 b/templates/ce_comparison_slider.html5
@@ -1,10 +1,10 @@
 
 <div class="<?= $this->classNames ?>">
 	<div class="ce_image" img-width="<?= $this->pictureWidth ?>" img-height="<?= $this->pictureHeight ?>" style="<?= $this->pictureLeftPath ?>">
-		<div class="comparison-slider-text comparison-slider-text-left" style="<?= $this->textLeftPosition; ?>"><?= $this->textLeft; ?></div>
+		<div class="comparison-slider-text <?= $this->textLeftPosition; ?>"><?= $this->textLeft; ?></div>
 		<div class="drag-button"></div>
 	</div>
 	<div class="ce_image" img-width="<?= $this->pictureWidth ?>" img-height="<?= $this->pictureHeight ?>" style="<?= $this->pictureRightPath ?>">
-		<div class="comparison-slider-text comparison-slider-text-right" style="<?= $this->textRightPosition; ?>"><?= $this->textRight; ?></div>
+		<div class="comparison-slider-text <?= $this->textRightPosition; ?>"><?= $this->textRight; ?></div>
 	</div>
 </div>