Difference between revisions of "Template:Toronto/js/scripts"

Line 290: Line 290:
 
var settingsList = {
 
var settingsList = {
 
   settings1: function(v){
 
   settings1: function(v){
     v.setStyle({resi:"1-58"}, {cartoon: {color: 'aqua'}}),
+
     v.setStyle({resi:["1-58", "59-1000"]}, {cartoon: {color: 'aqua', color:'yellow'}})
     v.setStyle({resi:"59-1000"}, {cartoon: {color: 'yellow'}})
+
     // v.setStyle({resi:}, {cartoon: {color: 'yellow'}})
 
   },
 
   },
 
   settings2: function(v){
 
   settings2: function(v){

Revision as of 02:54, 2 November 2017

// Autocomplete ================================================================

function start_autocomplete() { pages = [

 "applied design",
 "attributions",
 "basic part",
 "bioinformatics workshop",
 "collection",
 "composite part",
 "contribution",
 "demonstrate",
 "description",
 "design",
 "drylab",
 "engagement",
 "entrepreneurship",
 "expirements",
 "gold integrated",
 "hardware",
 "home",
 "hp gold",
 "hp silver",
 "human practices",
 "icon-a-thon",
 "improve",
 "integrated practices",
 "interlab",
 "interviews",
 "measurement",
 "model",
 "notebook",
 "parts",
 "parts collection",
 "plant",
 "podcasts",
 "proof",
 "results",
 "saftey",
 "silver",
 "software",
 "team",
 "wetlab"

]

link = [

 "https://2017.igem.org/Team:Toronto/Applied_Design",
 "https://2017.igem.org/Team:Toronto/Attributions",
 "https://2017.igem.org/Team:Toronto/Basic_Part",
 "https://2017.igem.org/Team:Toronto/Bioinformatics-Workshop",
 "https://2017.igem.org/Team:Toronto/Part_Collection",
 "https://2017.igem.org/Team:Toronto/Composite_Part",
 "https://2017.igem.org/Team:Toronto/Contribution",
 "https://2017.igem.org/Team:Toronto/Demonstrate",
 "https://2017.igem.org/Team:Toronto/Description",
 "https://2017.igem.org/Team:Toronto/Design",
 "https://2017.igem.org/Team:Toronto/Drylab",
 "https://2017.igem.org/Team:Toronto/Engagement",
 "https://2017.igem.org/Team:Toronto/Entrepreneurship",
 "https://2017.igem.org/Team:Toronto/Experiments",
 "https://2017.igem.org/Team:Toronto/Gold_Integrated",
 "https://2017.igem.org/Team:Toronto/Hardware",
 "https://2017.igem.org/Team:Toronto",
 "https://2017.igem.org/Team:Toronto/HP/Gold",
 "https://2017.igem.org/Team:Toronto/HP/Silver",
 "https://2017.igem.org/Team:Toronto/PnP",
 "https://2017.igem.org/Team:Toronto/Icon-a-thon",
 "https://2017.igem.org/Team:Toronto/Improve",
 "https://2017.igem.org/Team:Toronto/Integrated_Practices",
 "https://2017.igem.org/Team:Toronto/InterLab",
 "https://2017.igem.org/Team:Toronto/Interviews",
 "https://2017.igem.org/Team:Toronto/Measurement",
 "https://2017.igem.org/Team:Toronto/Model",
 "https://2017.igem.org/Team:Toronto/Notebook",
 "https://2017.igem.org/Team:Toronto/Parts",
 "https://2017.igem.org/Team:Toronto/Part_Collection",
 "https://2017.igem.org/Team:Toronto/Plant",
 "https://2017.igem.org/Team:Toronto/Podcast",
 "https://2017.igem.org/Team:Toronto/Proof",
 "https://2017.igem.org/Team:Toronto/Results",
 "https://2017.igem.org/Team:Toronto/Safety",
 "https://2017.igem.org/Team:Toronto/Silver",
 "https://2017.igem.org/Team:Toronto/Software",
 "https://2017.igem.org/Team:Toronto/Team",
 "https://2017.igem.org/Team:Toronto/Wetlab"

]

 function autocomplete() {
   console.log('Autocomplete has loaded');
   var input = document.getElementById('autocomplete');
   var suggest = document.getElementById("auto-suggest");
   var search = document.getElementById("search")
   input.addEventListener('blur', function() {
     input.value = ;
     setTimeout(function() {
       suggest.innerHTML = ;
     }, 100);
   });
   input.addEventListener("keyup", function() {
     matches = [];
     pages.forEach(function(elem, i) {
       if (elem.includes(input.value.toLowerCase()) && input.value != ) {
         var li = document.createElement('li');
         var a = document.createElement('a');
         var text = document.createTextNode(elem.toUpperCase())
         a.setAttribute('href', link[i])
         a.appendChild(text)
         li.appendChild(a)
         matches.push(li);
         // console.log(matches);
       }
     });
     // console.log(suggest)
     suggest.innerHTML=;
     if (matches.length == 0) {
       search.style.display = 'none';
     } else {
       search.style.display = 'block';
       matches.forEach(function(elem) {
         suggest.appendChild(elem)
       });
     }
     // console.log(pages.includes(input.value));
   });
 }
 autocomplete();

}

start_autocomplete();

// Set and unset the active class function setActive(elem) {

 var sideNav = document.getElementsByClassName('sidebar-minibox');
 // console.log(sideNav);
 var ul = sideNav[0].getElementsByTagName('ul');
 console.log(ul);
 var li = ul[0].getElementsByTagName('li');
 for (i=0; i<li.length; i++) {
   li[i].classList.remove('active');
 }
 elem.classList.add('active');

}

// Build the list items of the sideNav function build(item, id) {

 var li = document.createElement('li');
 var anchor = document.createElement('a');
 var text = document.createTextNode(item.innerText);
 anchor.appendChild(text)
 anchor.setAttribute('href', '#'+id);
 li.appendChild(anchor);
 li.setAttribute('onclick', 'setActive(this)');
 return li;

}

function scrollWatch(scrollHeights, sectionContent) {

 var header = document.getElementsByClassName('header')[0];
 var sideNav = document.getElementsByClassName('sidebar-minibox')[0];
 var content = document.getElementsByClassName('content-page')[0];
 var footer = document.getElementsByClassName('footer')[0];
 var sideNavItems = sideNav.getElementsByTagName('li');
 window.addEventListener('scroll', function() {
   var mainNavScrollHeight = header.scrollHeight;
   var windowPageYOffset = window.pageYOffset;
   var windowInnerHeight = window.innerHeight;
   var documentBodyHeight = document.body.offsetHeight;
   // var footerScrollHeight = footer.scrollHeight;
   var footerScrollHeight = 0;
   var contentScroll = windowPageYOffset + mainNavScrollHeight;
   var bottom = documentBodyHeight - windowInnerHeight;
   // console.log(contentScroll);
   var currentView = scrollHeights.filter(function(arr) {
     // return arr < contentScroll;
     return arr < windowPageYOffset;
   });
   var currentViewLength = currentView.length;
   // Make sure that the seek class is removed from the top element of the
   // sideNav when the top of the page is scrolled to
   if (contentScroll > windowPageYOffset) {
     sideNavItems[0].classList.remove('active');
   }
   // Add the active class to the list button in sideNav when the corresponding
   // section is in view. Remove this class when it is not.
   if (currentViewLength > 0) {
     var index = currentViewLength - 1;
     for (i=0; i<scrollHeights.length; i++) {
       sideNavItems[i].classList.remove('active');
     }
     sideNavItems[index].classList.add('active');
   } else {
   }
   // Fix the sideNav to the top of the page when the mainNav is scrolled past
   // Unfix otherwise
   if (windowPageYOffset > mainNavScrollHeight) {
     sideNav.classList.add('sideNavfixed');
     content.classList.add('contentScroll');
   } else {
     sideNav.classList.remove('sideNavfixed');
     content.classList.remove('contentScroll');
   }
 });

}

function buildNav() {

 var sections = document.getElementsByClassName('subsection');
 var numberOfSections = sections.length;
 var sideNav = document.getElementsByClassName('sidebar-minibox')[0];
 var titleList = [];
 var idList = [];
 var scrollHeights = [];
 // console.log(sideNav.getElementsByTagName('ul')[0]);
 // Make a list of titles and scroll heights
 for (i=0; i<numberOfSections; i++) {
   titleList.push(sections[i].getElementsByTagName('h2')[0]);
   idList.push(sections[i].id);
   scrollHeights.push(sections[i].offsetTop - 300);
 }
 console.log(scrollHeights);
 // Build the sideNav lists
 for (sec=0; sec<numberOfSections; sec++) {
   listItem = build(titleList[sec], idList[sec])
   sideNav.getElementsByTagName('ul')[0].appendChild(listItem);
 }
 scrollWatch(scrollHeights, sections);

}

function sidebarFixed() { var sidebarOffset = $("#sidebar-box").offset().top - 50; $(window).scroll(function() { var scroll = $(window).scrollTop(); //console.log(scroll); if (scroll >= sidebarOffset) { //console.log('a'); $("#sidebar-box").addClass("fixed"); } else { //console.log('a'); $("#sidebar-box").removeClass("fixed"); } }); }

sidebarFixed();

buildNav();


// 3dMOLjs initialization function

function insertStructure(container, structureUrl, settingsFunction){

 let element = $(container);
 let config = { backgroundColor: '#0d0d0d' };
 let viewer = $3Dmol.createViewer( element, config );
 let pdbUri = structureUrl;
 jQuery.ajax( pdbUri, {
   success: function(data) {
     let v = viewer;
     v.addModel( data, "pdb" );
     settingsFunction(v);
     v.zoomTo();
     v.zoom(1.2, 1000);
     v.render();
   },
   error: function(hdr, status, err) {
     console.log( "Failed to load PDB " + pdbUri + ": " + err );
   }
 });

}

var settingsList = {

 settings1: function(v){
   v.setStyle({resi:["1-58", "59-1000"]}, {cartoon: {color: 'aqua', color:'yellow'}})
   // v.setStyle({resi:}, {cartoon: {color: 'yellow'}})
 },
 settings2: function(v){
   v.setStyle({}, {cartoon: {color: 'spectrum'}})
 },
 settings3: function(v){
   v.setStyle({}, {cartoon: {color: 'yellow'}})
 }

}

insertStructure("#container-01", 'https://static.igem.org/mediawiki/2017/5/51/T--Toronto--2017_final_lacilov.txt', settingsList.settings1);

insertStructure("#container-02", 'https://static.igem.org/mediawiki/2017/9/99/T--Toronto--2017_2v1a.txt', settingsList.settings3);

insertStructure("#container-03", 'https://static.igem.org/mediawiki/2017/5/51/T--Toronto--2017_final_lacilov.txt', settingsList.settings2);

insertStructure("#container-04", 'https://static.igem.org/mediawiki/2017/5/58/T--Toronto--2017_final_lacilov_g58_del.txt', settingsList.settings2);

insertStructure("#container-05", 'https://static.igem.org/mediawiki/2017/5/51/T--Toronto--2017_final_lacilov.txt', settingsList.settings2);

insertStructure("#container-06", 'https://static.igem.org/mediawiki/2017/1/1c/T--Toronto--2017_final_lacilov_t60t61_del.txt', settingsList.settings2);


'use strict';

var audioPlayer = document.querySelector('.audio-player'); var playPause = audioPlayer.querySelector('#playPause'); var playpauseBtn = audioPlayer.querySelector('.play-pause-btn'); var loading = audioPlayer.querySelector('.loading'); var progress = audioPlayer.querySelector('.progress'); var sliders = audioPlayer.querySelectorAll('.slider'); var volumeBtn = audioPlayer.querySelector('.volume-btn'); var volumeControls = audioPlayer.querySelector('.volume-controls'); var volumeProgress = volumeControls.querySelector('.slider .progress'); var player = audioPlayer.querySelector('audio'); var currentTime = audioPlayer.querySelector('.current-time'); var totalTime = audioPlayer.querySelector('.total-time'); var speaker = audioPlayer.querySelector('#speaker');

var draggableClasses = ['pin']; var currentlyDragged = null;

window.addEventListener('mousedown', function (event) {

 if (!isDraggable(event.target)) return false;
 currentlyDragged = event.target;
 var handleMethod = currentlyDragged.dataset.method;
 this.addEventListener('mousemove', window[handleMethod], false);
 window.addEventListener('mouseup', function () {
   currentlyDragged = false;
   window.removeEventListener('mousemove', window[handleMethod], false);
 }, false);

});

playpauseBtn.addEventListener('click', togglePlay); player.addEventListener('timeupdate', updateProgress); player.addEventListener('volumechange', updateVolume); player.addEventListener('loadedmetadata', function () {

 totalTime.textContent = formatTime(player.duration);

}); player.addEventListener('canplay', makePlay); player.addEventListener('ended', function () {

 playPause.attributes.d.value = "M18 12L0 24V0";
 player.currentTime = 0;

});

volumeBtn.addEventListener('click', function () {

 volumeBtn.classList.toggle('open');
 volumeControls.classList.toggle('hidden');

});

window.addEventListener('resize', directionAware);

sliders.forEach(function (slider) {

 var pin = slider.querySelector('.pin');
 slider.addEventListener('click', window[pin.dataset.method]);

});

directionAware();

function isDraggable(el) {

 var canDrag = false;
 var classes = Array.from(el.classList);
 draggableClasses.forEach(function (draggable) {
   if (classes.indexOf(draggable) !== -1) canDrag = true;
 });
 return canDrag;

}

function inRange(event) {

 var rangeBox = getRangeBox(event);
 var rect = rangeBox.getBoundingClientRect();
 var direction = rangeBox.dataset.direction;
 if (direction == 'horizontal') {
   var min = rangeBox.offsetLeft;
   var max = min + rangeBox.offsetWidth;
   if (event.clientX < min || event.clientX > max) return false;
 } else {
   var min = rect.top;
   var max = min + rangeBox.offsetHeight;
   if (event.clientY < min || event.clientY > max) return false;
 }
 return true;

}

function updateProgress() {

 var current = player.currentTime;
 var percent = current / player.duration * 100;
 progress.style.width = percent + '%';
 currentTime.textContent = formatTime(current);

}

function updateVolume() {

 volumeProgress.style.height = player.volume * 100 + '%';
 if (player.volume >= 0.5) {
   speaker.attributes.d.value = 'M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z';
 } else if (player.volume < 0.5 && player.volume > 0.05) {
   speaker.attributes.d.value = 'M0 7.667v8h5.333L12 22.333V1L5.333 7.667M17.333 11.373C17.333 9.013 16 6.987 14 6v10.707c2-.947 3.333-2.987 3.333-5.334z';
 } else if (player.volume <= 0.05) {
   speaker.attributes.d.value = 'M0 7.667v8h5.333L12 22.333V1L5.333 7.667';
 }

}

function getRangeBox(event) {

 var rangeBox = event.target;
 var el = currentlyDragged;
 if (event.type == 'click' && isDraggable(event.target)) {
   rangeBox = event.target.parentElement.parentElement;
 }
 if (event.type == 'mousemove') {
   rangeBox = el.parentElement.parentElement;
 }
 return rangeBox;

}

function getCoefficient(event) {

 var slider = getRangeBox(event);
 var rect = slider.getBoundingClientRect();
 var K = 0;
 if (slider.dataset.direction == 'horizontal') {
   var offsetX = event.clientX - slider.offsetLeft;
   var width = slider.clientWidth;
   K = offsetX / width;
 } else if (slider.dataset.direction == 'vertical') {
   var height = slider.clientHeight;
   var offsetY = event.clientY - rect.top;
   K = 1 - offsetY / height;
 }
 return K;

}

function rewind(event) {

 if (inRange(event)) {
   player.currentTime = player.duration * getCoefficient(event);
 }

}

function changeVolume(event) {

 if (inRange(event)) {
   player.volume = getCoefficient(event);
 }

}

function formatTime(time) {

 var min = Math.floor(time / 60);
 var sec = Math.floor(time % 60);
 return min + ':' + (sec < 10 ? '0' + sec : sec);

}

function togglePlay() {

 if (player.paused) {
   playPause.attributes.d.value = "M0 0h6v24H0zM12 0h6v24h-6z";
   player.play();
 } else {
   playPause.attributes.d.value = "M18 12L0 24V0";
   player.pause();
 }

}

function makePlay() {

 playpauseBtn.style.display = 'block';
 loading.style.display = 'none';

}

function directionAware() {

 if (window.innerHeight < 250) {
   volumeControls.style.bottom = '-54px';
   volumeControls.style.left = '54px';
 } else if (audioPlayer.offsetTop < 154) {
   volumeControls.style.bottom = '-164px';
   volumeControls.style.left = '-3px';
 } else {
   volumeControls.style.bottom = '52px';
   volumeControls.style.left = '-3px';
 }

}