mirror of
https://github.com/tonydamage/nux-env.git
synced 2025-12-11 13:24:28 +01:00
Nuweb drop
Signed-off-by: root <root@tdm-cloud.(none)>
This commit is contained in:
root
parent
ee9a720f67
commit
a7b55553ad
62 changed files with 1772 additions and 608 deletions
444
assets/nuweb/mdlio-app.js
Executable file
444
assets/nuweb/mdlio-app.js
Executable file
|
|
@ -0,0 +1,444 @@
|
|||
window.mdlio = {
|
||||
|
||||
outlayer: function(outlayer) {
|
||||
this.outlayers = [];
|
||||
if (outlayer) {
|
||||
if (Array.isArray(outlayer)) {
|
||||
for (var e of outlayer) {
|
||||
this.outlayers.push(e);
|
||||
}
|
||||
} else {
|
||||
this.outlayers.push(outlayer);
|
||||
}
|
||||
}
|
||||
this.add = function(outlayer) {
|
||||
this.outlayers.push(outlayer);
|
||||
}
|
||||
;
|
||||
this.appended = function(items) {
|
||||
mdlio.upgrade.appended(items);
|
||||
for (outlayer of this.outlayers) {
|
||||
outlayer.appended(items);
|
||||
}
|
||||
};
|
||||
},
|
||||
cards: {
|
||||
upgrade: function(element) {
|
||||
element.querySelectorAll(".mdl-card").forEach(mdlio.cards.upgradeCard)
|
||||
},
|
||||
upgradeCard: function(card) {
|
||||
console.log(card);
|
||||
|
||||
if(card.querySelector(".mdl-card_title")) {
|
||||
card.classList.add("has-title");
|
||||
}
|
||||
if(card.querySelector(".mdl-card__actions")) {
|
||||
card.classList.add("has-actions");
|
||||
}
|
||||
|
||||
const parent=card.parentNode;
|
||||
const as=card.querySelector(".action.select");
|
||||
|
||||
/*if(parent.matches(".card-wrapper") && as) {
|
||||
parent.appendChild(as);
|
||||
}*/
|
||||
|
||||
card.classList.remove("upgradeable");
|
||||
card.classList.add("upgraded");
|
||||
|
||||
},
|
||||
},
|
||||
lightbox: function(grid, selector, options) {
|
||||
var pswpElement = document.querySelectorAll('.pswp')[0];
|
||||
if (pswpElement == null ) {
|
||||
pswpElement = mdlio.addPSWP();
|
||||
}
|
||||
/*this.box = $(grid).find(selector).simpleLightbox(options); */
|
||||
var items = [];
|
||||
this.items = items;
|
||||
const linkClicked = function(e) {
|
||||
console.log(this, this.lboxId);
|
||||
e.preventDefault();
|
||||
var options = {
|
||||
index: this.lboxId
|
||||
};
|
||||
var gallery = new PhotoSwipe(pswpElement,PhotoSwipeUI_Default,items,options);
|
||||
gallery.init();
|
||||
};
|
||||
this.appended = function(appendedItems) {
|
||||
//this.box.destroy();
|
||||
for (var item of appendedItems) {
|
||||
var link = item.querySelector(selector);
|
||||
if (link == null ) {
|
||||
continue;
|
||||
}
|
||||
var img = link.querySelector('img');
|
||||
var width = img.naturalWidth;
|
||||
var height = img.naturalHeight;
|
||||
var maybeSize = link.getAttribute('data-img-size');
|
||||
if (maybeSize) {
|
||||
console.log(maybeSize);
|
||||
[ width , height ] = maybeSize.split('x').map(function(x) {
|
||||
return Number.parseInt(x);
|
||||
});
|
||||
}
|
||||
var slide = {
|
||||
msrc: img.getAttribute('src'),
|
||||
src: link.getAttribute('href'),
|
||||
w: width,
|
||||
h: height
|
||||
};
|
||||
console.log(slide);
|
||||
var slideId = items.push(slide) - 1;
|
||||
var links = item.querySelectorAll(selector);
|
||||
for (link of links) {
|
||||
if (link.getAttribute('href') == slide.src) {
|
||||
link.lboxId = slideId;
|
||||
link.addEventListener("click", linkClicked);
|
||||
}
|
||||
}
|
||||
}
|
||||
//this.box = $(grid).find(selector).simpleLightbox(options);
|
||||
}
|
||||
},
|
||||
infiniteScroll: function(grid, item, nextPage, outlayer) {
|
||||
var outlayers = new mdlio.outlayer(outlayer);
|
||||
var infScroll = new InfiniteScroll(grid,{
|
||||
path: nextPage,
|
||||
hideNav: nextPage,
|
||||
append: item,
|
||||
outlayer: outlayers,
|
||||
status: '.page-load-status',
|
||||
scrollThresold: 100,
|
||||
prefill: true //elementScroll: '.mdl-layout__content',
|
||||
});
|
||||
infScroll.outlayers = outlayers;
|
||||
return infScroll;
|
||||
},
|
||||
cardsGallery: function(grid, item, lightboxItem) {
|
||||
const lightbox = new mdlio.lightbox(grid,lightboxItem + " a");
|
||||
const msnry = new Masonry(grid,{
|
||||
itemSelector: 'none',
|
||||
// select none at first
|
||||
columnWidth: document.querySelector('#gutter'),
|
||||
gutter: 0,
|
||||
containerStyle: {
|
||||
width: 'calc(100% - 16px)',
|
||||
padding: '0px',
|
||||
position: 'relative'
|
||||
},
|
||||
percentPosition: true,
|
||||
// nicer reveal transition
|
||||
visibleStyle: {
|
||||
transform: 'translateY(0)',
|
||||
opacity: 1
|
||||
},
|
||||
hiddenStyle: {
|
||||
transform: 'translateY(100px)',
|
||||
opacity: 0
|
||||
},
|
||||
});
|
||||
this.lightbox = lightbox;
|
||||
this.masonry = msnry;
|
||||
imagesLoaded(grid, function() {
|
||||
grid.classList.remove('are-images-unloaded');
|
||||
msnry.options.itemSelector = item;
|
||||
var items = grid.querySelectorAll(item);
|
||||
lightbox.appended(items);
|
||||
msnry.appended(items);
|
||||
});
|
||||
if (document.querySelector(".next-page")) {
|
||||
this.infiniteScroll = new mdlio.infiniteScroll(grid,item,'.next-page',[msnry, this.lightbox]);
|
||||
}
|
||||
},
|
||||
addPSWP: function() {
|
||||
var body = document.querySelector('body');
|
||||
var pswp = document.createElement('div');
|
||||
pswp.classList.add('pswp');
|
||||
pswp.innerHTML = `
|
||||
<div class="pswp__bg"></div>
|
||||
|
||||
<div class="pswp__scroll-wrap">
|
||||
|
||||
<div class="pswp__container">
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
</div>
|
||||
|
||||
<div class="pswp__ui pswp__ui--hidden">
|
||||
|
||||
<div class="pswp__top-bar">
|
||||
|
||||
<div class="pswp__counter"></div>
|
||||
|
||||
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
|
||||
|
||||
<button class="pswp__button pswp__button--share" title="Share"></button>
|
||||
|
||||
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
|
||||
|
||||
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
|
||||
|
||||
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
|
||||
<!-- element will get class pswp__preloader--active when preloader is running -->
|
||||
<div class="pswp__preloader">
|
||||
<div class="pswp__preloader__icn">
|
||||
<div class="pswp__preloader__cut">
|
||||
<div class="pswp__preloader__donut"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
|
||||
<div class="pswp__share-tooltip"></div>
|
||||
</div>
|
||||
|
||||
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
|
||||
</button>
|
||||
|
||||
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
|
||||
</button>
|
||||
|
||||
<div class="pswp__caption">
|
||||
<div class="pswp__caption__center"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>`
|
||||
body.appendChild(pswp);
|
||||
return pswp;
|
||||
},
|
||||
forms: {
|
||||
upgrade: function(element) {
|
||||
element.querySelectorAll('form .async[type="submit"]').forEach(function(button) {
|
||||
button.addEventListener("click", function(e) {
|
||||
e.preventDefault();
|
||||
const form = button.findParentBySelector("form");
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
cache: false,
|
||||
url: form.action,
|
||||
data: $(form).serialize(),
|
||||
success: function(msg) {
|
||||
console.log("Success", msg);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
upgrade: {
|
||||
initial: function() {
|
||||
mdlio.upgrade.appended([document.querySelector("body")]);
|
||||
},
|
||||
|
||||
appended: function(items) {
|
||||
items.forEach(mdlio.upgrade.upgrade);
|
||||
},
|
||||
|
||||
upgrade: function(item) {
|
||||
for(const upgrader of mdlio.upgrade.upgraders) {
|
||||
upgrader.upgrade(item);
|
||||
}
|
||||
},
|
||||
|
||||
upgraders: [],
|
||||
},
|
||||
selectable: new (function(){
|
||||
this.availableActions = new Set();
|
||||
|
||||
const selected = new Set();
|
||||
|
||||
this.selected = selected;
|
||||
|
||||
const actionButtons = {};
|
||||
|
||||
this.displayToolbar = function() {
|
||||
var toolbar;
|
||||
if(!this.toolbar) {
|
||||
toolbar = document.createElement("div");
|
||||
toolbar.classList.add("selection-bar");
|
||||
toolbar.classList.add("mdl-layout__header");
|
||||
toolbar.classList.add("mdl-color--white");
|
||||
const header = document.querySelector("header.mdl-layout__header");
|
||||
toolbar.innerHTML=`
|
||||
<div class="mdl-layout__header-row" >
|
||||
<button class="cancel mdl-layout__drawer-button">
|
||||
<i class="material-icons">arrow_back</i>
|
||||
</button>
|
||||
<span class="mdl-layout_title"><span>0</span> Selected</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="actions"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
header.parentNode.appendChild(toolbar);
|
||||
toolbar.querySelector("button.cancel").addEventListener("click",this.stopSelection);
|
||||
|
||||
this.toolbar = {
|
||||
toolbar: toolbar,
|
||||
counter: toolbar.querySelector(".mdl-layout_title span"),
|
||||
actions: toolbar.querySelector(".actions")
|
||||
};
|
||||
}
|
||||
toolbar = this.toolbar;
|
||||
toolbar.counter.innerHTML = this.selected.size
|
||||
};
|
||||
|
||||
this.addToolbarAction = function(action) {
|
||||
this.availableActions.add(action);
|
||||
var button = actionButtons[action];
|
||||
if(!button) {
|
||||
button = document.createElement("div");
|
||||
button.innerHTML='<i class="material-icons"></i>'
|
||||
button.classList.add("mdl-button");
|
||||
button.classList.add("mdl-button--icon");
|
||||
button.addEventListener("click", this.actionClickHandler);
|
||||
button.dataset.action = action;
|
||||
actionButtons[action] = button;
|
||||
|
||||
}
|
||||
this.toolbar.actions.appendChild(button);
|
||||
|
||||
};
|
||||
|
||||
this.removeToolbarAction = function(action) {
|
||||
this.availableActions.delete(action);
|
||||
var button = actionButtons[action];
|
||||
if (button) {
|
||||
this.toolbar.actions.removeChild(button)
|
||||
}
|
||||
}
|
||||
|
||||
this.startSelection = function() {
|
||||
this.displayToolbar();
|
||||
document.querySelector("body").classList.add("selection-mode");
|
||||
|
||||
}
|
||||
|
||||
this.stopSelection = function() {
|
||||
document.querySelector("body").classList.remove("selection-mode");
|
||||
for (item of mdlio.selectable.selected) {
|
||||
mdlio.selectable.unselect(item);
|
||||
}
|
||||
}
|
||||
|
||||
this.select = function(item) {
|
||||
item.classList.add("selected");
|
||||
this.selected.add(item);
|
||||
|
||||
this.startSelection();
|
||||
|
||||
var actions = item.querySelectorAll("[data-selectable-action]");
|
||||
|
||||
var actionsSet = new Set();
|
||||
for (const action of actions) {
|
||||
actionsSet.add(action.dataset.selectableAction);
|
||||
}
|
||||
console.log("actions", this.availableActions);
|
||||
|
||||
if(this.selected.size == 1) {
|
||||
for(action of actionsSet) {
|
||||
this.addToolbarAction(action);
|
||||
}
|
||||
} else {
|
||||
for (const action of this.availableActions) {
|
||||
if(!actionsSet.has(action)) {
|
||||
this.removeToolbarAction(action);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
this.unselect = function(item) {
|
||||
item.classList.remove("selected");
|
||||
this.selected.delete(item);
|
||||
|
||||
if(mdlio.selectable.selected.size == 0) {
|
||||
this.stopSelection();
|
||||
}
|
||||
};
|
||||
|
||||
const actionsHandlers = {}
|
||||
this.action = function(key, fn) {
|
||||
actionsHandlers[key] = function(items) {items.forEach(fn)};
|
||||
};
|
||||
|
||||
this.batchAction = function(key, fn) {
|
||||
actionsHandlers[key] = fn;
|
||||
};
|
||||
|
||||
this.actionClickHandler = function(ev) {
|
||||
var action = this.dataset.action;
|
||||
console.log("Invoking action", action, ev);
|
||||
var handler = actionsHandlers[action];
|
||||
if(handler) {
|
||||
handler(Array.from(selected));
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
this.upgrade = function(item) {
|
||||
var items=[];
|
||||
if (item.matches(".selectable")) {
|
||||
items=[item];
|
||||
} else {
|
||||
items=item.querySelectorAll(".selectable")
|
||||
}
|
||||
|
||||
items.forEach(function(item) {
|
||||
|
||||
var selectButton = item.querySelector('.action.select');
|
||||
if(!selectButton) {
|
||||
selectButton = document.createElement("button");
|
||||
selectButton.classList.add("mdl-button","mdl-button--icon");
|
||||
selectButton.classList.add("action","select");
|
||||
selectButton.innerHTML='<i class="material-icons">check</i>';
|
||||
item.appendChild(selectButton);
|
||||
}
|
||||
|
||||
selectButton.addEventListener("click", function(e) {
|
||||
e.preventDefault();
|
||||
if(item.classList.contains("selected")) {
|
||||
mdlio.selectable.unselect(item);
|
||||
} else {
|
||||
mdlio.selectable.select(item);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
};
|
||||
|
||||
})()
|
||||
};
|
||||
|
||||
mdlio.upgrade.upgraders.push(mdlio.cards);
|
||||
mdlio.upgrade.upgraders.push(mdlio.forms);
|
||||
mdlio.upgrade.upgraders.push(mdlio.selectable);
|
||||
|
||||
|
||||
Element.prototype.findParentBySelector = function(selector) {
|
||||
console.log(this);
|
||||
var cur = this.parentNode;
|
||||
while (cur && !cur.matches(selector)) {
|
||||
//keep going up until you find a match
|
||||
cur = cur.parentNode;
|
||||
//go up
|
||||
}
|
||||
return cur;
|
||||
//will return null if not found
|
||||
}
|
||||
,
|
||||
window.addEventListener('load', function() {
|
||||
mdlio.upgrade.initial();
|
||||
});
|
||||
window.addEventListener('load', function() {
|
||||
console.log("Content-loaded");
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue