Created
July 1, 2015 22:39
-
-
Save vivanov1410/9dc2564c664a7b448cd0 to your computer and use it in GitHub Desktop.
Diagram for connio website
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function () { | |
| 'use strict'; | |
| var app = this.app || (this.app = {}); | |
| app.Diagram = (function () { | |
| function Diagram() { | |
| this.started = false; | |
| this._nodes = { | |
| top: { | |
| prefix: '#internet-objects', | |
| lines: [ '#top-left-line', '#top-right-line' ], | |
| animation: 'fadeInDownBig' | |
| }, | |
| topLeft: { | |
| prefix: '#places', | |
| lines: [ '#middle-left-line' ], | |
| animation: 'fadeInLeftBig' | |
| }, | |
| topRight: { | |
| prefix: '#apps', | |
| lines: [ '#middle-right-line' ], | |
| animation: 'fadeInRightBig' | |
| }, | |
| bottomLeft: { | |
| prefix: '#your-people', | |
| lines: [ '#bottom-left-line' ], | |
| animation: 'fadeInLeftBig' | |
| }, | |
| bottomRight: { | |
| prefix: '#external-systems', | |
| lines: [ '#bottom-right-line' ], | |
| animation: 'fadeInRightBig' | |
| }, | |
| bottom: { | |
| prefix: '#your-organization', | |
| lines: [], | |
| animation: 'fadeInUpBig' | |
| }, | |
| }; | |
| } | |
| Diagram.prototype.init = function () { | |
| this._initNode('top'); | |
| this._initNode('topLeft'); | |
| this._initNode('topRight'); | |
| this._initNode('bottomLeft'); | |
| this._initNode('bottomRight'); | |
| this._initNode('bottom'); | |
| $('#top-left-line').hide(); | |
| $('#top-right-line').hide(); | |
| $('#middle-left-line').hide(); | |
| $('#middle-right-line').hide(); | |
| $('#bottom-left-line').hide(); | |
| $('#bottom-right-line').hide(); | |
| $('#connio-logo').hide(); | |
| }; | |
| Diagram.prototype.animate = function () { | |
| var self = this; | |
| this.started = true; | |
| var duration = 3500; | |
| this._animateNode('top'); | |
| setTimeout(function () { | |
| self._animateNode('topLeft'); | |
| self._animateNode('topRight'); | |
| }, duration); | |
| setTimeout(function () { | |
| self._animateNode('bottomLeft'); | |
| self._animateNode('bottomRight'); | |
| }, duration * 2); | |
| setTimeout(function () { | |
| self._animateNode('bottom'); | |
| }, duration * 3); | |
| if(app.Helper.isSafari) { | |
| setTimeout(function () { | |
| $('#connio-logo').fadeIn(); | |
| }, duration * 3.8); | |
| } else { | |
| setTimeout(function () { | |
| $('#connio-logo').fadeIn(); | |
| }, duration * 4); | |
| } | |
| }; | |
| Diagram.prototype._initNode = function (position) { | |
| var node = this._nodes[position]; | |
| $(node.prefix + '-text').hide(); | |
| if(!app.Helper.isSafari && !app.Helper.isAndroid) { | |
| $(node.prefix + '-text').attr('class', 'animated ' + node.animation); | |
| } | |
| $(node.prefix + '-tip').hide(); | |
| $(node.prefix + '-small-circle').hide(); | |
| $(node.prefix + '-big-circle').hide(); | |
| $(node.prefix + '-icon').hide(); | |
| $(node.prefix + '-icon').attr('class', 'animated fadeIn'); | |
| }; | |
| Diagram.prototype._animateNode = function (position) { | |
| var node = this._nodes[position]; | |
| var self = this; | |
| var duration = 500; | |
| $(node.prefix +'-big-circle').show(); | |
| this._animatePart(node.prefix +'-big-circle', duration); | |
| setTimeout(function () { | |
| if(app.Helper.isFirefox) { | |
| $(node.prefix +'-icon').fadeIn(function () { | |
| self._animateText(node); | |
| }); | |
| } else { | |
| $(node.prefix +'-icon').show(); | |
| $(node.prefix +'-icon').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () { | |
| self._animateText(node); | |
| }); | |
| } | |
| }, duration); | |
| }; | |
| Diagram.prototype._animateText = function (node) { | |
| var self = this; | |
| var duration = 500; | |
| $(node.prefix +'-small-circle').show(); | |
| $(node.prefix +'-tip').show(); | |
| this._animatePart(node.prefix +'-tip', duration); | |
| setTimeout(function () { | |
| if(app.Helper.isSafari || app.Helper.isFirefox || app.Helper.isAndroid) { | |
| $(node.prefix +'-text').fadeIn(function () { | |
| self._animateLines(node); | |
| }); | |
| } else { | |
| $(node.prefix +'-text').show(); | |
| $(node.prefix +'-text').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () { | |
| self._animateLines(node); | |
| }); | |
| } | |
| }, duration); | |
| }; | |
| Diagram.prototype._animateLines = function (node) { | |
| var duration = 500; | |
| for(var i = 0; i < node.lines.length; i++) { | |
| var line = node.lines[i] ; | |
| $(line).show(); | |
| this._animatePart(line, duration); | |
| } | |
| }; | |
| Diagram.prototype._animatePart = function (query, time) { | |
| var path = document.querySelector(query); | |
| if(path) { | |
| var length = path.getTotalLength(); | |
| // clear previous transition | |
| path.style.transition = path.style.WebkitTransition = 'none'; | |
| // setup starting positions | |
| path.style.strokeDasharray = length + ' ' + length; | |
| path.style.strokeDashoffset = length; | |
| // trigger a layout | |
| path.getBoundingClientRect(); | |
| // define transition | |
| path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset ' + time + 'ms ' + 'ease-in-out'; | |
| // go! | |
| path.style.strokeDashoffset = '0'; | |
| } | |
| }; | |
| return Diagram; | |
| })(); | |
| }).call(this); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment