Difference between revisions of "Team:Tianjin/js/material/kit"

(Created page with "var transparent = true; var transparentDemo = true; var fixedTop = false; var navbar_initialized = false; $(document).ready(function(){ // Init Material scripts for bu...")
 
Line 108: Line 108:
 
};
 
};
 
};
 
};
 +
 +
var searchVisible = 0;
 +
var transparent = true;
 +
 +
var transparentDemo = true;
 +
var fixedTop = false;
 +
 +
var navbar_initialized = false;
 +
 +
var big_image;
 +
var scroll;
 +
var project_content;
 +
var $project;
 +
scroll = ( 2500 - $(window).width() ) / $(window).width();
 +
 +
var $ScrollTop;
 +
var $ScrollBot;
 +
 +
var pixels;
 +
 +
var modal;
 +
var $project_content;
 +
 +
var test = true;       
 +
 +
var timerStart = Date.now();
 +
var delay;
 +
 +
var no_of_elements = 0;
 +
var window_height;
 +
var window_width;
 +
 +
var content_opacity = 0;
 +
var content_transition = 0;
 +
var no_touch_screen = false;
 +
 +
var burger_menu;
 +
 +
       
 +
$(document).ready(function(){
 +
    BrowserDetect.init();
 +
   
 +
    if(BrowserDetect.browser == 'Explorer' && BrowserDetect.version <= 9){
 +
        $('body').html(better_browser); 
 +
    }
 +
 +
    window_width = $(window).width();
 +
    window_height = $(window).height();
 +
 +
   
 +
    rubik.initAnimationsCheck();
 +
   
 +
    // Init navigation toggle for small screens 
 +
    if(window_width < 979 || burger_menu){
 +
        rubik.initRightMenu(); 
 +
    }
 +
 +
    if(window_width < 979){
 +
        $('.over-area').each(function(){
 +
            var click = $(this).attr("onClick");
 +
            if(click == ''){
 +
                src = "rubik.showModal(this)";
 +
                $(this).attr("onClick", src);
 +
            }
 +
        });
 +
       
 +
        rubik.checkResponsiveImage();
 +
    }
 +
   
 +
   
 +
   
 +
    if($('#contactUsMap').length != 0){
 +
        rubik.initGoogleMaps(); 
 +
    }
 +
   
 +
    if($('.content-with-opacity').length != 0){
 +
        content_opacity = 1;
 +
    }
 +
 +
});
 +
 +
$(window).on('scroll',function(){
 +
  if(window_width > 980){
 +
        rubik.checkScrollForParallax();
 +
  }
 +
       
 +
});
 +
 +
$(window).load(function(){
 +
   
 +
    //after the content is loaded we reinitialize all the waypoints for the animations
 +
    rubik.initAnimationsCheck();
 +
   
 +
}); 
 +
 +
$('a[data-scroll="true"]').click(function(e){       
 +
    var scroll_target = $(this).data('id');
 +
    var scroll_trigger = $(this).data('scroll');
 +
   
 +
    if(scroll_trigger == true && scroll_target !== undefined){
 +
        e.preventDefault();
 +
       
 +
        $('html, body').animate({
 +
            scrollTop: $(scroll_target).offset().top - 50
 +
        }, 1000);
 +
    }
 +
               
 +
});
 +
 +
   
 +
rubik = {
 +
 +
    initAnimationsCheck: function(){
 +
       
 +
        $('[class*="add-animation"]').each(function(){
 +
          offset_diff = 30;
 +
          if($(this).hasClass('title')){
 +
              offset_diff = 110;
 +
          }
 +
         
 +
 +
        });
 +
 
 +
    },
 +
 +
 +
    checkResponsiveImage: function(){
 +
        $('.section-header > div > img, .section-header video').each(function(){
 +
            var $image = $(this);
 +
            var src = $image.attr("responsive-src");
 +
   
 +
            if(!src){
 +
              src = $image.attr('src');
 +
            }
 +
   
 +
            div = '<div class="responsive-background" style="background-image:url(' + src + ')"/>';
 +
            $image.after(div);
 +
            $image.addClass('-xs');
 +
        });
 +
    }, 
 +
 +
   
 +
    checkScrollForParallax: debounce(function() {
 +
 +
        no_of_elements = 0;
 +
        $('.parallax').each(function() {
 +
            var $elem = $(this);
 +
           
 +
            if(isElementInViewport($elem)){
 +
                  var parent_top = $elem.offset().top;         
 +
                  var window_bottom = $(window).scrollTop();
 +
                  var $image = $elem.find('img')
 +
                               
 +
              oVal = ((window_bottom - parent_top) / 3);
 +
                  $image.css('transform','translate3d(0px, ' + oVal + 'px, 0px)');   
 +
            }
 +
            });
 +
   
 +
    }, 6),
 +
   
 +
    checkScrollForContentTransitions: debounce(function() {
 +
        $('.content-with-opacity').each(function() {
 +
            var $content = $(this);
 +
           
 +
            if(isElementInViewport($content)){         
 +
                  var window_top = $(window).scrollTop();
 +
              opacityVal = 1 - (window_top / 230);
 +
                 
 +
                  if(opacityVal < 0){
 +
                      opacityVal = 0;
 +
                      return;
 +
                  } else {
 +
                    $content.css('opacity',opacityVal);   
 +
                  }
 +
                     
 +
            }           
 +
        });
 +
    }, 6),
 +
     
 +
}
 +
 +
 +
 +
 +
