Skip to content

Commit

Permalink
start implementing Juxtapose name conventions across codebase
Browse files Browse the repository at this point in the history
  • Loading branch information
@duner
duner committed Jun 9, 2014
1 parent 171dd64 commit d175a28
Show file tree
Hide file tree
Showing 9 changed files with 79 additions and 512 deletions.
7 changes: 1 addition & 6 deletions LICENSE
View file
Expand Up @@ -357,9 +357,4 @@ Secondary Licenses under the terms of this version of the License, the
notice described in Exhibit B of this License must be attached.


-------------------------------------------

Map tiles by [Stamen Design](http://stamen.com "Stamen Design"), under
[CC BY 3.0](http://creativecommons.org/licenses/by/3.0 "CC BY 3.0").
Data by [OpenStreetMap](http://openstreetmap.org "OpenStreetMap"),
under [CC BY SA](http://creativecommons.org/licenses/by-sa/3.0 "CC BY SA").
-------------------------------------------
11 changes: 5 additions & 6 deletions index.html
View file
@@ -1,24 +1,23 @@
<!DOCTYPE HTML>
<head>
<title>Before/After Image Slider</title>
<title>JuxtaposeJS</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="slider/slider.css">
<link rel="icon" type="image/x-icon" href="http://blueline.knightlab.com/assets/logos/favicon.ico" />
</head>
<body>

<div class="klba-wrapper">
<div class="juxtapose">
<img class="klba-image left" src="http://online.wsj.com/media/LIONDOORA.jpg" data-label="2009" />
<img class="klba-image right" src="http://online.wsj.com/media/LIONDOOR_2A.jpg" data-label="2014" />
</div>

<div class="klba-wrapper" data-startingposition="45%">
<div class="juxtapose" data-startingposition="45%">
<img class="klba-image left" src="https://www.flickr.com/photos/gsfc/14305885885/" />
<img class="klba-image right" src="https://www.flickr.com/photos/gsfc/14302542611/" />
</div>


<div class="klba-wrapper" data-startingposition="35%" data-showlabels="false">
<div class="juxtapose" data-startingposition="35%">
<img class="klba-image left" src="./images/Sochi_11April2005.jpg" data-label="April 2005" />
<img class="klba-image right" src="./images/Sochi_22Nov2013.jpg" data-label="Nov. 2013" />
</div>
Expand Down
48 changes: 24 additions & 24 deletions slider/slider.css
View file
@@ -1,24 +1,24 @@
@import url(http://fonts.googleapis.com/css?family=News+Cycle);

div.klba-wrapper {
div.juxtapose {
max-width: 600px;
clear: both;
font-family: 'News Cycle', Times, sans-serif;
}

img.klba-image {
img.jx-image {
width: 100%;
}

div.klba-slider {
div.jx-slider {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
cursor: pointer;
}

div.klba-handle {
div.jx-handle {
position: absolute;
height: 100%;
width: 40px;
Expand All @@ -27,15 +27,15 @@ div.klba-handle {
margin-left: -20px;
}

div.klba-control {
div.jx-control {
height: 100%;
margin-right: auto;
margin-left: auto;
width: 2px;
background-color: white;
}

div.klba-controller {
div.jx-controller {
position: absolute;
margin: auto;
top: 0;
Expand All @@ -46,7 +46,7 @@ div.klba-controller {
background-color: white;
}

div.klba-arrow {
div.jx-arrow {
position: absolute;
margin: auto;
top: 0;
Expand All @@ -56,48 +56,48 @@ div.klba-arrow {
transition: all .2s ease;
}

div.klba-arrow.left {
div.jx-arrow.left {
left: 2px;
border-style: solid;
border-width: 8px 8px 8px 0;
border-color: transparent white transparent transparent;
}

div.klba-arrow.right {
div.jx-arrow.right {
right: 2px;
border-style: solid;
border-width: 8px 0px 8px 8px;
border-color: transparent transparent transparent white;
}

div.klba-handle:hover div.klba-arrow.left {
div.jx-handle:hover div.jx-arrow.left {
left: -1px;
}

div.klba-handle:hover div.klba-arrow.right {
div.jx-handle:hover div.jx-arrow.right {
right: -1px;
}


div.klba-image {
div.jx-image {
height: 100%;
display: inline-block;
top: 0;
overflow: hidden;
background-size: cover;
}

div.klba-image.left {
div.jx-image.left {
left: 0;
background-position: left;
}

div.klba-image.right {
div.jx-image.right {
right: 0;
background-position: right;
}

div.klba-image div.klba-label {
div.jx-image div.jx-label {
padding-left: 1em;
padding-right: 1em;
padding-top: .3em;
Expand All @@ -114,20 +114,20 @@ div.klba-image div.klba-label {
vertical-align: middle;
}

div.klba-image.left div.klba-label {
div.jx-image.left div.jx-label {
float: left;
left: 0;
}

div.klba-image.right div.klba-label {
div.jx-image.right div.jx-label {
float: right;
right: 0;
}

div.klba-credit {
div.jx-credit {
}

div.klba-credit em {
div.jx-credit em {
font-weight: bold;
font-style: normal;
}
Expand All @@ -136,16 +136,16 @@ div.klba-credit em {
/* Animation
*/

div.klba-image.transition {
div.jx-image.transition {
transition: width .5s ease;
}

div.klba-handle.transition {
div.jx-handle.transition {
transition: left .5s ease;
}

/* Knight Lab Credit */
a.klba-knightlab {
a.jx-knightlab {
position: absolute;
bottom: 0;
right: 0;
Expand All @@ -156,15 +156,15 @@ a.klba-knightlab {
height: 1.2em;
}

a.klba-knightlab img {
a.jx-knightlab img {
display: inline-block;
vertical-align: middle;
height: 0.8em;
margin-right: 0.1em;
padding-bottom: 0.6em;
}

a.klba-knightlab p {
a.jx-knightlab p {
margin: 0;
display: inline-block;
color: black;
Expand Down
56 changes: 24 additions & 32 deletions slider/slider.js
View file
Expand Up @@ -87,7 +87,7 @@
}
}

function ImageSlider(selector, images, options) {
function JXSlider(selector, images, options) {

this.selector = selector;

Expand Down Expand Up @@ -146,7 +146,7 @@
}
}

ImageSlider.prototype = {
JXSlider.prototype = {

updateSlider: function(e, dragging) {

Expand Down Expand Up @@ -184,10 +184,10 @@

displayLabels: function() {
leftDate = document.createElement("div");
leftDate.className = 'klba-label';
leftDate.className = 'jx-label';
leftDate.textContent = this.imgBefore.label;
rightDate = document.createElement("div");
rightDate.className = 'klba-label';
rightDate.className = 'jx-label';
rightDate.textContent = this.imgAfter.label;

this.leftImage.appendChild(leftDate);
Expand All @@ -196,7 +196,7 @@

displayCredits: function() {
credit = document.createElement("div");
credit.className = "klba-credit";
credit.className = "jx-credit";

text = "<em>Before </em>" + this.imgBefore.credit +
" <em>After </em>" + this.imgAfter.credit;
Expand All @@ -221,6 +221,8 @@
width = (parseInt(getComputedStyle(this.wrapper)['width']));
height = (parseInt(getComputedStyle(this.wrapper)['height']));

console.log(this.selector, width, height);

if (width) {
height = width * (1 / ratio);
this.wrapper.style.height = height + "px";
Expand All @@ -241,31 +243,25 @@

this.wrapper = document.querySelector(this.selector);

// this.wrapper = this.wrapper[0];

// if (this.wrapper.classList.indexOf('klba-wrapper') < 0) {
// this.wrapper.classList.add("klba-wrapper");
// }

this.wrapper.style.width = this.imgBefore.image.naturalWidth

this.setWrapperDimensions();

this.slider = document.createElement("div");
this.slider.className = 'klba-slider';
this.slider.className = 'jx-slider';
this.wrapper.appendChild(this.slider);

this.handle = document.createElement("div");
this.handle.className = 'klba-handle';
this.handle.className = 'jx-handle';

this.rightImage = document.createElement("div");
this.rightImage.className = 'klba-image right';
this.rightImage.className = 'jx-image right';
this.leftImage = document.createElement("div");
this.leftImage.className = 'klba-image left'
this.leftImage.className = 'jx-image left'

this.labCredit = document.createElement("a");
this.labCredit.setAttribute('href', 'http://juxtapose.knightlab.com');
this.labCredit.className = 'klba-knightlab';
this.labCredit.className = 'jx-knightlab';
this.labImage = new Image();
this.labImage.src = 'http://blueline.knightlab.com/assets/logos/favicon.ico';
this.labCredit.appendChild(this.labImage);
Expand All @@ -283,10 +279,10 @@
this.control = document.createElement("div");
this.controller = document.createElement("div");

this.leftArrow.className = 'klba-arrow left';
this.rightArrow.className = 'klba-arrow right';
this.control.className = 'klba-control';
this.controller.className = 'klba-controller';
this.leftArrow.className = 'jx-arrow left';
this.rightArrow.className = 'jx-arrow right';
this.control.className = 'jx-control';
this.controller.className = 'jx-controller';

this.handle.appendChild(this.leftArrow);
this.handle.appendChild(this.control);
Expand All @@ -296,7 +292,7 @@
this.dragging = false;

//Add Interactivity
this._init(this);
this._init();
}
},

Expand All @@ -316,19 +312,18 @@
setImage(this.leftImage, this.imgBefore.image.src);
setImage(this.rightImage, this.imgAfter.image.src);

if (this.options.showLabels) {
if (this.options.showLabels == true) {
this.displayLabels();
}

if (this.options.showCredits) {
if (this.options.showCredits == true) {
this.displayCredits();
}


var self = this;
window.onresize = function(event) {
self.setWrapperDimensions()
};
window.addEventListener("resize", function() {
self.setWrapperDimensions();
});

this.slider.addEventListener("mousedown", function(d) {
d.preventDefault();
Expand Down Expand Up @@ -361,11 +356,8 @@
}
}

// window.imageSlider = imageSlider;

//Enable HTML Implementation
function scanPage() {
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Example.3A_using.C2.A0map.C2.A0generically_querySelectorAll
[].map.call(document.querySelectorAll('.juxtapose'), function(obj, i) {

var w = obj;
Expand All @@ -383,7 +375,7 @@
selector = '.' + specfificClass;

w.innerHTML = '';
slider = new ImageSlider(
slider = new JXSlider(
selector,
[
{
Expand Down

0 comments on commit d175a28

Please sign in to comment.