Browse Source

Added swipe to navigate instructions and bug fixes

pull/246/head v2.17
Zach Wise 12 years ago
parent
commit
a89ae221a3
  1. 11
      compiled/css/themes/dark.css
  2. BIN
      compiled/css/themes/timeline-dark.png
  3. 11
      compiled/css/timeline.css
  4. BIN
      compiled/css/timeline.png
  5. 2
      compiled/js/storyjs-embed.js
  6. 10
      compiled/js/timeline-min.js
  7. 65
      compiled/js/timeline.js
  8. BIN
      source/gfx/timeline-dark.psd
  9. BIN
      source/gfx/timeline.psd
  10. 2
      source/js/Core
  11. 2
      source/js/VMM.Timeline.License.js
  12. 7
      source/js/VMM.Timeline.js
  13. 2
      source/less/Core

11
compiled/css/themes/dark.css

@ -149,10 +149,13 @@
.vco-storyjs .vmm-clear:after{clear:both;}
.vco-storyjs .vmm-clear{*zoom:1;}
.vco-storyjs .vco-feature{width:100%;}.vco-storyjs .vco-feature .slider,.vco-storyjs .vco-feature .vco-slider{width:100%;float:left;position:relative;z-index:10;padding-top:15px;-webkit-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);}
.vco-storyjs .vco-feedback{position:absolute;display:table;overflow:hidden;top:0px;left:0px;z-index:205;width:100%;height:100%;background-color:#1a1a1a;}
.vco-storyjs div.vco-loading{display:table;text-align:center;min-width:100px;margin-top:15px;height:100%;width:100%;background-color:#1a1a1a;}.vco-storyjs div.vco-loading .vco-loading-container{display:table-cell;vertical-align:middle;}.vco-storyjs div.vco-loading .vco-loading-container .vco-loading-icon{display:block;background-repeat:no-repeat;vertical-align:middle;margin-left:auto;margin-right:auto;text-align:center;background-image:url(themes/loading.gif?v3.4);width:28px;height:28px;}
.vco-storyjs div.vco-loading .vco-loading-container .vco-message{display:block;}
.vco-storyjs div.vco-loading .vco-loading-container .vco-message,.vco-storyjs div.vco-loading .vco-loading-container .vco-message p{text-align:center;font-size:11px;line-height:13px;text-transform:uppercase;margin-top:7.5px;margin-bottom:7.5px;}
.vco-storyjs .vco-feedback{position:absolute;display:table;overflow:hidden;top:0px;left:0px;z-index:205;width:100%;height:100%;}
.vco-storyjs div.vco-loading,.vco-storyjs div.vco-explainer{display:table;text-align:center;min-width:100px;margin-top:15px;height:100%;width:100%;background-color:#1a1a1a;}.vco-storyjs div.vco-loading .vco-loading-container,.vco-storyjs div.vco-explainer .vco-loading-container,.vco-storyjs div.vco-loading .vco-explainer-container,.vco-storyjs div.vco-explainer .vco-explainer-container{display:table-cell;vertical-align:middle;}.vco-storyjs div.vco-loading .vco-loading-container .vco-loading-icon,.vco-storyjs div.vco-explainer .vco-loading-container .vco-loading-icon,.vco-storyjs div.vco-loading .vco-explainer-container .vco-loading-icon,.vco-storyjs div.vco-explainer .vco-explainer-container .vco-loading-icon{display:block;background-repeat:no-repeat;vertical-align:middle;margin-left:auto;margin-right:auto;text-align:center;background-image:url(themes/loading.gif?v3.4);width:28px;height:28px;}
.vco-storyjs div.vco-loading .vco-loading-container .vco-gesture-icon,.vco-storyjs div.vco-explainer .vco-loading-container .vco-gesture-icon,.vco-storyjs div.vco-loading .vco-explainer-container .vco-gesture-icon,.vco-storyjs div.vco-explainer .vco-explainer-container .vco-gesture-icon{display:block;vertical-align:middle;margin-left:auto;margin-right:auto;text-align:center;background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:-160px -160px;width:48px;height:48px;}
.vco-storyjs div.vco-loading .vco-loading-container .vco-message,.vco-storyjs div.vco-explainer .vco-loading-container .vco-message,.vco-storyjs div.vco-loading .vco-explainer-container .vco-message,.vco-storyjs div.vco-explainer .vco-explainer-container .vco-message{display:block;}
.vco-storyjs div.vco-loading .vco-loading-container .vco-message,.vco-storyjs div.vco-explainer .vco-loading-container .vco-message,.vco-storyjs div.vco-loading .vco-explainer-container .vco-message,.vco-storyjs div.vco-explainer .vco-explainer-container .vco-message,.vco-storyjs div.vco-loading .vco-loading-container .vco-message p,.vco-storyjs div.vco-explainer .vco-loading-container .vco-message p,.vco-storyjs div.vco-loading .vco-explainer-container .vco-message p,.vco-storyjs div.vco-explainer .vco-explainer-container .vco-message p{text-align:center;font-size:11px;line-height:13px;text-transform:uppercase;margin-top:7.5px;margin-bottom:7.5px;}
.vco-storyjs div.vco-explainer{background-color:transparent;}
.vco-storyjs .vco-bezel{background-color:#aaaaaa;background-color:rgba(255, 255, 255, 0.8);width:80px;height:50px;padding:50px;padding-top:25px;padding:25px 20px 50px 20px;margin:auto;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}.vco-storyjs .vco-bezel .vco-message,.vco-storyjs .vco-bezel .vco-message p{color:#1a1a1a;font-weight:bold;}
.vco-storyjs .vco-container.vco-main{position:absolute;top:0px;left:0px;padding-bottom:3px;width:auto;height:auto;margin:0px;clear:both;}
.vco-storyjs img,.vco-storyjs embed,.vco-storyjs object,.vco-storyjs video,.vco-storyjs iframe{max-width:100%;}
.vco-storyjs img{max-height:100%;border:1px solid #999999;}

BIN
compiled/css/themes/timeline-dark.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

11
compiled/css/timeline.css

@ -149,10 +149,13 @@
.vco-storyjs .vmm-clear:after{clear:both;}
.vco-storyjs .vmm-clear{*zoom:1;}
.vco-storyjs .vco-feature{width:100%;}.vco-storyjs .vco-feature .slider,.vco-storyjs .vco-feature .vco-slider{width:100%;float:left;position:relative;z-index:10;padding-top:15px;-webkit-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);}
.vco-storyjs .vco-feedback{position:absolute;display:table;overflow:hidden;top:0px;left:0px;z-index:205;width:100%;height:100%;background-color:#ffffff;}
.vco-storyjs div.vco-loading{display:table;text-align:center;min-width:100px;margin-top:15px;height:100%;width:100%;background-color:#ffffff;}.vco-storyjs div.vco-loading .vco-loading-container{display:table-cell;vertical-align:middle;}.vco-storyjs div.vco-loading .vco-loading-container .vco-loading-icon{display:block;background-repeat:no-repeat;vertical-align:middle;margin-left:auto;margin-right:auto;text-align:center;background-image:url(loading.gif?v3.4);width:28px;height:28px;}
.vco-storyjs div.vco-loading .vco-loading-container .vco-message{display:block;}
.vco-storyjs div.vco-loading .vco-loading-container .vco-message,.vco-storyjs div.vco-loading .vco-loading-container .vco-message p{text-align:center;font-size:11px;line-height:13px;text-transform:uppercase;margin-top:7.5px;margin-bottom:7.5px;}
.vco-storyjs .vco-feedback{position:absolute;display:table;overflow:hidden;top:0px;left:0px;z-index:205;width:100%;height:100%;}
.vco-storyjs div.vco-loading,.vco-storyjs div.vco-explainer{display:table;text-align:center;min-width:100px;margin-top:15px;height:100%;width:100%;background-color:#ffffff;}.vco-storyjs div.vco-loading .vco-loading-container,.vco-storyjs div.vco-explainer .vco-loading-container,.vco-storyjs div.vco-loading .vco-explainer-container,.vco-storyjs div.vco-explainer .vco-explainer-container{display:table-cell;vertical-align:middle;}.vco-storyjs div.vco-loading .vco-loading-container .vco-loading-icon,.vco-storyjs div.vco-explainer .vco-loading-container .vco-loading-icon,.vco-storyjs div.vco-loading .vco-explainer-container .vco-loading-icon,.vco-storyjs div.vco-explainer .vco-explainer-container .vco-loading-icon{display:block;background-repeat:no-repeat;vertical-align:middle;margin-left:auto;margin-right:auto;text-align:center;background-image:url(loading.gif?v3.4);width:28px;height:28px;}
.vco-storyjs div.vco-loading .vco-loading-container .vco-gesture-icon,.vco-storyjs div.vco-explainer .vco-loading-container .vco-gesture-icon,.vco-storyjs div.vco-loading .vco-explainer-container .vco-gesture-icon,.vco-storyjs div.vco-explainer .vco-explainer-container .vco-gesture-icon{display:block;vertical-align:middle;margin-left:auto;margin-right:auto;text-align:center;background-image:url(timeline.png?v4.3);background-repeat:no-repeat;background-position:-160px -160px;width:48px;height:48px;}
.vco-storyjs div.vco-loading .vco-loading-container .vco-message,.vco-storyjs div.vco-explainer .vco-loading-container .vco-message,.vco-storyjs div.vco-loading .vco-explainer-container .vco-message,.vco-storyjs div.vco-explainer .vco-explainer-container .vco-message{display:block;}
.vco-storyjs div.vco-loading .vco-loading-container .vco-message,.vco-storyjs div.vco-explainer .vco-loading-container .vco-message,.vco-storyjs div.vco-loading .vco-explainer-container .vco-message,.vco-storyjs div.vco-explainer .vco-explainer-container .vco-message,.vco-storyjs div.vco-loading .vco-loading-container .vco-message p,.vco-storyjs div.vco-explainer .vco-loading-container .vco-message p,.vco-storyjs div.vco-loading .vco-explainer-container .vco-message p,.vco-storyjs div.vco-explainer .vco-explainer-container .vco-message p{text-align:center;font-size:11px;line-height:13px;text-transform:uppercase;margin-top:7.5px;margin-bottom:7.5px;}
.vco-storyjs div.vco-explainer{background-color:transparent;}
.vco-storyjs .vco-bezel{background-color:#333333;background-color:rgba(0, 0, 0, 0.8);width:80px;height:50px;padding:50px;padding-top:25px;padding:25px 20px 50px 20px;margin:auto;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}.vco-storyjs .vco-bezel .vco-message,.vco-storyjs .vco-bezel .vco-message p{color:#ffffff;font-weight:bold;}
.vco-storyjs .vco-container.vco-main{position:absolute;top:0px;left:0px;padding-bottom:3px;width:auto;height:auto;margin:0px;clear:both;}
.vco-storyjs img,.vco-storyjs embed,.vco-storyjs object,.vco-storyjs video,.vco-storyjs iframe{max-width:100%;}
.vco-storyjs img{max-height:100%;border:1px solid #999999;}

BIN
compiled/css/timeline.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

2
compiled/js/storyjs-embed.js

File diff suppressed because one or more lines are too long

10
compiled/js/timeline-min.js vendored

File diff suppressed because one or more lines are too long

65
compiled/js/timeline.js

@ -1,6 +1,6 @@
/*!
TimelineJS
Version 2.16
Version 2.17
Designed and built by Zach Wise at VéritéCo
This Source Code Form is subject to the terms of the Mozilla Public
@ -3053,6 +3053,7 @@ if(typeof VMM != 'undefined' && typeof VMM.ExternalAPI == 'undefined') {
map_options = {
zoom: zoom,
draggable: false,
disableDefaultUI: true,
mapTypeControl: false,
zoomControl: true,
@ -4752,6 +4753,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
$slider_container,
$slides_items,
$dragslide,
$explainer,
events = {},
data = [],
slides = [],
@ -5047,6 +5049,10 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
}
};
function onExplainerClick(e) {
detachMessege();
}
/* UPDATE
================================================== */
function upDate() {
@ -5056,13 +5062,13 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
/* GET DATA
================================================== */
var getData = function(d) {
function getData(d) {
data = d;
};
/* BUILD SLIDES
================================================== */
var buildSlides = function(d) {
function buildSlides(d) {
var i = 0;
VMM.attachElement($slides_items, "");
@ -5075,7 +5081,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
}
}
var preloadSlides = function(skip) {
function preloadSlides(skip) {
var i = 0;
if (skip) {
@ -5089,7 +5095,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
}
}
var preloadTimeOutSlides = function() {
function preloadTimeOutSlides() {
var i = 0;
for(i = 0; i < slides.length; i++) {
@ -5118,12 +5124,13 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
sizeSlides();
}
var sizeSlide = function(slide_id) {
function sizeSlide(slide_id) {
}
/* SIZE SLIDES
================================================== */
var sizeSlides = function() {
function sizeSlides() {
var i = 0,
layout_text_media = ".slider-item .layout-text-media .media .media-container ",
layout_media = ".slider-item .layout-media .media .media-container ",
@ -5429,15 +5436,33 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
}
preloadSlides();
VMM.fireEvent($slider, "MESSAGE", "TEST");
}
function backToCurrentSlide() {
VMM.Lib.stop($slider_container);
VMM.Lib.animate($slider_container, config.duration, "easeOutExpo", {"left": -(slides[current_slide].leftpos()) + config.slider.content.padding} );
}
/* MESSEGES
================================================== */
function showMessege(e, msg, other) {
trace("showMessege " + msg);
//VMM.attachElement($timeline, $feedback);
VMM.attachElement($explainer, "<div class='vco-explainer'><div class='vco-explainer-container'><div class='vco-bezel'><div class='vco-gesture-icon'></div>" + "<div class='vco-message'><p>" + msg + "</p></div></div></div></div>");
};
function hideMessege() {
VMM.Lib.animate($explainer, config.duration, config.ease, {"opacity": 0}, detachMessege);
};
function detachMessege() {
VMM.Lib.detach($explainer);
}
/* BUILD NAVIGATION
================================================== */
var buildNavigation = function() {
function buildNavigation() {
var temp_icon = "<div class='icon'>&nbsp;</div>";
@ -5460,7 +5485,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
/* BUILD
================================================== */
var build = function() {
function build() {
var __duration = 3000;
// Clear out existing content
VMM.attachElement(layout, "");
@ -5471,6 +5496,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
$slider_container = VMM.appendAndGetElement($slider_mask, "<div>", "slider-container");
$slides_items = VMM.appendAndGetElement($slider_container, "<div>", "slider-item-container");
// BUILD NAVIGATION
buildNavigation();
@ -5481,15 +5507,25 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
================================================== */
if (VMM.Browser.device == "tablet" || VMM.Browser.device == "mobile") {
// Different Animation duration for touch
config.duration = 500;
__duration = 1000;
// Make touchable
$dragslide = new VMM.DragSlider();
$dragslide.createPanel($slider_mask, $slider_container, "", config.touch, true);
$dragslide.createPanel($slider, $slider_container, "", config.touch, true);
VMM.bindEvent($dragslide, onDragFinish, 'DRAGUPDATE');
//"<div class='vco-loading'><div class='vco-loading-container'><div class='vco-loading-icon'></div>" + "<div class='vco-message'><p>" + "Slide" + "</p></div></div></div>"
// EXPLAINER
$explainer = VMM.appendAndGetElement($slider_mask, "<div>", "vco-feedback", "");
showMessege(null, "Swipe to Navigate");
VMM.Lib.height($explainer, config.slider.height);
VMM.bindEvent($explainer, onExplainerClick);
}
reSize(false, true);
VMM.Lib.visible(navigation.prevBtn, false);
goToSlide(config.current_slide, "easeOutExpo", __duration, true, true);
@ -6889,10 +6925,6 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
timenav.setMarker(config.current_slide, config.ease,config.duration);
};
function onSliderMessage(e, d) {
};
function onMarkerUpdate(e) {
is_moving = true;
config.current_slide = timenav.getCurrentNumber();
@ -7043,7 +7075,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
================================================== */
function showMessege(e, msg, other) {
trace("showMessege " + msg);
//VMM.attachElement($messege, msg);
//VMM.attachElement($timeline, $feedback);
if (other) {
VMM.attachElement($feedback, msg);
} else{
@ -7086,7 +7118,6 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
VMM.bindEvent($slider, onSliderLoaded, "LOADED");
VMM.bindEvent($navigation, onTimeNavLoaded, "LOADED");
VMM.bindEvent($slider, onSlideUpdate, "UPDATE");
VMM.bindEvent($slider, onSliderMessage, "MESSAGE");
VMM.bindEvent($navigation, onMarkerUpdate, "UPDATE");
// INITIALIZE COMPONENTS

BIN
source/gfx/timeline-dark.psd

Binary file not shown.

BIN
source/gfx/timeline.psd

Binary file not shown.

2
source/js/Core

@ -1 +1 @@
Subproject commit 44892210e8938052d451e8344ba4b05c2d61f297
Subproject commit edcd60cb563da8b2f24ab82119032ba3c32f41e1

2
source/js/VMM.Timeline.License.js

@ -1,6 +1,6 @@
/*!
TimelineJS
Version 2.16
Version 2.17
Designed and built by Zach Wise at VéritéCo
This Source Code Form is subject to the terms of the Mozilla Public

7
source/js/VMM.Timeline.js

@ -322,10 +322,6 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
timenav.setMarker(config.current_slide, config.ease,config.duration);
};
function onSliderMessage(e, d) {
};
function onMarkerUpdate(e) {
is_moving = true;
config.current_slide = timenav.getCurrentNumber();
@ -476,7 +472,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
================================================== */
function showMessege(e, msg, other) {
trace("showMessege " + msg);
//VMM.attachElement($messege, msg);
//VMM.attachElement($timeline, $feedback);
if (other) {
VMM.attachElement($feedback, msg);
} else{
@ -519,7 +515,6 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
VMM.bindEvent($slider, onSliderLoaded, "LOADED");
VMM.bindEvent($navigation, onTimeNavLoaded, "LOADED");
VMM.bindEvent($slider, onSlideUpdate, "UPDATE");
VMM.bindEvent($slider, onSliderMessage, "MESSAGE");
VMM.bindEvent($navigation, onMarkerUpdate, "UPDATE");
// INITIALIZE COMPONENTS

2
source/less/Core

@ -1 +1 @@
Subproject commit 2dc6fdf11dd98fd961b0cb84ceddfe193a97f88f
Subproject commit 9e524d354e1d7936a91e4eadf1ad8de96cdcd764
Loading…
Cancel
Save