tramway-landing 1.0 → 1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bc98a307ccf33e690b805a6adfeb1b7f110be1269bae2a02a90d3f7c1a0cc6e9
-  data.tar.gz: 5b85a0739fbc0da2ff548f1f79ff5a2dede5b5f0796f2e09fd36ce145825bf14
+  metadata.gz: cd058864a8e673a0844ed5ea8658cd76a099f98b07ada97e6cd746886a7f4b51
+  data.tar.gz: 02a1df7f3d382e6ef33f2b6c9ab0a40033ca94b5538ac1b1dc89c3cffd9e3d82
 SHA512:
-  metadata.gz: e8fedc657c02b00f46af054ddf56a81c78acf2ef148b6eeb79ba375911702c0a7194e80de56f15743bd4aa4db4ce5474871db00eb596a9469e56eac06aedff9e
-  data.tar.gz: f8d3d47ccc3dc8f1787b1ed027ddbd3deecbde84031b1b42a1cb1f39d47543c42ca5372e3287e53b7147f551487f3a09d234303e3671f67458bdff3f28745a92
+  metadata.gz: b6375d3ce59889cc3cefe58e9dbb0fec7299dc62c6055068ce2505ecb5bad33226dee39eaa172a0a9306e3325b0cd75e48273093b5ec7748ced59599aa96c0ba
+  data.tar.gz: cd5bf362a70462faa7c8054672f2fca26929c260eeb04a1e0b24db89288a076af829665373a736fa539883c60cf02e768635b413e7a1e73f7c4f10917f46e429

data/app/assets/javascripts/tramway/landing/application.js.coffee

@@ -1,3 +1,8 @@
 #= require jquery
 #= require jquery_ujs
 #= require_tree .
+
+$(document).ready ->
+  $('.header-buttons').click ->
+    anchor = $(this).data('anchor')
+    $(window).scrollTop $(anchor).offset().top

data/app/assets/javascripts/tramway/landing/footer.js.coffee

@@ -1,24 +1,24 @@
 #= require justified_images
 
-$(document).ready ->
-  $('.logo_collage1').empty().justifiedImages
-    images: photos
-    rowHeight: 200
-    maxRowHeight: 400
-    thumbnailPath: (photo, width, height) ->
-      purl = photo.url_s
-      if photo.url_n and (width > photo.width_s * 1.2 or height > photo.height_s * 1.2)
-        purl = photo.url_n
-      if photo.url_m and (width > photo.width_n * 1.2 or height > photo.height_n * 1.2)
-        purl = photo.url_m
-      if photo.url_z and (width > photo.width_m * 1.2 or height > photo.height_m * 1.2)
-        purl = photo.url_z
-      if photo.url_l and (width > photo.width_z * 1.2 or height > photo.height_z * 1.2)
-        purl = photo.url_l
-      purl
-    getSize: (photo) ->
-      {
-        width: photo.width_s
-        height: photo.height_s
-      }
-    margin: 1
+#$(document).ready ->
+#  $('.logo_collage1').empty().justifiedImages
+#    images: photos
+#    rowHeight: 200
+#    maxRowHeight: 400
+#    thumbnailPath: (photo, width, height) ->
+#      purl = photo.url_s
+#      if photo.url_n and (width > photo.width_s * 1.2 or height > photo.height_s * 1.2)
+#        purl = photo.url_n
+#      if photo.url_m and (width > photo.width_n * 1.2 or height > photo.height_n * 1.2)
+#        purl = photo.url_m
+#      if photo.url_z and (width > photo.width_m * 1.2 or height > photo.height_m * 1.2)
+#        purl = photo.url_z
+#      if photo.url_l and (width > photo.width_z * 1.2 or height > photo.height_z * 1.2)
+#        purl = photo.url_l
+#      purl
+#    getSize: (photo) ->
+#      {
+#        width: photo.width_s
+#        height: photo.height_s
+#      }
+#    margin: 1

data/app/assets/javascripts/tramway/landing/smooth-scroll.js

