Author: nivanov Date: Thu Jan 22 22:11:41 2015 New Revision: 1654085 URL: http://svn.apache.org/r1654085 Log: WIP.
Modified: incubator/ignite/site/branches/sidenav/css/all.css incubator/ignite/site/branches/sidenav/index.html incubator/ignite/site/branches/sidenav/js/jquery.main.js incubator/ignite/site/branches/sidenav/scss/all.scss Modified: incubator/ignite/site/branches/sidenav/css/all.css URL: http://svn.apache.org/viewvc/incubator/ignite/site/branches/sidenav/css/all.css?rev=1654085&r1=1654084&r2=1654085&view=diff ============================================================================== --- incubator/ignite/site/branches/sidenav/css/all.css (original) +++ incubator/ignite/site/branches/sidenav/css/all.css Thu Jan 22 22:11:41 2015 @@ -7939,6 +7939,9 @@ p { font-size: 18px; } +.overview { + padding-top: 60px; +} .overview p { text-align: center; } @@ -7955,3 +7958,20 @@ p { float: left; vertical-align: top; } + +.carousel-inner p { + color: #fff; +} + +.carousel .img-holder { + margin: 0; +} +.carousel .img-holder img { + width: auto; + height: auto; +} + +div#banner1 p { + padding-bottom: 40px; + font-size: 24px; +} Modified: incubator/ignite/site/branches/sidenav/index.html URL: http://svn.apache.org/viewvc/incubator/ignite/site/branches/sidenav/index.html?rev=1654085&r1=1654084&r2=1654085&view=diff ============================================================================== --- incubator/ignite/site/branches/sidenav/index.html (original) +++ incubator/ignite/site/branches/sidenav/index.html Thu Jan 22 22:11:41 2015 @@ -40,89 +40,88 @@ </div> </div> </header> - <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="3000"> + <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="300000"> <div class="container"> <div class="carousel-inner" role="listbox"> <!-- Carousel items --> <div class="item active"> - <header> + <div id="banner1"> <h1>Apache Ignite</h1> <p>In-Memory Data Fabric</p> <ul class="buttons list-unstyled"> <li><a href="#download" class="btn btn-danger">Download</a></li> <li><a href="#overview" class="btn btn-default">Learn More</a></li> </ul> - </header> - <div class="text"> - <p>In Memory Computing Made Simple</p> </div> </div> <div class="item cloud"> - <div class="row"> - <div class="col-md-4 col-sm-5"> - <header> - <h1>Apache Ignite</h1> - <p>In-Memory Data Fabric</p> - <ul class="buttons list-unstyled"> - <li><a href="#download" class="btn btn-danger">Download</a></li> - <li><a href="#overview" class="btn btn-default">Learn More</a></li> - </ul> - </header> - <div class="text"> - <small>In Memory Computing Made Simple</small> - </div> - </div> - <div class="col-md-8 col-sm-7"> - <div class="img-holder"> - <img src="images/img1.png" alt="image description"> - </div> - </div> - </div> - </div> - <div class="item cloud"> - <div class="row"> - <div class="col-md-4 col-sm-5"> - <header> - <h1>Apache Ignite</h1> - <p>In-Memory Data Fabric</p> - <ul class="buttons list-unstyled"> - <li><a href="#download" class="btn btn-danger">Download</a></li> - <li><a href="#overview" class="btn btn-default">Learn More</a></li> - </ul> - </header> - <div class="text"> - <small>In Memory Computing Made Simple</small> - </div> - </div> - <div class="col-md-8 col-sm-7"> + <!--<div class="row">--> + <!--<div class="col-md-4 col-sm-5">--> + <!--<header>--> + <!--<h1>Apache Ignite</h1>--> + <!--<p>In-Memory Data Fabric</p>--> + <!--<ul class="buttons list-unstyled">--> + <!--<li><a href="#download" class="btn btn-danger">Download</a></li>--> + <!--<li><a href="#overview" class="btn btn-default">Learn More</a></li>--> + <!--</ul>--> + <!--</header>--> + <!--<div class="text">--> + <!--<small>In Memory Computing Made Simple</small>--> + <!--</div>--> + <!--</div>--> + <!--<div class="col-md-8 col-sm-7">--> <div class="img-holder"> - <img src="images/compute_grid.png" alt="image description"> + <img + style="margin-left: 20%; margin-top: 50px;" + src="images/img1.png"> </div> - </div> - </div> - </div> - <div class="item cloud"> - <div class="row"> - <div class="col-md-4 col-sm-5"> - <header> - <h1>Apache Ignite</h1> - <p>In-Memory Data Fabric</p> - <ul class="buttons list-unstyled"> - <li><a href="#download" class="btn btn-danger">Download</a></li> - <li><a href="#overview" class="btn btn-default">Learn More</a></li> - </ul> - </header> - <div class="text"> - <small>In Memory Computing Made Simple</small> - </div> - </div> - <div class="col-md-8 col-sm-7"> - <div class="img-holder"> - <img src="images/streaming.png" alt="image description"> - </div> - </div> - </div> + <!--</div>--> + <!--</div>--> </div> + <!--<div class="item cloud">--> + <!--<div class="row">--> + <!--<div class="col-md-4 col-sm-5">--> + <!--<header>--> + <!--<h1>Apache Ignite</h1>--> + <!--<p>In-Memory Data Fabric</p>--> + <!--<ul class="buttons list-unstyled">--> + <!--<li><a href="#download" class="btn btn-danger">Download</a></li>--> + <!--<li><a href="#overview" class="btn btn-default">Learn More</a></li>--> + <!--</ul>--> + <!--</header>--> + <!--<div class="text">--> + <!--<small>In Memory Computing Made Simple</small>--> + <!--</div>--> + <!--</div>--> + <!--<div class="col-md-8 col-sm-7">--> + <!--<div class="img-holder">--> + <!--<img src="images/compute_grid.png" alt="image description">--> + <!--</div>--> + <!--</div>--> + <!--</div>--> + <!--</div>--> + <!--<div class="item cloud">--> + <!--<div class="row">--> + <!--<div class="col-md-4 col-sm-5">--> + <!--<header>--> + <!--<h1>Apache Ignite</h1>--> + <!--<p>In-Memory Data Fabric</p>--> + <!--<ul class="buttons list-unstyled">--> + <!--<li><a href="#download" class="btn btn-danger">Download</a></li>--> + <!--<li><a href="#overview" class="btn btn-default">Learn More</a></li>--> + <!--</ul>--> + <!--</header>--> + <!--<div class="text">--> + <!--<small>In Memory Computing Made Simple</small>--> + <!--</div>--> + <!--</div>--> + <!--<div class="col-md-8 col-sm-7">--> + <!--<div class="img-holder">--> + <!--<img src="images/streaming.png" alt="image description">--> + <!--</div>--> + <!--</div>--> + <!--</div>--> + <!--</div>--> </div> </div> <!-- Carousel nav --> Modified: incubator/ignite/site/branches/sidenav/js/jquery.main.js URL: http://svn.apache.org/viewvc/incubator/ignite/site/branches/sidenav/js/jquery.main.js?rev=1654085&r1=1654084&r2=1654085&view=diff ============================================================================== --- incubator/ignite/site/branches/sidenav/js/jquery.main.js (original) +++ incubator/ignite/site/branches/sidenav/js/jquery.main.js Thu Jan 22 22:11:41 2015 @@ -1,16 +1,16 @@ // page init jQuery(function(){ - initAnchors(); + initAnchors(); }); // initialize fixed blocks on scroll function initAnchors() { - new SmoothScroll({ - anchorLinks: 'a[href^="#"]', - activeClasses: 'parent', - anchorActiveClass: 'active', - sectionActiveClass: 'active' - }); + new SmoothScroll({ + anchorLinks: 'a[href^="#"]', + activeClasses: 'parent', + anchorActiveClass: 'active', + sectionActiveClass: 'active' + }); } /*! @@ -18,251 +18,251 @@ function initAnchors() { */ ;(function($, exports) { - // private variables - var page, - win = $(window), - activeBlock, activeWheelHandler, - wheelEvents = ('onwheel' in document || document.documentMode >= 9 ? 'wheel' : 'mousewheel DOMMouseScroll'); - - // animation handlers - function scrollTo(offset, options, callback) { - // initialize variables - var scrollBlock; - if(document.body) { - if(typeof options === 'number') { - options = { duration: options }; - } else { - options = options || {}; - } - page = page || $('html, body'); - scrollBlock = options.container || page; - } else { - return; - } - - // treat single number as scrollTop - if(typeof offset === 'number') { - offset = { top: offset }; - } - - // handle mousewheel/trackpad while animation is active - if(activeBlock && activeWheelHandler) { - activeBlock.off('mousewheel', activeWheelHandler); - } - if(options.wheelBehavior && options.wheelBehavior !== 'none') { - activeWheelHandler = function(e) { - if(options.wheelBehavior === 'stop') { - scrollBlock.off('mousewheel', activeWheelHandler); - scrollBlock.stop(); - } else if(options.wheelBehavior === 'ignore') { - e.preventDefault(); - } - }; - activeBlock = scrollBlock.on('mousewheel', activeWheelHandler); - } - - // start scrolling animation - scrollBlock.stop().animate({ - scrollLeft: offset.left, - scrollTop: offset.top - }, options.duration, function(){ - if(activeWheelHandler) { - scrollBlock.off('mousewheel', activeWheelHandler); - } - if($.isFunction(callback)) { - callback(); - } - }); - } - - // smooth scroll contstructor - function SmoothScroll(options) { - this.options = $.extend({ - anchorLinks: 'a[href^="#"]', // selector or jQuery object - container: null, // specify container for scrolling (default - whole page) - extraOffset: null, // function or fixed number - activeClasses: null, // null, "link", "parent" - easing: 'swing', // easing of scrolling - animMode: 'duration', // or "speed" mode - animDuration: 800, // total duration for scroll (any distance) - animSpeed: 1500, // pixels per second - anchorActiveClass: 'anchor-active', - sectionActiveClass: 'section-active', - wheelBehavior: 'stop', // "stop", "ignore" or "none" - useNativeAnchorScrolling: false // do not handle click in devices with native smooth scrolling - }, options); - this.init(); - } - SmoothScroll.prototype = { - init: function() { - this.initStructure(); - this.attachEvents(); - }, - initStructure: function(options) { - this.container = this.options.container ? $(this.options.container) : $('html,body'); - this.scrollContainer = this.options.container ? this.container : win; - this.anchorLinks = $(this.options.anchorLinks); - }, - getAnchorTarget: function(link) { - // get target block from link href - var targetId = $(link).attr('href'); - return $(targetId.length > 1 ? targetId : 'html'); - }, - getTargetOffset: function(block) { - // get target offset - var blockOffset = block.offset().top; - if(this.options.container) { - blockOffset -= this.container.offset().top - this.container.prop('scrollTop'); - } - - // handle extra offset - if(typeof this.options.extraOffset === 'number') { - blockOffset -= this.options.extraOffset; - } else if(typeof this.options.extraOffset === 'function') { - blockOffset -= this.options.extraOffset(block); - } - return {top: blockOffset}; - }, - attachEvents: function() { - var self = this; - - // handle active classes - if(this.options.activeClasses) { - // cache structure - this.anchorData = []; - this.anchorLinks.each(function() { - var link = jQuery(this), - targetBlock = self.getAnchorTarget(link), - anchorDataItem; - - $.each(self.anchorData, function(index, item) { - if(item.block[0] === targetBlock[0]) { - anchorDataItem = item; - } - }); - - if(anchorDataItem) { - anchorDataItem.link = anchorDataItem.link.add(link); - } else { - self.anchorData.push({ - link: link, - block: targetBlock - }); - } - }); - - // add additional event handlers - this.resizeHandler = function() { - self.recalculateOffsets(); - }; - this.scrollHandler = function() { - self.refreshActiveClass(); - }; - - this.recalculateOffsets(); - this.scrollContainer.on('scroll', this.scrollHandler); - win.on('resize', this.resizeHandler); - } - - // handle click event - this.clickHandler = function(e) { - self.onClick(e); - }; - if(!this.options.useNativeAnchorScrolling) { - this.anchorLinks.on('click', this.clickHandler); - } - }, - recalculateOffsets: function() { - var self = this; - $.each(this.anchorData, function(index, data) { - data.offset = self.getTargetOffset(data.block); - data.height = data.block.outerHeight(); - }); - this.refreshActiveClass(); - }, - refreshActiveClass: function() { - var self = this, - foundFlag = false, - winHeight = win.height(), - containerHeight = this.container.prop('scrollHeight'), - viewPortHeight = this.scrollContainer.height(), - scrollTop = this.options.container ? this.container.prop('scrollTop') : win.scrollTop(); - - // user function instead of default handler - if(this.options.customScrollHandler) { - this.options.customScrollHandler.call(this, scrollTop, this.anchorData); - return; - } - - // sort anchor data by offsets - this.anchorData.sort(function(a, b) { - return a.offset.top - b.offset.top; - }); - function toggleActiveClass(anchor, block, state) { - anchor.toggleClass(self.options.anchorActiveClass, state); - block.toggleClass(self.options.sectionActiveClass, state); - } - - // default active class handler - $.each(this.anchorData, function(index) { - var reverseIndex = self.anchorData.length - index - 1, - data = self.anchorData[reverseIndex], - anchorElement = (self.options.activeClasses === 'parent' ? data.link.parent() : data.link); - - if(scrollTop >= containerHeight - viewPortHeight) { - // handle last section - if(reverseIndex === self.anchorData.length - 1) { - toggleActiveClass(anchorElement, data.block, true); - } else { - toggleActiveClass(anchorElement, data.block, false); - } - } else { - // handle other sections - if(!foundFlag && (scrollTop >= data.offset.top - 1 || reverseIndex === 0) ) { - foundFlag = true; - toggleActiveClass(anchorElement, data.block, true); - } else { - toggleActiveClass(anchorElement, data.block, false); - } - } - }); - }, - calculateScrollDuration: function(offset) { - var distance; - if(this.options.animMode === 'speed') { - distance = Math.abs(this.scrollContainer.scrollTop() - offset.top); - return (distance / this.options.animSpeed) * 1000; - } else { - return this.options.animDuration; - } - }, - onClick: function(e) { - var targetBlock = this.getAnchorTarget(e.currentTarget), - targetOffset = this.getTargetOffset(targetBlock); - - e.preventDefault(); - scrollTo(targetOffset, { - container: this.container, - wheelBehavior: this.options.wheelBehavior, - duration: this.calculateScrollDuration(targetOffset), - }); - }, - destroy: function() { - if(this.options.activeClasses) { - win.off('resize', this.resizeHandler); - this.scrollContainer.off('scroll', this.scrollHandler); - } - this.anchorLinks.off('click', this.clickHandler); - } - }; - - // public API - $.extend(SmoothScroll, { - scrollTo: function(blockOrOffset, durationOrOptions, callback) { - scrollTo(blockOrOffset, durationOrOptions, callback); - } - }); + // private variables + var page, + win = $(window), + activeBlock, activeWheelHandler, + wheelEvents = ('onwheel' in document || document.documentMode >= 9 ? 'wheel' : 'mousewheel DOMMouseScroll'); + + // animation handlers + function scrollTo(offset, options, callback) { + // initialize variables + var scrollBlock; + if(document.body) { + if(typeof options === 'number') { + options = { duration: options }; + } else { + options = options || {}; + } + page = page || $('html, body'); + scrollBlock = options.container || page; + } else { + return; + } + + // treat single number as scrollTop + if(typeof offset === 'number') { + offset = { top: offset }; + } + + // handle mousewheel/trackpad while animation is active + if(activeBlock && activeWheelHandler) { + activeBlock.off('mousewheel', activeWheelHandler); + } + if(options.wheelBehavior && options.wheelBehavior !== 'none') { + activeWheelHandler = function(e) { + if(options.wheelBehavior === 'stop') { + scrollBlock.off('mousewheel', activeWheelHandler); + scrollBlock.stop(); + } else if(options.wheelBehavior === 'ignore') { + e.preventDefault(); + } + }; + activeBlock = scrollBlock.on('mousewheel', activeWheelHandler); + } + + // start scrolling animation + scrollBlock.stop().animate({ + scrollLeft: offset.left, + scrollTop: offset.top + }, options.duration, function(){ + if(activeWheelHandler) { + scrollBlock.off('mousewheel', activeWheelHandler); + } + if($.isFunction(callback)) { + callback(); + } + }); + } + + // smooth scroll contstructor + function SmoothScroll(options) { + this.options = $.extend({ + anchorLinks: 'a[href^="#"]', // selector or jQuery object + container: null, // specify container for scrolling (default - whole page) + extraOffset: null, // function or fixed number + activeClasses: null, // null, "link", "parent" + easing: 'swing', // easing of scrolling + animMode: 'duration', // or "speed" mode + animDuration: 800, // total duration for scroll (any distance) + animSpeed: 1500, // pixels per second + anchorActiveClass: 'anchor-active', + sectionActiveClass: 'section-active', + wheelBehavior: 'stop', // "stop", "ignore" or "none" + useNativeAnchorScrolling: false // do not handle click in devices with native smooth scrolling + }, options); + this.init(); + } + SmoothScroll.prototype = { + init: function() { + this.initStructure(); + this.attachEvents(); + }, + initStructure: function(options) { + this.container = this.options.container ? $(this.options.container) : $('html,body'); + this.scrollContainer = this.options.container ? this.container : win; + this.anchorLinks = $(this.options.anchorLinks); + }, + getAnchorTarget: function(link) { + // get target block from link href + var targetId = $(link).attr('href'); + return $(targetId.length > 1 ? targetId : 'html'); + }, + getTargetOffset: function(block) { + // get target offset + var blockOffset = block.offset().top; + if(this.options.container) { + blockOffset -= this.container.offset().top - this.container.prop('scrollTop'); + } + + // handle extra offset + if(typeof this.options.extraOffset === 'number') { + blockOffset -= this.options.extraOffset; + } else if(typeof this.options.extraOffset === 'function') { + blockOffset -= this.options.extraOffset(block); + } + return {top: blockOffset}; + }, + attachEvents: function() { + var self = this; + + // handle active classes + if(this.options.activeClasses) { + // cache structure + this.anchorData = []; + this.anchorLinks.each(function() { + var link = jQuery(this), + targetBlock = self.getAnchorTarget(link), + anchorDataItem; + + $.each(self.anchorData, function(index, item) { + if(item.block[0] === targetBlock[0]) { + anchorDataItem = item; + } + }); + + if(anchorDataItem) { + anchorDataItem.link = anchorDataItem.link.add(link); + } else { + self.anchorData.push({ + link: link, + block: targetBlock + }); + } + }); + + // add additional event handlers + this.resizeHandler = function() { + self.recalculateOffsets(); + }; + this.scrollHandler = function() { + self.refreshActiveClass(); + }; + + this.recalculateOffsets(); + this.scrollContainer.on('scroll', this.scrollHandler); + win.on('resize', this.resizeHandler); + } + + // handle click event + this.clickHandler = function(e) { + self.onClick(e); + }; + if(!this.options.useNativeAnchorScrolling) { + this.anchorLinks.on('click', this.clickHandler); + } + }, + recalculateOffsets: function() { + var self = this; + $.each(this.anchorData, function(index, data) { + data.offset = self.getTargetOffset(data.block); + data.height = data.block.outerHeight(); + }); + this.refreshActiveClass(); + }, + refreshActiveClass: function() { + var self = this, + foundFlag = false, + winHeight = win.height(), + containerHeight = this.container.prop('scrollHeight'), + viewPortHeight = this.scrollContainer.height(), + scrollTop = this.options.container ? this.container.prop('scrollTop') : win.scrollTop(); + + // user function instead of default handler + if(this.options.customScrollHandler) { + this.options.customScrollHandler.call(this, scrollTop, this.anchorData); + return; + } + + // sort anchor data by offsets + this.anchorData.sort(function(a, b) { + return a.offset.top - b.offset.top; + }); + function toggleActiveClass(anchor, block, state) { + anchor.toggleClass(self.options.anchorActiveClass, state); + block.toggleClass(self.options.sectionActiveClass, state); + } + + // default active class handler + $.each(this.anchorData, function(index) { + var reverseIndex = self.anchorData.length - index - 1, + data = self.anchorData[reverseIndex], + anchorElement = (self.options.activeClasses === 'parent' ? data.link.parent() : data.link); + + if(scrollTop >= containerHeight - viewPortHeight) { + // handle last section + if(reverseIndex === self.anchorData.length - 1) { + toggleActiveClass(anchorElement, data.block, true); + } else { + toggleActiveClass(anchorElement, data.block, false); + } + } else { + // handle other sections + if(!foundFlag && (scrollTop >= data.offset.top - 1 || reverseIndex === 0) ) { + foundFlag = true; + toggleActiveClass(anchorElement, data.block, true); + } else { + toggleActiveClass(anchorElement, data.block, false); + } + } + }); + }, + calculateScrollDuration: function(offset) { + var distance; + if(this.options.animMode === 'speed') { + distance = Math.abs(this.scrollContainer.scrollTop() - offset.top); + return (distance / this.options.animSpeed) * 1000; + } else { + return this.options.animDuration; + } + }, + onClick: function(e) { + var targetBlock = this.getAnchorTarget(e.currentTarget), + targetOffset = this.getTargetOffset(targetBlock); + + e.preventDefault(); + scrollTo(targetOffset, { + container: this.container, + wheelBehavior: this.options.wheelBehavior, + duration: this.calculateScrollDuration(targetOffset), + }); + }, + destroy: function() { + if(this.options.activeClasses) { + win.off('resize', this.resizeHandler); + this.scrollContainer.off('scroll', this.scrollHandler); + } + this.anchorLinks.off('click', this.clickHandler); + } + }; + + // public API + $.extend(SmoothScroll, { + scrollTo: function(blockOrOffset, durationOrOptions, callback) { + scrollTo(blockOrOffset, durationOrOptions, callback); + } + }); - // export module - exports.SmoothScroll = SmoothScroll; + // export module + exports.SmoothScroll = SmoothScroll; }(jQuery, this)); \ No newline at end of file Modified: incubator/ignite/site/branches/sidenav/scss/all.scss URL: http://svn.apache.org/viewvc/incubator/ignite/site/branches/sidenav/scss/all.scss?rev=1654085&r1=1654084&r2=1654085&view=diff ============================================================================== --- incubator/ignite/site/branches/sidenav/scss/all.scss (original) +++ incubator/ignite/site/branches/sidenav/scss/all.scss Thu Jan 22 22:11:41 2015 @@ -1021,6 +1021,8 @@ p { } .overview { + padding-top: 60px; + p { text-align: center; } @@ -1039,4 +1041,25 @@ p { float: left; vertical-align: top; } -} \ No newline at end of file +} + +.carousel-inner p { + color: #fff; +} + +.carousel .img-holder { + margin: 0; + + img { + width: auto; + height: auto; + } +} + +div#banner1 { + & p { + padding-bottom: 40px; + font-size: 24px; + } +} +