CodePen Embed - testing show/hide with TaffyDB

<div id="wrapper">
    <div class="pagediv" style="background-color:#63b075;">
        <button id="ItemA" class="buttonItem" onclick="showItemA()">A</button><button id="ItemB" class="buttonItem" onclick="showItemB()">B</button><button id="ItemC" class="buttonItem" onclick="showItemC()">C</button><button id="ItemD" class="buttonItem" onclick="showItemD()">D</button>
	<div id="myDIV1" class="box"></div> 
    </div> 

    <div class="pagediv" style="background-color:#636db0;">
        <button id="ItemE" class="buttonItem" onclick="showItemE()">E</button><button id="ItemF" class="buttonItem" onclick="showItemF()">F</button><button id="ItemG" class="buttonItem" onclick="showItemG()">G</button><button id="ItemH" class="buttonItem" onclick="showItemH()">H</button>
	<div id="myDIV2" class="box"></div> 
    </div> 
</div>

.box {
    width: 100%;
    text-align: center;
	padding: 1em;
	display: none;
}
.buttonItem {margin:0; padding:0; width:25%;}
#wrapper {margin:0; padding:0px; text-align:center;}
.pagediv {overflow: auto;}
.text {margin-right: 2em; text-align: left;}

<!-- lazy load -->
.ratio{
  padding-bottom:66.64%;
  background-color: #1E1E1E;
  height: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.b-lazy{
  display:inline-block;
  position:relative;
  left:0;
  top:0;
}
.vidwrapper {
  display: block;
  width:33.3%;
}

@media screen and (max-width:3000px) {
/* Big Styles */
        #wrapper {width: 900px;}
        .b-lazy{ width:560px; height:315px; }
}
@media screen and (max-width:900px) {
/* Small Styles */
        #wrapper {width: 100%;}
}
@media screen and (max-width:640px) {
/* Tiny Styles */
        #wrapper {width: 100%;}
        .b-lazy{ width:auto; height:auto; }
}


// https://codepen.io/iPhoneDevLog/pen/rvJQYg
// The JavaScript Database: http://taffydb.com/
// TaffyDB entries, A-D

 function showItemA(){
 var show = localStorage.setItem('show','ItemA');
 getData1();
 }
 function showItemB(){
 var show = localStorage.setItem('show','ItemB');
 getData1();
 }
 function showItemC(){
 var show = localStorage.setItem('show','ItemC');
 getData1();
 }
 function showItemD(){
 var show = localStorage.setItem('show','ItemD');
 getData1();
 }
 
 function getData1(){
 	"use strict";
	// TaffyDB js localstorage
 let db = TAFFY([
 {
 id: 1001, 
 letters:"ItemA",
 pagediv:"pagediv1",
  contents:"Video should show below",
  videourl:"LdS97xPmziU",
  text:"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
 results:"myDIV1"
 },
 {
 id: 1002, 
  letters:"ItemB",
 pagediv:"pagediv1",
  contents:"Video should show below",
  videourl:"LdS97xPmziU",
  text:"",
 results:"myDIV1"
 },
 {
 id: 1003, 
  letters:"ItemC",
 pagediv:"pagediv1",
  contents:"Video should show below",
  videourl:"LdS97xPmziU",
  text:"",
 results:"myDIV1"
 },
 {
 id: 1004, 
  letters:"ItemD",
 pagediv:"pagediv1",
  contents:"Video should show below",
  videourl:"LdS97xPmziU",
  text:"",
 results:"myDIV1"
 }
 ]);
	
	
	let show = localStorage.getItem('show');
 db({ letters:show}).each(function (name){
    let letters = name.letters;
    let pagediv = name.pagediv;
    let contents = name.contents;
    let results = name.results; // myDIV1
    let videourl = name.videourl;
    let text = name.text;
    let output = document.getElementById(results);  // myDIV1

// this closes all open myDIVs
	let boxes = document.querySelectorAll("div.box"); 
	let i;
	for (i = 0; i < boxes.length; i++) {
		boxes[i].style.display = "none";
	} 
// this closes all open pagedivs
	let pagedivs = document.querySelectorAll("div.pagediv"); 
	let pd;
	for (pd = 0; pd < pagedivs.length; pd++) {
		pagedivs[1].style.display = "none";
	} 

	output.style='display:block'; // unhide this myDIV
    output.innerHTML="<p style='font-weight:bold'>"+ letters + "</p><p>" + contents +"</p><div class='vidwrapper ratio'><iframe class='b-lazy' src='https://www.youtube.com/embed/" + videourl + "' frameborder='0'></iframe></div><p class='text'>" + text + "</p><br><button id='close1' onclick='close1()' style='width:10em;'>close</button>";
});
}

 
 
 
// DB for letters E-H 

 function showItemE(){
 var show = localStorage.setItem('show','ItemE');
 getData2();
 }
 function showItemF(){
 var show = localStorage.setItem('show','ItemF');
 getData2();
 }
 function showItemG(){
 var show = localStorage.setItem('show','ItemG');
 getData2();
 }
 function showItemH(){
 var show = localStorage.setItem('show','ItemH');
 getData2();
 }
 
 function getData2(){
 	"use strict";
	// TaffyDB js localstorage
 let db = TAFFY([
 {
 id: 1001, 
 letters:"ItemE",
 pagediv:"pagediv2",
  contents:"Video should show below",
  videourl:"LdS97xPmziU",
  text:"",
 results:"myDIV2"
 },
 {
 id: 1002, 
  letters:"ItemF",
 pagediv:"pagediv2",
  contents:"Video should show below",
  videourl:"LdS97xPmziU",
  text:"",
 results:"myDIV2"
 },
 {
 id: 1003, 
  letters:"ItemG",
 pagediv:"pagediv2",
  contents:"Video should show below",
  videourl:"LdS97xPmziU",
  text:"",
 results:"myDIV2"
 },
 {
 id: 1004, 
  letters:"ItemH",
 pagediv:"pagediv2",
  contents:"Video should show below",
  videourl:"LdS97xPmziU",
  text:"",
 results:"myDIV2"
 }
 ]);
    
	let show = localStorage.getItem('show');
 db({ letters:show}).each(function (name){
    let letters = name.letters;
    let pagediv = name.pagediv;
    let contents = name.contents;
    let results = name.results; // myDIV1
    let videourl = name.videourl;
    let text = name.text;
    let output = document.getElementById(results);  // myDIV1

// this closes all open myDIVs
	let boxes = document.querySelectorAll("div.box"); 
	let i;
	for (i = 0; i < boxes.length; i++) {
		boxes[i].style.display = "none";
	} 
// this closes all open pagedivs
	let pagedivs = document.querySelectorAll("div.pagediv"); 
	let pd;
	for (pd = 0; pd < pagedivs.length; pd++) {
		pagedivs[0].style.display = "none";
	} 

	output.style='display:block'; // unhide this myDIV
    output.innerHTML="<p style='font-weight:bold'>"+ letters + "</p><p>" + contents +"</p><div class='vidwrapper ratio'><iframe class='b-lazy' src='https://www.youtube.com/embed/" + videourl + "' frameborder='0'></iframe></div><p style='text-align:left;'>" + text + "</p><br><button id='close1' onclick='close1()' style='width:10em;'>close</button>";
});
}

// https://www.w3schools.com/jsref/met_document_queryselectorall.asp
function close1(){
const boxes = document.querySelectorAll('div.box')

boxes.forEach(function(box) {
   box.style.display = 'none'
 })

let pagedivs = document.querySelectorAll("div.pagediv"); 
    let pd;
    for (pd = 0; pd < pagedivs.length; pd++) {
        pagedivs[pd].style.display = "block";
    } 
}


function scrollUp() {
window.scrollTo(0,-50);
}



// lazy loading
// https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/


document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  let active = false;

  const lazyLoad = function() {
    if (active === false) {
      active = true;

      setTimeout(function() {
        lazyImages.forEach(function(lazyImage) {
          if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.srcset = lazyImage.dataset.srcset;
            lazyImage.classList.remove("lazy");

            lazyImages = lazyImages.filter(function(image) {
              return image !== lazyImage;
            });

            if (lazyImages.length === 0) {
              document.removeEventListener("scroll", lazyLoad);
              window.removeEventListener("resize", lazyLoad);
              window.removeEventListener("orientationchange", lazyLoad);
            }
          }
        });

        active = false;
      }, 200);
    }
  };

  document.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationchange", lazyLoad);
});