@@ -0,0 +1,576 @@
+/*!
+ * smooth-scroll v12.1.5: Animate scrolling to anchor links
+ * (c) 2017 Chris Ferdinandi
+ * MIT License
+ * http://github.com/cferdinandi/smooth-scroll
+ */
+
+(function (root, factory) {
+	if ( typeof define === 'function' && define.amd ) {
+		define([], (function () {
+			return factory(root);
+		}));
+	} else if ( typeof exports === 'object' ) {
+		module.exports = factory(root);
+	} else {
+		root.SmoothScroll = factory(root);
+	}
+})(typeof global !== 'undefined' ? global : typeof window !== 'undefined' ? window : this, (function (window) {
+
+	'use strict';
+
+	//
+	// Feature Test
+	//
+
+	var supports =
+		'querySelector' in document &&
+		'addEventListener' in window &&
+		'requestAnimationFrame' in window &&
+		'closest' in window.Element.prototype;
+
+
+	//
+	// Default settings
+	//
+
+	var defaults = {
+		// Selectors
+		ignore: '[data-scroll-ignore]',
+		header: null,
+
+		// Speed & Easing
+		speed: 500,
+		offset: 0,
+		easing: 'easeInOutCubic',
+		customEasing: null,
+
+		// Callback API
+		before: function () {},
+		after: function () {}
+	};
+
+
+	//
+	// Utility Methods
+	//
+
+	/**
+	 * Merge two or more objects. Returns a new object.
+	 * @param {Object}   objects  The objects to merge together
+	 * @returns {Object}          Merged values of defaults and options
+	 */
+	var extend = function () {
+
+		// Variables
+		var extended = {};
+		var deep = false;
+		var i = 0;
+		var length = arguments.length;
+
+		// Merge the object into the extended object
+		var merge = function (obj) {
+			for (var prop in obj) {
+				if (obj.hasOwnProperty(prop)) {
+					extended[prop] = obj[prop];
+				}
+			}
+		};
+
+		// Loop through each object and conduct a merge
+		for ( ; i < length; i++ ) {
+			var obj = arguments[i];
+			merge(obj);
+		}
+
+		return extended;
+
+	};
+
+	/**
+	 * Get the height of an element.
+	 * @param  {Node} elem The element to get the height of
+	 * @return {Number}    The element's height in pixels
+	 */
+	var getHeight = function (elem) {
+		return parseInt(window.getComputedStyle(elem).height, 10);
+	};
+
+	/**
+	 * Escape special characters for use with querySelector
+	 * @param {String} id The anchor ID to escape
+	 * @author Mathias Bynens
+	 * @link https://github.com/mathiasbynens/CSS.escape
+	 */
+	var escapeCharacters = function (id) {
+
+		// Remove leading hash
+		if (id.charAt(0) === '#') {
+			id = id.substr(1);
+		}
+
+		var string = String(id);
+		var length = string.length;
+		var index = -1;
+		var codeUnit;
+		var result = '';
+		var firstCodeUnit = string.charCodeAt(0);
+		while (++index < length) {
+			codeUnit = string.charCodeAt(index);
+			// Note: there’s no need to special-case astral symbols, surrogate
+			// pairs, or lone surrogates.
+
+			// If the character is NULL (U+0000), then throw an
+			// `InvalidCharacterError` exception and terminate these steps.
+			if (codeUnit === 0x0000) {
+				throw new InvalidCharacterError(
+					'Invalid character: the input contains U+0000.'
+				);
+			}
+
+			if (
+				// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
+				// U+007F, […]
+				(codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F ||
+				// If the character is the first character and is in the range [0-9]
+				// (U+0030 to U+0039), […]
+				(index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+				// If the character is the second character and is in the range [0-9]
+				// (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
+				(
+					index === 1 &&
+					codeUnit >= 0x0030 && codeUnit <= 0x0039 &&
+					firstCodeUnit === 0x002D
+				)
+			) {
+				// http://dev.w3.org/csswg/cssom/#escape-a-character-as-code-point
+				result += '\\' + codeUnit.toString(16) + ' ';
+				continue;
+			}
+
+			// If the character is not handled by one of the above rules and is
+			// greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
+			// is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
+			// U+005A), or [a-z] (U+0061 to U+007A), […]
+			if (
+				codeUnit >= 0x0080 ||
+				codeUnit === 0x002D ||
+				codeUnit === 0x005F ||
+				codeUnit >= 0x0030 && codeUnit <= 0x0039 ||
+				codeUnit >= 0x0041 && codeUnit <= 0x005A ||
+				codeUnit >= 0x0061 && codeUnit <= 0x007A
+			) {
+				// the character itself
+				result += string.charAt(index);
+				continue;
+			}
+
+			// Otherwise, the escaped character.
+			// http://dev.w3.org/csswg/cssom/#escape-a-character
+			result += '\\' + string.charAt(index);
+
+		}
+
+		return '#' + result;
+
+	};
+
+	/**
+	 * Calculate the easing pattern
+	 * @link https://gist.github.com/gre/1650294
+	 * @param {String} type Easing pattern
+	 * @param {Number} time Time animation should take to complete
+	 * @returns {Number}
+	 */
+	var easingPattern = function (settings, time) {
+		var pattern;
+
+		// Default Easing Patterns
+		if (settings.easing === 'easeInQuad') pattern = time * time; // accelerating from zero velocity
+		if (settings.easing === 'easeOutQuad') pattern = time * (2 - time); // decelerating to zero velocity
+		if (settings.easing === 'easeInOutQuad') pattern = time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration
+		if (settings.easing === 'easeInCubic') pattern = time * time * time; // accelerating from zero velocity
+		if (settings.easing === 'easeOutCubic') pattern = (--time) * time * time + 1; // decelerating to zero velocity
+		if (settings.easing === 'easeInOutCubic') pattern = time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration
+		if (settings.easing === 'easeInQuart') pattern = time * time * time * time; // accelerating from zero velocity
+		if (settings.easing === 'easeOutQuart') pattern = 1 - (--time) * time * time * time; // decelerating to zero velocity
+		if (settings.easing === 'easeInOutQuart') pattern = time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration
+		if (settings.easing === 'easeInQuint') pattern = time * time * time * time * time; // accelerating from zero velocity
+		if (settings.easing === 'easeOutQuint') pattern = 1 + (--time) * time * time * time * time; // decelerating to zero velocity
+		if (settings.easing === 'easeInOutQuint') pattern = time < 0.5 ? 16 * time * time * time * time * time : 1 + 16 * (--time) * time * time * time * time; // acceleration until halfway, then deceleration
+
+		// Custom Easing Patterns
+		if (!!settings.customEasing) pattern = settings.customEasing(time);
+
+		return pattern || time; // no easing, no acceleration
+	};
+
+	/**
+	 * Determine the document's height
+	 * @returns {Number}
+	 */
+	var getDocumentHeight = function () {
+		return Math.max(
+			document.body.scrollHeight, document.documentElement.scrollHeight,
+			document.body.offsetHeight, document.documentElement.offsetHeight,
+			document.body.clientHeight, document.documentElement.clientHeight
+		);
+	};
+
+	/**
+	 * Calculate how far to scroll
+	 * @param {Element} anchor The anchor element to scroll to
+	 * @param {Number} headerHeight Height of a fixed header, if any
+	 * @param {Number} offset Number of pixels by which to offset scroll
+	 * @returns {Number}
+	 */
+	var getEndLocation = function (anchor, headerHeight, offset) {
+		var location = 0;
+		if (anchor.offsetParent) {
+			do {
+				location += anchor.offsetTop;
+				anchor = anchor.offsetParent;
+			} while (anchor);
+		}
+		location = Math.max(location - headerHeight - offset, 0);
+		return location;
+	};
+
+	/**
+	 * Get the height of the fixed header
+	 * @param  {Node}   header The header
+	 * @return {Number}        The height of the header
+	 */
+	var getHeaderHeight = function (header) {
+		return !header ? 0 : (getHeight(header) + header.offsetTop);
+	};
+
+	/**
+	 * Bring the anchored element into focus
+	 * @param {Node}     anchor      The anchor element
+	 * @param {Number}   endLocation The end location to scroll to
+	 * @param {Boolean}  isNum       If true, scroll is to a position rather than an element
+	 */
+	var adjustFocus = function (anchor, endLocation, isNum) {
+
+		// Don't run if scrolling to a number on the page
+		if (isNum) return;
+
+		// Otherwise, bring anchor element into focus
+		anchor.focus();
+		if (document.activeElement.id !== anchor.id) {
+			anchor.setAttribute('tabindex', '-1');
+			anchor.focus();
+			anchor.style.outline = 'none';
+		}
+		window.scrollTo(0 , endLocation);
+
+	};
+
+	/**
+	 * Check to see if user prefers reduced motion
+	 * @param  {Object} settings Script settings
+	 */
+	var reduceMotion = function (settings) {
+		if ('matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches) {
+			return true;
+		}
+		return false;
+	};
+
+
+	//
+	// SmoothScroll Constructor
+	//
+
+	var SmoothScroll = function (selector, options) {
+
+		//
+		// Variables
+		//
+
+		var smoothScroll = {}; // Object for public APIs
+		var settings, anchor, toggle, fixedHeader, headerHeight, eventTimeout, animationInterval;
+
+
+		//
+		// Methods
+		//
+
+		/**
+		 * Cancel a scroll-in-progress
+		 */
+		smoothScroll.cancelScroll = function () {
+			// clearInterval(animationInterval);
+			cancelAnimationFrame(animationInterval);
+		};
+
+		/**
+		 * Start/stop the scrolling animation
+		 * @param {Node|Number} anchor  The element or position to scroll to
+		 * @param {Element}     toggle  The element that toggled the scroll event
+		 * @param {Object}      options
+		 */
+		smoothScroll.animateScroll = function (anchor, toggle, options) {
+
+			// Local settings
+			var animateSettings = extend(settings || defaults, options || {}); // Merge user options with defaults
+
+			// Selectors and variables
+			var isNum = Object.prototype.toString.call(anchor) === '[object Number]' ? true : false;
+			var anchorElem = isNum || !anchor.tagName ? null : anchor;
+			if (!isNum && !anchorElem) return;
+			var startLocation = window.pageYOffset; // Current location on the page
+			if (animateSettings.header && !fixedHeader) {
+				// Get the fixed header if not already set
+				fixedHeader = document.querySelector( animateSettings.header );
+			}
+			if (!headerHeight) {
+				// Get the height of a fixed header if one exists and not already set
+				headerHeight = getHeaderHeight(fixedHeader);
+			}
+			var endLocation = isNum ? anchor : getEndLocation(anchorElem, headerHeight, parseInt((typeof animateSettings.offset === 'function' ? animateSettings.offset() : animateSettings.offset), 10)); // Location to scroll to
+			var distance = endLocation - startLocation; // distance to travel
+			var documentHeight = getDocumentHeight();
+			var timeLapsed = 0;
+			var start, percentage, position;
+
+			/**
+			 * Stop the scroll animation when it reaches its target (or the bottom/top of page)
+			 * @param {Number} position Current position on the page
+			 * @param {Number} endLocation Scroll to location
+			 * @param {Number} animationInterval How much to scroll on this loop
+			 */
+			var stopAnimateScroll = function (position, endLocation) {
+
+				// Get the current location
+				var currentLocation = window.pageYOffset;
+
+				// Check if the end location has been reached yet (or we've hit the end of the document)
+				if ( position == endLocation || currentLocation == endLocation || ((startLocation < endLocation && window.innerHeight + currentLocation) >= documentHeight )) {
+
+					// Clear the animation timer
+					smoothScroll.cancelScroll();
+
+					// Bring the anchored element into focus
+					adjustFocus(anchor, endLocation, isNum);
+
+					// Run callback after animation complete
+					animateSettings.after(anchor, toggle);
+
+					// Reset start
+					start = null;
+
+					return true;
+
+				}
+			};
+
+			/**
+			 * Loop scrolling animation
+			 */
+			var loopAnimateScroll = function (timestamp) {
+				if (!start) { start = timestamp; }
+				timeLapsed += timestamp - start;
+				percentage = (timeLapsed / parseInt(animateSettings.speed, 10));
+				percentage = (percentage > 1) ? 1 : percentage;
+				position = startLocation + (distance * easingPattern(animateSettings, percentage));
+				window.scrollTo(0, Math.floor(position));
+				if (!stopAnimateScroll(position, endLocation)) {
+					window.requestAnimationFrame(loopAnimateScroll);
+					start = timestamp;
+				}
+			};
+
+			/**
+			 * Reset position to fix weird iOS bug
+			 * @link https://github.com/cferdinandi/smooth-scroll/issues/45
+			 */
+			if (window.pageYOffset === 0) {
+				window.scrollTo( 0, 0 );
+			}
+
+			// Run callback before animation starts
+			animateSettings.before(anchor, toggle);
+
+			// Start scrolling animation
+			smoothScroll.cancelScroll();
+			window.requestAnimationFrame(loopAnimateScroll);
+
+
+		};
+
+		/**
+		 * Handle has change event
+		 */
+		var hashChangeHandler = function (event) {
+
+			// Only run if there's an anchor element to scroll to
+			if (!anchor) return;
+
+			// Reset the anchor element's ID
+			anchor.id = anchor.getAttribute('data-scroll-id');
+
+			// Scroll to the anchored content
+			smoothScroll.animateScroll(anchor, toggle);
+
+			// Reset anchor and toggle
+			anchor = null;
+			toggle = null;
+
+		};
+
+		/**
+		 * If smooth scroll element clicked, animate scroll
+		 */
+		var clickHandler = function (event) {
+
+			// Don't run if the user prefers reduced motion
+			if (reduceMotion(settings)) return;
+
+			// Don't run if right-click or command/control + click
+			if (event.button !== 0 || event.metaKey || event.ctrlKey) return;
+
+			// Check if a smooth scroll link was clicked
+			toggle = event.target.closest(selector);
+			if (!toggle || toggle.tagName.toLowerCase() !== 'a' || event.target.closest(settings.ignore)) return;
+
+			// Only run if link is an anchor and points to the current page
+			if (toggle.hostname !== window.location.hostname || toggle.pathname !== window.location.pathname || !/#/.test(toggle.href)) return;
+
+			// Get the sanitized hash
+			var hash;
+			try {
+				hash = escapeCharacters(decodeURIComponent(toggle.hash));
+			} catch(e) {
+				hash = escapeCharacters(toggle.hash);
+			}
+
+			// If the hash is empty, scroll to the top of the page
+			if (hash === '#') {
+
+				// Prevent default link behavior
+				event.preventDefault();
+
+				// Set the anchored element
+				anchor = document.body;
+
+				// Save or create the ID as a data attribute and remove it (prevents scroll jump)
+				var id = anchor.id ? anchor.id : 'smooth-scroll-top';
+				anchor.setAttribute('data-scroll-id', id);
+				anchor.id = '';
+
+				// If no hash change event will happen, fire manually
+				// Otherwise, update the hash
+				if (window.location.hash.substring(1) === id) {
+					hashChangeHandler();
+				} else {
+					window.location.hash = id;
+				}
+
+				return;
+
+			}
+
+			// Get the anchored element
+			anchor = document.querySelector(hash);
+
+			// If anchored element exists, save the ID as a data attribute and remove it (prevents scroll jump)
+			if (!anchor) return;
+			anchor.setAttribute('data-scroll-id', anchor.id);
+			anchor.id = '';
+
+			// If no hash change event will happen, fire manually
+			if (toggle.hash === window.location.hash) {
+				event.preventDefault();
+				hashChangeHandler();
+			}
+
+		};
+
+		/**
+		 * On window scroll and resize, only run events at a rate of 15fps for better performance
+		 */
+		var resizeThrottler = function (event) {
+			if (!eventTimeout) {
+				eventTimeout = setTimeout((function() {
+					eventTimeout = null; // Reset timeout
+					headerHeight = getHeaderHeight(fixedHeader); // Get the height of a fixed header if one exists
+				}), 66);
+			}
+		};
+
+		/**
+		 * Destroy the current initialization.
+		 */
+		smoothScroll.destroy = function () {
+
+			// If plugin isn't already initialized, stop
+			if (!settings) return;
+
+			// Remove event listeners
+			document.removeEventListener('click', clickHandler, false);
+			window.removeEventListener('resize', resizeThrottler, false);
+
+			// Cancel any scrolls-in-progress
+			smoothScroll.cancelScroll();
+
+			// Reset variables
+			settings = null;
+			anchor = null;
+			toggle = null;
+			fixedHeader = null;
+			headerHeight = null;
+			eventTimeout = null;
+			animationInterval = null;
+		};
+
+		/**
+		 * Initialize Smooth Scroll
+		 * @param {Object} options User settings
+		 */
+		smoothScroll.init = function (options) {
+
+			// feature test
+			if (!supports) return;
+
+			// Destroy any existing initializations
+			smoothScroll.destroy();
+
+			// Selectors and variables
+			settings = extend(defaults, options || {}); // Merge user options with defaults
+			fixedHeader = settings.header ? document.querySelector(settings.header) : null; // Get the fixed header
+			headerHeight = getHeaderHeight(fixedHeader);
+
+			// When a toggle is clicked, run the click handler
+			document.addEventListener('click', clickHandler, false);
+
+			// Listen for hash changes
+			window.addEventListener('hashchange', hashChangeHandler, false);
+
+			// If window is resized and there's a fixed header, recalculate its size
+			if (fixedHeader) {
+				window.addEventListener('resize', resizeThrottler, false);
+			}
+
+		};
+
+
+		//
+		// Initialize plugin
+		//
+
+		smoothScroll.init(options);
+
+
+		//
+		// Public APIs
+		//
+
+		return smoothScroll;
+
+	};
+
+	return SmoothScroll;
+
+}));

data/app/views/tramway/landing/blocks/block_types/_cards.html.haml

@@ -1,11 +1,11 @@
-.container.text-center
+.container.text-center{ id: block.anchor }
   %h2.mb-4.font-weight-bold
     = block.title
   %p.grey-text
     = block.description
-  .row{ id: block.anchor }
+  .row
     -# FIXME bad guy mode ON
-    - eval("@collection_#{block.anchor}").each do |item|
+    - eval("@collection_#{block.anchor}")&.each do |item|
       .col-lg-4.col-md-12.mb-4
         - if item.path.present?
           = link_to item.path do

data/app/views/tramway/landing/blocks/block_types/_contacts.html.haml

@@ -1,4 +1,4 @@
-%script{ src: 'https://maps.google.com/maps/api/js?key=AIzaSyDC054dWb7cQ_mULJk3d1UBK6pN8msCx1g' }
+%script{ src: 'https://maps.google.com/maps/api/js?key=AIzaSyD4shvkgS4S4Mz-SEWbigeCQ54fHmFPxUo' }
 :javascript
   function regular_map() {
     var var_location = new google.maps.LatLng(#{yield(:latitude)}, #{yield(:longtitude)});
@@ -14,11 +14,11 @@
     var var_marker = new google.maps.Marker({
         position: var_location,
         map: var_map,
-        title: "New York"
+        title: "School"
     });
   }
   google.maps.event.addDomListener(window, 'load', regular_map);
-#contact
+#contacts
   %h2.mb-5.font-weight-bold.text-center
     = block.title
   .row

data/app/views/tramway/landing/blocks/block_types/_features.html.haml

@@ -1,6 +1,6 @@
-%main.mt-5
+%main.mt-5{ id: block.anchor }
   .container
-    %section#best-features.text-center{ id: block.anchor }
+    %section#best-features.text-center
       %h2.mb-4.font-weight-bold
         = block.title
       .row.d-flex.justify-content-center.mb-4

data/app/views/tramway/landing/blocks/block_types/_header.html.haml

@@ -1,3 +1,4 @@
+= javascript_include_tag 'tramway/landing/smooth-scroll'
 %header
   %nav.navbar.navbar-expand-lg.navbar-dark.indigo.scrolling-navbar.fixed-top
     = link_to yield(:application_name), '#', class: 'navbar-brand'
@@ -20,3 +21,5 @@
           - @blocks.with_navbar_link.each do |block|
             %button.btn.btn-outline-white.waves-effect.waves-light.header-buttons{ type: :button, data: { anchor: "##{block.anchor}" } }
               = block.title
+  %script
+    var scroll = new SmoothScroll('a[href*="#"]');

data/app/views/tramway/landing/blocks/block_types/_page.html.haml

@@ -1,4 +1,4 @@
-.row
+.row{ id: block.anchor }
   .col-md-7
     = image_tag block.background, class: 'img-fluid'
   .col-md-5

data/config/initializers/assets.rb

@@ -1 +1,2 @@
-Rails.application.config.assets.precompile += %w( tramway/landing/footer.js  )
+Rails.application.config.assets.precompile += %w( tramway/landing/footer.js )
+Rails.application.config.assets.precompile += %w( tramway/landing/smooth-scroll.js )

data/lib/tramway/landing/version.rb

@@ -1,5 +1,5 @@
 module Tramway
   module Landing
-    VERSION = '1.0'
+    VERSION = '1.1'
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: tramway-landing
 version: !ruby/object:Gem::Version
-  version: '1.0'
+  version: '1.1'
 platform: ruby
 authors:
 - Pavel Kalashnikov
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-02-21 00:00:00.000000000 Z
+date: 2018-03-14 00:00:00.000000000 Z
 dependencies: []
 description: Landing Engine for your Rails projects
 email:
@@ -24,6 +24,7 @@ files:
 - app/assets/javascripts/justified_images.js
 - app/assets/javascripts/tramway/landing/application.js.coffee
 - app/assets/javascripts/tramway/landing/footer.js.coffee
+- app/assets/javascripts/tramway/landing/smooth-scroll.js
 - app/assets/stylesheets/tramway/landing/application.css.sass
 - app/assets/stylesheets/tramway/landing/collage.css.sass
 - app/assets/stylesheets/tramway/landing/justified.css