var myModal = document.getElementById('myModal'); // we need a blank modal to fill up and target our object function myModal.addEventListener('show.bs.modal', function(e) { console.log('show.bs.modal triggered for #'+e.target.id); console.log('event.relatedTarget is '+e.relatedTarget.tagName+'.'+e.relatedTarget.className.replace(/\s/g,'.')); }, false); // Modal initialized with JavaScript var myModalJS = document.getElementById('myModalJS'); // we need a blank modal to fill up and target our object function var btnModal = document.getElementById('openModalViaJS'); var firstModalContent = '<div class="modal-header">' +'<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>' +'<h4 class="modal-title" id="myModalJSLabel">Modal title</h4>' +'</div>' +'<div class="modal-body">' +'<p>This is a damn awesome modal content template configured via Javascript, using the specific modal events like <code>show.bs.modal</code>, so please open your console and check the log entries.</p>' +'</div>' +'<div class="modal-footer">' +'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +'<button type="button" class="btn btn-primary">Save changes</button>' +'</div>'; // init the modal var modalInitJS = new Modal(myModalJS, { content: firstModalContent, backdrop: 'static' }); btnModal.addEventListener('click',function(e){ modalInitJS.show(); },false); // another button var btnModal2 = document.getElementById('openModalViaJS2'); var externalModalContent = { title: 'Some title coming from space, a custom variable', content: 'This example also uses the specific modal events like <code>show.bs.modal</code>, so please open your console and check the logs. This is also a variable here, efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.', }; // set new content for the modal and show it btnModal2.addEventListener('click', function() { //template content for modal example 2 modalInitJS.setContent('<div class="modal-header">' +'<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>' +'<h4 class="modal-title" id="myModalJSLabel">'+externalModalContent.title+'</h4>' +'</div>' +'<div class="modal-body">' +'<p>'+externalModalContent.content+'</p>' +'</div>' +'<div class="modal-footer">' +'<button type="button" class="btn btn-danger">Delete</button>' +'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +'</div>'); modalInitJS.show(); }, false); // another button to be used to reset modal content var btnModalNotTrigger = document.getElementById('modalNotTriggerJS'); btnModalNotTrigger.addEventListener('click', function(e) { e.preventDefault(); modalInitJS.setContent(firstModalContent); modalInitJS.show(); }, false); // NEW added events to Modal myModalJS.addEventListener('show.bs.modal', function(e) { var related = ', relatedTarget: '+ (e.relatedTarget ? e.relatedTarget.tagName + '.'+e.relatedTarget.className.replace(/\s/g,'.') : 'null'); console.log( 'The "show.bs.modal" event fired for #' + e.target.id + related ); }, false); myModalJS.addEventListener('shown.bs.modal', function(e) { var related = ', relatedTarget: '+ (e.relatedTarget ? e.relatedTarget.tagName + '.'+e.relatedTarget.className.replace(/\s/g,'.') : 'null'); console.log( 'The "shown.bs.modal" event fired for #' + e.target.id + related ); }, false); myModalJS.addEventListener('hide.bs.modal', function(e) { console.log( 'The "hide.bs.modal" event fired for #' + e.target.id ); }, false); myModalJS.addEventListener('hidden.bs.modal', function(e) { console.log( 'The "hidden.bs.modal" event fired for #' + e.target.id ); }, false); // updating modal while visible var modalUpdate = document.getElementById('modalUpdate'), // the trigger anotherStaticModal = document.getElementById('anotherStaticModal'), // the modal currentStaticModalBody = anotherStaticModal.querySelector('.modal-body'), // the body of the current modal currentStaticModalBodyContent = currentStaticModalBody.innerHTML, // we cache the content of the body modalUpdateInit = modalUpdate.Modal, // the initialization changeModal1 = document.getElementById('changeModal1'), // the change buttons changeModal2 = document.getElementById('changeModal2'); changeModal1.addEventListener('click', function(){ if (!/scroll/i.test(currentStaticModalBody.innerHTML)){ changeModal1.className += ' hidden'; changeModal2.className = changeModal2.className.replace(new RegExp('(\\s|^)hidden(\\s|$)','g'),''); currentStaticModalBody.innerHTML = currentStaticModalBodyContent; // set modalUpdateInit.update(); // trigger the update } }, false); changeModal2.addEventListener('click', function(){ if (/scroll/i.test(currentStaticModalBody.innerHTML)){ changeModal2.className += ' hidden'; changeModal1.className = changeModal1.className.replace(new RegExp('(\\s|^)hidden(\\s|$)','g'),' '); currentStaticModalBody.innerHTML = '<h4>This modal changed via JavaScript</h4><p>OK now this is a different content.</p>'; modalUpdateInit.update(); } }, false); // Dropdown init via JS var makeMeDropdown = document.getElementById('makeMeDropdown'); var myDropdownTemplate = '<div class="dropdown btn-group">' +'<button id="formDropdown" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false" tabindex="0">Login <span class="caret"></span></button>' +'<form class="form-vertical dropdown-menu">' +'<div class="form-group">' +'<label for="inputEmail3" class="control-label">Email</label>' +'<div class="">' +'<input type="email" class="form-control" id="inputEmail3" placeholder="Email">' +'</div>' +'</div>' +'<div class="form-group">' +'<label for="inputPassword3" class="control-label">Password</label>' +'<div class="">' +'<input type="password" class="form-control" id="inputPassword3" placeholder="Password">' +'</div>' +'</div>' +'<div class="form-group">' +'<div class="">' +'<div class="checkbox">' +'<label>' +'<input type="checkbox"> Remember me' +'</label>' +'</div>' +'</div>' +'</div>' +'<div class="form-group">' +'<div class="">' +'<button type="submit" class="btn btn-default">Sign in</button>' +'</div>' +'</div>' +'</form>' +'</div>'; makeMeDropdown.addEventListener('click', function(e){ e.preventDefault(); if ( !/\bdisabled/.test(makeMeDropdown.className) ){ // invalidate the makeMeDropdown this.setAttribute('disabled',true); this.className = 'btn btn-default disabled'; this.innerHTML = 'All done'; this.parentNode.innerHTML += myDropdownTemplate; //get the new dropdown var formDropdown = document.getElementById('formDropdown'); // initiate with option var DropdownInit = new Dropdown(formDropdown, true); // NEW: attach Dropdown original events formDropdown.parentNode.addEventListener('show.bs.dropdown', function(e){ var related = null; related = ', relatedTarget: '+ (e.relatedTarget ? e.relatedTarget.tagName + '.'+e.relatedTarget.className.replace(/\s/g,'.') : 'null'); console.log('The show.bs.dropdown event fired for parent of #' + formDropdown.id + related ); }, false); formDropdown.parentNode.addEventListener('shown.bs.dropdown', function(e){ var related = null; related = ', relatedTarget: '+ (e.relatedTarget ? e.relatedTarget.tagName + '.'+e.relatedTarget.className.replace(/\s/g,'.') : 'null'); console.log('The shown.bs.dropdown event fired for parent of #' + formDropdown.id + related ); }, false); formDropdown.parentNode.addEventListener('hide.bs.dropdown', function(e){ var related = null; related = ', relatedTarget: '+ (e.relatedTarget ? e.relatedTarget.tagName + '.'+e.relatedTarget.className.replace(/\s/g,'.') : 'null'); console.log('The hide.bs.dropdown event fired for parent of #' + formDropdown.id + related ); }, false); formDropdown.parentNode.addEventListener('hidden.bs.dropdown', function(e){ var related = null; related = ', relatedTarget: '+ (e.relatedTarget ? e.relatedTarget.tagName + '.'+e.relatedTarget.className.replace(/\s/g,'.') : 'null'); console.log('The hidden.bs.dropdown event fired for parent of #' + formDropdown.id + related ); }, false); } }, false); //switch views for tabs var exampleTab = document.getElementById('exampleTab'); var tabsToggleView = document.getElementById('tabSwitcher'); var tabsDemo = document.getElementById('myTab'); tabsToggleView.addEventListener('click', function(e){ e.preventDefault(); if ( e.target.tagName === 'A' && e.target.getAttribute('data-nclass') !== undefined ) { tabsDemo.className = e.target.getAttribute('data-nclass'); tabsToggleView.querySelector('button').innerHTML = 'Viewing ' + e.target.innerHTML } else { return false; } }); //demo alert fun var dangerAlert = document.querySelector('.alert-danger'), siblings = dangerAlert.parentNode.childNodes; dangerAlert.addEventListener('closed.bs.alert', function(e) { var successAlert = document.createElement('div'); successAlert.setAttribute('class','alert alert-success fade'); successAlert.setAttribute('role','alert'); successAlert.innerHTML = '<h4>Wow you REALLY got no error!</h4><p>Javascript isn\'t fun? Well, think again.</p>'; successAlert.innerHTML += '<p>I just didn\'t want this section to be empty, looks awful..</p>'; dangerAlert.parentNode.insertBefore(successAlert,siblings[siblings.length-2]); if (successAlert.classList) { successAlert.classList.add('in'); } else { successAlert.className += ' in'; } }); // NEW Alert events document.getElementById('alertDemo').addEventListener('close.bs.alert', function(e) { console.log( 'The "close.bs.alert" event fired for #' + e.target.id ); }); document.getElementById('alertDemo').addEventListener('closed.bs.alert', function(e) { console.log( 'The "closed.bs.alert" event fired for #' + e.target.id ); }); //demo popover. trigger via click var popover1 = new Popover('#popover-via-click', { trigger: 'click'} ); // demo popover, using template var someTitleFromOtherCode = 'Popover via JavaScript <span class="label label-primary">FOCUS</span>'; var someContentFromOuterSpace = '<p>Some sample message from outer space wrapped in <p> tags. You can add your own functions to combine with Popover template as you wish.</p>'; var popover2 = new Popover('.popover-via-template', { trigger: 'focus', template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title">'+someTitleFromOtherCode+'</h3><div class="popover-content">'+someContentFromOuterSpace+'</div></div>' }); // new Popover events var popoverEvents = document.getElementById('popoverWithEvents'); popoverEvents.addEventListener('show.bs.popover', function(){ console.log('The show.bs.popover event fired for #' + popoverEvents.id); }, false); popoverEvents.addEventListener('shown.bs.popover', function(){ console.log('The shown.bs.popover event fired for #' + popoverEvents.id); }, false); popoverEvents.addEventListener('hide.bs.popover', function(){ console.log('The hide.bs.popover event fired for #' + popoverEvents.id); }, false); popoverEvents.addEventListener('hidden.bs.popover', function(){ console.log('The hidden.bs.popover event fired for #' + popoverEvents.id); }, false); //demo button var btn = document.getElementById('myButton'); var success = document.getElementById('successButton'), successOuter = success.outerHTML; btn.addEventListener('click', function() { Button(btn,'loading'); setTimeout(function() { if ( !document.getElementById('successButton') ) { var newSuccess = document.createElement('div'); btn.parentNode.parentNode.insertBefore(newSuccess, btn.parentNode.nextSibling); newSuccess.outerHTML = successOuter; // reidentify the new alert and reinit alert success = document.getElementById('successButton'); new Alert(success.querySelector('[data-dismiss="alert"]')); // initialize if not already } success.style.display = 'block'; setTimeout(function(){ success.className += ' in'; }, 10) Button(btn,'reset'); }, 2000) }); //demo carousel-example-generic demonstrating the slid and slide events var genericCarousel = document.getElementById('carousel-example-generic'); genericCarousel.addEventListener('slide.bs.carousel', function(e) { console.log( 'The #' + e.target.id + ' is about to slide, and this was the "slide" event, direction: ' + genericCarousel.Carousel.direction + ', relatedTarget: ' + e.relatedTarget.tagName + '.' + e.relatedTarget.className ); }); genericCarousel.addEventListener('slid.bs.carousel', function(e) { console.log( 'The #' + e.target.id + ' has finished the slide transition, and this was the "slid" event, direction: ' + genericCarousel.Carousel.direction + ', relatedTarget: ' + e.relatedTarget.tagName + '.' + e.relatedTarget.className ); }); //demo myCarousel demonstrating the slid and slide events var mainSlider = document.getElementById('myCarousel'); var mainSliderItems = mainSlider.querySelectorAll('.item'); mainSlider.addEventListener('slide.bs.carousel', function(e) { var currentActive = mainSlider.Carousel.getActiveIndex(); var activeCaption = mainSliderItems[currentActive].querySelector('.carousel-caption'); activeCaption.classList.remove('slide'); }); mainSlider.addEventListener('slid.bs.carousel', function(e) { var activeCaption = e.relatedTarget.querySelector('.carousel-caption'); activeCaption.classList.add('slide'); }); // JS init for carousel example // var exampleCarousel = document.getElementById('carousel-example-generic'); // var exampleCarouselInit = new Carousel(exampleCarousel); /* side-nav autoresize on window scroll and resize */ var sideNav = document.getElementById('side-nav'); if ( document.documentElement && !/ie/.test(document.documentElement.className) ) { function resetNav() { document.getElementById('nav-scrollspy').style.width = ''; } function adjustNav() { var ww = window.innerWidth || document.documentElement.clientWidth; if ( ww >= 768 ) { document.getElementById('nav-scrollspy').style.width = (sideNav.offsetWidth - 15) + 'px'; } else { resetNav() } } adjustNav(); window.addEventListener('resize', adjustNav, false)// adjust on resize } // KUTE.js scrollTo var sideLinks = sideNav.getElementsByTagName("A"), scrollTo = function(e){ var target = document.getElementById(e.target.getAttribute('href').replace('#','')); e.preventDefault(); document.documentElement.scrollTop = target.getBoundingClientRect().top + (window.pageYOffset||document.documentElement.scrollTop) - (i===0?0:60); }; for (var i=0, sll=sideLinks.length; i<sll; i++) { sideLinks[i].addEventListener('click', scrollTo, false); } // scrollSpy stuff var mainContainerSpy = document.querySelector('[data-target="#side-nav"]'); mainContainerSpy.addEventListener('activate.bs.scrollspy', function(e){ var navScrollspy = document.getElementById('nav-scrollspy'); var componentsItem = navScrollspy.querySelector('li.list11'); var target = e.relatedTarget; if ( componentsItem === target.parentNode || componentsItem.querySelector('li.active') === target.parentNode ) { if ( componentsItem.querySelector('.list5.active') ){ componentsItem.classList.add('additional'); } else { componentsItem.classList.remove('additional'); } } }, false); /* BOOTSTRAP ORIGINAL EVENTS ---------------------------*/ // demo for Button toggle, renamed from bs.button.change to change.bs.button var checkboxes = document.getElementById('checkboxButtons'); // checkboxes grpup var radioButtons = document.getElementById('radioButtons'); // radioButtons grpup var checkBtns = checkboxes.querySelectorAll('input[type="checkbox"]'); // checkboxes var radioBtns = radioButtons.querySelectorAll('input[type="radio"]'); // radios checkboxes.addEventListener('change.bs.button', function() { console.log( 'The button group with CHECKBOXES changed' ); }); checkBtns[0].addEventListener('change.bs.button',function() { console.log( 'Hopa! This handler is bound by the "change" of the FIRST CHECKBOX only.' ); }); document.getElementById('radioButtons').addEventListener('change.bs.button', function() { console.log( 'The button group with RADIOS changed' ); }); radioBtns[0].addEventListener('change.bs.button', function() { console.log( 'This handler is bound by the "change" of the FIRST RADIO button only.' ); }); // new Affix events, well some of them var navScrollspy = document.getElementById('nav-scrollspy'); navScrollspy.addEventListener('affix.bs.affix', function(e) { console.log( 'The "affix.bs.affix" event fired for #' + e.target.id );}, false ); navScrollspy.addEventListener('affix-top.bs.affix', function(e) { console.log( 'The "affix-top.bs.affix" event fired for #' + e.target.id );}, false ); navScrollspy.addEventListener('affix-bottom.bs.affix', function(e) { console.log( 'The "affix-bottom.bs.affix" event fired for #' + e.target.id ); }, false ); // new Collapse events var collapseExample = document.getElementById('collapseExample'); collapseExample.addEventListener('show.bs.collapse', function(){ console.log('The show.bs.collapse event fired for #' + collapseExample.id); },false); collapseExample.addEventListener('shown.bs.collapse', function(){ console.log('The shown.bs.collapse event fired for #' + collapseExample.id); },false); collapseExample.addEventListener('hide.bs.collapse', function(){ console.log('The hide.bs.collapse event fired for #' + collapseExample.id); },false); collapseExample.addEventListener('hidden.bs.collapse', function(){ console.log('The hidden.bs.collapse event fired for #' + collapseExample.id); },false); // new ScrollSpy events var scrollSpyElement = document.querySelector('[data-target="#navbar-example"]'); scrollSpyElement.addEventListener('activate.bs.scrollspy', function(e){ var related = e.relatedTarget ? (' by relatedTarget: ' + e.relatedTarget.tagName + '.' + e.relatedTarget.getAttribute('href') ) : ''; console.log('The activate.bs.scrollspy event fired for div[data-target="#navbar-example"]' + related ); }, false); // new Tab events var tabEventsExample = document.getElementById('tabEventsExample'), tabEventsExampleInit = new Tab(tabEventsExample, {preserve: true}); tabEventsExample.addEventListener('show.bs.tab', function() { console.log('The show.bs.tab event fired for #' + tabEventsExample.id); }, false); tabEventsExample.addEventListener('shown.bs.tab', function() { console.log('The shown.bs.tab event fired for #' + tabEventsExample.id); }, false); tabEventsExample.addEventListener('hide.bs.tab', function() { console.log('The hide.bs.tab event fired for #' + tabEventsExample.id); }, false); tabEventsExample.addEventListener('hidden.bs.tab', function() { console.log('The hidden.bs.tab event fired for #' + tabEventsExample.id); }, false); // new Tooltip events var tooltipEvents = document.getElementById('tooltipWithEvents'); tooltipEvents.addEventListener('show.bs.tooltip', function(){ console.log('The show.bs.tooltip event fired for #' + tooltipEvents.id); }, false); tooltipEvents.addEventListener('shown.bs.tooltip', function(){ console.log('The shown.bs.tooltip event fired for #' + tooltipEvents.id); }, false); tooltipEvents.addEventListener('hide.bs.tooltip', function(){ console.log('The hide.bs.tooltip event fired for #' + tooltipEvents.id); }, false); tooltipEvents.addEventListener('hidden.bs.tooltip', function(){ console.log('The hidden.bs.tooltip event fired for #' + tooltipEvents.id); }, false); // transparent navbar var navbar = document.querySelector('.navbar-fixed-top'), scrollTimer = null, mouseHover = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ]; navbar.style.backfaceVisibility = 'hidden'; navbar.style.transition = 'opacity 0.5s linear 0s'; navbar.style.WebkitTransition = 'opacity 0.5s linear 0s'; function setNavbarOpacity(){ clearTimeout(scrollTimer); scrollTimer = !navbar.classList.contains('HOVER') ? setTimeout(function(){ var scrollTop = window.pageYOffset || document.documentElement.scrollTop; if ( scrollTop < 120 ){ navbar.style.opacity = 1 } else { navbar.style.opacity = 0.7 } },50) : function() {return false;} } function setNavbarOpacityOnEnter(){ clearTimeout(scrollTimer); scrollTimer = setTimeout(function(){ if (!navbar.classList.contains('HOVER')) { navbar.classList.add('HOVER'); var scrollTop = window.pageYOffset || document.documentElement.scrollTop; if ( scrollTop > 120 ){ navbar.style.opacity = 1 } } },0) } function setNavbarOpacityOnLeave(){ clearTimeout(scrollTimer); scrollTimer = setTimeout(function(){ if (navbar.classList.contains('HOVER')) { navbar.classList.remove('HOVER'); var scrollTop = window.pageYOffset || document.documentElement.scrollTop; if ( scrollTop > 120 ){ navbar.style.opacity = 0.7 } } },0) } document.addEventListener('DOMContentLoaded', setNavbarOpacity, false); window.addEventListener('scroll', setNavbarOpacity, false); navbar.addEventListener(mouseHover[0],setNavbarOpacityOnEnter,false); navbar.addEventListener(mouseHover[1],setNavbarOpacityOnLeave,false);