Difference between revisions of "Template:SYSU-Software/statics/js/loader.js"

Line 1: Line 1:
 
var pages = {
 
var pages = {
 
     "Home": { "url": "1" },
 
     "Home": { "url": "1" },
−
     "Description": { "url": "https://2018.igem.org/wiki/index.php?title=Template:SYSU-Software/statics/html/Projects/Description.html&action=raw&ctype=text/html" },
+
     "Description": { "url": "../html/Projects/Description.html" },
−
     "Design": { "url": "https://2018.igem.org/wiki/index.php?title=Template:SYSU-Software/statics/html/Projects/Design.html&action=raw&ctype=text/html" },
+
     "Design": { "url": "../html/Projects/Design.html" },
−
     "Feature": { "url": "https://2018.igem.org/wiki/index.php?title=Template:SYSU-Software/statics/html/Projects/Feature.html&action=raw&ctype=text/html" },
+
     "Feature": { "url": "../html/Projects/Feature.html" },
 
     "Techniques": { "url": "" },
 
     "Techniques": { "url": "" },
 
     "Validation": { "url": "" },
 
     "Validation": { "url": "" },
Line 21: Line 21:
 
     "WHU": { "url": "" },
 
     "WHU": { "url": "" },
 
     "SYSU": { "url": "" },
 
     "SYSU": { "url": "" },
−
     "I-Overview": { "url": "https://2018.igem.org/wiki/index.php?title=Template:SYSU-Software/statics/html/Interlab/Overview.html&action=raw&ctype=text/html" },
+
     "I-Overview": { "url": "" },
−
     "Experiment": { "url": "https://2018.igem.org/wiki/index.php?title=Template:SYSU-Software/statics/html/Interlab/Results.html&action=raw&ctype=text/html" },
+
     "Experiment": { "url": "" },
−
     "Material-Methods": { "url": "https://2018.igem.org/wiki/index.php?title=Template:SYSU-Software/statics/html/Interlab/MaterialMethods.html&action=raw&ctype=text/html" },
+
     "Material-Methods": { "url": "" },
−
     "Results": { "url": "https://2018.igem.org/wiki/index.php?title=Template:SYSU-Software/statics/html/Interlab/Results.html&action=raw&ctype=text/html" },
+
     "Results": { "url": "" },
 
     "Medal-Overview": { "url": "" },
 
     "Medal-Overview": { "url": "" },
 
     "Medal-Bronze": { "url": "" },
 
     "Medal-Bronze": { "url": "" },
Line 42: Line 42:
  
 
var nowLoadingID = 0;
 
var nowLoadingID = 0;
−
 
+
var onNextPageShow = false;
−
$('#content').css({
+
var isAllowNextPage = false;
−
"width" : "100%",
+
−
"padding" : "0px",
+
−
"margin" : "0px"
+
−
});
+
−
$('#mw-content-text').children('p').remove();
+
−
$('#top_title').remove();
+
  
 
function loadPages() {
 
function loadPages() {
Line 55: Line 49:
 
         if (pages[page].url === "") continue;
 
         if (pages[page].url === "") continue;
 
         $.get(pages[page].url, function (data) {
 
         $.get(pages[page].url, function (data) {
−
          $('#' + page).html(data);
+
            $('#' + page).html(data);
−
        })
+
            nowLoadingID += 1;
−
        nowLoadingID += 1;
+
            // main menu
−
        // main menu
+
            $('#' + page + '>.page-container')
−
        $('#' + page + '>.page-container')
+
                .visibility({
−
            .visibility({
+
                    offset: -5,
−
                offset: -20,
+
                    observeChanges: false,
−
                observeChanges: false,
+
                    once: false,
−
                once: false,
+
                    context: $('#' + page),
−
                context: $('#' + page),
+
                    continuous: true,
−
                continuous: true,
+
                    onTopPassed: function () {
−
                onTopPassed: function () {
+
                        requestAnimationFrame(function () {
−
                    requestAnimationFrame(function () {
+
                            $('.following.bar')
−
                        $('.following.bar')
+
                                .addClass('light fixed')
−
                            .addClass('light fixed')
+
                                .find('.menu')
−
                            .find('.menu')
+
                                .removeClass('inverted')
−
                            .removeClass('inverted')
+
                                ;
−
                            ;
+
                            $('.following .additional.item')
−
                        $('.following .additional.item')
+
                                .transition('scale in', 750)
−
                            .transition('scale in', 750)
+
                                ;
−
                            ;
+
                        });
−
                    });
+
                    },
−
                },
+
                    onTopPassedReverse: function () {
−
                onTopPassedReverse: function () {
+
                        requestAnimationFrame(function () {
−
                    requestAnimationFrame(function () {
+
                            $('.following.bar')
−
                        $('.following.bar')
+
                                .removeClass('light fixed')
−
                            .removeClass('light fixed')
+
                                .find('.menu')
−
                            .find('.menu')
+
                                .addClass('inverted')
−
                            .addClass('inverted')
+
                                .find('.additional.item')
−
                            .find('.additional.item')
+
                                .transition('hide')
−
                            .transition('hide')
+
                                ;
−
                            ;
+
                        });
−
                    });
+
                    },
−
                },
+
                    onBottomVisible: function () {
−
                onBottomVisible: function() {
+
                        if (onNextPageShow) return;
−
                    console.log("reached bottom");
+
                        onNextPageShow = true;
−
                }
+
                        setTimeout(() => {
−
            })
+
                            isAllowNextPage = true;
−
            ;
+
                            $(".next-page").animate({
 +
                                'opacity': '0.8'
 +
                            }, 500);
 +
                        }, 500);
 +
                    },
 +
                    onBottomVisibleReverse: function () {
 +
                        $(".next-page").animate({
 +
                            'opacity': '0'
 +
                        }, 200);
 +
                        onNextPageShow = false;
 +
                        isAllowNextPage = false;
 +
                    }
 +
                })
 +
                ;
 +
        });
 
     }
 
     }
 
}
 
}
  
 
loadPages()
 
