var app = new Framework7({
root: '#app',
theme: 'auto',
on: {
pageInit: function(e, page) {
}
},
dialog:{
},
routes: [{
path: '/about/',
content: '<div class="page"><div class="navbar"><div class="navbar-inner sliding"><div class="left"><a href="#" class="link back"><i class="icon icon-back"></i><span class="ios-only">Back</span></a></div><div class="title">My Links</div></div></div><div class="page-content"><div class="list sortable sortable2"><div class="list-block-label">Veterinary Links</div><div class="list-block-label"><div class="row settings no-gap"><div class="col-40 text-align-center"><button href="#" id="restore2" class="restore2 button button-fill button-small right"><i class="far fa-sync"></i> Reset Menu</button></div><div class="col-60 text-align-center"><a class="link mylinks-popover" href="#"> <i class="far fa-question-circle fa-lg"></i> </a><span>Edit Menu</span> <label class="toggle lbl2 no-fastclick"><input type="checkbox"><span class="toggle-icon sortable-toggle" data-sortable=".sortable2"></span></label> </div></div></div><ul id="linklist2"><li class="linklist2" data-id="51"><a href="http://todaysveterinarypractice.navc.com/cardiopulmonary-resuscitation-the-recover-guidelines/" class="external item-link item-content" target="_system"><div class="item-media"><i class="fas fa-heartbeat fa-2x fa-fw color-red icon"></i></div><div class="item-inner"><div class="item-title">RECOVER<div class="item-footer">RECOVER Guidelines for CPR</div></div></div></a><span class="checky3">Hide <label class="toggle color-red hidemenu2 checkbox no-fastclick"><input class="checkmenu2 selected fade" type="checkbox"><span class="toggle-icon"></span></label> </span><div class="sortable-handler"></div></li><li class="linklist2" data-id="52"><a href="http://www.vin.com" class="external item-link item-content" target="_system"><div class="item-media"><i class="fas fa-user-md fa-2x fa-fw icon color-green"></i></div><div class="item-inner"><div class="item-title">VIN<div class="item-footer">Veterinary Information Network</div></div></div></a><span class="checky3">Hide <label class="toggle color-red hidemenu2 checkbox no-fastclick"><input class="checkmenu2 selected fade" type="checkbox"><span class="toggle-icon"></span></label> </span><div class="sortable-handler"></div></li><li class="linklist2" data-id="53"> <a href="https://www.cliniciansbrief.com" class="external item-link item-content" target="_system"> <div class="item-media"><i class="fas fa-user-md fa-2x fa-fw icon color-green"></i></div><div class="item-inner"> <div class="item-title">Clinicians Brief<div class="item-footer">Clinicians Brief Web Site</div></div></div></a> <span class="checky3"> Hide <label class="toggle color-red hidemenu2 checkbox no-fastclick"> <input class="checkmenu2 selected fade" type="checkbox"> <span class="toggle-icon"></span></label> </span><div class="sortable-handler"></div></li><li class="linklist2" data-id="54"> <a href="https://www.merckvetmanual.com" class="external item-link item-content" target="_system"> <div class="item-media"><i class="fas fa-book fa-2x fa-fw color-blue icon"></i></div><div class="item-inner"> <div class="item-title">Merck<div class="item-footer">Merck Veterinary Manual</div></div></div></a> <span class="checky3"> Hide <label class="toggle color-red hidemenu2 checkbox no-fastclick"> <input class="checkmenu2 selected fade" type="checkbox"> <span class="toggle-icon"></span></label> </span><div class="sortable-handler"></div></li><li class="linklist2" data-id="55"> <a href="https://onlinelibrary.wiley.com/action/doSearch?AllField=veterinary&startPage=&PubType=journal" class="external item-link item-content" target="_system"> <div class="item-media"><i class="fas fa-book fa-2x fa-fw color-blue icon"></i></div><div class="item-inner"> <div class="item-title">Wiley Online Library<div class="item-footer">Veterinary Journal Search</div></div></div></a> <span class="checky3"> Hide <label class="toggle color-red hidemenu2 checkbox no-fastclick"> <input class="checkmenu2 selected fade" type="checkbox"> <span class="toggle-icon"></span></label> </span><div class="sortable-handler"></div></li><li class="linklist" data-id="56"> <a href="https://onlinelibrary.wiley.com/action/doSearch?SeriesKey=19391676&sortBy=Earliest&startPage=&target=titleSearch&content=journalTitle" class="external item-link item-content" target="_system"> <div class="item-media"><i class="fas fa-book fa-2x fa-fw color-blue icon"></i></div><div class="item-inner"> <div class="item-title">ACVIM Journal<div class="item-footer">Journal of Veterinary Internal Medicine</div></div></div></a> <span class="checky3"> Hide <label class="toggle color-red hidemenu2 checkbox no-fastclick"> <input class="checkmenu2 selected fade" type="checkbox"> <span class="toggle-icon"></span></label> </span><div class="sortable-handler"></div></li><li class="linklist2" data-id="57"> <a href="http://www.petmicrochiplookup.org" class="external item-link item-content" target="_system"> <div class="item-media"><i class="fas fa-microchip fa-2x fa-fw color-black icon"></i></div><div class="item-inner"> <div class="item-title">Microchip Lookup<div class="item-footer">AAHA Pet Microchip Lookup</div></div></div></a> <span class="checky3"> Hide <label class="toggle color-red hidemenu2 checkbox no-fastclick"> <input class="checkmenu2 selected fade" type="checkbox"> <span class="toggle-icon"></span></label> </span><div class="sortable-handler"></div></li><li class="item-divider" data-id="100">Vetcalculators Links</li><li class="linklist2" data-id="101"> <a href="http://www.vetcalculators.com/app.html" class="external item-link item-content" target="_system"> <div class="item-media"><img class="fa-fw" src="img/icon.png" alt="logo" style="height:35px; width:35px;"></div><div class="item-inner"> <div class="item-title">Vetcalculators<div class="item-footer">Vetcalculators App Site</div></div></div></a> <span class="checky3"> Hide <label class="toggle color-red hidemenu2 checkbox no-fastclick"> <input class="checkmenu2 selected fade" type="checkbox"> <span class="toggle-icon"></span></label> </span><div class="sortable-handler"></div></li><li class="linklist2" data-id="102"> <a href="mailto:info@vetcalculators.com?subject=Vetcalculators App:" class="external item-link item-content" target="_system"> <div class="item-media"><img class="fa-fw" src="img/icon.png" alt="logo" style="height:35px; width:35px;"></div><div class="item-inner"> <div class="item-title">Contact<div class="item-footer">Contact Vetcalculators</div></div></div></a> <span class="checky3"> Hide <label class="toggle color-red hidemenu2 checkbox no-fastclick"> <input class="checkmenu2 selected fade" type="checkbox"> <span class="toggle-icon"></span></label> </span><div class="sortable-handler"></div></li></ul> <div class="list-block-label">Links Will Open In Web Browser</div></div></div></div>',on: {
pageAfterIn: function test (e, page) {
// do something after page gets into the view
},
pageInit: function (e, page) {
console.log('page');
//extra
var list2 = $('#linklist2');
var items = list2.children;
var itemsArr = {};
for (var i in items) {
itemsArr.push(items[i]);
}
// localStorage
//var ls = JSON.parse(localStorage.getItem('linklist2') || '[]');
var ls = JSON.parse(localStorage.getItem('linklist2'));
var classes = JSON.parse(localStorage.getItem('classes2') || '["","","","","","","","","",""]');
for (var j = 0; j < ls.length; j++) {
for (i = 0; i < itemsArr.length; ++i) {
if(itemsArr[i].dataset !== undefined){
if (ls[j] === itemsArr[i].dataset.id) {
itemsArr[i].className = classes[i];
list2.appendChild(itemsArr[i]);
// handle [add/remove] thing
if (classes[i] != "") {
$(itemsArr[i]).find(".checky3").removeClass("selected");
}
}
}
}
}
function hidelinks2() {
$('li.linklist2').each(function() {
if ($(this).hasClass("hidden")) {
$(this).find('input[type=checkbox]').prop('checked', true);
}
else {
$(this).find('input[type=checkbox]').prop('checked', false);
}
});
}
function saveInfo2() {
var newLinkList = [];
var newClassList = [];
$("#linklist2").find('li').each(
function() {
newLinkList.push($(this).attr('data-id'));
if ($(this).hasClass("hidden")) {
newClassList.push("hidden");
}
else {
newClassList.push("");
}
});
// store in localStorage
localStorage.setItem('linklist2', JSON.stringify(newLinkList));
localStorage.setItem('classes2', JSON.stringify(newClassList));
console.log("saved.");
}
$(".lbl2 input").on("change",function(e) {
if (this.checked) {
$(".restore2").fadeIn(300);
$(".checky3").fadeIn(200);
$("#linklist2 li.hidden").addClass("visible");
}else{
$(".restore2").fadeOut(300);
$(".checky3").fadeOut(200);
$("#linklist2 li.hidden").removeClass("visible");
}
//hidelinks2();
});
$$('input[type=checkbox]').each(function() {
$$('input[type=checkbox]').on('change',function(e) {
if (this.checked) {
$(this).closest('li').removeClass("hidden").addClass("visible");
$(this).addClass("selected");
}
else {
$(this).closest('li').addClass("hidden visible");
$(this).removeClass("selected");
// Checks it
}
saveInfo2();
hidelinks2();
});
});
function reset() {
console.log("Removing data from local storage.");
//localStorage.setItem('userlist', '["1","2","3","4","5","6","7","8","9","10"]');
//localStorage.setItem('classes', '["","","","","","","","","",""]');
localStorage.clear('linklist2');
localStorage.clear('classes2');
window.location.reload(true);
};
app.on('sortableSort', function (listEl, indexes) {
console.log(indexes);
//saveInfo();
});
$('.sortable2 li').on('sortable:sort', function(event){
saveInfo2();
console.log('sortable1')
});
},
}
}
]
});
var $$ = Dom7;
var viewMain = app.views.create('.view-main');
var list = $('#linklist');
var items = list.children;
var itemsArr = [];
for (var i in items) {
itemsArr.push(items[i]);
}
// localStorage
//var ls = JSON.parse(localStorage.getItem('linklist') || '[]');
var ls = JSON.parse(localStorage.getItem('linklist2'));
var classes = JSON.parse(localStorage.getItem('classes') || '["","","","","","","","","",""]');
for (var j = 0; j < ls.length; j++) {
for (i = 0; i < itemsArr.length; ++i) {
if(itemsArr[i].dataset !== undefined){
if (ls[j] === itemsArr[i].dataset.id) {
itemsArr[i].className = classes[i];
list.appendChild(itemsArr[i]);
// handle [add/remove] thing
if (classes[i] != "") {
$(itemsArr[i]).find(".checky2").removeClass("selected");
}
}
}
}
}
function hidelinks() {
$$('li').each(function() {
if ($(this).hasClass("hidden")) {
$(this).find('input[type=checkbox]').prop('checked', true);
}
else {
$(this).find('input[type=checkbox]').prop('checked', false);
}
});
}
function saveInfo() {
var newLinkList = [];
var newClassList = [];
$$("#linklist2").find('li').each(
function() {
newLinkList.push($(this).attr('data-id'));
if ($(this).hasClass("hidden")) {
newClassList.push("hidden");
}
else {
newClassList.push("");
}
});
// store in localStorage
localStorage.setItem('linklist', JSON.stringify(newLinkList));
localStorage.setItem('classes', JSON.stringify(newClassList));
}
$$(".lbl input").on("change",function(e) {
if (this.checked) {
$(".restore").fadeIn(300);
$(".checky2").fadeIn(200);
$("li.hidden").addClass("visible");
}else{
$(".restore").fadeOut(300);
$(".checky2").fadeOut(200);
$("li.hidden").removeClass("visible");
}
//hidelinks();
});
$$('input[type=checkbox]').each(function() {
$$('input[type=checkbox]').on('change',function(e) {
if (this.checked) {
$(this).closest('li').removeClass("hidden").addClass("visible");
$(this).addClass("selected");
}
else {
$(this).closest('li').addClass("hidden visible");
$(this).removeClass("selected");
// Checks it
}
saveInfo();
hidelinks();
});
});
$$('.restore').on('click', function () {
app.dialog.confirm('Reset to Default Menu?', 'Reset', function () {
console.log("Removing data from local storage.");
localStorage.setItem('linklist', '["0","1","2","3","4","5","6","7","8","9","10"]');
localStorage.setItem('classes', '["","","","","","","","","",""]');
window.location.reload(true);
});
});
//app.on('sortableSort', function (listEl, indexes) {
// console.log(indexes);
//saveInfo();
//});
$$('.sortable.sortable1 li').on('sortable:sort', function(event){
saveInfo();
console.log('sortable1')
});
!