function isElementInViewport(elem) {
 +
    var $elem = $(elem);
 +
 +
    // Get the scroll position of the page.
 +
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
 +
    var viewportTop = $(scrollElem).scrollTop();
 +
    var viewportBottom = viewportTop + $(window).height();
 +
 +
    // Get the position of the element on the page.
 +
    var elemTop = Math.round( $elem.offset().top );
 +
    var elemBottom = elemTop + $elem.height();
 +
 +
    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
 +
}
 +
 +
 +
var BrowserDetect = {
 +
    init: function () {
 +
        this.browser = this.searchString(this.dataBrowser) || "Other";
 +
        this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
 +
    },
 +
    searchString: function (data) {
 +
        for (var i = 0; i < data.length; i++) {
 +
            var dataString = data[i].string;
 +
            this.versionSearchString = data[i].subString;
 +
 +
            if (dataString.indexOf(data[i].subString) !== -1) {
 +
                return data[i].identity;
 +
            }
 +
        }
 +
    },
 +
    searchVersion: function (dataString) {
 +
        var index = dataString.indexOf(this.versionSearchString);
 +
        if (index === -1) {
 +
            return;
 +
        }
 +
 +
        var rv = dataString.indexOf("rv:");
 +
        if (this.versionSearchString === "Trident" && rv !== -1) {
 +
            return parseFloat(dataString.substring(rv + 3));
 +
        } else {
 +
            return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
 +
        }
 +
    },
 +
 +
    dataBrowser: [
 +
        {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
 +
        {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
 +
        {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
 +
        {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
 +
        {string: navigator.userAgent, subString: "Safari", identity: "Safari"},
 +
        {string: navigator.userAgent, subString: "Opera", identity: "Opera"}
 +
    ]
 +
 +
};
 +
 +
var better_browser = '<div class="container"><div class="better-browser row"><div class="col-md-2"></div><div class="col-md-8"><h3>We are sorry but it looks like your Browser doesn\'t support our website Features. In order to get the full experience please download a new version of your favourite browser.</h3></div><div class="col-md-2"></div><br><div class="col-md-4"><a href="https://www.mozilla.org/ro/firefox/new/" class="btn btn-warning">Mozilla</a><br></div><div class="col-md-4"><a href="https://www.google.com/chrome/browser/desktop/index.html" class="btn ">Chrome</a><br></div><div class="col-md-4"><a href="http://windows.microsoft.com/en-us/internet-explorer/ie-11-worldwide-languages" class="btn">Internet Explorer</a><br></div><br><br><h4>Thank you!</h4></div></div>';
 +
 +
$(function(){
 +
 +
//页面跳转时定位
 +
if(window.location.hash){
 +
var targetScroll = $(window.location.hash).offset().top - 80;
 +
}
 +
$(window).scroll(function(){
 +
var $this = $(this);
 +
var targetTop = $(this).scrollTop();
 +
 +
if (targetTop >= 100){
 +
$("#TeamTianjinNavbar").addClass("navbar-TeamTianjin-fixed");
 +
$("#TeamTianjinNavbar").addClass("animated");
 +
$("#TeamTianjinNavbar").addClass("fadeInDown");
 +
}else{
 +
$("#TeamTianjinNavbar").removeClass("navbar-TeamTianjin-fixed");
 +
$("#TeamTianjinNavbar").removeClass("animated");
 +
$("#TeamTianjinNavbar").removeClass("fadeInDown");
 +
}
 +
 +
})
 +
}());

Revision as of 08:06, 7 July 2016

var transparent = true;

var transparentDemo = true; var fixedTop = false;

var navbar_initialized = false;

$(document).ready(function(){ 

   // Init Material scripts for buttons ripples, inputs animations etc, more info on the next link https://github.com/FezVrasta/bootstrap-material-design#materialjs
   $.material.init();



   //  Activate the Tooltips
   $('[data-toggle="tooltip"], [rel="tooltip"]').tooltip();

   // Activate Datepicker
   if($('.datepicker').length != 0){
       $('.datepicker').datepicker({
            weekStart:1
       });
   }

   // Activate Popovers
   $('[data-toggle="popover"]').popover();

   // Active Carousel

$('.carousel').carousel({ 

     interval: 400000
   });

});

materialKit = { 

   misc:{
       navbar_menu_visible: 0
   },

   checkScrollForTransparentNavbar: debounce(function() {
           if($(document).scrollTop() > 260 ) {
               if(transparent) {
                   transparent = false;
                   $('.navbar-color-on-scroll').removeClass('navbar-transparent');
               }
           } else {
               if( !transparent ) {
                   transparent = true;
                   $('.navbar-color-on-scroll').addClass('navbar-transparent');
               }
           }
   }, 17),

   initSliders: function(){
       // Sliders for demo purpose
       $('#sliderRegular').noUiSlider({
           start: 40,
           connect: "lower",
           range: {
               min: 0,
               max: 100
           }
       });

       $('#sliderDouble').noUiSlider({
           start: [20, 60] ,
           connect: true,
           range: {
               min: 0,
               max: 100
           }
       });
   }

}


var big_image;

materialKitDemo = { 

   checkScrollForParallax: debounce(function(){
       var current_scroll = $(this).scrollTop();

       oVal = ($(window).scrollTop() / 3);
       big_image.css({
           'transform':'translate3d(0,' + oVal +'px,0)',
           '-webkit-transform':'translate3d(0,' + oVal +'px,0)',
           '-ms-transform':'translate3d(0,' + oVal +'px,0)',
           '-o-transform':'translate3d(0,' + oVal +'px,0)'
       });

   }, 6)

} // Returns a function, that, as long as it continues to be invoked, will not // be triggered. The function will be called after it stops being called for // N milliseconds. If `immediate` is passed, trigger the function on the // leading edge, instead of the trailing.

function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; clearTimeout(timeout); timeout = setTimeout(function() { timeout = null; if (!immediate) func.apply(context, args); }, wait); if (immediate && !timeout) func.apply(context, args); }; };

var searchVisible = 0; var transparent = true;

var transparentDemo = true; var fixedTop = false;

var navbar_initialized = false;

var big_image; var scroll; var project_content; var $project; scroll = ( 2500 - $(window).width() ) / $(window).width();

var $ScrollTop; var $ScrollBot;

var pixels;

var modal; var $project_content;

var test = true;

var timerStart = Date.now(); var delay;

var no_of_elements = 0; var window_height; var window_width;

var content_opacity = 0; var content_transition = 0; var no_touch_screen = false;

var burger_menu;


$(document).ready(function(){ 

   BrowserDetect.init();
   
   if(BrowserDetect.browser == 'Explorer' && BrowserDetect.version <= 9){
       $('body').html(better_browser);   
   }

   window_width = $(window).width();
   window_height = $(window).height();



   rubik.initAnimationsCheck();
   
   // Init navigation toggle for small screens   
   if(window_width < 979 || burger_menu){
       rubik.initRightMenu();   
   }

   if(window_width < 979){
       $('.over-area').each(function(){
           var click = $(this).attr("onClick");
           if(click == ){
               src = "rubik.showModal(this)";
               $(this).attr("onClick", src);
           }
       });
       
       rubik.checkResponsiveImage();
   } 
   
   
   
   if($('#contactUsMap').length != 0){
       rubik.initGoogleMaps();   
   }
   
   if($('.content-with-opacity').length != 0){
       content_opacity = 1;
   }

});

$(window).on('scroll',function(){ 

  if(window_width > 980){
       rubik.checkScrollForParallax();
  }

});

$(window).load(function(){ 

   //after the content is loaded we reinitialize all the waypoints for the animations
   rubik.initAnimationsCheck();

});

$('a[data-scroll="true"]').click(function(e){ 

   var scroll_target = $(this).data('id');
   var scroll_trigger = $(this).data('scroll');
   
   if(scroll_trigger == true && scroll_target !== undefined){
       e.preventDefault();
       
       $('html, body').animate({
            scrollTop: $(scroll_target).offset().top - 50
       }, 1000);
   }

});


rubik = { 

   initAnimationsCheck: function(){
       
       $('[class*="add-animation"]').each(function(){
          offset_diff = 30;
          if($(this).hasClass('title')){
              offset_diff = 110;
          }
          

       });
 
   },



   checkResponsiveImage: function(){
       $('.section-header > div > img, .section-header video').each(function(){
           var $image = $(this);
           var src = $image.attr("responsive-src");
   
           if(!src){
              src = $image.attr('src'); 
           }
   
           div = '<div class="responsive-background" style="background-image:url(' + src + ')"/>';
           $image.after(div);
           $image.addClass('-xs'); 
       });
   },  



   checkScrollForParallax: debounce(function() {	

       	no_of_elements = 0;
       	$('.parallax').each(function() {
       	    var $elem = $(this);
       	    
       	    if(isElementInViewport($elem)){
                 var parent_top = $elem.offset().top;          
                 var window_bottom = $(window).scrollTop();
                 var $image = $elem.find('img')
                             	  
           	  oVal = ((window_bottom - parent_top) / 3);
                 $image.css('transform','translate3d(0px, ' + oVal + 'px, 0px)');    
       	    }
           });
   		
   }, 6),
   
   checkScrollForContentTransitions: debounce(function() {
        $('.content-with-opacity').each(function() {
            var $content = $(this);
            
            if(isElementInViewport($content)){          
                 var window_top = $(window).scrollTop();
           	  opacityVal = 1 - (window_top / 230);
                 
                 if(opacityVal < 0){
                     opacityVal = 0;
                     return;
                 } else {
                   $content.css('opacity',opacityVal);    
                 }
                     
       	    }            
        });
   }, 6),

}



function isElementInViewport(elem) { 

   var $elem = $(elem);

   // Get the scroll position of the page.
   var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
   var viewportTop = $(scrollElem).scrollTop();
   var viewportBottom = viewportTop + $(window).height();

   // Get the position of the element on the page.
   var elemTop = Math.round( $elem.offset().top );
   var elemBottom = elemTop + $elem.height();

   return ((elemTop < viewportBottom) && (elemBottom > viewportTop));

}


var BrowserDetect = { 

   init: function () {
       this.browser = this.searchString(this.dataBrowser) || "Other";
       this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
   },
   searchString: function (data) {
       for (var i = 0; i < data.length; i++) {
           var dataString = data[i].string;
           this.versionSearchString = data[i].subString;

           if (dataString.indexOf(data[i].subString) !== -1) {
               return data[i].identity;
           }
       }
   },
   searchVersion: function (dataString) {
       var index = dataString.indexOf(this.versionSearchString);
       if (index === -1) {
           return;
       }

       var rv = dataString.indexOf("rv:");
       if (this.versionSearchString === "Trident" && rv !== -1) {
           return parseFloat(dataString.substring(rv + 3));
       } else {
           return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
       }
   },

   dataBrowser: [
       {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
       {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
       {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
       {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
       {string: navigator.userAgent, subString: "Safari", identity: "Safari"},
       {string: navigator.userAgent, subString: "Opera", identity: "Opera"}
   ]

};

var better_browser = '

We are sorry but it looks like your Browser doesn\'t support our website Features. In order to get the full experience please download a new version of your favourite browser.


<a href="https://www.mozilla.org/ro/firefox/new/" class="btn btn-warning">Mozilla</a>
<a href="https://www.google.com/chrome/browser/desktop/index.html" class="btn ">Chrome</a>
<a href="http://windows.microsoft.com/en-us/internet-explorer/ie-11-worldwide-languages" class="btn">Internet Explorer</a>


Thank you!

';

$(function(){

//页面跳转时定位 if(window.location.hash){ var targetScroll = $(window.location.hash).offset().top - 80; } $(window).scroll(function(){ var $this = $(this); var targetTop = $(this).scrollTop();

if (targetTop >= 100){ $("#TeamTianjinNavbar").addClass("navbar-TeamTianjin-fixed"); $("#TeamTianjinNavbar").addClass("animated"); $("#TeamTianjinNavbar").addClass("fadeInDown"); }else{ $("#TeamTianjinNavbar").removeClass("navbar-TeamTianjin-fixed"); $("#TeamTianjinNavbar").removeClass("animated"); $("#TeamTianjinNavbar").removeClass("fadeInDown"); }

}) }());