// https://raw.githubusercontent.com/dinbror/blazy/master/blazy.min.js

/*!
  hey, [be]Lazy.js - v1.8.2 - 2016.10.25
  A fast, small and dependency free lazy load script (https://github.com/dinbror/blazy)
  (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy
*/

  (function(q,m){"function"===typeof define&&define.amd?define(m):"object"===typeof exports?module.exports=m():q.Blazy=m()})(this,function(){function q(b){var c=b._util;c.elements=E(b.options);c.count=c.elements.length;c.destroyed&&(c.destroyed=!1,b.options.container&&l(b.options.container,function(a){n(a,"scroll",c.validateT)}),n(window,"resize",c.saveViewportOffsetT),n(window,"resize",c.validateT),n(window,"scroll",c.validateT));m(b)}function m(b){for(var c=b._util,a=0;a<c.count;a++){var d=c.elements[a],e;a:{var g=d;e=b.options;var p=g.getBoundingClientRect();if(e.container&&y&&(g=g.closest(e.containerClass))){g=g.getBoundingClientRect();e=r(g,f)?r(p,{top:g.top-e.offset,right:g.right+e.offset,bottom:g.bottom+e.offset,left:g.left-e.offset}):!1;break a}e=r(p,f)}if(e||t(d,b.options.successClass))b.load(d),c.elements.splice(a,1),c.count--,a--}0===c.count&&b.destroy()}function r(b,c){return b.right>=c.left&&b.bottom>=c.top&&b.left<=c.right&&b.top<=c.bottom}function z(b,c,a){if(!t(b,a.successClass)&&(c||a.loadInvisible||0<b.offsetWidth&&0<b.offsetHeight))if(c=b.getAttribute(u)||b.getAttribute(a.src)){c=c.split(a.separator);var d=c[A&&1<c.length?1:0],e=b.getAttribute(a.srcset),g="img"===b.nodeName.toLowerCase(),p=(c=b.parentNode)&&"picture"===c.nodeName.toLowerCase();if(g||void 0===b.src){var h=new Image,w=function(){a.error&&a.error(b,"invalid");v(b,a.errorClass);k(h,"error",w);k(h,"load",f)},f=function(){g?p||B(b,d,e):b.style.backgroundImage='url("'+d+'")';x(b,a);k(h,"load",f);k(h,"error",w)};p&&(h=b,l(c.getElementsByTagName("source"),function(b){var c=a.srcset,e=b.getAttribute(c);e&&(b.setAttribute("srcset",e),b.removeAttribute(c))}));n(h,"error",w);n(h,"load",f);B(h,d,e)}else b.src=d,x(b,a)}else"video"===b.nodeName.toLowerCase()?(l(b.getElementsByTagName("source"),function(b){var c=a.src,e=b.getAttribute(c);e&&(b.setAttribute("src",e),b.removeAttribute(c))}),b.load(),x(b,a)):(a.error&&a.error(b,"missing"),v(b,a.errorClass))}function x(b,c){v(b,c.successClass);c.success&&c.success(b);b.removeAttribute(c.src);b.removeAttribute(c.srcset);l(c.breakpoints,function(a){b.removeAttribute(a.src)})}function B(b,c,a){a&&b.setAttribute("srcset",a);b.src=c}function t(b,c){return-1!==(" "+b.className+" ").indexOf(" "+c+" ")}function v(b,c){t(b,c)||(b.className+=" "+c)}function E(b){var c=[];b=b.root.querySelectorAll(b.selector);for(var a=b.length;a--;c.unshift(b[a]));return c}function C(b){f.bottom=(window.innerHeight||document.documentElement.clientHeight)+b;f.right=(window.innerWidth||document.documentElement.clientWidth)+b}function n(b,c,a){b.attachEvent?b.attachEvent&&b.attachEvent("on"+c,a):b.addEventListener(c,a,{capture:!1,passive:!0})}function k(b,c,a){b.detachEvent?b.detachEvent&&b.detachEvent("on"+c,a):b.removeEventListener(c,a,{capture:!1,passive:!0})}function l(b,c){if(b&&c)for(var a=b.length,d=0;d<a&&!1!==c(b[d],d);d++);}function D(b,c,a){var d=0;return function(){var e=+new Date;e-d<c||(d=e,b.apply(a,arguments))}}var u,f,A,y;return function(b){if(!document.querySelectorAll){var c=document.createStyleSheet();document.querySelectorAll=function(a,b,d,h,f){f=document.all;b=[];a=a.replace(/\[for\b/gi,"[htmlFor").split(",");for(d=a.length;d--;){c.addRule(a[d],"k:v");for(h=f.length;h--;)f[h].currentStyle.k&&b.push(f[h]);c.removeRule(0)}return b}}var a=this,d=a._util={};d.elements=[];d.destroyed=!0;a.options=b||{};a.options.error=a.options.error||!1;a.options.offset=a.options.offset||100;a.options.root=a.options.root||document;a.options.success=a.options.success||!1;a.options.selector=a.options.selector||".b-lazy";a.options.separator=a.options.separator||"|";a.options.containerClass=a.options.container;a.options.container=a.options.containerClass?document.querySelectorAll(a.options.containerClass):!1;a.options.errorClass=a.options.errorClass||"b-error";a.options.breakpoints=a.options.breakpoints||!1;a.options.loadInvisible=a.options.loadInvisible||!1;a.options.successClass=a.options.successClass||"b-loaded";a.options.validateDelay=a.options.validateDelay||25;a.options.saveViewportOffsetDelay=a.options.saveViewportOffsetDelay||50;a.options.srcset=a.options.srcset||"data-srcset";a.options.src=u=a.options.src||"data-src";y=Element.prototype.closest;A=1<window.devicePixelRatio;f={};f.top=0-a.options.offset;f.left=0-a.options.offset;a.revalidate=function(){q(a)};a.load=function(a,b){var c=this.options;void 0===a.length?z(a,b,c):l(a,function(a){z(a,b,c)})};a.destroy=function(){var a=this._util;this.options.container&&l(this.options.container,function(b){k(b,"scroll",a.validateT)});k(window,"scroll",a.validateT);k(window,"resize",a.validateT);k(window,"resize",a.saveViewportOffsetT);a.count=0;a.elements.length=0;a.destroyed=!0};d.validateT=D(function(){m(a)},a.options.validateDelay,a);d.saveViewportOffsetT=D(function(){C(a.options.offset)},a.options.saveViewportOffsetDelay,a);C(a.options.offset);l(a.options.breakpoints,function(a){if(a.width>=window.screen.width)return u=a.src,!1});setTimeout(function(){q(a)})}});



// taffy-min.js 

var TAFFY,exports,T;!function(){"use strict";var _t_,_e_,_n_,_r_,_i_,_s_,_u_,_o_,_c_,_a_,_l_,_f_,_h_,_T_,_g_,_F_,_p_,_d_,_A_,_v_,_y_,_m_,___,_x_;if(!TAFFY)for(_i_="2.7",_s_=1,_u_="000000",_o_=1e3,_c_={},_x_=function(_t_){var _e_=Array.prototype.slice.call(_t_);return _e_.sort()},_a_=function(_t_){return TAFFY.isArray(_t_)||TAFFY.isObject(_t_)?_t_:JSON.parse(_t_)},_A_=function(_t_,_e_){return _v_(_t_,function(_t_){return _e_.indexOf(_t_)>=0})},_v_=function(_t_,_e_,_n_){var _r_=[];return null==_t_?_r_:Array.prototype.filter&&_t_.filter===Array.prototype.filter?_t_.filter(_e_,_n_):(_l_(_t_,function(_t_,_i_,_s_){_e_.call(_n_,_t_,_i_,_s_)&&(_r_[_r_.length]=_t_)}),_r_)},___=function(_t_){return"[object RegExp]"===Object.prototype.toString.call(_t_)},_m_=function(_t_){var _e_=T.isArray(_t_)?[]:T.isObject(_t_)?{}:null;if(null===_t_)return _t_;for(var _n_ in _t_)_e_[_n_]=___(_t_[_n_])?_t_[_n_].toString():T.isArray(_t_[_n_])||T.isObject(_t_[_n_])?_m_(_t_[_n_]):_t_[_n_];return _e_},_y_=function(_t_){var _e_=JSON.stringify(_t_);return null===_e_.match(/regex/)?_e_:JSON.stringify(_m_(_t_))},_l_=function(_t_,_e_,_n_){var _r_,_i_,_s_,_u_;if(_t_&&(T.isArray(_t_)&&1===_t_.length||!T.isArray(_t_)))_e_(T.isArray(_t_)?_t_[0]:_t_,0);else for(_s_=0,_t_=T.isArray(_t_)?_t_:[_t_],_u_=_t_.length;_u_>_s_&&(_i_=_t_[_s_],T.isUndefined(_i_)&&!_n_||(_r_=_e_(_i_,_s_),_r_!==T.EXIT));_s_++);},_f_=function(_t_,_e_){var _n_,_r_,_i_=0;for(_r_ in _t_)if(_t_.hasOwnProperty(_r_)&&(_n_=_e_(_t_[_r_],_r_,_i_++),_n_===T.EXIT))break},_c_.extend=function(_t_,_e_){_c_[_t_]=function(){return _e_.apply(this,_x_(arguments))}},_h_=function(_t_){var _e_;return T.isString(_t_)&&/[t][0-9]*[r][0-9]*/i.test(_t_)?!0:T.isObject(_t_)&&_t_.___id&&_t_.___s?!0:T.isArray(_t_)?(_e_=!0,_l_(_t_,function(_t_){return _h_(_t_)?void 0:(_e_=!1,TAFFY.EXIT)}),_e_):!1},_g_=function(_t_,_e_){var _n_=!0;return _l_(_e_,function(_e_){switch(T.typeOf(_e_)){case"function":if(!_e_.apply(_t_))return _n_=!1,TAFFY.EXIT;break;case"array":_n_=1===_e_.length?_g_(_t_,_e_[0]):2===_e_.length?_g_(_t_,_e_[0])||_g_(_t_,_e_[1]):3===_e_.length?_g_(_t_,_e_[0])||_g_(_t_,_e_[1])||_g_(_t_,_e_[2]):4===_e_.length?_g_(_t_,_e_[0])||_g_(_t_,_e_[1])||_g_(_t_,_e_[2])||_g_(_t_,_e_[3]):!1,_e_.length>4&&_l_(_e_,function(_e_){_g_(_t_,_e_)&&(_n_=!0)})}}),_n_},_T_=function(_t_){var _e_=[];return T.isString(_t_)&&/[t][0-9]*[r][0-9]*/i.test(_t_)&&(_t_={___id:_t_}),T.isArray(_t_)?(_l_(_t_,function(_t_){_e_.push(_T_(_t_))}),_t_=function(){var _t_=this,_n_=!1;return _l_(_e_,function(_e_){_g_(_t_,_e_)&&(_n_=!0)}),_n_}):T.isObject(_t_)?(T.isObject(_t_)&&_t_.___id&&_t_.___s&&(_t_={___id:_t_.___id}),_f_(_t_,function(_t_,_n_){T.isObject(_t_)||(_t_={is:_t_}),_f_(_t_,function(_t_,_r_){var _i_,_s_=[];_i_="hasAll"===_r_?function(_t_,_e_){_e_(_t_)}:_l_,_i_(_t_,function(_t_){var _e_,_i_=!0;_e_=function(){var _e_,_s_=this[_n_],_u_="==",_o_="!=",_c_="===",_a_="<",_l_=">",_f_="<=",_h_=">=",_T_="!==";return"undefined"==typeof _s_?!1:(0===_r_.indexOf("!")&&_r_!==_o_&&_r_!==_T_&&(_i_=!1,_r_=_r_.substring(1,_r_.length)),_e_="regex"===_r_?_t_.test(_s_):"lt"===_r_||_r_===_a_?_t_>_s_:"gt"===_r_||_r_===_l_?_s_>_t_:"lte"===_r_||_r_===_f_?_t_>=_s_:"gte"===_r_||_r_===_h_?_s_>=_t_:"left"===_r_?0===_s_.indexOf(_t_):"leftnocase"===_r_?0===_s_.toLowerCase().indexOf(_t_.toLowerCase()):"right"===_r_?_s_.substring(_s_.length-_t_.length)===_t_:"rightnocase"===_r_?_s_.toLowerCase().substring(_s_.length-_t_.length)===_t_.toLowerCase():"like"===_r_?_s_.indexOf(_t_)>=0:"likenocase"===_r_?_s_.toLowerCase().indexOf(_t_.toLowerCase())>=0:_r_===_c_||"is"===_r_?_s_===_t_:_r_===_u_?_s_==_t_:_r_===_T_?_s_!==_t_:_r_===_o_?_s_!=_t_:"isnocase"===_r_?_s_.toLowerCase?_s_.toLowerCase()===_t_.toLowerCase():_s_===_t_:"has"===_r_?T.has(_s_,_t_):"hasall"===_r_?T.hasAll(_s_,_t_):"contains"===_r_?TAFFY.isArray(_s_)&&_s_.indexOf(_t_)>-1:-1!==_r_.indexOf("is")||TAFFY.isNull(_s_)||TAFFY.isUndefined(_s_)||TAFFY.isObject(_t_)||TAFFY.isArray(_t_)?T[_r_]&&T.isFunction(T[_r_])&&0===_r_.indexOf("is")?T[_r_](_s_)===_t_:T[_r_]&&T.isFunction(T[_r_])?T[_r_](_s_,_t_):!1:_t_===_s_[_r_],_e_=_e_&&!_i_?!1:_e_||_i_?_e_:!0)},_s_.push(_e_)}),_e_.push(1===_s_.length?_s_[0]:function(){var _t_=this,_e_=!1;return _l_(_s_,function(_n_){_n_.apply(_t_)&&(_e_=!0)}),_e_})})}),_t_=function(){var _t_=this,_n_=!0;return _n_=(1!==_e_.length||_e_[0].apply(_t_))&&(2!==_e_.length||_e_[0].apply(_t_)&&_e_[1].apply(_t_))&&(3!==_e_.length||_e_[0].apply(_t_)&&_e_[1].apply(_t_)&&_e_[2].apply(_t_))&&(4!==_e_.length||_e_[0].apply(_t_)&&_e_[1].apply(_t_)&&_e_[2].apply(_t_)&&_e_[3].apply(_t_))?!0:!1,_e_.length>4&&_l_(_e_,function(_e_){_g_(_t_,_e_)||(_n_=!1)}),_n_}):T.isFunction(_t_)?_t_:void 0},_p_=function(_t_,_e_){var _n_=function(_t_,_n_){var _r_=0;return T.each(_e_,function(_e_){var _i_,_s_,_u_,_o_,_c_;if(_i_=_e_.split(" "),_s_=_i_[0],_u_=1===_i_.length?"logical":_i_[1],"logical"===_u_)_o_=_F_(_t_[_s_]),_c_=_F_(_n_[_s_]),T.each(_o_.length<=_c_.length?_o_:_c_,function(_t_,_e_){return _o_[_e_]<_c_[_e_]?(_r_=-1,TAFFY.EXIT):_o_[_e_]>_c_[_e_]?(_r_=1,TAFFY.EXIT):void 0});else if("logicaldesc"===_u_)_o_=_F_(_t_[_s_]),_c_=_F_(_n_[_s_]),T.each(_o_.length<=_c_.length?_o_:_c_,function(_t_,_e_){return _o_[_e_]>_c_[_e_]?(_r_=-1,TAFFY.EXIT):_o_[_e_]<_c_[_e_]?(_r_=1,TAFFY.EXIT):void 0});else{if("asec"===_u_&&_t_[_s_]<_n_[_s_])return _r_=-1,T.EXIT;if("asec"===_u_&&_t_[_s_]>_n_[_s_])return _r_=1,T.EXIT;if("desc"===_u_&&_t_[_s_]>_n_[_s_])return _r_=-1,T.EXIT;if("desc"===_u_&&_t_[_s_]<_n_[_s_])return _r_=1,T.EXIT}return 0===_r_&&"logical"===_u_&&_o_.length<_c_.length?_r_=-1:0===_r_&&"logical"===_u_&&_o_.length>_c_.length?_r_=1:0===_r_&&"logicaldesc"===_u_&&_o_.length>_c_.length?_r_=-1:0===_r_&&"logicaldesc"===_u_&&_o_.length<_c_.length&&(_r_=1),0!==_r_?T.EXIT:void 0}),_r_};return _t_&&_t_.push?_t_.sort(_n_):_t_},function(){var _t_={},_e_=0;_F_=function(_n_){return _e_>_o_&&(_t_={},_e_=0),_t_["_"+_n_]||function(){var _r_,_i_,_s_,_u_=String(_n_),_o_=[],_c_="_",_a_="";for(_r_=0,_i_=_u_.length;_i_>_r_;_r_++)_s_=_u_.charCodeAt(_r_),_s_>=48&&57>=_s_||46===_s_?("n"!==_a_&&(_a_="n",_o_.push(_c_.toLowerCase()),_c_=""),_c_+=_u_.charAt(_r_)):("s"!==_a_&&(_a_="s",_o_.push(parseFloat(_c_)),_c_=""),_c_+=_u_.charAt(_r_));return _o_.push("n"===_a_?parseFloat(_c_):_c_.toLowerCase()),_o_.shift(),_t_["_"+_n_]=_o_,_e_++,_o_}()}}(),_d_=function(){this.context({results:this.getDBI().query(this.context())})},_c_.extend("filter",function(){var _t_=TAFFY.mergeObj(this.context(),{run:null}),_e_=[];return _l_(_t_.q,function(_t_){_e_.push(_t_)}),_t_.q=_e_,_l_(_x_(arguments),function(_e_){_t_.q.push(_T_(_e_)),_t_.filterRaw.push(_e_)}),this.getroot(_t_)}),_c_.extend("order",function(_t_){_t_=_t_.split(",");var _e_,_n_=[];return _l_(_t_,function(_t_){_n_.push(_t_.replace(/^\s*/,"").replace(/\s*$/,""))}),_e_=TAFFY.mergeObj(this.context(),{sort:null}),_e_.order=_n_,this.getroot(_e_)}),_c_.extend("limit",function(_t_){var _e_,_n_=TAFFY.mergeObj(this.context(),{});return _n_.limit=_t_,_n_.run&&_n_.sort&&(_e_=[],_l_(_n_.results,function(_n_,_r_){return _r_+1>_t_?TAFFY.EXIT:void _e_.push(_n_)}),_n_.results=_e_),this.getroot(_n_)}),_c_.extend("start",function(_t_){var _e_,_n_=TAFFY.mergeObj(this.context(),{});return _n_.start=_t_,_n_.run&&_n_.sort&&!_n_.limit?(_e_=[],_l_(_n_.results,function(_n_,_r_){_r_+1>_t_&&_e_.push(_n_)}),_n_.results=_e_):_n_=TAFFY.mergeObj(this.context(),{run:null,start:_t_}),this.getroot(_n_)}),_c_.extend("update",function(_t_,_e_,_n_){var _r_,_i_=!0,_s_={},_u_=_x_(arguments);return!TAFFY.isString(_t_)||2!==arguments.length&&3!==arguments.length?(_s_=_t_,2===_u_.length&&(_i_=_e_)):(_s_[_t_]=_e_,3===arguments.length&&(_i_=_n_)),_r_=this,_d_.call(this),_l_(this.context().results,function(_t_){var _e_=_s_;TAFFY.isFunction(_e_)?_e_=_e_.apply(TAFFY.mergeObj(_t_,{})):T.isFunction(_e_)&&(_e_=_e_(TAFFY.mergeObj(_t_,{}))),TAFFY.isObject(_e_)&&_r_.getDBI().update(_t_.___id,_e_,_i_)}),this.context().results.length&&this.context({run:null}),this}),_c_.extend("remove",function(_t_){var _e_=this,_n_=0;return _d_.call(this),_l_(this.context().results,function(_t_){_e_.getDBI().remove(_t_.___id),_n_++}),this.context().results.length&&(this.context({run:null}),_e_.getDBI().removeCommit(_t_)),_n_}),_c_.extend("count",function(){return _d_.call(this),this.context().results.length}),_c_.extend("callback",function(_t_,_e_){if(_t_){var _n_=this;setTimeout(function(){_d_.call(_n_),_t_.call(_n_.getroot(_n_.context()))},_e_||0)}return null}),_c_.extend("get",function(){return _d_.call(this),this.context().results}),_c_.extend("stringify",function(){return JSON.stringify(this.get())}),_c_.extend("first",function(){return _d_.call(this),this.context().results[0]||!1}),_c_.extend("last",function(){return _d_.call(this),this.context().results[this.context().results.length-1]||!1}),_c_.extend("sum",function(){var _t_=0,_e_=this;return _d_.call(_e_),_l_(_x_(arguments),function(_n_){_l_(_e_.context().results,function(_e_){_t_+=_e_[_n_]||0})}),_t_}),_c_.extend("min",function(_t_){var _e_=null;return _d_.call(this),_l_(this.context().results,function(_n_){(null===_e_||_n_[_t_]<_e_)&&(_e_=_n_[_t_])}),_e_}),function(){var _t_=function(){var _t_,_e_,_n_;return _t_=function(_t_,_e_,_n_){var _r_,_i_,_s_;switch(2===_n_.length?(_r_=_t_[_n_[0]],_s_="===",_i_=_e_[_n_[1]]):(_r_=_t_[_n_[0]],_s_=_n_[1],_i_=_e_[_n_[2]]),_s_){case"===":return _r_===_i_;case"!==":return _r_!==_i_;case"<":return _i_>_r_;case">":return _r_>_i_;case"<=":return _i_>=_r_;case">=":return _r_>=_i_;case"==":return _r_==_i_;case"!=":return _r_!=_i_;default:throw String(_s_)+" is not supported"}},_e_=function(_t_,_e_){var _n_,_r_,_i_={};for(_n_ in _t_)_t_.hasOwnProperty(_n_)&&(_i_[_n_]=_t_[_n_]);for(_n_ in _e_)_e_.hasOwnProperty(_n_)&&"___id"!==_n_&&"___s"!==_n_&&(_r_=TAFFY.isUndefined(_i_[_n_])?"":"right_",_i_[_r_+String(_n_)]=_e_[_n_]);return _i_},_n_=function(_n_){var _r_,_i_,_s_=_x_(arguments),_u_=_s_.length,_o_=[];if("function"!=typeof _n_.filter){if(!_n_.TAFFY)throw"TAFFY DB or result not supplied";_r_=_n_()}else _r_=_n_;return this.context({results:this.getDBI().query(this.context())}),TAFFY.each(this.context().results,function(_n_){_r_.each(function(_r_){var _c_,_a_=!0;t:for(_i_=1;_u_>_i_&&(_c_=_s_[_i_],_a_="function"==typeof _c_?_c_(_n_,_r_):"object"==typeof _c_&&_c_.length?_t_(_n_,_r_,_c_):!1,_a_);_i_++);_a_&&_o_.push(_e_(_n_,_r_))})}),TAFFY(_o_)()}}();_c_.extend("join",_t_)}(),_c_.extend("max",function(_t_){var _e_=null;return _d_.call(this),_l_(this.context().results,function(_n_){(null===_e_||_n_[_t_]>_e_)&&(_e_=_n_[_t_])}),_e_}),_c_.extend("select",function(){var _t_=[],_e_=_x_(arguments);return _d_.call(this),1===arguments.length?_l_(this.context().results,function(_n_){_t_.push(_n_[_e_[0]])}):_l_(this.context().results,function(_n_){var _r_=[];_l_(_e_,function(_t_){_r_.push(_n_[_t_])}),_t_.push(_r_)}),_t_}),_c_.extend("distinct",function(){var _t_=[],_e_=_x_(arguments);return _d_.call(this),1===arguments.length?_l_(this.context().results,function(_n_){var _r_=_n_[_e_[0]],_i_=!1;_l_(_t_,function(_t_){return _r_===_t_?(_i_=!0,TAFFY.EXIT):void 0}),_i_||_t_.push(_r_)}):_l_(this.context().results,function(_n_){var _r_=[],_i_=!1;_l_(_e_,function(_t_){_r_.push(_n_[_t_])}),_l_(_t_,function(_t_){var _n_=!0;return _l_(_e_,function(_e_,_i_){return _r_[_i_]!==_t_[_i_]?(_n_=!1,TAFFY.EXIT):void 0}),_n_?(_i_=!0,TAFFY.EXIT):void 0}),_i_||_t_.push(_r_)}),_t_}),_c_.extend("supplant",function(_t_,_e_){var _n_=[];return _d_.call(this),_l_(this.context().results,function(_e_){_n_.push(_t_.replace(/\{([^\{\}]*)\}/g,function(_t_,_n_){var _r_=_e_[_n_];return"string"==typeof _r_||"number"==typeof _r_?_r_:_t_}))}),_e_?_n_:_n_.join("")}),_c_.extend("each",function(_t_){return _d_.call(this),_l_(this.context().results,_t_),this}),_c_.extend("map",function(_t_){var _e_=[];return _d_.call(this),_l_(this.context().results,function(_n_){_e_.push(_t_(_n_))}),_e_}),T=function(_t_){var _e_,_n_,_r_,_i_=[],_o_={},_F_=1,_d_={template:!1,onInsert:!1,onUpdate:!1,onRemove:!1,onDBChange:!1,storageName:!1,forcePropertyCase:null,cacheSize:100,name:""},_A_=new Date,_v_=0,_m_=0,___={};return _n_=function(_t_){var _e_=[],_r_=!1;return 0===_t_.length?_i_:(_l_(_t_,function(_t_){T.isString(_t_)&&/[t][0-9]*[r][0-9]*/i.test(_t_)&&_i_[_o_[_t_]]&&(_e_.push(_i_[_o_[_t_]]),_r_=!0),T.isObject(_t_)&&_t_.___id&&_t_.___s&&_i_[_o_[_t_.___id]]&&(_e_.push(_i_[_o_[_t_.___id]]),_r_=!0),T.isArray(_t_)&&_l_(_t_,function(_t_){_l_(_n_(_t_),function(_t_){_e_.push(_t_)})})}),_r_&&_e_.length>1&&(_e_=[]),_e_)},_e_={dm:function(_t_){return _t_&&(_A_=_t_,___={},_v_=0,_m_=0),_d_.onDBChange&&setTimeout(function(){_d_.onDBChange.call(_i_)},0),_d_.storageName&&setTimeout(function(){localStorage.setItem("taffy_"+_d_.storageName,JSON.stringify(_i_))}),_A_},insert:function(_t_,_n_){var _c_=[],_h_=[],_T_=_a_(_t_);return _l_(_T_,function(_t_,_r_){var _a_,_T_;return T.isArray(_t_)&&0===_r_?(_l_(_t_,function(_t_){_c_.push("lower"===_d_.forcePropertyCase?_t_.toLowerCase():"upper"===_d_.forcePropertyCase?_t_.toUpperCase():_t_)}),!0):(T.isArray(_t_)?(_a_={},_l_(_t_,function(_t_,_e_){_a_[_c_[_e_]]=_t_}),_t_=_a_):T.isObject(_t_)&&_d_.forcePropertyCase&&(_T_={},_f_(_t_,function(_e_,_n_){_T_["lower"===_d_.forcePropertyCase?_n_.toLowerCase():"upper"===_d_.forcePropertyCase?_n_.toUpperCase():_n_]=_t_[_n_]}),_t_=_T_),_F_++,_t_.___id="T"+String(_u_+_s_).slice(-6)+"R"+String(_u_+_F_).slice(-6),_t_.___s=!0,_h_.push(_t_.___id),_d_.template&&(_t_=T.mergeObj(_d_.template,_t_)),_i_.push(_t_),_o_[_t_.___id]=_i_.length-1,_d_.onInsert&&(_n_||TAFFY.isUndefined(_n_))&&_d_.onInsert.call(_t_),void _e_.dm(new Date))}),_r_(_h_)},sort:function(_t_){return _i_=_p_(_i_,_t_.split(",")),_o_={},_l_(_i_,function(_t_,_e_){_o_[_t_.___id]=_e_}),_e_.dm(new Date),!0},update:function(_t_,_n_,_r_){var _s_,_u_,_c_,_a_,_l_={};_d_.forcePropertyCase&&(_f_(_n_,function(_t_,_e_){_l_["lower"===_d_.forcePropertyCase?_e_.toLowerCase():"upper"===_d_.forcePropertyCase?_e_.toUpperCase():_e_]=_t_}),_n_=_l_),_s_=_i_[_o_[_t_]],_u_=T.mergeObj(_s_,_n_),_c_={},_a_=!1,_f_(_u_,function(_t_,_e_){(TAFFY.isUndefined(_s_[_e_])||_s_[_e_]!==_t_)&&(_c_[_e_]=_t_,_a_=!0)}),_a_&&(_d_.onUpdate&&(_r_||TAFFY.isUndefined(_r_))&&_d_.onUpdate.call(_u_,_i_[_o_[_t_]],_c_),_i_[_o_[_t_]]=_u_,_e_.dm(new Date))},remove:function(_t_){_i_[_o_[_t_]].___s=!1},removeCommit:function(_t_){var _n_;for(_n_=_i_.length-1;_n_>-1;_n_--)_i_[_n_].___s||(_d_.onRemove&&(_t_||TAFFY.isUndefined(_t_))&&_d_.onRemove.call(_i_[_n_]),_o_[_i_[_n_].___id]=void 0,_i_.splice(_n_,1));_o_={},_l_(_i_,function(_t_,_e_){_o_[_t_.___id]=_e_}),_e_.dm(new Date)},query:function(_t_){var _r_,_s_,_u_,_o_,_c_,_a_;if(_d_.cacheSize&&(_s_="",_l_(_t_.filterRaw,function(_t_){return T.isFunction(_t_)?(_s_="nocache",TAFFY.EXIT):void 0}),""===_s_&&(_s_=_y_(T.mergeObj(_t_,{q:!1,run:!1,sort:!1})))),!_t_.results||!_t_.run||_t_.run&&_e_.dm()>_t_.run){if(_u_=[],_d_.cacheSize&&___[_s_])return ___[_s_].i=_v_++,___[_s_].results;0===_t_.q.length&&0===_t_.index.length?(_l_(_i_,function(_t_){_u_.push(_t_)}),_r_=_u_):(_o_=_n_(_t_.index),_l_(_o_,function(_e_){(0===_t_.q.length||_g_(_e_,_t_.q))&&_u_.push(_e_)}),_r_=_u_)}else _r_=_t_.results;return!(_t_.order.length>0)||_t_.run&&_t_.sort||(_r_=_p_(_r_,_t_.order)),_r_.length&&(_t_.limit&&_t_.limit<_r_.length||_t_.start)&&(_c_=[],_l_(_r_,function(_e_,_n_){if(!_t_.start||_t_.start&&_n_+1>=_t_.start)if(_t_.limit){if(_a_=_t_.start?_n_+1-_t_.start:_n_,_a_<_t_.limit)_c_.push(_e_);else if(_a_>_t_.limit)return TAFFY.EXIT}else _c_.push(_e_)}),_r_=_c_),_d_.cacheSize&&"nocache"!==_s_&&(_m_++,setTimeout(function(){var _t_,_e_;_m_>=2*_d_.cacheSize&&(_m_=0,_t_=_v_-_d_.cacheSize,_e_={},_f_(function(_n_,_r_){_n_.i>=_t_&&(_e_[_r_]=_n_)}),___=_e_)},0),___[_s_]={i:_v_++,results:_r_}),_r_}},_r_=function(){var _t_,_n_;return _t_=TAFFY.mergeObj(TAFFY.mergeObj(_c_,{insert:void 0}),{getDBI:function(){return _e_},getroot:function(_t_){return _r_.call(_t_)},context:function(_t_){return _t_&&(_n_=TAFFY.mergeObj(_n_,_t_.hasOwnProperty("results")?TAFFY.mergeObj(_t_,{run:new Date,sort:new Date}):_t_)),_n_},extend:void 0}),_n_=this&&this.q?this:{limit:!1,start:!1,q:[],filterRaw:[],index:[],order:[],results:!1,run:null,sort:null,settings:_d_},_l_(_x_(arguments),function(_t_){_h_(_t_)?_n_.index.push(_t_):_n_.q.push(_T_(_t_)),_n_.filterRaw.push(_t_)}),_t_},_s_++,_t_&&_e_.insert(_t_),_r_.insert=_e_.insert,_r_.merge=function(_t_,_n_,_i_){var _s_={},_u_=[],_o_={};return _i_=_i_||!1,_n_=_n_||"id",_l_(_t_,function(_t_){var _o_;_s_[_n_]=_t_[_n_],_u_.push(_t_[_n_]),_o_=_r_(_s_).first(),_o_?_e_.update(_o_.___id,_t_,_i_):_e_.insert(_t_,_i_)}),_o_[_n_]=_u_,_r_(_o_)},_r_.TAFFY=!0,_r_.sort=_e_.sort,_r_.settings=function(_t_){return _t_&&(_d_=TAFFY.mergeObj(_d_,_t_),_t_.template&&_r_().update(_t_.template)),_d_},_r_.store=function(_t_){var _e_,_n_=!1;return localStorage&&(_t_&&(_e_=localStorage.getItem("taffy_"+_t_),_e_&&_e_.length>0&&(_r_.insert(_e_),_n_=!0),_i_.length>0&&setTimeout(function(){localStorage.setItem("taffy_"+_d_.storageName,JSON.stringify(_i_))})),_r_.settings({storageName:_t_})),_r_},_r_},TAFFY=T,T.each=_l_,T.eachin=_f_,T.extend=_c_.extend,TAFFY.EXIT="TAFFYEXIT",TAFFY.mergeObj=function(_t_,_e_){var _n_={};return _f_(_t_,function(_e_,_r_){_n_[_r_]=_t_[_r_]}),_f_(_e_,function(_t_,_r_){_n_[_r_]=_e_[_r_]}),_n_},TAFFY.has=function(_t_,_e_){var _n_,_r_=!1;if(_t_.TAFFY)return _r_=_t_(_e_),_r_.length>0?!0:!1;switch(T.typeOf(_t_)){case"object":if(T.isObject(_e_))_f_(_e_,function(_n_,_i_){return _r_!==!0||T.isUndefined(_t_[_i_])||!_t_.hasOwnProperty(_i_)?(_r_=!1,TAFFY.EXIT):void(_r_=T.has(_t_[_i_],_e_[_i_]))});else if(T.isArray(_e_))_l_(_e_,function(_n_,_i_){return _r_=T.has(_t_,_e_[_i_]),_r_?TAFFY.EXIT:void 0});else if(T.isString(_e_))return TAFFY.isUndefined(_t_[_e_])?!1:!0;return _r_;case"array":if(T.isObject(_e_))_l_(_t_,function(_n_,_i_){return _r_=T.has(_t_[_i_],_e_),_r_===!0?TAFFY.EXIT:void 0});else if(T.isArray(_e_))_l_(_e_,function(_n_,_i_){return _l_(_t_,function(_n_,_s_){return _r_=T.has(_t_[_s_],_e_[_i_]),_r_===!0?TAFFY.EXIT:void 0}),_r_===!0?TAFFY.EXIT:void 0});else if(T.isString(_e_)||T.isNumber(_e_))for(_r_=!1,_n_=0;_n_<_t_.length;_n_++)if(_r_=T.has(_t_[_n_],_e_))return!0;return _r_;case"string":if(T.isString(_e_)&&_e_===_t_)return!0;break;default:if(T.typeOf(_t_)===T.typeOf(_e_)&&_t_===_e_)return!0}return!1},TAFFY.hasAll=function(_t_,_e_){var _n_,_r_=TAFFY;return _r_.isArray(_e_)?(_n_=!0,_l_(_e_,function(_e_){return _n_=_r_.has(_t_,_e_),_n_===!1?TAFFY.EXIT:void 0}),_n_):_r_.has(_t_,_e_)},TAFFY.typeOf=function(_t_){var _e_=typeof _t_;return"object"===_e_&&(_t_?"number"!=typeof _t_.length||_t_.propertyIsEnumerable("length")||(_e_="array"):_e_="null"),_e_},TAFFY.getObjectKeys=function(_t_){var _e_=[];return _f_(_t_,function(_t_,_n_){_e_.push(_n_)}),_e_.sort(),_e_},TAFFY.isSameArray=function(_t_,_e_){return TAFFY.isArray(_t_)&&TAFFY.isArray(_e_)&&_t_.join(",")===_e_.join(",")?!0:!1},TAFFY.isSameObject=function(_t_,_e_){var _n_=TAFFY,_r_=!0;return _n_.isObject(_t_)&&_n_.isObject(_e_)&&_n_.isSameArray(_n_.getObjectKeys(_t_),_n_.getObjectKeys(_e_))?_f_(_t_,function(_i_,_s_){return _n_.isObject(_t_[_s_])&&_n_.isObject(_e_[_s_])&&_n_.isSameObject(_t_[_s_],_e_[_s_])||_n_.isArray(_t_[_s_])&&_n_.isArray(_e_[_s_])&&_n_.isSameArray(_t_[_s_],_e_[_s_])||_t_[_s_]===_e_[_s_]?void 0:(_r_=!1,TAFFY.EXIT)}):_r_=!1,_r_},_t_=["String","Number","Object","Array","Boolean","Null","Function","Undefined"],_e_=function(_t_){return function(_e_){return TAFFY.typeOf(_e_)===_t_.toLowerCase()?!0:!1}},_n_=0;_n_<_t_.length;_n_++)_r_=_t_[_n_],TAFFY["is"+_r_]=_e_(_r_)}(),"object"==typeof exports&&(exports.taffy=TAFFY);

Run Pen

This Pen is owned by Steve on CodePen.

See more by @iPhoneDevLog on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.