Mobile device support.

ilkerccom · Feb 29, 2020 · a709994 · a709994
1 parent 610fceb
commit a709994
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 64 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
-# Cndk.BeforeAfter.Js v.0.0.1
+# Cndk.BeforeAfter.Js v.0.0.2
 
 It is a very simple jQuery plugin that will meet your needs.
 
-![Screenshot](https://i.ibb.co/1TH9nWB/Ekran-Resmi-2020-02-28-20-30-45.png)
+![Screenshot](https://i.ibb.co/9bCgWzc/Ekran-Resmi-2020-02-29-21-36-37.png)
 
 ## Demo
 

diff --git a/cndk.beforeafter.css b/cndk.beforeafter.css
@@ -5,13 +5,17 @@
 .cndkbeforeafter-item img { position: absolute; left: 0; top: 0; width: auto; height: 100%; }
 .cndkbeforeafter-item-before { z-index: 5; }
 .cndkbeforeafter-item-after { z-index: 10; }
-.cndkbeforeafter-seperator { width:4px; position: absolute; height: 100%; z-index: 15; left: 0; top: 0; background: white; cursor: col-resize; }
-.cndkbeforeafter-seperator > div > span { cursor: pointer; position: absolute; width: 60px; height: 60px; background: white; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px; border-radius: 30px; } 
-.cndkbeforeafter-seperator > div > span::after { content: ""; border: solid #3c3c3c; border-width: 0 7px 7px 0; display: inline-block; padding: 6px; transform: rotate(135deg); -webkit-transform: rotate(135deg); top: 50%; position: absolute; margin-top: -10px; left: 0; margin-left: 10px; }
-.cndkbeforeafter-seperator > div > span::before { content: ""; border: solid #3c3c3c; border-width: 7px 0 0 7px; display: inline-block; padding: 6px; transform: rotate(135deg); -webkit-transform: rotate(135deg); top: 50%; position: absolute; margin-top: -10px; right: 0; margin-right: 10px; }
-.cndkbeforeafter-item-before-text, .cndkbeforeafter-item-after-text { position: absolute; z-index: 14; display: inline-block; background: white; padding: 10px; }
-.cndkbeforeafter-item-before-text { left: 50px; bottom: 50px; }
-.cndkbeforeafter-item-after-text { right: 50px; bottom: 50px; }
+.cndkbeforeafter-seperator { width:4px; position: absolute; height: 100%; z-index: 15; left: 0; top: 0; background: black; cursor: col-resize; }
+.cndkbeforeafter-seperator > div > span { transition: 0.25s; cursor: pointer; position: absolute; width: 60px; height: 60px; border:3px solid black; background: white; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px; border-radius: 30px; } 
+.cndkbeforeafter-seperator > div > span::after { content: ""; border: solid #9e9e9e; border-width: 0 7px 7px 0; display: inline-block; padding: 6px; transform: rotate(135deg); -webkit-transform: rotate(135deg); top: 50%; position: absolute; margin-top: -10px; left: 0; margin-left: 10px; }
+.cndkbeforeafter-seperator > div > span::before { content: ""; border: solid #9e9e9e; border-width: 7px 0 0 7px; display: inline-block; padding: 6px; transform: rotate(135deg); -webkit-transform: rotate(135deg); top: 50%; position: absolute; margin-top: -10px; right: 0; margin-right: 10px; }
+.cndkbeforeafter-seperator:hover > div > span, .cndkbeforeafter-seperator:active > div > span { background: black; }
+.cndkbeforeafter-seperator:active { box-shadow: 0 0 35px #000; }
+.cndkbeforeafter-item-before-text, .cndkbeforeafter-item-after-text { position: absolute; z-index: 14; display: inline-block; background: rgba(0, 0, 0, 0.6); color:#fff; padding: 10px; }
+.cndkbeforeafter-top-left {  left:0; top: 0; }
+.cndkbeforeafter-top-right {  right:0; top: 0; }
+.cndkbeforeafter-bottom-left {  left:0; bottom: 0; }
+.cndkbeforeafter-bottom-right {  right:0; bottom: 0; }
 .cndkbeforeafter-extra-small-text { padding: 5px !important; font-size: 11px !important; bottom: 0; }  
 .cndkbeforeafter-extra-small-text-before { left: 0; }
 .cndkbeforeafter-extra-small-text-after { right: 0; }

diff --git a/cndk.beforeafter.js b/cndk.beforeafter.js
@@ -5,9 +5,11 @@ $.fn.cndkbeforeafter = function(options) {
         mode: "hover", /* hover,drag */
         showText: true,
         beforeText: "BEFORE",
+        beforeTextPosition: "bottom-left", /* top-left, top-right, bottom-left, bottom-right, {x}px,{x}px */
         afterText: "AFTER",
-        seperatorWidth: "5px",
-        seperatorColor: "#ffffff",
+        afterTextPosition: "bottom-right", /* top-left, top-right, bottom-left, bottom-right, {x}px,{x}px */
+        seperatorWidth: "4px",
+        seperatorColor: "#000000",
         hoverEffect: true,
     }, options);
 
@@ -51,8 +53,10 @@ $.fn.cndkbeforeafter = function(options) {
             // Before-After text
             if(settings.showText == true)
             {
-                root.append("<div class='cndkbeforeafter-item-before-text'>"+settings.beforeText+"</div>");
-                root.append("<div class='cndkbeforeafter-item-after-text'>"+settings.afterText+"</div>");
+                var dataBeforeTitle = $(this).find(">div").eq(0).find('div[data-type="before"]').attr("data-title") == undefined ? settings.beforeText : $(this).find(">div").eq(0).find('div[data-type="before"]').attr("data-title");
+                var dataAfterTitle = $(this).find(">div").eq(0).find('div[data-type="after"]').attr("data-title") == undefined ? settings.afterText : $(this).find(">div").eq(0).find('div[data-type="after"]').attr("data-title");
+                root.append("<div class='cndkbeforeafter-item-before-text cndkbeforeafter-"+settings.beforeTextPosition+"'>"+dataBeforeTitle+"</div>");
+                root.append("<div class='cndkbeforeafter-item-after-text cndkbeforeafter-"+settings.afterTextPosition+"'>"+dataAfterTitle+"</div>");
             }
 
             for(i=0; i<count; i++)
@@ -159,6 +163,20 @@ $.fn.cndkbeforeafter = function(options) {
                     currentElement.find(".cndkbeforeafter-seperator, .cndkbeforeafter-item > div").addClass("cndkbeforeafter-drag-transition");
                 });
 
+                // Mobile touch-support
+                currentElement.find(".cndkbeforeafter-seperator").on("touchstart",function(e){
+                    isSliding = true;
+                    currentElement.find(".cndkbeforeafter-seperator, .cndkbeforeafter-item > div").removeClass("cndkbeforeafter-drag-transition");
+                    currentElement.on("touchmove",function(e){
+                        var parentOffset = currentElement.offset();
+                        var mouseX = parseInt((e.touches[0].pageX - parentOffset.left));
+                        var mousePercent = (mouseX*100)/parseInt(root.width());
+                        currentElement.find(".cndkbeforeafter-item-before-c").css("width",mousePercent+"%");
+                        currentElement.find(".cndkbeforeafter-item-after-c").css("width",(100-mousePercent)+"%");
+                        currentElement.find(".cndkbeforeafter-seperator").css("left",mousePercent+"%");
+                    });
+                });
+
                 // Add visual to seperator
                 currentElement.find(".cndkbeforeafter-seperator").append("<div><span></span></div>");
             }

diff --git a/demo.html b/demo.html
@@ -17,7 +17,8 @@
             $(".beforeafterdefault").cndkbeforeafter();
             $(".beforeafterdrag").cndkbeforeafter(
                 {
-                    mode: "drag"
+                    mode: "drag",
+                    beforeTextPosition: "top-left"
                 }
             );
             $(".beforeafterhidetext").cndkbeforeafter(
@@ -27,8 +28,8 @@
             );
             $(".beforeafterimageseperator").cndkbeforeafter(
                 {
-                    seperatorColor: "blue",
-                    seperatorWidth: "15px",
+                    seperatorColor: "#ffffff",
+                    seperatorWidth: "10px",
                 }
             );
         });
@@ -73,9 +74,11 @@ <h1 class="display-4">Default Settings</h1>
                     mode: "hover",<br>
                     showText: true,<br>
                     beforeText: "BEFORE",<br>
+                    beforeTextPosition: "bottom-left"<br>
                     afterText: "AFTER",<br>
-                    seperatorWidth: "5px",<br>
-                    seperatorColor: "#ffffff",<br>
+                    afterTextPosition: "bottom-right"<br>
+                    seperatorWidth: "4px",<br>
+                    seperatorColor: "#000000",<br>
                     hoverEffect: true,
                   </code>
                 </div>
@@ -168,52 +171,19 @@ <h1 class="display-4">Hide Text</h1>
 
               <div class="row" style="margin-top: 50px;">
                 <div class="col-md-12">
-                  <h1 class="display-4">Other Demos</h1>
-                  <p>Other demos</p>
-                  <div class="beforeafterdefault">
-                    <div data-type="data-type-image">
-                        <div data-type="before"><img src="images/b1.jpg"></div>
-                        <div data-type="after"><img src="images/b2.jpg"></div>
-                    </div>
-                </div>
-                    <div class="beforeafterdefault" style="margin-top: 50px;">
-                        <div data-type="data-type-image">
-                            <div data-type="before"><img src="images/c1.jpg"></div>
-                            <div data-type="after"><img src="images/c2.jpg"></div>
-                        </div>
-                    </div>
-                </div>
-              </div>
-
-              <div class="row" style="margin-top: 50px;">
-                <div class="col-md-4">
-                  <div class="card mb-4 shadow-sm">
-                    <div class="beforeafterdefault">
-                        <div data-type="data-type-image">
-                            <div data-type="before"><img src="images/a1.jpg"></div>
-                            <div data-type="after"><img src="images/a2.jpg"></div>
-                        </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-6">
-                  <div class="card mb-4 shadow-sm">
-                    <div class="beforeafterdefault">
-                        <div data-type="data-type-image">
-                            <div data-type="before"><img src="images/b1.jpg"></div>
-                            <div data-type="after"><img src="images/b2.jpg"></div>
-                        </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-2">
-                  <div class="card mb-4 shadow-sm">
-                    <div class="beforeafterdefault">
-                        <div data-type="data-type-image">
-                            <div data-type="before"><img src="images/c1.jpg"></div>
-                            <div data-type="after"><img src="images/c2.jpg"></div>
-                        </div>
-                    </div>
+                  <h1 class="display-4">Attributes</h1>
+                  <p>With default settings.</p>
+                  <code >
+                    data-title="Old image"<br>
+                    data-title="This is new image"
+                  </code>
+                  <div class="card" style="margin-top: 50px;">
+                      <div class="beforeafterdefault">
+                          <div data-type="data-type-image">
+                              <div data-type="before" data-title="Old image"><img src="images/a1.jpg"></div>
+                              <div data-type="after" data-title="This is new image"><img src="images/a2.jpg"></div>
+                          </div>
+                      </div>
                   </div>
                 </div>
               </div>

diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/a2.jpg b/images/a2.jpg
diff --git a/images/b1.jpg b/images/b1.jpg
diff --git a/images/b2.jpg b/images/b2.jpg
diff --git a/images/c1.jpg b/images/c1.jpg
diff --git a/images/c2.jpg b/images/c2.jpg