Difference between revisions of "Team:TUDelft/js/script"

 
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
// store the hash (DON'T put this code inside the $() function, it has to be executed
+
(function () {
−
// right away before the browser can start scrolling!
+
    $(function ($) {
−
var target = window.location.hash,
+
        // testing variable
−
    target = target.replace('#', '');
+
        var testing_protocols = false;
  
−
// delete hash so the page won't scroll to it
+
        // scrolling for hashtag links
−
window.location.hash = "";
+
        var scrollOfset = 150;
 +
       
 +
        var location = window.location.href;
  
−
// now whenever you are ready do whatever you want
+
        function scrollTo(hash, callback) {
−
// (in this case I use jQuery to scroll to the tag after the page has loaded)
+
            if (hash === '#!') {return}
−
$(window).load(function() {
+
            hash = hash + '-scroll';
−
    if (target) {
+
            var offset = $(hash).offset();
−
        $('html, body').animate({
+
            if (!offset) {
−
            scrollTop: $("#" + target).offset().top
+
                console.log("No such element to scroll to: " + hash);
−
        }, 700, 'swing', function () {});
+
                return
−
    }
+
            }
−
});
+
            console.log("Im scrolling to " + hash);
 +
            $('html, body').animate({
 +
                scrollTop: offset.top - scrollOfset
 +
            }, 700, 'swing', function () {});
  
−
(function () {
+
            callback(hash);
−
    $(function ($) {
+
        }
−
 
+
 
−
         //navbar
+
        function openProtocol(hash) {
 +
            console.log("Also opening the protocol: " + hash);
 +
            var index = -1;
 +
            $('#protocols>li').each(function (i) {
 +
                var $this = $(this);
 +
                var id = $this.children().first().attr('id');
 +
                if (id === hash.slice(1)) {
 +
                    index = i;
 +
                    return false;
 +
                }
 +
 
 +
            })
 +
            if (index === -1) {
 +
                console.log("Couldn't find the protocol to open: " + hash);
 +
            } else {
 +
                console.log("Opening " + hash);
 +
                console.log(index);
 +
                $('.collapsible').collapsible('open', index);
 +
            }
 +
        }
 +
       
 +
        function openNotebook(hash) {
 +
            console.log("Also opening the notebook: " + hash);
 +
            var index = -1;
 +
            $('#notebook-wrapper>li').each(function (i) {
 +
                var $this = $(this);
 +
                var id = $this.children().first().attr('id');
 +
                if (id === hash.slice(1)) {
 +
                    index = i;
 +
                    return false;
 +
                }
 +
 
 +
            })
 +
            if (index === -1) {
 +
                console.log("Couldn't find the notebook to open: " + hash);
 +
            } else {
 +
                console.log("Opening " + hash);
 +
                console.log(index);
 +
                $('.collapsible#notebook-wrapper').collapsible('open', index);
 +
            }
 +
        }
 +
 
 +
        function processHash(hash) {
 +
            if (hash) {
 +
                if (location.toLowerCase().includes('protocols') || testing_protocols) {
 +
                    scrollTo(hash, openProtocol);
 +
                } else if (location.toLowerCase().includes('notebook')){
 +
                    scrollTo(hash, openNotebook)
 +
                } else {
 +
                    scrollTo(hash, function () {});
 +
                }
 +
            }
 +
        }
 +
       
 +
 
 +
       
 +
        processHash(window.location.hash); // init
 +
        $(window).on('hashchange', function () {
 +
            console.log("Activated the hashchange");
 +
            processHash(window.location.hash);
 +
        });
 +
       
 +
        $('a[href="#references"]').on('click', function(e) {
 +
            processHash(window.location.hash);
 +
        })
 +
       
 +
        $("#timeline a").each(function (i) {
 +
            var $this = $(this);
 +
            var hash = $this.attr('href');
 +
            $this.on('click', function(e) {
 +
                openNotebook(hash);
 +
            })
 +
           
 +
        })
 +
       
 +
        $('.topper-inner > a').hover(function () {
 +
            console.log("Hovering know");
 +
            $('#design-init').css('opacity', '0');
 +
        }, function () {
 +
            $('#design-init').css('opacity', '1');
 +
        });
 +
 
 +
       
 +
        //timeline
 +
//        $('#timeline > div').on('click', function () {
 +
//            $('#timeline .active').removeClass('active');
 +
//            $(this).addClass('active');
 +
//        })
 +
       
 +
         //navbar and a mobile friendly way to navigate
 
         $(".dropdown-button").dropdown({
 
         $(".dropdown-button").dropdown({
 
             hover: false,
 
             hover: false,
Line 32: Line 126:
 
             $('nav').removeClass('show-nav');
 
             $('nav').removeClass('show-nav');
 
         });
 
         });
 +
       
 +
        // notebook filter
 
         var module_classes = ['cas13a', 'TDP', 'detection', 'sampleprep', 'vesicles'];
 
         var module_classes = ['cas13a', 'TDP', 'detection', 'sampleprep', 'vesicles'];
 
         var whosActive = function () {
 
         var whosActive = function () {
Line 56: Line 152:
 
             }
 
             }
 
         };
 
         };
−
         display(whosActive()) // initialization
+
         display(whosActive()) // initialization of notebook filter
 
         $('#notebook-buttons>a').each(function (index) {
 
         $('#notebook-buttons>a').each(function (index) {
 
             var $this = $(this);
 
             var $this = $(this);
Line 65: Line 161:
 
             });
 
             });
 
         });
 
         });
−
          
+
 
 +
         // A button to scroll all the way up.
 +
        $("#up-btn").on('click', function () {
 +
            $('html, body').animate({
 +
                scrollTop: 0,
 +
            }, 600);
 +
            return false;
 +
        });
  
  
Line 86: Line 189:
 
         //            }
 
         //            }
 
         //        );
 
         //        );
−
        $(".scrollspy").scrollSpy();
 
  
  
Line 99: Line 201:
 
         //        }
 
         //        }
  
−
        function scaleIn(el) {
+
//        function scaleIn(el) {
−
            console.log("im called");
+
//            console.log("im called");
−
            $(".scaleIn").each(function (index) {
+
//            $(".scaleIn").each(function (index) {
−
                var that = $(this);
+
//                var that = $(this);
−
                setTimeout(function () {
+
//                setTimeout(function () {
−
                    that.addClass('activated')
+
//                    that.addClass('activated')
−
                }, 200 * index);
+
//                }, 200 * index);
−
            })
+
//            })
−
        }
+
//        }
−
 
+
−
        $('select').material_select();
+
−
 
+
  
 +
        // A few materialize initilizations. Look for function on materializecss.com.
 +
       
 +
        $(".scrollspy").scrollSpy({
 +
            scrollOfset: scrollOfset
 +
        });
 +
        $(".modal").modal();
 +
//        $('select').material_select();
 +
//        var options = [{
 +
//            selector: '#thisList',
 +
//            offset: 500,
 +
//            callback: function (el) {
 +
//                Materialize.showStaggeredList($(el));
 +
//            }
 +
//            }, {
 +
//            selector: '#row1',
 +
//            offset: 0,
 +
//            callback: scaleIn
 +
//            }];
 +
//        Materialize.scrollFire(options);
  
−
         var options = [{
+
         // Dynamically add e-mail to distract spam bots
−
            selector: '#thisList',
+
−
            offset: 500,
+
−
            callback: function (el) {
+
−
                Materialize.showStaggeredList($(el));
+
−
            }
+
−
            }, {
+
−
            selector: '#row1',
+
−
            offset: 0,
+
−
            callback: scaleIn
+
−
            }];
+
−
        Materialize.scrollFire(options);
+
−
 
+
 
         var white = " ",
 
         var white = " ",
 
             first = "\u00A0\u00A0tudelft",
 
             first = "\u00A0\u00A0tudelft",
Line 137: Line 243:
 
             mm = ma + "to" + ":";
 
             mm = ma + "to" + ":";
  
−
        // Dynamically add e-mail to distract spam bots
 
 
         $("#mail-button").attr("href", mm + all.trim());
 
         $("#mail-button").attr("href", mm + all.trim());
 
         $("#email").text(white + sall);
 
         $("#email").text(white + sall);
  
−
         // Removing empty p tages
+
         // Removing empty p tages, added by the mediawiki
 
         $("p").filter(function () {
 
         $("p").filter(function () {
 
             return $.trim($(this).text()) === '';
 
             return $.trim($(this).text()) === '';
 
         }).remove();
 
         }).remove();
 +
       
 +
//        touch friendly hover menu
 +
//        $('top_menu_14, top_menu_inside ').on('touchstart', function (e) {
 +
//            var $this = $(this);
 +
//            if ($this.hasClass('hover')) {
 +
//                return true
 +
//            } else {
 +
//                $this.addClass('hover');
 +
//                e.preventDefault();
 +
//                return false;
 +
//            }
 +
//        })
  
−
        $('top_menu_14, top_menu_inside ').on('touchstart', function (e) {
 
−
            var $this = $(this);
 
−
            if ($this.hasClass('hover')) {
 
−
                return true
 
−
            } else {
 
−
                $this.addClass('hover');
 
−
                e.preventDefault();
 
−
                return false; // Is this a hack? Unnecesary code anyways. preventDefault should do it already, be you never know you know.
 
−
            }
 
−
        })
 
−
 
  
 
     });
 
     });
 
}($));
 
}($));
−
 
