Skip to content

W
warm_city
Commit 9a1fec27 by Mykhailo Makohin
Options

add beerslider

parent 3d54a59b
Showing with 335 additions and 2062 deletions
.gitignore
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
!/log/.keep !/log/.keep
!/tmp/.keep !/tmp/.keep
/vendor/* /vendor/*
/public/*
# Ignore Byebug command history file. # Ignore Byebug command history file.
.byebug_history .byebug_history
Gemfile
...@@ -29,6 +29,7 @@ gem 'carrierwave' ...@@ -29,6 +29,7 @@ gem 'carrierwave'
gem 'cancancan' gem 'cancancan'
gem 'cocoon' gem 'cocoon'
gem 'friendly_id' gem 'friendly_id'
gem 'globalize'
group :development, :test do group :development, :test do
gem 'byebug', platform: :mri gem 'byebug', platform: :mri
......
Gemfile.lock
...@@ -105,6 +105,10 @@ GEM ...@@ -105,6 +105,10 @@ GEM
activerecord (>= 4.0.0) activerecord (>= 4.0.0)
globalid (0.4.2) globalid (0.4.2)
activesupport (>= 4.2.0) 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) gmaps4rails (2.1.2)
haml (5.1.2) haml (5.1.2)
temple (>= 0.8.0) temple (>= 0.8.0)
...@@ -225,6 +229,8 @@ GEM ...@@ -225,6 +229,8 @@ GEM
rb-inotify (0.10.0) rb-inotify (0.10.0)
ffi (~> 1.0) ffi (~> 1.0)
remotipart (1.4.3) remotipart (1.4.3)
request_store (1.4.1)
rack (>= 1.4)
responders (2.4.1) responders (2.4.1)
actionpack (>= 4.2.0, < 6.0) actionpack (>= 4.2.0, < 6.0)
railties (>= 4.2.0, < 6.0) railties (>= 4.2.0, < 6.0)
...@@ -241,7 +247,7 @@ GEM ...@@ -241,7 +247,7 @@ GEM
sprockets (>= 2.8, < 4.0) sprockets (>= 2.8, < 4.0)
sprockets-rails (>= 2.0, < 4.0) sprockets-rails (>= 2.0, < 4.0)
tilt (>= 1.1, < 3) tilt (>= 1.1, < 3)
sassc (2.2.0) sassc (2.2.1)
ffi (~> 1.9) ffi (~> 1.9)
simple_form (4.1.0) simple_form (4.1.0)
actionpack (>= 5.0) actionpack (>= 5.0)
...@@ -298,6 +304,7 @@ DEPENDENCIES ...@@ -298,6 +304,7 @@ DEPENDENCIES
coffee-rails (~> 4.2) coffee-rails (~> 4.2)
devise devise
friendly_id friendly_id
globalize
gmaps4rails gmaps4rails
haml haml
jbuilder (~> 2.5) jbuilder (~> 2.5)
......
app/assets/javascripts/application.js
...@@ -19,13 +19,12 @@ ...@@ -19,13 +19,12 @@
//= require pgwslider.min //= require pgwslider.min
//= require jquery.royalslider.min //= require jquery.royalslider.min
//= require jquery.event.move //= require jquery.event.move
//= require jquery.twentytwenty //= require BeerSlider
//= require tooltipster.bundle.min //= require tooltipster.bundle.min
//= require freewall //= require freewall
//= require underscore //= require underscore
//= require jquery.autocomplete //= require jquery.autocomplete
//= require gmaps/google //= require gmaps/google
//= require squares //= require squares
//= require cocoon
//= require_tree . //= 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($){ ...@@ -24,7 +24,7 @@ jQuery(document).ready(function($){
topTip(); topTip();
// toolinitTooltipster(); // toolinitTooltipster();
playStopVideoInModal(); playStopVideoInModal();
initTwentytwenty(); // initTwentytwenty();
scrollToTop(); 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"}); // $('[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() { ...@@ -49,10 +49,11 @@ function scrollToTop() {
function initTwentytwenty() { function initTwentytwenty() {
$(window).on("load", function(){ $(window).on("load", function(){
$(".twentytwenty-container").twentytwenty(); $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
}); });
} }
function playStopVideoInModal(){ function playStopVideoInModal(){
$('body').on('click', '.tooltipster_img', function(){ $('body').on('click', '.tooltipster_img', function(){
var src = $(this).attr('href'); var src = $(this).attr('href');
......
app/assets/stylesheets/application.css
/* /*
*=require_self *=require_self
*/ */
@import url("normalize.css"); @import url("normalize.css");
@import url("outdatedBrowser.min.css"); @import url("outdatedBrowser.min.css");
@import url("main.css"); @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 class ProjectsController < ApplicationController
load_and_authorize_resource
# def index
# @projects = collection
# end
def show 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 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 end
\ No newline at end of file
app/views/layouts/application.html.haml
...@@ -17,6 +17,7 @@ ...@@ -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=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+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 => "//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 /Favicons + Touch Icons
%link{:href => "favicons/apple-touch-icon57.png", :rel => "icon", :type => "image/png"} %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"} %link{:href => "favicons/apple-touch-icon57.png", :rel => "apple-touch-icon", :sizes => "57x57"}
......
app/views/partials/_white_header.html.haml
...@@ -14,22 +14,20 @@ ...@@ -14,22 +14,20 @@
#bs-example-navbar-collapse-1.collapse.navbar-collapse #bs-example-navbar-collapse-1.collapse.navbar-collapse
%ul.nav.navbar-nav %ul.nav.navbar-nav
%li %li
%a{:href => "#"} про палатформу %a{:href => "#"}= t ("header.platfform")
%li %li
%a{:href => "#"} Ґранти %a{:href => "#"}= t ("header.grants")
%li %li
%a{:href => "#"} Проекти %a{:href => "#"}= t ("header.projects")
%li.active
%a{:href => "#"}
Партнери
%span.sr-only (current)
%li %li
%a{:href => "#"} DIGITAL WORKSHOP %a{:href => "#"}= t ("header.partners")
%li %li
%a{:href => "#"} Про нас %a{:href => "#"}= t ("header.digital")
%li %li
%a{:href => "#"} Новини %a{:href => "#"}= t ("header.about_us")
%li %li
%a{:href => "#"} Звіти %a{:href => "#"}= t ("header.news")
%li
%a{:href => "#"}= t ("header.reports")
%li %li
%a{:href => "#"} connectif %a{:href => "#"} connectif
app/views/projects/show.html.haml
...@@ -3,16 +3,16 @@ ...@@ -3,16 +3,16 @@
.head_block .head_block
.container .container
.info_title .info_title
%span.info_title_text Проект %span.info_title_text= t "#{@project.types}"
%a.info_link{"data-target" => "#modal3", "data-toggle" => "modal", :href => "#"} urbanspaceradio.com %a.info_link{"data-target" => "#modal3", "data-toggle" => "modal", :href => "#"} #{@project.site}
%h2.heading_with_btn %h2.heading_with_btn
%span Urban Space Radio %span Urban Space Radio
%a.btn.btn_default{"data-target" => "#modal", "data-toggle" => "modal", :href => "#"} %a.btn.btn_default{"data-target" => "#modal", "data-toggle" => "modal", :href => "#"}
%i.icon.icon_plus> %i.icon.icon_plus>
підтримати проект = t ('donate')
.large_progress_wrap .large_progress_wrap
.large_progress_title .large_progress_title
Реалізовано = t "#{@project.status}"
.large_progress.clearfix .large_progress.clearfix
.progress .progress
.progress-bar{"aria-valuemax" => "100", "aria-valuemin" => "100", "aria-valuenow" => "100", :role => "progressbar", :style => "width: 100%;"} .progress-bar{"aria-valuemax" => "100", "aria-valuemin" => "100", "aria-valuenow" => "100", :role => "progressbar", :style => "width: 100%;"}
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
.progress_details.clearfix .progress_details.clearfix
.progress_details_item .progress_details_item
бюджет проекту бюджет проекту
%strong 120 200 UAH %strong #{@project.required_amount} UAH
.progress_details_item .progress_details_item
зібраних коштів зібраних коштів
%strong 14 200 UAH %strong 14 200 UAH
...@@ -46,8 +46,9 @@ ...@@ -46,8 +46,9 @@
Urban Space Radio має підвищити рівень залученості громадськості до процесів розвитку наших міст. Це досягатиметься через створення незалежного і на 100% прозорого медіа-каналу. Прозорість і публічність радіостанції буде інституційною та фізичною, адже її скляна студія буде розташована у публічному просторі – громадському ресторані Urban Space Radio має підвищити рівень залученості громадськості до процесів розвитку наших міст. Це досягатиметься через створення незалежного і на 100% прозорого медіа-каналу. Прозорість і публічність радіостанції буде інституційною та фізичною, адже її скляна студія буде розташована у публічному просторі – громадському ресторані
= succeed "." do = succeed "." do
%strong Urban Space 100 у центрі міста %strong Urban Space 100 у центрі міста
.twentytwenty-container #slider.beer-slider{"data-beer-label" => "before"}
= image_tag(@project.photo.url) = image_tag(@project.photo.url)
.beer-reveal{"data-beer-label" => "after"}
= image_tag(@project.photo_preview.url) = image_tag(@project.photo_preview.url)
%p %p
Радіо мовитиме в інтернеті, в «Urban Space 100», а також частково в Радіо мовитиме в інтернеті, в «Urban Space 100», а також частково в
...@@ -66,18 +67,6 @@ ...@@ -66,18 +67,6 @@
%li активне включення громади у процес розробки концепції розвитку міста; %li активне включення громади у процес розробки концепції розвитку міста;
.imgs_wrap .imgs_wrap
.simple_slider.clearfix .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 #gallery-2.royalSlider.rsUni
%a.rsImg{:href => "img/slide2.jpg"} %a.rsImg{:href => "img/slide2.jpg"}
%img.rsTmb{:src => "img/slide2.jpg"}/ %img.rsTmb{:src => "img/slide2.jpg"}/
...@@ -224,3 +213,5 @@ ...@@ -224,3 +213,5 @@
У випадку довгого заголовка який не бажано обрізати чи вкорочувати, буде так У випадку довгого заголовка який не бажано обрізати чи вкорочувати, буде так
%span.news_text %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 // Stephen Band
// //
...@@ -22,24 +22,33 @@ ...@@ -22,24 +22,33 @@
// velocityY: Average velocity over last few events. // velocityY: Average velocity over last few events.
(function(fn) { (function (module) {
if (typeof define === 'function' && define.amd) { if (typeof define === 'function' && define.amd) {
define([], fn); // AMD. Register as an anonymous module.
} else if ((typeof module !== "undefined" && module !== null) && module.exports) { define(['jquery'], module);
module.exports = fn;
} else { } else {
fn(); // Browser globals
module(jQuery);
} }
})(function(){ })(function(jQuery, undefined){
var assign = Object.assign || window.jQuery && jQuery.extend;
// Number of pixels a pressed pointer travels before movestart var // Number of pixels a pressed pointer travels before movestart
// event is fired. // event is fired.
var threshold = 8; 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: // Shim for requestAnimationFrame, falling back to timer. See:
// see http://paulirish.com/2011/requestanimationframe-for-smart-animating/ // see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
var requestFrame = (function(){ requestFrame = (function(){
return ( return (
window.requestAnimationFrame || window.requestAnimationFrame ||
window.webkitRequestAnimationFrame || window.webkitRequestAnimationFrame ||
...@@ -52,107 +61,27 @@ ...@@ -52,107 +61,27 @@
}, 25); }, 25);
} }
); );
})(); })(),
// Shim for customEvent ignoreTags = {
// 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, textarea: true,
input: true, input: true,
select: true, select: true,
button: true button: true
}; },
var mouseevents = { mouseevents = {
move: 'mousemove', move: 'mousemove',
cancel: 'mouseup dragstart', cancel: 'mouseup dragstart',
end: 'mouseup' end: 'mouseup'
}; },
var touchevents = { touchevents = {
move: 'touchmove', move: 'touchmove',
cancel: 'touchend', cancel: 'touchend',
end: '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 // Constructors
...@@ -203,17 +132,26 @@ ...@@ -203,17 +132,26 @@
// Functions // Functions
function noop() {} function returnTrue() {
return true;
}
function returnFalse() {
return false;
}
function preventDefault(e) { function preventDefault(e) {
e.preventDefault(); e.preventDefault();
} }
function isIgnoreTag(e) { function preventIgnoreTags(e) {
return !!ignoreTags[e.target.tagName.toLowerCase()]; // 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) // Ignore mousedowns on any button other than the left (or primary)
// mouse button, or when a modifier key is pressed. // mouse button, or when a modifier key is pressed.
return (e.which === 1 && !e.ctrlKey && !e.altKey); return (e.which === 1 && !e.ctrlKey && !e.altKey);
...@@ -239,8 +177,8 @@ ...@@ -239,8 +177,8 @@
} }
} }
function changedTouch(e, data) { function changedTouch(e, event) {
var touch = identifiedTouch(e.changedTouches, data.identifier); var touch = identifiedTouch(e.changedTouches, event.identifier);
// This isn't the touch you're looking for. // This isn't the touch you're looking for.
if (!touch) { return; } if (!touch) { return; }
...@@ -248,7 +186,7 @@ ...@@ -248,7 +186,7 @@
// Chrome Android (at least) includes touches that have not // Chrome Android (at least) includes touches that have not
// changed in e.changedTouches. That's a bit annoying. Check // changed in e.changedTouches. That's a bit annoying. Check
// that this touch has changed. // 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; return touch;
} }
...@@ -257,155 +195,183 @@ ...@@ -257,155 +195,183 @@
// Handlers that decide when the first movestart is triggered // Handlers that decide when the first movestart is triggered
function mousedown(e){ function mousedown(e){
// Ignore non-primary buttons var data;
if (!isPrimaryButton(e)) { return; }
if (!isLeftButton(e)) { return; }
// Ignore form and interactive elements data = {
if (isIgnoreTag(e)) { return; } target: e.target,
startX: e.pageX,
startY: e.pageY,
timeStamp: e.timeStamp
};
on(document, mouseevents.move, mousemove, e); add(document, mouseevents.move, mousemove, data);
on(document, mouseevents.cancel, mouseend, e); add(document, mouseevents.cancel, mouseend, data);
} }
function mousemove(e, data){ function mousemove(e){
var data = e.data;
checkThreshold(e, data, e, removeMouse); checkThreshold(e, data, e, removeMouse);
} }
function mouseend(e, data) { function mouseend(e) {
removeMouse(); removeMouse();
} }
function removeMouse() { function removeMouse() {
off(document, mouseevents.move, mousemove); remove(document, mouseevents.move, mousemove);
off(document, mouseevents.cancel, mouseend); remove(document, mouseevents.cancel, mouseend);
} }
function touchstart(e) { function touchstart(e) {
// Don't get in the way of interaction with form elements var touch, template;
if (ignoreTags[e.target.tagName.toLowerCase()]) { return; }
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. // iOS live updates the touch objects whereas Android gives us copies.
// That means we can't trust the touchstart object to stay the same, // 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 // so we must copy the data. This object acts as a template for
// movestart, move and moveend event objects. // movestart, move and moveend event objects.
var data = { template = {
target: touch.target, target: touch.target,
pageX: touch.pageX, startX: touch.pageX,
pageY: touch.pageY, startY: touch.pageY,
identifier: touch.identifier, timeStamp: e.timeStamp,
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); // Use the touch identifier as a namespace, so that we can later
on(document, touchevents.cancel, data.touchend, data); // 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) { function touchmove(e){
var touch = changedTouch(e, data); var data = e.data,
touch = changedTouch(e, data);
if (!touch) { return; } if (!touch) { return; }
checkThreshold(e, data, touch, removeTouch); checkThreshold(e, data, touch, removeTouch);
} }
function touchend(e, data) { function touchend(e) {
var touch = identifiedTouch(e.changedTouches, data.identifier); var template = e.data,
touch = identifiedTouch(e.changedTouches, template.identifier);
if (!touch) { return; } if (!touch) { return; }
removeTouch(data);
removeTouch(template.identifier);
} }
function removeTouch(data) { function removeTouch(identifier) {
off(document, touchevents.move, data.touchmove); remove(document, '.' + identifier, touchmove);
off(document, touchevents.cancel, data.touchend); remove(document, '.' + identifier, touchend);
} }
function checkThreshold(e, data, touch, fn) {
var distX = touch.pageX - data.pageX; // Logic for deciding when to trigger a movestart.
var distY = touch.pageY - data.pageY;
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. // Do nothing if the threshold has not been crossed.
if ((distX * distX) + (distY * distY) < (threshold * threshold)) { return; } if ((distX * distX) + (distY * distY) < (threshold * threshold)) { return; }
triggerStart(e, data, touch, distX, distY, fn); triggerStart(e, template, touch, distX, distY, fn);
} }
function triggerStart(e, data, touch, distX, distY, fn) { function handled() {
var touches = e.targetTouches; // this._handled should return false once, and after return true.
var time = e.timeStamp - data.timeStamp; this._handled = returnTrue;
return false;
}
function flagAsHandled(e) {
e._handled();
}
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 // Create a movestart object with some special properties that
// are passed only to the movestart handlers. // are passed only to the movestart handlers.
var template = { template.type = 'movestart';
altKey: e.altKey, template.distX = distX;
ctrlKey: e.ctrlKey, template.distY = distY;
shiftKey: e.shiftKey, template.deltaX = distX;
startX: data.pageX, template.deltaY = distY;
startY: data.pageY, template.pageX = touch.pageX;
distX: distX, template.pageY = touch.pageY;
distY: distY, template.velocityX = distX / time;
deltaX: distX, template.velocityY = distY / time;
deltaY: distY, template.targetTouches = touches;
pageX: touch.pageX, template.finger = touches ?
pageY: touch.pageY, touches.length :
velocityX: distX / time, 1 ;
velocityY: distY / time,
identifier: data.identifier, // The _handled method is fired to tell the default movestart
targetTouches: touches, // handler that one of the move events is bound.
finger: touches ? touches.length : 1, template._handled = handled;
enableMove: function() {
this.moveEnabled = true; // Pass the touchmove event so it can be prevented if or when
this.enableMove = noop; // movestart is handled.
template._preventTouchmoveDefault = function() {
e.preventDefault(); e.preventDefault();
}
}; };
// Trigger the movestart event. // Trigger the movestart event.
trigger(data.target, 'movestart', template); trigger(template.target, template);
// Unbind handlers that tracked the touch or mouse up till now. // Unbind handlers that tracked the touch or mouse up till now.
fn(data); fn(template.identifier);
} }
// Handlers that control what happens following a movestart // Handlers that control what happens following a movestart
function activeMousemove(e, data) { function activeMousemove(e) {
var timer = data.timer; var timer = e.data.timer;
data.touch = e; e.data.touch = e;
data.timeStamp = e.timeStamp; e.data.timeStamp = e.timeStamp;
timer.kick(); timer.kick();
} }
function activeMouseend(e, data) { function activeMouseend(e) {
var target = data.target; var event = e.data.event,
var event = data.event; timer = e.data.timer;
var timer = data.timer;
removeActiveMouse(); removeActiveMouse();
endEvent(target, event, timer, function() { endEvent(event, timer, function() {
// Unbind the click suppressor, waiting until after mouseup // Unbind the click suppressor, waiting until after mouseup
// has been handled. // has been handled.
setTimeout(function(){ setTimeout(function(){
off(target, 'click', preventDefault); remove(event.target, 'click', returnFalse);
}, 0); }, 0);
}); });
} }
function removeActiveMouse() { function removeActiveMouse(event) {
off(document, mouseevents.move, activeMousemove); remove(document, mouseevents.move, activeMousemove);
off(document, mouseevents.end, activeMouseend); remove(document, mouseevents.end, activeMouseend);
} }
function activeTouchmove(e, data) { function activeTouchmove(e) {
var event = data.event; var event = e.data.event,
var timer = data.timer; timer = e.data.timer,
var touch = changedTouch(e, event); touch = changedTouch(e, event);
if (!touch) { return; } if (!touch) { return; }
...@@ -413,36 +379,35 @@ ...@@ -413,36 +379,35 @@
e.preventDefault(); e.preventDefault();
event.targetTouches = e.targetTouches; event.targetTouches = e.targetTouches;
data.touch = touch; e.data.touch = touch;
data.timeStamp = e.timeStamp; e.data.timeStamp = e.timeStamp;
timer.kick(); timer.kick();
} }
function activeTouchend(e, data) { function activeTouchend(e) {
var target = data.target; var event = e.data.event,
var event = data.event; timer = e.data.timer,
var timer = data.timer; touch = identifiedTouch(e.changedTouches, event.identifier);
var touch = identifiedTouch(e.changedTouches, event.identifier);
// This isn't the touch you're looking for. // This isn't the touch you're looking for.
if (!touch) { return; } if (!touch) { return; }
removeActiveTouch(data); removeActiveTouch(event);
endEvent(target, event, timer); endEvent(event, timer);
} }
function removeActiveTouch(data) { function removeActiveTouch(event) {
off(document, touchevents.move, data.activeTouchmove); remove(document, '.' + event.identifier, activeTouchmove);
off(document, touchevents.end, data.activeTouchend); remove(document, '.' + event.identifier, activeTouchend);
} }
// Logic for triggering move and moveend events // Logic for triggering move and moveend events
function updateEvent(event, touch, timeStamp) { function updateEvent(event, touch, timeStamp, timer) {
var time = timeStamp - event.timeStamp; var time = timeStamp - event.timeStamp;
event.type = 'move';
event.distX = touch.pageX - event.startX; event.distX = touch.pageX - event.startX;
event.distY = touch.pageY - event.startY; event.distY = touch.pageY - event.startY;
event.deltaX = touch.pageX - event.pageX; event.deltaX = touch.pageX - event.pageX;
...@@ -456,21 +421,85 @@ ...@@ -456,21 +421,85 @@
event.pageY = touch.pageY; event.pageY = touch.pageY;
} }
function endEvent(target, event, timer, fn) { function endEvent(event, timer, fn) {
timer.end(function(){ timer.end(function(){
trigger(target, 'moveend', event); event.type = 'moveend';
trigger(event.target, event);
return fn && fn(); return fn && fn();
}); });
} }
// Set up the DOM // jQuery special event definition
function setup(data, namespaces, eventHandle) {
// Stop the node from being dragged
//add(this, 'dragstart.move drag.move', preventDefault);
function movestart(e) { // Prevent text selection and touch interface scrolling
if (e.defaultPrevented) { return; } //add(this, 'mousedown.move', preventIgnoreTags);
if (!e.moveEnabled) { return; }
var event = { // Tell movestart default handler that we've handled this
add(this, 'movestart.move', flagAsHandled);
// 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);
}
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: 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);
}
event = {
target: e.target,
startX: e.startX, startX: e.startX,
startY: e.startY, startY: e.startY,
pageX: e.pageX, pageX: e.pageX,
...@@ -481,119 +510,77 @@ ...@@ -481,119 +510,77 @@
deltaY: e.deltaY, deltaY: e.deltaY,
velocityX: e.velocityX, velocityX: e.velocityX,
velocityY: e.velocityY, velocityY: e.velocityY,
timeStamp: e.timeStamp,
identifier: e.identifier, identifier: e.identifier,
targetTouches: e.targetTouches, targetTouches: e.targetTouches,
finger: e.finger finger: e.finger
}; };
var data = { data = {
target: e.target,
event: event, event: event,
timer: new Timer(update), timer: new Timer(update),
touch: undefined, touch: undefined,
timeStamp: e.timeStamp timeStamp: undefined
}; };
function update(time) {
updateEvent(event, data.touch, data.timeStamp);
trigger(data.target, 'move', event);
}
if (e.identifier === undefined) { if (e.identifier === undefined) {
// We're dealing with a mouse event. // We're dealing with a mouse
// Stop clicks from propagating during a move // Stop clicks from propagating during a move
on(e.target, 'click', preventDefault); add(e.target, 'click', returnFalse);
on(document, mouseevents.move, activeMousemove, data); add(document, mouseevents.move, activeMousemove, data);
on(document, mouseevents.end, activeMouseend, data); add(document, mouseevents.end, activeMouseend, data);
} }
else { else {
// In order to unbind correct handlers they have to be unique // We're dealing with a touch. Stop touchmove doing
data.activeTouchmove = function(e, data) { activeTouchmove(e, data); }; // anything defaulty.
data.activeTouchend = function(e, data) { activeTouchend(e, data); }; e._preventTouchmoveDefault();
add(document, touchevents.move + '.' + e.identifier, activeTouchmove, data);
// We're dealing with a touch. add(document, touchevents.end + '.' + e.identifier, activeTouchend, data);
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 = { jQuery.event.special.move = {
setup: function() { setup: function() {
// Movestart must be enabled to allow other move events // Bind a noop to movestart. Why? It's the movestart
on(this, 'movestart', enableMove1); // setup that decides whether other move events are fired.
add(this, 'movestart.move', jQuery.noop);
// Do listen to DOM events
return false;
}, },
teardown: function() { teardown: function() {
off(this, 'movestart', enableMove1); remove(this, 'movestart.move', jQuery.noop);
return false; }
},
add: add
}; };
jQuery.event.special.move = { jQuery.event.special.moveend = {
setup: function() { setup: function() {
on(this, 'movestart', enableMove2); // Bind a noop to movestart. Why? It's the movestart
return false; // setup that decides whether other move events are fired.
add(this, 'movestart.moveend', jQuery.noop);
}, },
teardown: function() { teardown: function() {
off(this, 'movestart', enableMove2); remove(this, 'movestart.moveend', jQuery.noop);
return false; }
},
add: add
}; };
jQuery.event.special.moveend = { add(document, 'mousedown.move', mousedown);
setup: function() { add(document, 'touchstart.move', touchstart);
on(this, 'movestart', enableMove3);
return false;
},
teardown: function() { // Make jQuery copy touch event properties over to the jQuery event
off(this, 'movestart', enableMove3); // object, if they are not already listed. But only do the ones we
return false; // 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;
add: add 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($){ (function($){
$.fn.twentytwenty = function(options) { $.fn.twentytwenty = function(options) {
var options = $.extend({ var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);
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() { return this.each(function() {
var sliderPct = options.default_offset_pct; var sliderPct = options.default_offset_pct;
...@@ -22,12 +12,7 @@ ...@@ -22,12 +12,7 @@
container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>"); container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
if(!options.no_overlay) {
container.append("<div class='twentytwenty-overlay'></div>"); 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 beforeImg = container.find("img:first");
var afterImg = container.find("img:last"); var afterImg = container.find("img:last");
container.append("<div class='twentytwenty-handle'></div>"); container.append("<div class='twentytwenty-handle'></div>");
...@@ -38,6 +23,10 @@ ...@@ -38,6 +23,10 @@
beforeImg.addClass("twentytwenty-before"); beforeImg.addClass("twentytwenty-before");
afterImg.addClass("twentytwenty-after"); 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 calcOffset = function(dimensionPct) {
var w = beforeImg.width(); var w = beforeImg.width();
var h = beforeImg.height(); var h = beforeImg.height();
...@@ -52,11 +41,9 @@ ...@@ -52,11 +41,9 @@
var adjustContainer = function(offset) { var adjustContainer = function(offset) {
if (sliderOrientation === 'vertical') { if (sliderOrientation === 'vertical') {
beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)"); 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)"); 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); container.css("height", offset.h);
}; };
...@@ -65,32 +52,16 @@ ...@@ -65,32 +52,16 @@
var offset = calcOffset(pct); var offset = calcOffset(pct);
slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw); slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
adjustContainer(offset); 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) { $(window).on("resize.twentytwenty", function(e) {
adjustSlider(sliderPct); adjustSlider(sliderPct);
}); });
var offsetX = 0; var offsetX = 0;
var offsetY = 0;
var imgWidth = 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') { if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
e.preventDefault(); e.preventDefault();
} }
...@@ -102,48 +73,29 @@ ...@@ -102,48 +73,29 @@
offsetY = container.offset().top; offsetY = container.offset().top;
imgWidth = beforeImg.width(); imgWidth = beforeImg.width();
imgHeight = beforeImg.height(); 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; slider.on("moveend", function(e) {
moveTarget.on("movestart",onMoveStart); container.removeClass("active");
moveTarget.on("move",onMove); });
moveTarget.on("moveend",onMoveEnd);
if (options.move_slider_on_hover) { slider.on("move", function(e) {
container.on("mouseenter", onMoveStart); if (container.hasClass("active")) {
container.on("mousemove", onMove); sliderPct = (sliderOrientation === 'vertical') ? (e.pageY-offsetY)/imgHeight : (e.pageX-offsetX)/imgWidth;
container.on("mouseleave", onMoveEnd); if (sliderPct < 0) {
sliderPct = 0;
}
if (sliderPct > 1) {
sliderPct = 1;
}
adjustSlider(sliderPct);
} }
slider.on("touchmove", function(e) {
e.preventDefault();
}); });
container.find("img").on("mousedown", function(event) { container.find("img").on("mousedown", function(event) {
event.preventDefault(); 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"); $(window).trigger("resize.twentytwenty");
}); });
}; };
......
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