mirror of
https://github.com/tonydamage/nux-env.git
synced 2025-12-11 13:24:28 +01:00
Legacy sync
Signed-off-by: Tony Tkacik <tonydamage@gmail.com>
This commit is contained in:
parent
851914ff75
commit
4c4bb238a0
13 changed files with 1026 additions and 7 deletions
182
assets/nuweb/mdlio-app.css
Normal file
182
assets/nuweb/mdlio-app.css
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
@font-face {
|
||||
font-family: "Material Design Icons";
|
||||
src: url("https://cdn.materialdesignicons.com/1.9.32/fonts/materialdesignicons-webfont.eot?v=1.9.32");
|
||||
src: url("https://cdn.materialdesignicons.com/1.9.32/fonts/materialdesignicons-webfont.eot?#iefix&v=1.9.32") format("embedded-opentype"), url("https://cdn.materialdesignicons.com/1.9.32/fonts/materialdesignicons-webfont.woff2?v=1.9.32") format("woff2"), url("https://cdn.materialdesignicons.com/1.9.32/fonts/materialdesignicons-webfont.woff?v=1.9.32") format("woff"), url("https://cdn.materialdesignicons.com/1.9.32/fonts/materialdesignicons-webfont.ttf?v=1.9.32") format("truetype"), url("https://cdn.materialdesignicons.com/1.9.32/fonts/materialdesignicons-webfont.svg?v=1.9.32#materialdesigniconsregular") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.gallery .item .mdl-card_title {
|
||||
padding: 8px;
|
||||
}
|
||||
.gallery .item .mdl-card__title-text {
|
||||
text-decoration:none;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.gallery .item.type-image.thumb .mdl-card_title {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.item.type-person.thumb .mdl-card_title,
|
||||
.item.type-image.thumb .mdl-card_title {
|
||||
background: rgba(0,0,0,0.25);
|
||||
color: #fff;
|
||||
width: calc(100% - 16px);
|
||||
text-shadow: 0px 0px 7px rgba(0, 0, 0, 1);
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.gallery .item.type-image:hover .mdl-card_title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.file .mdl-card_title-text {
|
||||
word-break:break-all;
|
||||
}
|
||||
|
||||
|
||||
.file .mdl-card__title-text:before {
|
||||
font-family: "Material Design Icons";
|
||||
margin-right:8px;
|
||||
content: "\f214";
|
||||
}
|
||||
|
||||
.file.type-directory .mdl-card__title-text:before {
|
||||
content: "\f24b";
|
||||
}
|
||||
|
||||
.file.type-person .mdl-card__title-text:before {
|
||||
content: "\f004";
|
||||
}
|
||||
|
||||
.file.type-image .mdl-card__title-text:before {
|
||||
|
||||
content: "\f21f";
|
||||
}
|
||||
|
||||
.file.type-tasklist .title:before {
|
||||
content:"\f755";
|
||||
}
|
||||
|
||||
.file.type-video .mdl-card__title-text:before {
|
||||
content: "\f22b";
|
||||
}
|
||||
|
||||
.file[data-mime="application/pdf"] .mdl-card__title-text:before {
|
||||
content: "\f225"
|
||||
}
|
||||
|
||||
|
||||
.gallery {
|
||||
width: calc(100% - 16px);
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
margin-top: 24px;
|
||||
display:block;
|
||||
}
|
||||
.breadcrumb + h1 {
|
||||
margin-top:0px;
|
||||
}
|
||||
|
||||
|
||||
.gallery .item.mdl-card {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.gallery .item .mdl-card_media img {
|
||||
width:100%;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
.gallery .item.no-thumb .mdl-card_media a {
|
||||
display: block;
|
||||
/*min-height: 100px;*/
|
||||
width:100%;
|
||||
background: rgba(255,255,255,0.25);
|
||||
text-decoration:none;
|
||||
color:#fff;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
.gallery .item.no-thumb.type-directory .mdl-card_media a::before {
|
||||
content: "folder";
|
||||
font-family: "Material Icons";
|
||||
margin-right:8px;
|
||||
font-size:128px;
|
||||
line-height:128px;
|
||||
text-decoration:none;
|
||||
|
||||
}
|
||||
*/
|
||||
|
||||
.main-width {
|
||||
max-width: 960px;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (max-width: 976px) {
|
||||
.main-width {
|
||||
margin:0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#scooter {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top:0px;
|
||||
width:100%;
|
||||
bottom:0px;
|
||||
height:0px;
|
||||
}
|
||||
|
||||
#sizer {
|
||||
background:rgba(0,0,0,0.10);
|
||||
position:relative;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
#sizer .gutter {
|
||||
background:rgba(0,0,0,0.1);
|
||||
height:100%;
|
||||
}
|
||||
|
||||
/* Layout Hack */
|
||||
|
||||
.mdl-layout {
|
||||
overflow: visible;
|
||||
}
|
||||
.mdl-layout__drawer {
|
||||
position: fixed;
|
||||
}
|
||||
.mdl-layout__content {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
margin-top: 64px;
|
||||
}
|
||||
.is-small-screen .mdl-layout__content {
|
||||
margin-top: 56px;
|
||||
}
|
||||
.mdl-layout__header {
|
||||
position: fixed;
|
||||
}
|
||||
.mdl-layout__obfuscator {
|
||||
position: fixed;
|
||||
}
|
||||
203
assets/nuweb/mdlio-app.js
Normal file
203
assets/nuweb/mdlio-app.js
Normal file
|
|
@ -0,0 +1,203 @@
|
|||
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) {
|
||||
for (outlayer of this.outlayers) {
|
||||
outlayer.appended(items);
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
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=`<!-- Background of PhotoSwipe.
|
||||
It's a separate element as animating opacity is faster than rgba(). -->
|
||||
<div class="pswp__bg"></div>
|
||||
|
||||
<!-- Slides wrapper with overflow:hidden. -->
|
||||
<div class="pswp__scroll-wrap">
|
||||
|
||||
<!-- Container that holds slides.
|
||||
PhotoSwipe keeps only 3 of them in the DOM to save memory.
|
||||
Don't modify these 3 pswp__item elements, data is added later on. -->
|
||||
<div class="pswp__container">
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
</div>
|
||||
|
||||
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
|
||||
<div class="pswp__ui pswp__ui--hidden">
|
||||
|
||||
<div class="pswp__top-bar">
|
||||
|
||||
<!-- Controls are self-explanatory. Order can be changed. -->
|
||||
|
||||
<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;
|
||||
}
|
||||
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue