Skip to content

W
warm_city
Commit 9a1fec27 by Mykhailo Makohin
Options

add beerslider

parent 3d54a59b
Showing with 427 additions and 2154 deletions
.gitignore
......@@ -13,6 +13,7 @@
!/log/.keep
!/tmp/.keep
/vendor/*
/public/*
# Ignore Byebug command history file.
.byebug_history
Gemfile
......@@ -29,6 +29,7 @@ gem 'carrierwave'
gem 'cancancan'
gem 'cocoon'
gem 'friendly_id'
gem 'globalize'
group :development, :test do
gem 'byebug', platform: :mri
......
Gemfile.lock
......@@ -105,6 +105,10 @@ GEM
activerecord (>= 4.0.0)
globalid (0.4.2)
activesupport (>= 4.2.0)
globalize (5.2.0)
activemodel (>= 4.2, < 5.3)
activerecord (>= 4.2, < 5.3)
request_store (~> 1.0)
gmaps4rails (2.1.2)
haml (5.1.2)
temple (>= 0.8.0)
......@@ -225,6 +229,8 @@ GEM
rb-inotify (0.10.0)
ffi (~> 1.0)
remotipart (1.4.3)
request_store (1.4.1)
rack (>= 1.4)
responders (2.4.1)
actionpack (>= 4.2.0, < 6.0)
railties (>= 4.2.0, < 6.0)
......@@ -241,7 +247,7 @@ GEM
sprockets (>= 2.8, < 4.0)
sprockets-rails (>= 2.0, < 4.0)
tilt (>= 1.1, < 3)
sassc (2.2.0)
sassc (2.2.1)
ffi (~> 1.9)
simple_form (4.1.0)
actionpack (>= 5.0)
......@@ -298,6 +304,7 @@ DEPENDENCIES
coffee-rails (~> 4.2)
devise
friendly_id
globalize
gmaps4rails
haml
jbuilder (~> 2.5)
......
app/assets/javascripts/application.js
......@@ -19,13 +19,12 @@
//= require pgwslider.min
//= require jquery.royalslider.min
//= require jquery.event.move
//= require jquery.twentytwenty
//= require BeerSlider
//= require tooltipster.bundle.min
//= require freewall
//= require underscore
//= require jquery.autocomplete
//= require gmaps/google
//= require squares
//= require cocoon
//= require_tree .
app/assets/javascripts/jquery.event.move.js deleted 100644 → 0
// DOM.event.move
//
// 2.0.0
//
// Stephen Band
//
// Triggers 'movestart', 'move' and 'moveend' events after
// mousemoves following a mousedown cross a distance threshold,
// similar to the native 'dragstart', 'drag' and 'dragend' events.
// Move events are throttled to animation frames. Move event objects
// have the properties:
//
// pageX:
// pageY: Page coordinates of pointer.
// startX:
// startY: Page coordinates of pointer at movestart.
// distX:
// distY: Distance the pointer has moved since movestart.
// deltaX:
// deltaY: Distance the finger has moved since last event.
// velocityX:
// velocityY: Average velocity over last few events.
(function(fn) {
if (typeof define === 'function' && define.amd) {
define([], fn);
} else if ((typeof module !== "undefined" && module !== null) && module.exports) {
module.exports = fn;
} else {
fn();
}
})(function(){
var assign = Object.assign || window.jQuery && jQuery.extend;
// Number of pixels a pressed pointer travels before movestart
// event is fired.
var threshold = 8;
// Shim for requestAnimationFrame, falling back to timer. See:
// see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
var requestFrame = (function(){
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(fn, element){
return window.setTimeout(function(){
fn();
}, 25);
}
);
})();
// Shim for customEvent
// see https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
(function () {
if ( typeof window.CustomEvent === "function" ) return false;
function CustomEvent ( event, params ) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent( 'CustomEvent' );
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
return evt;
}
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
})();
var ignoreTags = {
textarea: true,
input: true,
select: true,
button: true
};
var mouseevents = {
move: 'mousemove',
cancel: 'mouseup dragstart',
end: 'mouseup'
};
var touchevents = {
move: 'touchmove',
cancel: 'touchend',
end: 'touchend'
};
var rspaces = /\s+/;
// DOM Events
var eventOptions = { bubbles: true, cancelable: true };
var eventsSymbol = typeof Symbol === "function" ? Symbol('events') : {};
function createEvent(type) {
return new CustomEvent(type, eventOptions);
}
function getEvents(node) {
return node[eventsSymbol] || (node[eventsSymbol] = {});
}
function on(node, types, fn, data, selector) {
types = types.split(rspaces);
var events = getEvents(node);
var i = types.length;
var handlers, type;
function handler(e) { fn(e, data); }
while (i--) {
type = types[i];
handlers = events[type] || (events[type] = []);
handlers.push([fn, handler]);
node.addEventListener(type, handler);
}
}
function off(node, types, fn, selector) {
types = types.split(rspaces);
var events = getEvents(node);
var i = types.length;
var type, handlers, k;
if (!events) { return; }
while (i--) {
type = types[i];
handlers = events[type];
if (!handlers) { continue; }
k = handlers.length;
while (k--) {
if (handlers[k][0] === fn) {
node.removeEventListener(type, handlers[k][1]);
handlers.splice(k, 1);
}
}
}
}
function trigger(node, type, properties) {
// Don't cache events. It prevents you from triggering an event of a
// given type from inside the handler of another event of that type.
var event = createEvent(type);
if (properties) { assign(event, properties); }
node.dispatchEvent(event);
}
// Constructors
function Timer(fn){
var callback = fn,
active = false,
running = false;
function trigger(time) {
if (active){
callback();
requestFrame(trigger);
running = true;
active = false;
}
else {
running = false;
}
}
this.kick = function(fn) {
active = true;
if (!running) { trigger(); }
};
this.end = function(fn) {
var cb = callback;
if (!fn) { return; }
// If the timer is not running, simply call the end callback.
if (!running) {
fn();
}
// If the timer is running, and has been kicked lately, then
// queue up the current callback and the end callback, otherwise
// just the end callback.
else {
callback = active ?
function(){ cb(); fn(); } :
fn ;
active = true;
}
};
}
// Functions
function noop() {}
function preventDefault(e) {
e.preventDefault();
}
function isIgnoreTag(e) {
return !!ignoreTags[e.target.tagName.toLowerCase()];
}
function isPrimaryButton(e) {
// Ignore mousedowns on any button other than the left (or primary)
// mouse button, or when a modifier key is pressed.
return (e.which === 1 && !e.ctrlKey && !e.altKey);
}
function identifiedTouch(touchList, id) {
var i, l;
if (touchList.identifiedTouch) {
return touchList.identifiedTouch(id);
}
// touchList.identifiedTouch() does not exist in
// webkit yet… we must do the search ourselves...
i = -1;
l = touchList.length;
while (++i < l) {
if (touchList[i].identifier === id) {
return touchList[i];
}
}
}
function changedTouch(e, data) {
var touch = identifiedTouch(e.changedTouches, data.identifier);
// This isn't the touch you're looking for.
if (!touch) { return; }
// Chrome Android (at least) includes touches that have not
// changed in e.changedTouches. That's a bit annoying. Check
// that this touch has changed.
if (touch.pageX === data.pageX && touch.pageY === data.pageY) { return; }
return touch;
}
// Handlers that decide when the first movestart is triggered
function mousedown(e){
// Ignore non-primary buttons
if (!isPrimaryButton(e)) { return; }
// Ignore form and interactive elements
if (isIgnoreTag(e)) { return; }
on(document, mouseevents.move, mousemove, e);
on(document, mouseevents.cancel, mouseend, e);
}
function mousemove(e, data){
checkThreshold(e, data, e, removeMouse);
}
function mouseend(e, data) {
removeMouse();
}
function removeMouse() {
off(document, mouseevents.move, mousemove);
off(document, mouseevents.cancel, mouseend);
}
function touchstart(e) {
// Don't get in the way of interaction with form elements
if (ignoreTags[e.target.tagName.toLowerCase()]) { return; }
var touch = e.changedTouches[0];
// iOS live updates the touch objects whereas Android gives us copies.
// That means we can't trust the touchstart object to stay the same,
// so we must copy the data. This object acts as a template for
// movestart, move and moveend event objects.
var data = {
target: touch.target,
pageX: touch.pageX,
pageY: touch.pageY,
identifier: touch.identifier,
// The only way to make handlers individually unbindable is by
// making them unique.
touchmove: function(e, data) { touchmove(e, data); },
touchend: function(e, data) { touchend(e, data); }
};
on(document, touchevents.move, data.touchmove, data);
on(document, touchevents.cancel, data.touchend, data);
}
function touchmove(e, data) {
var touch = changedTouch(e, data);
if (!touch) { return; }
checkThreshold(e, data, touch, removeTouch);
}
function touchend(e, data) {
var touch = identifiedTouch(e.changedTouches, data.identifier);
if (!touch) { return; }
removeTouch(data);
}
function removeTouch(data) {
off(document, touchevents.move, data.touchmove);
off(document, touchevents.cancel, data.touchend);
}
function checkThreshold(e, data, touch, fn) {
var distX = touch.pageX - data.pageX;
var distY = touch.pageY - data.pageY;
// Do nothing if the threshold has not been crossed.
if ((distX * distX) + (distY * distY) < (threshold * threshold)) { return; }
triggerStart(e, data, touch, distX, distY, fn);
}
function triggerStart(e, data, touch, distX, distY, fn) {
var touches = e.targetTouches;
var time = e.timeStamp - data.timeStamp;
// Create a movestart object with some special properties that
// are passed only to the movestart handlers.
var template = {
altKey: e.altKey,
ctrlKey: e.ctrlKey,
shiftKey: e.shiftKey,
startX: data.pageX,
startY: data.pageY,
distX: distX,
distY: distY,
deltaX: distX,
deltaY: distY,
pageX: touch.pageX,
pageY: touch.pageY,
velocityX: distX / time,
velocityY: distY / time,
identifier: data.identifier,
targetTouches: touches,
finger: touches ? touches.length : 1,
enableMove: function() {
this.moveEnabled = true;
this.enableMove = noop;
e.preventDefault();
}
};
// Trigger the movestart event.
trigger(data.target, 'movestart', template);
// Unbind handlers that tracked the touch or mouse up till now.
fn(data);
}
// Handlers that control what happens following a movestart
function activeMousemove(e, data) {
var timer = data.timer;
data.touch = e;
data.timeStamp = e.timeStamp;
timer.kick();
}
function activeMouseend(e, data) {
var target = data.target;
var event = data.event;
var timer = data.timer;
removeActiveMouse();
endEvent(target, event, timer, function() {
// Unbind the click suppressor, waiting until after mouseup
// has been handled.
setTimeout(function(){
off(target, 'click', preventDefault);
}, 0);
});
}
function removeActiveMouse() {
off(document, mouseevents.move, activeMousemove);
off(document, mouseevents.end, activeMouseend);
}
function activeTouchmove(e, data) {
var event = data.event;
var timer = data.timer;
var touch = changedTouch(e, event);
if (!touch) { return; }
// Stop the interface from gesturing
e.preventDefault();
event.targetTouches = e.targetTouches;
data.touch = touch;
data.timeStamp = e.timeStamp;
timer.kick();
}
function activeTouchend(e, data) {
var target = data.target;
var event = data.event;
var timer = data.timer;
var touch = identifiedTouch(e.changedTouches, event.identifier);
// This isn't the touch you're looking for.
if (!touch) { return; }
removeActiveTouch(data);
endEvent(target, event, timer);
}
function removeActiveTouch(data) {
off(document, touchevents.move, data.activeTouchmove);
off(document, touchevents.end, data.activeTouchend);
}
// Logic for triggering move and moveend events
function updateEvent(event, touch, timeStamp) {
var time = timeStamp - event.timeStamp;
event.distX = touch.pageX - event.startX;
event.distY = touch.pageY - event.startY;
event.deltaX = touch.pageX - event.pageX;
event.deltaY = touch.pageY - event.pageY;
// Average the velocity of the last few events using a decay
// curve to even out spurious jumps in values.
event.velocityX = 0.3 * event.velocityX + 0.7 * event.deltaX / time;
event.velocityY = 0.3 * event.velocityY + 0.7 * event.deltaY / time;
event.pageX = touch.pageX;
event.pageY = touch.pageY;
}
function endEvent(target, event, timer, fn) {
timer.end(function(){
trigger(target, 'moveend', event);
return fn && fn();
});
}
// Set up the DOM
function movestart(e) {
if (e.defaultPrevented) { return; }
if (!e.moveEnabled) { return; }
var event = {
startX: e.startX,
startY: e.startY,
pageX: e.pageX,
pageY: e.pageY,
distX: e.distX,
distY: e.distY,
deltaX: e.deltaX,
deltaY: e.deltaY,
velocityX: e.velocityX,
velocityY: e.velocityY,
identifier: e.identifier,
targetTouches: e.targetTouches,
finger: e.finger
};
var data = {
target: e.target,
event: event,
timer: new Timer(update),
touch: undefined,
timeStamp: e.timeStamp
};
function update(time) {
updateEvent(event, data.touch, data.timeStamp);
trigger(data.target, 'move', event);
}
if (e.identifier === undefined) {
// We're dealing with a mouse event.
// Stop clicks from propagating during a move
on(e.target, 'click', preventDefault);
on(document, mouseevents.move, activeMousemove, data);
on(document, mouseevents.end, activeMouseend, data);
}
else {
// In order to unbind correct handlers they have to be unique
data.activeTouchmove = function(e, data) { activeTouchmove(e, data); };
data.activeTouchend = function(e, data) { activeTouchend(e, data); };
// We're dealing with a touch.
on(document, touchevents.move, data.activeTouchmove, data);
on(document, touchevents.end, data.activeTouchend, data);
}
}
on(document, 'mousedown', mousedown);
on(document, 'touchstart', touchstart);
on(document, 'movestart', movestart);
// jQuery special events
//
// jQuery event objects are copies of DOM event objects. They need
// a little help copying the move properties across.
if (!window.jQuery) { return; }
var properties = ("startX startY pageX pageY distX distY deltaX deltaY velocityX velocityY").split(' ');
function enableMove1(e) { e.enableMove(); }
function enableMove2(e) { e.enableMove(); }
function enableMove3(e) { e.enableMove(); }
function add(handleObj) {
var handler = handleObj.handler;
handleObj.handler = function(e) {
// Copy move properties across from originalEvent
var i = properties.length;
var property;
while(i--) {
property = properties[i];
e[property] = e.originalEvent[property];
}
handler.apply(this, arguments);
};
}
jQuery.event.special.movestart = {
setup: function() {
// Movestart must be enabled to allow other move events
on(this, 'movestart', enableMove1);
// Do listen to DOM events
return false;
},
teardown: function() {
off(this, 'movestart', enableMove1);
return false;
},
add: add
};
jQuery.event.special.move = {
setup: function() {
on(this, 'movestart', enableMove2);
return false;
},
teardown: function() {
off(this, 'movestart', enableMove2);
return false;
},
add: add
};
jQuery.event.special.moveend = {
setup: function() {
on(this, 'movestart', enableMove3);
return false;
},
teardown: function() {
off(this, 'movestart', enableMove3);
return false;
},
add: add
};
});
app/assets/javascripts/jquery.twentytwenty.js deleted 100644 → 0
(function($){
$.fn.twentytwenty = function(options) {
var options = $.extend({
default_offset_pct: 0.5,
orientation: 'horizontal',
before_label: 'Before',
after_label: 'After',
no_overlay: false,
move_slider_on_hover: false,
move_with_handle_only: true,
click_to_move: false
}, options);
return this.each(function() {
var sliderPct = options.default_offset_pct;
var container = $(this);
var sliderOrientation = options.orientation;
var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
if(!options.no_overlay) {
container.append("<div class='twentytwenty-overlay'></div>");
var overlay = container.find(".twentytwenty-overlay");
overlay.append("<div class='twentytwenty-before-label' data-content='"+options.before_label+"'></div>");
overlay.append("<div class='twentytwenty-after-label' data-content='"+options.after_label+"'></div>");
}
var beforeImg = container.find("img:first");
var afterImg = container.find("img:last");
container.append("<div class='twentytwenty-handle'></div>");
var slider = container.find(".twentytwenty-handle");
slider.append("<span class='twentytwenty-" + beforeDirection + "-arrow'></span>");
slider.append("<span class='twentytwenty-" + afterDirection + "-arrow'></span>");
container.addClass("twentytwenty-container");
beforeImg.addClass("twentytwenty-before");
afterImg.addClass("twentytwenty-after");
var calcOffset = function(dimensionPct) {
var w = beforeImg.width();
var h = beforeImg.height();
return {
w: w+"px",
h: h+"px",
cw: (dimensionPct*w)+"px",
ch: (dimensionPct*h)+"px"
};
};
var adjustContainer = function(offset) {
if (sliderOrientation === 'vertical') {
beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
afterImg.css("clip", "rect("+offset.ch+","+offset.w+","+offset.h+",0)");
}
else {
beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
afterImg.css("clip", "rect(0,"+offset.w+","+offset.h+","+offset.cw+")");
}
container.css("height", offset.h);
};
var adjustSlider = function(pct) {
var offset = calcOffset(pct);
slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
adjustContainer(offset);
};
// Return the number specified or the min/max number if it outside the range given.
var minMaxNumber = function(num, min, max) {
return Math.max(min, Math.min(max, num));
};
// Calculate the slider percentage based on the position.
var getSliderPercentage = function(positionX, positionY) {
var sliderPercentage = (sliderOrientation === 'vertical') ?
(positionY-offsetY)/imgHeight :
(positionX-offsetX)/imgWidth;
return minMaxNumber(sliderPercentage, 0, 1);
};
$(window).on("resize.twentytwenty", function(e) {
adjustSlider(sliderPct);
});
var offsetX = 0;
var offsetY = 0;
var imgWidth = 0;
var imgHeight = 0;
var onMoveStart = function(e) {
if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
e.preventDefault();
}
else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical') {
e.preventDefault();
}
container.addClass("active");
offsetX = container.offset().left;
offsetY = container.offset().top;
imgWidth = beforeImg.width();
imgHeight = beforeImg.height();
};
var onMove = function(e) {
if (container.hasClass("active")) {
sliderPct = getSliderPercentage(e.pageX, e.pageY);
adjustSlider(sliderPct);
}
};
var onMoveEnd = function() {
container.removeClass("active");
};
var moveTarget = options.move_with_handle_only ? slider : container;
moveTarget.on("movestart",onMoveStart);
moveTarget.on("move",onMove);
moveTarget.on("moveend",onMoveEnd);
if (options.move_slider_on_hover) {
container.on("mouseenter", onMoveStart);
container.on("mousemove", onMove);
container.on("mouseleave", onMoveEnd);
}
slider.on("touchmove", function(e) {
e.preventDefault();
});
container.find("img").on("mousedown", function(event) {
event.preventDefault();
});
if (options.click_to_move) {
container.on('click', function(e) {
offsetX = container.offset().left;
offsetY = container.offset().top;
imgWidth = beforeImg.width();
imgHeight = beforeImg.height();
sliderPct = getSliderPercentage(e.pageX, e.pageY);
adjustSlider(sliderPct);
});
}
$(window).trigger("resize.twentytwenty");
});
};
})(jQuery);
app/assets/javascripts/main.js
......@@ -24,7 +24,7 @@ jQuery(document).ready(function($){
topTip();
// toolinitTooltipster();
playStopVideoInModal();
initTwentytwenty();
// initTwentytwenty();
scrollToTop();
// $('[data-toggle="popover"]').popover({title: "<span class=\"usr_surname\">Фондар</span><span class=\"usr_name\">Вікторія Тараневська <a href=\"#\" class=\"round_link\"><i class=\"icon icon_fb\"></i></span>", content: "<div class=\"usr_contributions\">Внесків 3</div><div class=\"usr_funds\"><div class=\"usr_funds_value\">на суму: 14 200 UAH</div></div><div class=\"usr_volunteering\">Волонтерство 2</div>", html: true, placement: "top"});
......@@ -49,10 +49,11 @@ function scrollToTop() {
function initTwentytwenty() {
$(window).on("load", function(){
$(".twentytwenty-container").twentytwenty();
$(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
});
}
function playStopVideoInModal(){
$('body').on('click', '.tooltipster_img', function(){
var src = $(this).attr('href');
......
app/assets/stylesheets/application.css
/*
*=require_self
*/
@import url("normalize.css");
@import url("outdatedBrowser.min.css");
@import url("main.css");
\ No newline at end of file
@import url("main.css");
@import url("BeerSlider.css")
\ No newline at end of file
app/assets/stylesheets/foundation.css deleted 100644 → 0
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
html,
body {
font-size: 100%; }
body {
background: white;
color: #222222;
padding: 0;
margin: 0;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
position: relative;
cursor: default; }
a:hover {
cursor: pointer; }
a:focus {
outline: none; }
img,
object,
embed {
max-width: 100%;
height: auto; }
object,
embed {
height: 100%; }
img {
-ms-interpolation-mode: bicubic; }
#map_canvas img,
#map_canvas embed,
#map_canvas object,
.map_canvas img,
.map_canvas embed,
.map_canvas object {
max-width: none !important; }
.left {
float: left !important; }
.right {
float: right !important; }
.text-left {
text-align: left !important; }
.text-right {
text-align: right !important; }
.text-center {
text-align: center !important; }
.text-justify {
text-align: justify !important; }
.hide {
display: none; }
.antialiased {
-webkit-font-smoothing: antialiased; }
img {
display: inline-block;
vertical-align: middle; }
textarea {
height: auto;
min-height: 50px; }
select {
width: 100%; }
/* Grid HTML Classes */
.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 62.5em;
*zoom: 1; }
.row:before, .row:after {
content: " ";
display: table; }
.row:after {
clear: both; }
.row.collapse .column,
.row.collapse .columns {
position: relative;
padding-left: 0;
padding-right: 0;
float: left; }
.row .row {
width: auto;
margin-left: -0.9375em;
margin-right: -0.9375em;
margin-top: 0;
margin-bottom: 0;
max-width: none;
*zoom: 1; }
.row .row:before, .row .row:after {
content: " ";
display: table; }
.row .row:after {
clear: both; }
.row .row.collapse {
width: auto;
margin: 0;
max-width: none;
*zoom: 1; }
.row .row.collapse:before, .row .row.collapse:after {
content: " ";
display: table; }
.row .row.collapse:after {
clear: both; }
.column,
.columns {
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
width: 100%;
float: left; }
@media only screen {
.column,
.columns {
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
float: left; }
.small-1 {
position: relative;
width: 8.33333%; }
.small-2 {
position: relative;
width: 16.66667%; }
.small-3 {
position: relative;
width: 25%; }
.small-4 {
position: relative;
width: 33.33333%; }
.small-5 {
position: relative;
width: 41.66667%; }
.small-6 {
position: relative;
width: 50%; }
.small-7 {
position: relative;
width: 58.33333%; }
.small-8 {
position: relative;
width: 66.66667%; }
.small-9 {
position: relative;
width: 75%; }
.small-10 {
position: relative;
width: 83.33333%; }
.small-11 {
position: relative;
width: 91.66667%; }
.small-12 {
position: relative;
width: 100%; }
.small-offset-0 {
position: relative;
margin-left: 0%; }
.small-offset-1 {
position: relative;
margin-left: 8.33333%; }
.small-offset-2 {
position: relative;
margin-left: 16.66667%; }
.small-offset-3 {
position: relative;
margin-left: 25%; }
.small-offset-4 {
position: relative;
margin-left: 33.33333%; }
.small-offset-5 {
position: relative;
margin-left: 41.66667%; }
.small-offset-6 {
position: relative;
margin-left: 50%; }
.small-offset-7 {
position: relative;
margin-left: 58.33333%; }
.small-offset-8 {
position: relative;
margin-left: 66.66667%; }
.small-offset-9 {
position: relative;
margin-left: 75%; }
.small-offset-10 {
position: relative;
margin-left: 83.33333%; }
[class*="column"] + [class*="column"]:last-child {
float: right; }
[class*="column"] + [class*="column"].end {
float: left; }
.column.small-centered,
.columns.small-centered {
position: relative;
margin-left: auto;
margin-right: auto;
float: none !important; } }
/* Styles for screens that are atleast 768px; */
@media only screen and (min-width: 768px) {
.large-1 {
position: relative;
width: 8.33333%; }
.large-2 {
position: relative;
width: 16.66667%; }
.large-3 {
position: relative;
width: 25%; }
.large-4 {
position: relative;
width: 33.33333%; }
.large-5 {
position: relative;
width: 41.66667%; }
.large-6 {
position: relative;
width: 50%; }
.large-7 {
position: relative;
width: 58.33333%; }
.large-8 {
position: relative;
width: 66.66667%; }
.large-9 {
position: relative;
width: 75%; }
.large-10 {
position: relative;
width: 83.33333%; }
.large-11 {
position: relative;
width: 91.66667%; }
.large-12 {
position: relative;
width: 100%; }
.row .large-offset-0 {
position: relative;
margin-left: 0%; }
.row .large-offset-1 {
position: relative;
margin-left: 8.33333%; }
.row .large-offset-2 {
position: relative;
margin-left: 16.66667%; }
.row .large-offset-3 {
position: relative;
margin-left: 25%; }
.row .large-offset-4 {
position: relative;
margin-left: 33.33333%; }
.row .large-offset-5 {
position: relative;
margin-left: 41.66667%; }
.row .large-offset-6 {
position: relative;
margin-left: 50%; }
.row .large-offset-7 {
position: relative;
margin-left: 58.33333%; }
.row .large-offset-8 {
position: relative;
margin-left: 66.66667%; }
.row .large-offset-9 {
position: relative;
margin-left: 75%; }
.row .large-offset-10 {
position: relative;
margin-left: 83.33333%; }
.row .large-offset-11 {
position: relative;
margin-left: 91.66667%; }
.push-1 {
position: relative;
left: 8.33333%;
right: auto; }
.pull-1 {
position: relative;
right: 8.33333%;
left: auto; }
.push-2 {
position: relative;
left: 16.66667%;
right: auto; }
.pull-2 {
position: relative;
right: 16.66667%;
left: auto; }
.push-3 {
position: relative;
left: 25%;
right: auto; }
.pull-3 {
position: relative;
right: 25%;
left: auto; }
.push-4 {
position: relative;
left: 33.33333%;
right: auto; }
.pull-4 {
position: relative;
right: 33.33333%;
left: auto; }
.push-5 {
position: relative;
left: 41.66667%;
right: auto; }
.pull-5 {
position: relative;
right: 41.66667%;
left: auto; }
.push-6 {
position: relative;
left: 50%;
right: auto; }
.pull-6 {
position: relative;
right: 50%;
left: auto; }
.push-7 {
position: relative;
left: 58.33333%;
right: auto; }
.pull-7 {
position: relative;
right: 58.33333%;
left: auto; }
.push-8 {
position: relative;
left: 66.66667%;
right: auto; }
.pull-8 {
position: relative;
right: 66.66667%;
left: auto; }
.push-9 {
position: relative;
left: 75%;
right: auto; }
.pull-9 {
position: relative;
right: 75%;
left: auto; }
.push-10 {
position: relative;
left: 83.33333%;
right: auto; }
.pull-10 {
position: relative;
right: 83.33333%;
left: auto; }
.push-11 {
position: relative;
left: 91.66667%;
right: auto; }
.pull-11 {
position: relative;
right: 91.66667%;
left: auto; }
.column.large-centered,
.columns.large-centered {
position: relative;
margin-left: auto;
margin-right: auto;
float: none !important; }
.column.large-uncentered,
.columns.large-uncentered {
margin-left: 0;
margin-right: 0;
float: left !important; }
.column.large-uncentered.opposite,
.columns.large-uncentered.opposite {
float: right !important; } }
app/assets/stylesheets/twentytwenty-no-compass.css deleted 100644 → 0
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
content: " ";
display: block;
background: #fff;
position: absolute;
z-index: 30; }
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
width: 3px;
height: 9999px;
left: 50%;
margin-left: -1.5px; }
.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
width: 9999px;
height: 3px;
top: 50%;
margin-top: -1.5px; }
.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%; }
.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
transition-duration: 0.5s; }
.twentytwenty-before-label, .twentytwenty-after-label {
transition-property: opacity; }
.twentytwenty-before-label:before, .twentytwenty-after-label:before {
color: #fff;
font-size: 13px;
letter-spacing: 0.1em; }
.twentytwenty-before-label:before, .twentytwenty-after-label:before {
position: absolute;
background: rgba(255, 255, 255, 0.2);
line-height: 38px;
padding: 0 20px;
border-radius: 2px; }
.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
top: 50%;
margin-top: -19px; }
.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
left: 50%;
margin-left: -45px;
text-align: center;
width: 90px; }
.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
width: 0;
height: 0;
border: 6px inset transparent;
position: absolute; }
.twentytwenty-left-arrow, .twentytwenty-right-arrow {
top: 50%;
margin-top: -6px; }
.twentytwenty-up-arrow, .twentytwenty-down-arrow {
left: 50%;
margin-left: -6px; }
.twentytwenty-container {
box-sizing: content-box;
z-index: 0;
overflow: hidden;
position: relative;
-webkit-user-select: none;
-moz-user-select: none; }
.twentytwenty-container img {
max-width: 100%;
position: absolute;
top: 0;
display: block; }
.twentytwenty-container.active .twentytwenty-overlay,
.twentytwenty-container.active :hover.twentytwenty-overlay {
background: transparent; }
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label,
.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
opacity: 0; }
.twentytwenty-container * {
box-sizing: content-box; }
.twentytwenty-before-label {
opacity: 0; }
.twentytwenty-before-label:before {
content: attr(data-content); }
.twentytwenty-after-label {
opacity: 0; }
.twentytwenty-after-label:before {
content: attr(data-content); }
.twentytwenty-horizontal .twentytwenty-before-label:before {
left: 10px; }
.twentytwenty-horizontal .twentytwenty-after-label:before {
right: 10px; }
.twentytwenty-vertical .twentytwenty-before-label:before {
top: 10px; }
.twentytwenty-vertical .twentytwenty-after-label:before {
bottom: 10px; }
.twentytwenty-overlay {
transition-property: background;
background: transparent;
z-index: 25; }
.twentytwenty-overlay:hover {
background: rgba(0, 0, 0, 0.5); }
.twentytwenty-overlay:hover .twentytwenty-after-label {
opacity: 1; }
.twentytwenty-overlay:hover .twentytwenty-before-label {
opacity: 1; }
.twentytwenty-before {
z-index: 20; }
.twentytwenty-after {
z-index: 10; }
.twentytwenty-handle {
height: 38px;
width: 38px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -22px;
margin-top: -22px;
border: 3px solid #fff;
border-radius: 1000px;
box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
z-index: 40;
cursor: pointer; }
.twentytwenty-horizontal .twentytwenty-handle:before {
bottom: 50%;
margin-bottom: 22px;
box-shadow: 0 3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-horizontal .twentytwenty-handle:after {
top: 50%;
margin-top: 22px;
box-shadow: 0 -3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-vertical .twentytwenty-handle:before {
left: 50%;
margin-left: 22px;
box-shadow: 3px 0 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-vertical .twentytwenty-handle:after {
right: 50%;
margin-right: 22px;
box-shadow: -3px 0 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-left-arrow {
border-right: 6px solid #fff;
left: 50%;
margin-left: -17px; }
.twentytwenty-right-arrow {
border-left: 6px solid #fff;
right: 50%;
margin-right: -17px; }
.twentytwenty-up-arrow {
border-bottom: 6px solid #fff;
top: 50%;
margin-top: -17px; }
.twentytwenty-down-arrow {
border-top: 6px solid #fff;
bottom: 50%;
margin-bottom: -17px; }
app/assets/stylesheets/twentytwenty.css deleted 100644 → 0
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
content: " ";
display: block;
background: white;
position: absolute;
z-index: 30;
-webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
-moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
width: 3px;
height: 9999px;
left: 50%;
margin-left: -1.5px; }
.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
width: 9999px;
height: 3px;
top: 50%;
margin-top: -1.5px; }
.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%; }
.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
transition-duration: 0.5s; }
.twentytwenty-before-label, .twentytwenty-after-label {
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
transition-property: opacity; }
.twentytwenty-before-label:before, .twentytwenty-after-label:before {
color: white;
font-size: 13px;
letter-spacing: 0.1em; }
.twentytwenty-before-label:before, .twentytwenty-after-label:before {
position: absolute;
background: rgba(255, 255, 255, 0.2);
line-height: 38px;
padding: 0 20px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; }
.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
top: 50%;
margin-top: -19px; }
.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
left: 50%;
margin-left: -45px;
text-align: center;
width: 90px; }
.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
width: 0;
height: 0;
border: 6px inset transparent;
position: absolute; }
.twentytwenty-left-arrow, .twentytwenty-right-arrow {
top: 50%;
margin-top: -6px; }
.twentytwenty-up-arrow, .twentytwenty-down-arrow {
left: 50%;
margin-left: -6px; }
.twentytwenty-container {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
z-index: 0;
overflow: hidden;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none; }
.twentytwenty-container img {
max-width: 100%;
position: absolute;
top: 0;
display: block; }
.twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
background: rgba(0, 0, 0, 0); }
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
opacity: 0; }
.twentytwenty-container * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box; }
.twentytwenty-before-label {
opacity: 0; }
.twentytwenty-before-label:before {
content: attr(data-content); }
.twentytwenty-after-label {
opacity: 0; }
.twentytwenty-after-label:before {
content: attr(data-content); }
.twentytwenty-horizontal .twentytwenty-before-label:before {
left: 10px; }
.twentytwenty-horizontal .twentytwenty-after-label:before {
right: 10px; }
.twentytwenty-vertical .twentytwenty-before-label:before {
top: 10px; }
.twentytwenty-vertical .twentytwenty-after-label:before {
bottom: 10px; }
.twentytwenty-overlay {
-webkit-transition-property: background;
-moz-transition-property: background;
transition-property: background;
background: rgba(0, 0, 0, 0);
z-index: 25; }
.twentytwenty-overlay:hover {
background: rgba(0, 0, 0, 0.5); }
.twentytwenty-overlay:hover .twentytwenty-after-label {
opacity: 1; }
.twentytwenty-overlay:hover .twentytwenty-before-label {
opacity: 1; }
.twentytwenty-before {
z-index: 20; }
.twentytwenty-after {
z-index: 10; }
.twentytwenty-handle {
height: 38px;
width: 38px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -22px;
margin-top: -22px;
border: 3px solid white;
-webkit-border-radius: 1000px;
-moz-border-radius: 1000px;
border-radius: 1000px;
-webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
-moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
z-index: 40;
cursor: pointer; }
.twentytwenty-horizontal .twentytwenty-handle:before {
bottom: 50%;
margin-bottom: 22px;
-webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
-moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-horizontal .twentytwenty-handle:after {
top: 50%;
margin-top: 22px;
-webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
-moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-vertical .twentytwenty-handle:before {
left: 50%;
margin-left: 22px;
-webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
-moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-vertical .twentytwenty-handle:after {
right: 50%;
margin-right: 22px;
-webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
-moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-left-arrow {
border-right: 6px solid white;
left: 50%;
margin-left: -17px; }
.twentytwenty-right-arrow {
border-left: 6px solid white;
right: 50%;
margin-right: -17px; }
.twentytwenty-up-arrow {
border-bottom: 6px solid white;
top: 50%;
margin-top: -17px; }
.twentytwenty-down-arrow {
border-top: 6px solid white;
bottom: 50%;
margin-bottom: -17px; }
app/controllers/projects_controller.rb
class ProjectsController < ApplicationController
load_and_authorize_resource
# def index
# @projects = collection
# end
def show
@project = resource
@project = Project.friendly.find(params[:id])
end
# def new
# @project = Project.new
# end
# def create
# @project = Project.new(project_params)
# if @project.save
# redirect_to project_path(@project)
# else
# render :new
# end
# end
# def edit
# @project = resource
# end
# def update
# @project = resource
# if @project.update(project_params)
# redirect_to project_path(project: @project)
# else
# render :edit
# end
# end
# def destroy
# @project = resource
# @project.destroy
# redirect_to projects_path
# end
private
# def collection
# Project.all
# end
def resource
Project.friendly.find(params[:id])
end
# def project_params
# params.require(:project).permit(:photo, :photo_preview, :photo_before, :photo_after, :type,
# :status, :name, :name_eng, :individual_type_ua, :individual_type_en,
# :title_ua, :title_en, :heading_ua, :heading_en, :slug, :short_description_ua,
# :short_description_en, :description_ua,:description_en, :site,
# :link_to_facebook, :required_amount, :related_links_ua, :related_links_en,
# :footer_photo,
# project_photos_attributes: [ :id, :photo, :title_uk, :title_en, :_destroy] )
# end
end
\ No newline at end of file
app/views/layouts/application.html.haml
......@@ -17,6 +17,7 @@
%link{:href => "//fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&subset=cyrillic-ext", :rel => "stylesheet"}
%link{:href => "//fonts.googleapis.com/css?family=Roboto+Slab:300,400&subset=cyrillic-ext", :rel => "stylesheet"}
%link{:href => "//fonts.googleapis.com/css?family=Roboto:300,500&subset=cyrillic-ext", :rel => "stylesheet"}
%link{:href => "https://fonts.googleapis.com/css?family=Montserrat:300|Six+Caps", :rel => "stylesheet"}
/Favicons + Touch Icons
%link{:href => "favicons/apple-touch-icon57.png", :rel => "icon", :type => "image/png"}
%link{:href => "favicons/apple-touch-icon57.png", :rel => "apple-touch-icon", :sizes => "57x57"}
......
app/views/partials/_white_header.html.haml
......@@ -14,22 +14,20 @@
#bs-example-navbar-collapse-1.collapse.navbar-collapse
%ul.nav.navbar-nav
%li
%a{:href => "#"} про палатформу
%a{:href => "#"}= t ("header.platfform")
%li
%a{:href => "#"} Ґранти
%a{:href => "#"}= t ("header.grants")
%li
%a{:href => "#"} Проекти
%li.active
%a{:href => "#"}
Партнери
%span.sr-only (current)
%a{:href => "#"}= t ("header.projects")
%li
%a{:href => "#"} DIGITAL WORKSHOP
%a{:href => "#"}= t ("header.partners")
%li
%a{:href => "#"} Про нас
%a{:href => "#"}= t ("header.digital")
%li
%a{:href => "#"} Новини
%a{:href => "#"}= t ("header.about_us")
%li
%a{:href => "#"} Звіти
%a{:href => "#"}= t ("header.news")
%li
%a{:href => "#"}= t ("header.reports")
%li
%a{:href => "#"} connectif
app/views/projects/show.html.haml
......@@ -3,16 +3,16 @@
.head_block
.container
.info_title
%span.info_title_text Проект
%a.info_link{"data-target" => "#modal3", "data-toggle" => "modal", :href => "#"} urbanspaceradio.com
%span.info_title_text= t "#{@project.types}"
%a.info_link{"data-target" => "#modal3", "data-toggle" => "modal", :href => "#"} #{@project.site}
%h2.heading_with_btn
%span Urban Space Radio
%a.btn.btn_default{"data-target" => "#modal", "data-toggle" => "modal", :href => "#"}
%i.icon.icon_plus>
підтримати проект
= t ('donate')
.large_progress_wrap
.large_progress_title
Реалізовано
= t "#{@project.status}"
.large_progress.clearfix
.progress
.progress-bar{"aria-valuemax" => "100", "aria-valuemin" => "100", "aria-valuenow" => "100", :role => "progressbar", :style => "width: 100%;"}
......@@ -31,7 +31,7 @@
.progress_details.clearfix
.progress_details_item
бюджет проекту
%strong 120 200 UAH
%strong #{@project.required_amount} UAH
.progress_details_item
зібраних коштів
%strong 14 200 UAH
......@@ -46,9 +46,10 @@
Urban Space Radio має підвищити рівень залученості громадськості до процесів розвитку наших міст. Це досягатиметься через створення незалежного і на 100% прозорого медіа-каналу. Прозорість і публічність радіостанції буде інституційною та фізичною, адже її скляна студія буде розташована у публічному просторі – громадському ресторані
= succeed "." do
%strong Urban Space 100 у центрі міста
.twentytwenty-container
= image_tag(@project.photo.url)
= image_tag(@project.photo_preview.url)
#slider.beer-slider{"data-beer-label" => "before"}
= image_tag(@project.photo.url)
.beer-reveal{"data-beer-label" => "after"}
= image_tag(@project.photo_preview.url)
%p
Радіо мовитиме в інтернеті, в «Urban Space 100», а також частково в
%a{:href => "#"} FM-діапазоні
......@@ -66,18 +67,6 @@
%li активне включення громади у процес розробки концепції розвитку міста;
.imgs_wrap
.simple_slider.clearfix
/
<ul class="pgwSlider">
<li><img src="img/slide1.jpg" alt=""></li>
<li><img src="img/slide_mini.jpg" alt="" data-large-src="img/slide2.jpg"></li>
<li><img src="img/slide1.jpg" alt=""></li>
<li><img src="img/slide_mini.jpg" alt="" data-large-src="img/slide2.jpg"></li>
<li>
<a href="#" target="_blank">
<img src="img/slide2.jpg">
</a>
</li>
</ul>
#gallery-2.royalSlider.rsUni
%a.rsImg{:href => "img/slide2.jpg"}
%img.rsTmb{:src => "img/slide2.jpg"}/
......@@ -224,3 +213,5 @@
У випадку довгого заголовка який не бажано обрізати чи вкорочувати, буде так
%span.news_text
Досліджень, розробки законопроектів, підготовки кадрів та інших цілей на умовах, передбачених грантодавцем.
:javascript
new BeerSlider( document.getElementById( "slider" ) );
\ No newline at end of file
vendor/assets/javascripts/jquery.event.move.js
// DOM.event.move
// jquery.event.move
//
// 2.0.0
// 1.3.6
//
// Stephen Band
//
......@@ -11,156 +11,85 @@
// have the properties:
//
// pageX:
// pageY: Page coordinates of pointer.
// pageY: Page coordinates of pointer.
// startX:
// startY: Page coordinates of pointer at movestart.
// startY: Page coordinates of pointer at movestart.
// distX:
// distY: Distance the pointer has moved since movestart.
// distY: Distance the pointer has moved since movestart.
// deltaX:
// deltaY: Distance the finger has moved since last event.
// deltaY: Distance the finger has moved since last event.
// velocityX:
// velocityY: Average velocity over last few events.
// velocityY: Average velocity over last few events.
(function(fn) {
(function (module) {
if (typeof define === 'function' && define.amd) {
define([], fn);
} else if ((typeof module !== "undefined" && module !== null) && module.exports) {
module.exports = fn;
// AMD. Register as an anonymous module.
define(['jquery'], module);
} else {
fn();
}
})(function(){
var assign = Object.assign || window.jQuery && jQuery.extend;
// Number of pixels a pressed pointer travels before movestart
// event is fired.
var threshold = 8;
// Shim for requestAnimationFrame, falling back to timer. See:
// see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
var requestFrame = (function(){
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(fn, element){
return window.setTimeout(function(){
fn();
}, 25);
}
);
})();
// Shim for customEvent
// see https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
(function () {
if ( typeof window.CustomEvent === "function" ) return false;
function CustomEvent ( event, params ) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent( 'CustomEvent' );
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
return evt;
}
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
})();
var ignoreTags = {
textarea: true,
input: true,
select: true,
button: true
};
var mouseevents = {
move: 'mousemove',
cancel: 'mouseup dragstart',
end: 'mouseup'
};
var touchevents = {
move: 'touchmove',
cancel: 'touchend',
end: 'touchend'
};
var rspaces = /\s+/;
// DOM Events
var eventOptions = { bubbles: true, cancelable: true };
var eventsSymbol = typeof Symbol === "function" ? Symbol('events') : {};
function createEvent(type) {
return new CustomEvent(type, eventOptions);
// Browser globals
module(jQuery);
}
})(function(jQuery, undefined){
function getEvents(node) {
return node[eventsSymbol] || (node[eventsSymbol] = {});
}
function on(node, types, fn, data, selector) {
types = types.split(rspaces);
var events = getEvents(node);
var i = types.length;
var handlers, type;
function handler(e) { fn(e, data); }
while (i--) {
type = types[i];
handlers = events[type] || (events[type] = []);
handlers.push([fn, handler]);
node.addEventListener(type, handler);
}
}
function off(node, types, fn, selector) {
types = types.split(rspaces);
var events = getEvents(node);
var i = types.length;
var type, handlers, k;
if (!events) { return; }
while (i--) {
type = types[i];
handlers = events[type];
if (!handlers) { continue; }
k = handlers.length;
while (k--) {
if (handlers[k][0] === fn) {
node.removeEventListener(type, handlers[k][1]);
handlers.splice(k, 1);
}
}
}
}
function trigger(node, type, properties) {
// Don't cache events. It prevents you from triggering an event of a
// given type from inside the handler of another event of that type.
var event = createEvent(type);
if (properties) { assign(event, properties); }
node.dispatchEvent(event);
}
var // Number of pixels a pressed pointer travels before movestart
// event is fired.
threshold = 6,
add = jQuery.event.add,
remove = jQuery.event.remove,
// Just sugar, so we can have arguments in the same order as
// add and remove.
trigger = function(node, type, data) {
jQuery.event.trigger(type, data, node);
},
// Shim for requestAnimationFrame, falling back to timer. See:
// see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
requestFrame = (function(){
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(fn, element){
return window.setTimeout(function(){
fn();
}, 25);
}
);
})(),
ignoreTags = {
textarea: true,
input: true,
select: true,
button: true
},
mouseevents = {
move: 'mousemove',
cancel: 'mouseup dragstart',
end: 'mouseup'
},
touchevents = {
move: 'touchmove',
cancel: 'touchend',
end: 'touchend'
};
// Constructors
function Timer(fn){
var callback = fn,
active = false,
running = false;
function trigger(time) {
if (active){
callback();
......@@ -172,17 +101,17 @@
running = false;
}
}
this.kick = function(fn) {
active = true;
if (!running) { trigger(); }
};
this.end = function(fn) {
var cb = callback;
if (!fn) { return; }
// If the timer is not running, simply call the end callback.
if (!running) {
fn();
......@@ -192,9 +121,9 @@
// just the end callback.
else {
callback = active ?
function(){ cb(); fn(); } :
function(){ cb(); fn(); } :
fn ;
active = true;
}
};
......@@ -202,18 +131,27 @@
// Functions
function noop() {}
function returnTrue() {
return true;
}
function returnFalse() {
return false;
}
function preventDefault(e) {
e.preventDefault();
}
function isIgnoreTag(e) {
return !!ignoreTags[e.target.tagName.toLowerCase()];
function preventIgnoreTags(e) {
// Don't prevent interaction with form elements.
if (ignoreTags[ e.target.tagName.toLowerCase() ]) { return; }
e.preventDefault();
}
function isPrimaryButton(e) {
function isLeftButton(e) {
// Ignore mousedowns on any button other than the left (or primary)
// mouse button, or when a modifier key is pressed.
return (e.which === 1 && !e.ctrlKey && !e.altKey);
......@@ -225,13 +163,13 @@
if (touchList.identifiedTouch) {
return touchList.identifiedTouch(id);
}
// touchList.identifiedTouch() does not exist in
// webkit yet… we must do the search ourselves...
i = -1;
l = touchList.length;
while (++i < l) {
if (touchList[i].identifier === id) {
return touchList[i];
......@@ -239,8 +177,8 @@
}
}
function changedTouch(e, data) {
var touch = identifiedTouch(e.changedTouches, data.identifier);
function changedTouch(e, event) {
var touch = identifiedTouch(e.changedTouches, event.identifier);
// This isn't the touch you're looking for.
if (!touch) { return; }
......@@ -248,164 +186,192 @@
// Chrome Android (at least) includes touches that have not
// changed in e.changedTouches. That's a bit annoying. Check
// that this touch has changed.
if (touch.pageX === data.pageX && touch.pageY === data.pageY) { return; }
if (touch.pageX === event.pageX && touch.pageY === event.pageY) { return; }
return touch;
}
// Handlers that decide when the first movestart is triggered
function mousedown(e){
// Ignore non-primary buttons
if (!isPrimaryButton(e)) { return; }
var data;
// Ignore form and interactive elements
if (isIgnoreTag(e)) { return; }
if (!isLeftButton(e)) { return; }
on(document, mouseevents.move, mousemove, e);
on(document, mouseevents.cancel, mouseend, e);
data = {
target: e.target,
startX: e.pageX,
startY: e.pageY,
timeStamp: e.timeStamp
};
add(document, mouseevents.move, mousemove, data);
add(document, mouseevents.cancel, mouseend, data);
}
function mousemove(e, data){
function mousemove(e){
var data = e.data;
checkThreshold(e, data, e, removeMouse);
}
function mouseend(e, data) {
function mouseend(e) {
removeMouse();
}
function removeMouse() {
off(document, mouseevents.move, mousemove);
off(document, mouseevents.cancel, mouseend);
remove(document, mouseevents.move, mousemove);
remove(document, mouseevents.cancel, mouseend);
}
function touchstart(e) {
// Don't get in the way of interaction with form elements
if (ignoreTags[e.target.tagName.toLowerCase()]) { return; }
var touch, template;
var touch = e.changedTouches[0];
// Don't get in the way of interaction with form elements.
if (ignoreTags[ e.target.tagName.toLowerCase() ]) { return; }
touch = e.changedTouches[0];
// iOS live updates the touch objects whereas Android gives us copies.
// That means we can't trust the touchstart object to stay the same,
// so we must copy the data. This object acts as a template for
// movestart, move and moveend event objects.
var data = {
target: touch.target,
pageX: touch.pageX,
pageY: touch.pageY,
identifier: touch.identifier,
// The only way to make handlers individually unbindable is by
// making them unique.
touchmove: function(e, data) { touchmove(e, data); },
touchend: function(e, data) { touchend(e, data); }
template = {
target: touch.target,
startX: touch.pageX,
startY: touch.pageY,
timeStamp: e.timeStamp,
identifier: touch.identifier
};
on(document, touchevents.move, data.touchmove, data);
on(document, touchevents.cancel, data.touchend, data);
// Use the touch identifier as a namespace, so that we can later
// remove handlers pertaining only to this touch.
add(document, touchevents.move + '.' + touch.identifier, touchmove, template);
add(document, touchevents.cancel + '.' + touch.identifier, touchend, template);
}
function touchmove(e, data) {
var touch = changedTouch(e, data);
function touchmove(e){
var data = e.data,
touch = changedTouch(e, data);
if (!touch) { return; }
checkThreshold(e, data, touch, removeTouch);
}
function touchend(e, data) {
var touch = identifiedTouch(e.changedTouches, data.identifier);
function touchend(e) {
var template = e.data,
touch = identifiedTouch(e.changedTouches, template.identifier);
if (!touch) { return; }
removeTouch(data);
removeTouch(template.identifier);
}
function removeTouch(data) {
off(document, touchevents.move, data.touchmove);
off(document, touchevents.cancel, data.touchend);
function removeTouch(identifier) {
remove(document, '.' + identifier, touchmove);
remove(document, '.' + identifier, touchend);
}
function checkThreshold(e, data, touch, fn) {
var distX = touch.pageX - data.pageX;
var distY = touch.pageY - data.pageY;
// Logic for deciding when to trigger a movestart.
function checkThreshold(e, template, touch, fn) {
var distX = touch.pageX - template.startX,
distY = touch.pageY - template.startY;
// Do nothing if the threshold has not been crossed.
if ((distX * distX) + (distY * distY) < (threshold * threshold)) { return; }
triggerStart(e, data, touch, distX, distY, fn);
triggerStart(e, template, touch, distX, distY, fn);
}
function handled() {
// this._handled should return false once, and after return true.
this._handled = returnTrue;
return false;
}
function flagAsHandled(e) {
e._handled();
}
function triggerStart(e, data, touch, distX, distY, fn) {
var touches = e.targetTouches;
var time = e.timeStamp - data.timeStamp;
function triggerStart(e, template, touch, distX, distY, fn) {
var node = template.target,
touches, time;
touches = e.targetTouches;
time = e.timeStamp - template.timeStamp;
// Create a movestart object with some special properties that
// are passed only to the movestart handlers.
var template = {
altKey: e.altKey,
ctrlKey: e.ctrlKey,
shiftKey: e.shiftKey,
startX: data.pageX,
startY: data.pageY,
distX: distX,
distY: distY,
deltaX: distX,
deltaY: distY,
pageX: touch.pageX,
pageY: touch.pageY,
velocityX: distX / time,
velocityY: distY / time,
identifier: data.identifier,
targetTouches: touches,
finger: touches ? touches.length : 1,
enableMove: function() {
this.moveEnabled = true;
this.enableMove = noop;
e.preventDefault();
}
template.type = 'movestart';
template.distX = distX;
template.distY = distY;
template.deltaX = distX;
template.deltaY = distY;
template.pageX = touch.pageX;
template.pageY = touch.pageY;
template.velocityX = distX / time;
template.velocityY = distY / time;
template.targetTouches = touches;
template.finger = touches ?
touches.length :
1 ;
// The _handled method is fired to tell the default movestart
// handler that one of the move events is bound.
template._handled = handled;
// Pass the touchmove event so it can be prevented if or when
// movestart is handled.
template._preventTouchmoveDefault = function() {
e.preventDefault();
};
// Trigger the movestart event.
trigger(data.target, 'movestart', template);
trigger(template.target, template);
// Unbind handlers that tracked the touch or mouse up till now.
fn(data);
fn(template.identifier);
}
// Handlers that control what happens following a movestart
function activeMousemove(e, data) {
var timer = data.timer;
function activeMousemove(e) {
var timer = e.data.timer;
data.touch = e;
data.timeStamp = e.timeStamp;
e.data.touch = e;
e.data.timeStamp = e.timeStamp;
timer.kick();
}
function activeMouseend(e, data) {
var target = data.target;
var event = data.event;
var timer = data.timer;
function activeMouseend(e) {
var event = e.data.event,
timer = e.data.timer;
removeActiveMouse();
endEvent(target, event, timer, function() {
endEvent(event, timer, function() {
// Unbind the click suppressor, waiting until after mouseup
// has been handled.
setTimeout(function(){
off(target, 'click', preventDefault);
remove(event.target, 'click', returnFalse);
}, 0);
});
}
function removeActiveMouse() {
off(document, mouseevents.move, activeMousemove);
off(document, mouseevents.end, activeMouseend);
function removeActiveMouse(event) {
remove(document, mouseevents.move, activeMousemove);
remove(document, mouseevents.end, activeMouseend);
}
function activeTouchmove(e, data) {
var event = data.event;
var timer = data.timer;
var touch = changedTouch(e, event);
function activeTouchmove(e) {
var event = e.data.event,
timer = e.data.timer,
touch = changedTouch(e, event);
if (!touch) { return; }
......@@ -413,41 +379,40 @@
e.preventDefault();
event.targetTouches = e.targetTouches;
data.touch = touch;
data.timeStamp = e.timeStamp;
e.data.touch = touch;
e.data.timeStamp = e.timeStamp;
timer.kick();
}
function activeTouchend(e, data) {
var target = data.target;
var event = data.event;
var timer = data.timer;
var touch = identifiedTouch(e.changedTouches, event.identifier);
function activeTouchend(e) {
var event = e.data.event,
timer = e.data.timer,
touch = identifiedTouch(e.changedTouches, event.identifier);
// This isn't the touch you're looking for.
if (!touch) { return; }
removeActiveTouch(data);
endEvent(target, event, timer);
removeActiveTouch(event);
endEvent(event, timer);
}
function removeActiveTouch(data) {
off(document, touchevents.move, data.activeTouchmove);
off(document, touchevents.end, data.activeTouchend);
function removeActiveTouch(event) {
remove(document, '.' + event.identifier, activeTouchmove);
remove(document, '.' + event.identifier, activeTouchend);
}
// Logic for triggering move and moveend events
function updateEvent(event, touch, timeStamp) {
function updateEvent(event, touch, timeStamp, timer) {
var time = timeStamp - event.timeStamp;
event.type = 'move';
event.distX = touch.pageX - event.startX;
event.distY = touch.pageY - event.startY;
event.deltaX = touch.pageX - event.pageX;
event.deltaY = touch.pageY - event.pageY;
// Average the velocity of the last few events using a decay
// curve to even out spurious jumps in values.
event.velocityX = 0.3 * event.velocityX + 0.7 * event.deltaX / time;
......@@ -456,144 +421,166 @@
event.pageY = touch.pageY;
}
function endEvent(target, event, timer, fn) {
function endEvent(event, timer, fn) {
timer.end(function(){
trigger(target, 'moveend', event);
event.type = 'moveend';
trigger(event.target, event);
return fn && fn();
});
}
// Set up the DOM
function movestart(e) {
if (e.defaultPrevented) { return; }
if (!e.moveEnabled) { return; }
// jQuery special event definition
var event = {
startX: e.startX,
startY: e.startY,
pageX: e.pageX,
pageY: e.pageY,
distX: e.distX,
distY: e.distY,
deltaX: e.deltaX,
deltaY: e.deltaY,
velocityX: e.velocityX,
velocityY: e.velocityY,
identifier: e.identifier,
targetTouches: e.targetTouches,
finger: e.finger
};
var data = {
target: e.target,
event: event,
timer: new Timer(update),
touch: undefined,
timeStamp: e.timeStamp
};
function update(time) {
updateEvent(event, data.touch, data.timeStamp);
trigger(data.target, 'move', event);
}
function setup(data, namespaces, eventHandle) {
// Stop the node from being dragged
//add(this, 'dragstart.move drag.move', preventDefault);
// Prevent text selection and touch interface scrolling
//add(this, 'mousedown.move', preventIgnoreTags);
// Tell movestart default handler that we've handled this
add(this, 'movestart.move', flagAsHandled);
if (e.identifier === undefined) {
// We're dealing with a mouse event.
// Stop clicks from propagating during a move
on(e.target, 'click', preventDefault);
on(document, mouseevents.move, activeMousemove, data);
on(document, mouseevents.end, activeMouseend, data);
}
else {
// In order to unbind correct handlers they have to be unique
data.activeTouchmove = function(e, data) { activeTouchmove(e, data); };
data.activeTouchend = function(e, data) { activeTouchend(e, data); };
// We're dealing with a touch.
on(document, touchevents.move, data.activeTouchmove, data);
on(document, touchevents.end, data.activeTouchend, data);
// Don't bind to the DOM. For speed.
return true;
}
function teardown(namespaces) {
remove(this, 'dragstart drag', preventDefault);
remove(this, 'mousedown touchstart', preventIgnoreTags);
remove(this, 'movestart', flagAsHandled);
// Don't bind to the DOM. For speed.
return true;
}
function addMethod(handleObj) {
// We're not interested in preventing defaults for handlers that
// come from internal move or moveend bindings
if (handleObj.namespace === "move" || handleObj.namespace === "moveend") {
return;
}
// Stop the node from being dragged
add(this, 'dragstart.' + handleObj.guid + ' drag.' + handleObj.guid, preventDefault, undefined, handleObj.selector);
// Prevent text selection and touch interface scrolling
add(this, 'mousedown.' + handleObj.guid, preventIgnoreTags, undefined, handleObj.selector);
}
on(document, 'mousedown', mousedown);
on(document, 'touchstart', touchstart);
on(document, 'movestart', movestart);
// jQuery special events
//
// jQuery event objects are copies of DOM event objects. They need
// a little help copying the move properties across.
if (!window.jQuery) { return; }
var properties = ("startX startY pageX pageY distX distY deltaX deltaY velocityX velocityY").split(' ');
function enableMove1(e) { e.enableMove(); }
function enableMove2(e) { e.enableMove(); }
function enableMove3(e) { e.enableMove(); }
function add(handleObj) {
var handler = handleObj.handler;
handleObj.handler = function(e) {
// Copy move properties across from originalEvent
var i = properties.length;
var property;
while(i--) {
property = properties[i];
e[property] = e.originalEvent[property];
}
handler.apply(this, arguments);
};
function removeMethod(handleObj) {
if (handleObj.namespace === "move" || handleObj.namespace === "moveend") {
return;
}
remove(this, 'dragstart.' + handleObj.guid + ' drag.' + handleObj.guid);
remove(this, 'mousedown.' + handleObj.guid);
}
jQuery.event.special.movestart = {
setup: function() {
// Movestart must be enabled to allow other move events
on(this, 'movestart', enableMove1);
// Do listen to DOM events
return false;
},
teardown: function() {
off(this, 'movestart', enableMove1);
return false;
},
setup: setup,
teardown: teardown,
add: addMethod,
remove: removeMethod,
_default: function(e) {
var event, data;
// If no move events were bound to any ancestors of this
// target, high tail it out of here.
if (!e._handled()) { return; }
function update(time) {
updateEvent(event, data.touch, data.timeStamp);
trigger(e.target, event);
}
add: add
event = {
target: e.target,
startX: e.startX,
startY: e.startY,
pageX: e.pageX,
pageY: e.pageY,
distX: e.distX,
distY: e.distY,
deltaX: e.deltaX,
deltaY: e.deltaY,
velocityX: e.velocityX,
velocityY: e.velocityY,
timeStamp: e.timeStamp,
identifier: e.identifier,
targetTouches: e.targetTouches,
finger: e.finger
};
data = {
event: event,
timer: new Timer(update),
touch: undefined,
timeStamp: undefined
};
if (e.identifier === undefined) {
// We're dealing with a mouse
// Stop clicks from propagating during a move
add(e.target, 'click', returnFalse);
add(document, mouseevents.move, activeMousemove, data);
add(document, mouseevents.end, activeMouseend, data);
}
else {
// We're dealing with a touch. Stop touchmove doing
// anything defaulty.
e._preventTouchmoveDefault();
add(document, touchevents.move + '.' + e.identifier, activeTouchmove, data);
add(document, touchevents.end + '.' + e.identifier, activeTouchend, data);
}
}
};
jQuery.event.special.move = {
setup: function() {
on(this, 'movestart', enableMove2);
return false;
// Bind a noop to movestart. Why? It's the movestart
// setup that decides whether other move events are fired.
add(this, 'movestart.move', jQuery.noop);
},
teardown: function() {
off(this, 'movestart', enableMove2);
return false;
},
add: add
remove(this, 'movestart.move', jQuery.noop);
}
};
jQuery.event.special.moveend = {
setup: function() {
on(this, 'movestart', enableMove3);
return false;
// Bind a noop to movestart. Why? It's the movestart
// setup that decides whether other move events are fired.
add(this, 'movestart.moveend', jQuery.noop);
},
teardown: function() {
off(this, 'movestart', enableMove3);
return false;
},
remove(this, 'movestart.moveend', jQuery.noop);
}
};
add: add
add(document, 'mousedown.move', mousedown);
add(document, 'touchstart.move', touchstart);
// Make jQuery copy touch event properties over to the jQuery event
// object, if they are not already listed. But only do the ones we
// really need. IE7/8 do not have Array#indexOf(), but nor do they
// have touch events, so let's assume we can ignore them.
if (typeof Array.prototype.indexOf === 'function') {
(function(jQuery, undefined){
var props = ["changedTouches", "targetTouches"],
l = props.length;
while (l--) {
if (jQuery.event.props.indexOf(props[l]) === -1) {
jQuery.event.props.push(props[l]);
}
}
})(jQuery);
};
});
});
\ No newline at end of file
vendor/assets/javascripts/jquery.twentytwenty.js
(function($){
$.fn.twentytwenty = function(options) {
var options = $.extend({
default_offset_pct: 0.5,
orientation: 'horizontal',
before_label: 'Before',
after_label: 'After',
no_overlay: false,
move_slider_on_hover: false,
move_with_handle_only: true,
click_to_move: false
}, options);
var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);
return this.each(function() {
var sliderPct = options.default_offset_pct;
......@@ -19,15 +9,10 @@
var sliderOrientation = options.orientation;
var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
if(!options.no_overlay) {
container.append("<div class='twentytwenty-overlay'></div>");
var overlay = container.find(".twentytwenty-overlay");
overlay.append("<div class='twentytwenty-before-label' data-content='"+options.before_label+"'></div>");
overlay.append("<div class='twentytwenty-after-label' data-content='"+options.after_label+"'></div>");
}
container.append("<div class='twentytwenty-overlay'></div>");
var beforeImg = container.find("img:first");
var afterImg = container.find("img:last");
container.append("<div class='twentytwenty-handle'></div>");
......@@ -38,6 +23,10 @@
beforeImg.addClass("twentytwenty-before");
afterImg.addClass("twentytwenty-after");
var overlay = container.find(".twentytwenty-overlay");
overlay.append("<div class='twentytwenty-before-label'></div>");
overlay.append("<div class='twentytwenty-after-label'></div>");
var calcOffset = function(dimensionPct) {
var w = beforeImg.width();
var h = beforeImg.height();
......@@ -50,14 +39,12 @@
};
var adjustContainer = function(offset) {
if (sliderOrientation === 'vertical') {
if (sliderOrientation === 'vertical') {
beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
afterImg.css("clip", "rect("+offset.ch+","+offset.w+","+offset.h+",0)");
}
else {
}
else {
beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
afterImg.css("clip", "rect(0,"+offset.w+","+offset.h+","+offset.cw+")");
}
}
container.css("height", offset.h);
};
......@@ -65,32 +52,16 @@
var offset = calcOffset(pct);
slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
adjustContainer(offset);
};
// Return the number specified or the min/max number if it outside the range given.
var minMaxNumber = function(num, min, max) {
return Math.max(min, Math.min(max, num));
};
// Calculate the slider percentage based on the position.
var getSliderPercentage = function(positionX, positionY) {
var sliderPercentage = (sliderOrientation === 'vertical') ?
(positionY-offsetY)/imgHeight :
(positionX-offsetX)/imgWidth;
return minMaxNumber(sliderPercentage, 0, 1);
};
}
$(window).on("resize.twentytwenty", function(e) {
adjustSlider(sliderPct);
});
var offsetX = 0;
var offsetY = 0;
var imgWidth = 0;
var imgHeight = 0;
var onMoveStart = function(e) {
slider.on("movestart", function(e) {
if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
e.preventDefault();
}
......@@ -102,50 +73,31 @@
offsetY = container.offset().top;
imgWidth = beforeImg.width();
imgHeight = beforeImg.height();
};
var onMove = function(e) {
});
slider.on("moveend", function(e) {
container.removeClass("active");
});
slider.on("move", function(e) {
if (container.hasClass("active")) {
sliderPct = getSliderPercentage(e.pageX, e.pageY);
sliderPct = (sliderOrientation === 'vertical') ? (e.pageY-offsetY)/imgHeight : (e.pageX-offsetX)/imgWidth;
if (sliderPct < 0) {
sliderPct = 0;
}
if (sliderPct > 1) {
sliderPct = 1;
}
adjustSlider(sliderPct);
}
};
var onMoveEnd = function() {
container.removeClass("active");
};
var moveTarget = options.move_with_handle_only ? slider : container;
moveTarget.on("movestart",onMoveStart);
moveTarget.on("move",onMove);
moveTarget.on("moveend",onMoveEnd);
if (options.move_slider_on_hover) {
container.on("mouseenter", onMoveStart);
container.on("mousemove", onMove);
container.on("mouseleave", onMoveEnd);
}
slider.on("touchmove", function(e) {
e.preventDefault();
});
container.find("img").on("mousedown", function(event) {
event.preventDefault();
});
if (options.click_to_move) {
container.on('click', function(e) {
offsetX = container.offset().left;
offsetY = container.offset().top;
imgWidth = beforeImg.width();
imgHeight = beforeImg.height();
sliderPct = getSliderPercentage(e.pageX, e.pageY);
adjustSlider(sliderPct);
});
}
$(window).trigger("resize.twentytwenty");
});
};
})(jQuery);
})(jQuery);
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment