TheShopCritics2/TSC2/wwwroot/js/modules/readmore.js

122 lines
3.7 KiB
JavaScript

CNVS.ReadMore = function() {
var __core = SEMICOLON.Core;
var __modules = SEMICOLON.Modules;
var _HEXtoRGBA = function(hex, op) {
var c;
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
c= hex.substring(1).split('');
if(c.length==3){
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c= '0x'+c.join('');
return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+','+op+')';
}
console.log('Bad Hex');
};
return {
init: function(selector) {
if( __core.getSelector(selector, false, false).length < 1 ){
return true;
}
__core.initFunction({ class: 'has-plugin-readmore', event: 'pluginReadMoreReady' });
selector = __core.getSelector( selector, false );
if( selector.length < 1 ){
return true;
}
selector.forEach( function(el) {
var element = el,
elSize = element.getAttribute('data-readmore-size') || '10rem',
elSpeed = element.getAttribute('data-readmore-speed') || 500,
elScrollUp = element.getAttribute('data-readmore-scrollup') || 'false',
elTrigger = element.getAttribute('data-readmore-trigger') || '.read-more-trigger',
elTriggerO = element.getAttribute('data-readmore-trigger-open') || 'Read More',
elTriggerC = element.getAttribute('data-readmore-trigger-close') || 'Read Less',
elMask;
element.style.height = '';
element.classList.remove('read-more-wrap-open');
var elHeight = element.offsetHeight;
var elTriggerElement = element.querySelector( elTrigger );
elTriggerElement.classList.remove('d-none');
var elHeightN = elHeight + elTriggerElement.offsetHeight;
elTriggerElement.innerHTML = elTriggerO;
elSpeed = Number( elSpeed );
element.classList.add('read-more-wrap');
element.style.height = elSize;
element.style.transitionDuration = elSpeed + 'ms';
if( !element.querySelector('.read-more-mask') ) {
element.innerHTML += '<div class="read-more-mask"></div>';
}
elMask = element.querySelector('.read-more-mask');
var elMaskD = element.getAttribute('data-readmore-mask') || 'true',
elMaskColor = element.getAttribute('data-readmore-maskcolor') || '#FFF',
elMaskSize = element.getAttribute('data-readmore-masksize') || '100%';
if( elMaskD == 'true' ) {
elMask.style.height = elMaskSize;
elMask.style.backgroundImage = 'linear-gradient( '+ _HEXtoRGBA( elMaskColor, 0 ) +', '+ _HEXtoRGBA( elMaskColor, 1 ) +' )';
elMask.classList.add('op-ts', 'op-1');
} else {
elMask.classList.add('d-none');
}
var elTriggerEl = element.querySelector(elTrigger);
// console.log( (element.getBoundingClientRect().top + document.body.scrollTop - __core.getVars.topScrollOffset) );
elTriggerEl.onclick = function(e) {
e.preventDefault();
if( element.classList.contains('read-more-wrap-open') ) {
element.style.height = elSize;
element.classList.remove('read-more-wrap-open');
elTriggerEl.innerHTML = elTriggerO;
setTimeout( function() {
if( elScrollUp == 'true' ) {
__core.scrollTo((element.offsetTop - __core.getVars.topScrollOffset), false, false);
}
}, elSpeed );
if( elMaskD == 'true' ) {
elMask.classList.add('op-ts', 'op-1');
}
} else {
if( elTriggerC == 'false' ) {
elTriggerEl.classList.add('d-none');
}
element.style.height = elHeightN + 'px';
element.style.overflow = '';
element.classList.add('read-more-wrap-open');
if( elTriggerEl ) {
elTriggerEl.innerHTML = elTriggerC;
}
if( elMaskD == 'true' ) {
elMask.classList.remove('op-1');
elMask.classList.add('op-0');
}
}
elTriggerEl = element.querySelector(elTrigger);
};
});
__core.getVars.resizers.readmore = function() {
__modules.readmore();
};
}
};
}();