loadPages()
 +
 +
$('.ui.sticky')
 +
    .sticky()
 +
    ;

Revision as of 15:26, 10 October 2018

var pages = { 

   "Home": { "url": "1" },
   "Description": { "url": "../html/Projects/Description.html" },
   "Design": { "url": "../html/Projects/Design.html" },
   "Feature": { "url": "../html/Projects/Feature.html" },
   "Techniques": { "url": "" },
   "Validation": { "url": "" },
   "Demo": { "url": "" },
   "Modeling-Overview": { "url": "" },
   "Searching-Engine": { "url": "" },
   "Simulation-Circuits": { "url": "" },
   "Evolution-Algorithm": { "url": "" },
   "Reference": { "url": "" },
   "HP-Overview": { "url": "" },
   "HP-Siliver": { "url": "" },
   "HP-Gold": { "url": "" },
   "Human-Practice": { "url": "" },
   "Public-Engagement": { "url": "" },
   "XMU": { "url": "" },
   "SCUT": { "url": "" },
   "WHU": { "url": "" },
   "SYSU": { "url": "" },
   "I-Overview": { "url": "" },
   "Experiment": { "url": "" },
   "Material-Methods": { "url": "" },
   "Results": { "url": "" },
   "Medal-Overview": { "url": "" },
   "Medal-Bronze": { "url": "" },
   "Medal-Sliver": { "url": "" },
   "Medal-Gold": { "url": "" },
   "T-Overview": { "url": "" },
   "Members": { "url": "" },
   "Advisors": { "url": "" },
   "Instructors": { "url": "" },
   "Notebook": { "url": "" },
   "Notebook": { "url": "" },
   "A-Overview": { "url": "" },
   "Group": { "url": "" },
   "Attribution": { "url": "" },
   "Acknowlegement": { "url": "" }

}

var nowLoadingID = 0; var onNextPageShow = false; var isAllowNextPage = false;

function loadPages() { 

   for (let page in pages) {
       if (pages[page].url === "") continue;
       $.get(pages[page].url, function (data) {
           $('#' + page).html(data);
           nowLoadingID += 1;
           // main menu
           $('#' + page + '>.page-container')
               .visibility({
                   offset: -5,
                   observeChanges: false,
                   once: false,
                   context: $('#' + page),
                   continuous: true,
                   onTopPassed: function () {
                       requestAnimationFrame(function () {
                           $('.following.bar')
                               .addClass('light fixed')
                               .find('.menu')
                               .removeClass('inverted')
                               ;
                           $('.following .additional.item')
                               .transition('scale in', 750)
                               ;
                       });
                   },
                   onTopPassedReverse: function () {
                       requestAnimationFrame(function () {
                           $('.following.bar')
                               .removeClass('light fixed')
                               .find('.menu')
                               .addClass('inverted')
                               .find('.additional.item')
                               .transition('hide')
                               ;
                       });
                   },
                   onBottomVisible: function () {
                       if (onNextPageShow) return;
                       onNextPageShow = true;
                       setTimeout(() => {
                           isAllowNextPage = true;
                           $(".next-page").animate({
                               'opacity': '0.8'
                           }, 500);
                       }, 500);
                   },
                   onBottomVisibleReverse: function () {
                       $(".next-page").animate({
                           'opacity': '0'
                       }, 200);
                       onNextPageShow = false;
                       isAllowNextPage = false;
                   }
               })
               ;
       });
   }

}

loadPages()

$('.ui.sticky') 

   .sticky()
   ;