+
// test function
−
function filter_notebook(select) {
+
//function filter_notebook(select) {
−
    console.log(select);
+
//    console.log(select);
−
}
+
//}
 
// function for copying text to clipboard (used for phone number)
 
// function for copying text to clipboard (used for phone number)
 
function copyToClipboard(element) {
 
function copyToClipboard(element) {

Latest revision as of 22:29, 1 November 2017

(function () { 

   $(function ($) {
       // testing variable
       var testing_protocols = false;

       // scrolling for hashtag links
       var scrollOfset = 150;
       
       var location = window.location.href;

       function scrollTo(hash, callback) {
           if (hash === '#!') {return}
           hash = hash + '-scroll';
           var offset = $(hash).offset();
           if (!offset) {
               console.log("No such element to scroll to: " + hash);
               return
           }
           console.log("Im scrolling to " + hash);
           $('html, body').animate({
               scrollTop: offset.top - scrollOfset
           }, 700, 'swing', function () {});

           callback(hash);
       }

       function openProtocol(hash) {
           console.log("Also opening the protocol: " + hash);
           var index = -1;
           $('#protocols>li').each(function (i) {
               var $this = $(this);
               var id = $this.children().first().attr('id');
               if (id === hash.slice(1)) {
                   index = i;
                   return false;
               }

           })
           if (index === -1) {
               console.log("Couldn't find the protocol to open: " + hash);
           } else {
               console.log("Opening " + hash);
               console.log(index);
               $('.collapsible').collapsible('open', index);
           }
       }
       
       function openNotebook(hash) {
           console.log("Also opening the notebook: " + hash);
           var index = -1;
           $('#notebook-wrapper>li').each(function (i) {
               var $this = $(this);
               var id = $this.children().first().attr('id');
               if (id === hash.slice(1)) {
                   index = i;
                   return false;
               }

           })
           if (index === -1) {
               console.log("Couldn't find the notebook to open: " + hash);
           } else {
               console.log("Opening " + hash);
               console.log(index);
               $('.collapsible#notebook-wrapper').collapsible('open', index);
           }
       }

       function processHash(hash) {
           if (hash) {
               if (location.toLowerCase().includes('protocols') || testing_protocols) {
                   scrollTo(hash, openProtocol);
               } else if (location.toLowerCase().includes('notebook')){
                   scrollTo(hash, openNotebook)
               } else {
                   scrollTo(hash, function () {});
               }
           }
       }
       



       processHash(window.location.hash); // init
       $(window).on('hashchange', function () {
           console.log("Activated the hashchange");
           processHash(window.location.hash);
       });
       
       $('a[href="#references"]').on('click', function(e) {
           processHash(window.location.hash);
       })
       
       $("#timeline a").each(function (i) {
           var $this = $(this);
           var hash = $this.attr('href');
           $this.on('click', function(e) {
               openNotebook(hash);
           })
           
       })
       
       $('.topper-inner > a').hover(function () {
           console.log("Hovering know");
           $('#design-init').css('opacity', '0'); 
       }, function () {
           $('#design-init').css('opacity', '1');
       });



       //timeline

// $('#timeline > div').on('click', function () { // $('#timeline .active').removeClass('active'); // $(this).addClass('active'); // }) 

       //navbar and a mobile friendly way to navigate
       $(".dropdown-button").dropdown({
           hover: false,
           constrainWidth: false,
           belowOrigin: true
       });
       $('#menu-btn').click(function () {
           $('nav').addClass('show-nav');
       });
       $('#cross').click(function () {
           $('nav').removeClass('show-nav');
       });
       
       // notebook filter
       var module_classes = ['cas13a', 'TDP', 'detection', 'sampleprep', 'vesicles'];
       var whosActive = function () {
           var active = new Array(module_classes.length);
           $('#notebook-buttons>a').each(function (index) {
               var $this = $(this);
               active[index] = hasClass($this, 'active');
           })
           return active;
       };

       var hasClass = function ($el, className) {
           return $el.attr('class').split(' ').some(
               el => el === className)
       };
       var display = function (active) {
           for (var i = 0; i < active.length; i++) {
               var $module = $("." + module_classes[i]);
               if (active[i]) {
                   $module.css("display", "block");
               } else {
                   $module.css("display", "none");
               }
           }
       };
       display(whosActive()) // initialization of notebook filter
       $('#notebook-buttons>a').each(function (index) {
           var $this = $(this);
           $this.on('click', function () {
               console.log("I clicked this");
               $this.toggleClass('active');
               display(whosActive());
           });
       });

       // A button to scroll all the way up.
       $("#up-btn").on('click', function () {
           $('html, body').animate({
               scrollTop: 0,
           }, 600);
           return false;
       });



       //toc
       //        $(".scrollspy").scrollSpy();
       //        setTimeout(function () {
       //            $("#toc").pushpin({
       //                offset: 150,
       //                top: 0,
       //                bottom: $('footer').offset().top - $('#toc').outerHeight(true)
       //            })
       //        }, 100);
       //timeline
       //        $(".scrollspy").scrollSpy(
       //            {
       //                getActiveElement: function (id) {
       //                    return "round" + (parseInt(id.replace(/\D/g, )) - 20);
       //                }
       //            }
       //        );



       //main

       //        function scaleIn() {
       //            $("scaleIn").each(function() {
       //                setTimeout(function () {
       //                    $(this).addClass('activated');
       //                }, 500)
       //            });
       //        }

// function scaleIn(el) { // console.log("im called"); // $(".scaleIn").each(function (index) { // var that = $(this); // setTimeout(function () { // that.addClass('activated') // }, 200 * index); // }) // } 

       // A few materialize initilizations. Look for function on materializecss.com.
       
       $(".scrollspy").scrollSpy({
           scrollOfset: scrollOfset
       });
       $(".modal").modal();

// $('select').material_select(); // var options = [{ // selector: '#thisList', // offset: 500, // callback: function (el) { // Materialize.showStaggeredList($(el)); // } // }, { // selector: '#row1', // offset: 0, // callback: scaleIn // }]; // Materialize.scrollFire(options); 

       // Dynamically add e-mail to distract spam bots
       var white = " ",
           first = "\u00A0\u00A0tudelft",
           secon = "igem",

           third = "gmail",
           forth = "com",
           all = " " + " " + first + "." + secon + "@" + third + "." + forth,
           sall = " " + " " + all,
           ma = "ma" + "il",
           mm = ma + "to" + ":";

       $("#mail-button").attr("href", mm + all.trim());
       $("#email").text(white + sall);

       // Removing empty p tages, added by the mediawiki
       $("p").filter(function () {
           return $.trim($(this).text()) === ;
       }).remove();

// touch friendly hover menu // $('top_menu_14, top_menu_inside ').on('touchstart', function (e) { // var $this = $(this); // if ($this.hasClass('hover')) { // return true // } else { // $this.addClass('hover'); // e.preventDefault(); // return false; // } // }) 


   });

}($)); // test function //function filter_notebook(select) { // console.log(select); //} // function for copying text to clipboard (used for phone number) function copyToClipboard(element) { 

   var $temp = $("<input>");
   $("body").append($temp);
   $temp.val(element).select();
   document.execCommand("copy");
   $temp.remove();
   alert("You copied: " + element + ".");

}