Free javascript Hosting


fulljs.js

Uploaded on Jan 22 2022 22:49 by billybriliants

const dataA = document.getElementById('DATA-SECTION-A');
const dataB = document.getElementById('DATA-SECTION-B');


;(function(window) {
'use strict';

var esaku = esaku || {};
var $$ = document.querySelectorAll.bind(document);

// Find exact position of element
function isWindow(obj) {
return obj !== null && obj === obj.window;
}

function getWindow(elem) {
return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView;
}

function offset(elem) {
var docElem, win,
box = {top: 0, left: 0},
doc = elem && elem.ownerDocument;

docElem = doc.documentElement;

if (typeof elem.getBoundingClientRect !== typeof undefined) {
box = elem.getBoundingClientRect();
}
win = getWindow(doc);
return {
top: box.top + win.pageYOffset - docElem.clientTop,
left: box.left + win.pageXOffset - docElem.clientLeft
};
}

function convertStyle(obj) {
var style = '';

for (var a in obj) {
if (obj.hasOwnProperty(a)) {
style += (a + ':' + obj[a] + ';');
}
}

return style;
}

var Effect = {

// Effect delay
duration: 750,

show: function(e, element) {

// Disable right click
if (e.button === 2) {
return false;
}

var el = element || this;

// Create ripple
var ripple = document.createElement('div');
ripple.className = 'esaku-ripple';
el.appendChild(ripple);

// Get click coordinate and element witdh
var pos = offset(el);
var relativeY = (e.pageY - pos.top);
var relativeX = (e.pageX - pos.left);
var scale = 'scale('+((el.clientWidth / 100) * 10)+')';

// Support for touch devices
if ('touches' in e) {
relativeY = (e.touches[0].pageY - pos.top);
relativeX = (e.touches[0].pageX - pos.left);
}

// Attach data to element
ripple.setAttribute('data-hold', Date.now());
ripple.setAttribute('data-scale', scale);
ripple.setAttribute('data-x', relativeX);
ripple.setAttribute('data-y', relativeY);

// Set ripple position
var rippleStyle = {
'top': relativeY+'px',
'left': relativeX+'px'
};

ripple.className = ripple.className + ' esaku-notransition';
ripple.setAttribute('style', convertStyle(rippleStyle));
ripple.className = ripple.className.replace('esaku-notransition', '');

// Scale the ripple
rippleStyle['-webkit-transform'] = scale;
rippleStyle['-moz-transform'] = scale;
rippleStyle['-ms-transform'] = scale;
rippleStyle['-o-transform'] = scale;
rippleStyle.transform = scale;
rippleStyle.opacity = '1';

rippleStyle['-webkit-transition-duration'] = Effect.duration + 'ms';
rippleStyle['-moz-transition-duration'] = Effect.duration + 'ms';
rippleStyle['-o-transition-duration'] = Effect.duration + 'ms';
rippleStyle['transition-duration'] = Effect.duration + 'ms';

rippleStyle['-webkit-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
rippleStyle['-moz-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
rippleStyle['-o-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
rippleStyle['transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';

ripple.setAttribute('style', convertStyle(rippleStyle));
},

hide: function(e) {
TouchHandler.touchup(e);

var el = this;
var width = el.clientWidth * 1.4;

// Get first ripple
var ripple = null;
var ripples = el.getElementsByClassName('esaku-ripple');
if (ripples.length > 0) {
ripple = ripples[ripples.length - 1];
} else {
return false;
}

var relativeX = ripple.getAttribute('data-x');
var relativeY = ripple.getAttribute('data-y');
var scale = ripple.getAttribute('data-scale');

// Get delay beetween mousedown and mouse leave
var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
var delay = 350 - diff;

if (delay < 0) {
delay = 0;
}

// Fade out ripple after delay
setTimeout(function() {
var style = {
'top': relativeY+'px',
'left': relativeX+'px',
'opacity': '0',

// Duration
'-webkit-transition-duration': Effect.duration + 'ms',
'-moz-transition-duration': Effect.duration + 'ms',
'-o-transition-duration': Effect.duration + 'ms',
'transition-duration': Effect.duration + 'ms',
'-webkit-transform': scale,
'-moz-transform': scale,
'-ms-transform': scale,
'-o-transform': scale,
'transform': scale,
};

ripple.setAttribute('style', convertStyle(style));

setTimeout(function() {
try {
el.removeChild(ripple);
} catch(e) {
return false;
}
}, Effect.duration);
}, delay);
},

// Little hack to make <input> can perform waves effect
wrapInput: function(elements) {
for (var a = 0; a < elements.length; a++) {
var el = elements[a];

if (el.tagName.toLowerCase() === 'input') {
var parent = el.parentNode;

// If input already have parent just pass through
if (parent.tagName.toLowerCase() === 'i' && parent.className.indexOf('esaku-effect') !== -1) {
continue;
}

// Put element class and style to the specified parent
var wrapper = document.createElement('i');
wrapper.className = el.className + ' esaku-input-wrapper';

var elementStyle = el.getAttribute('style');

if (!elementStyle) {
elementStyle = '';
}

wrapper.setAttribute('style', elementStyle);

el.className = 'esaku-button-input';
el.removeAttribute('style');

// Put element as child
parent.replaceChild(wrapper, el);
wrapper.appendChild(el);
}
}
}
};


/**
* Disable mousedown event for 500ms during and after touch
*/
var TouchHandler = {
/* uses an integer rather than bool so there's no issues with
* needing to clear timeouts if another touch event occurred
* within the 500ms. Cannot mouseup between touchstart and
* touchend, nor in the 500ms after touchend. */
touches: 0,
allowEvent: function(e) {
var allow = true;

if (e.type === 'touchstart') {
TouchHandler.touches += 1; //push
} else if (e.type === 'touchend' || e.type === 'touchcancel') {
setTimeout(function() {
if (TouchHandler.touches > 0) {
TouchHandler.touches -= 1; //pop after 500ms
}
}, 500);
} else if (e.type === 'mousedown' && TouchHandler.touches > 0) {
allow = false;
}

return allow;
},
touchup: function(e) {
TouchHandler.allowEvent(e);
}
};


/**
* Delegated click handler for .waves-effect element.
* returns null when .waves-effect element not in "click tree"
*/
function getWavesEffectElement(e) {
if (TouchHandler.allowEvent(e) === false) {
return null;
}

var element = null;
var target = e.target || e.srcElement;

while (target.parentElement !== null) {
if (!(target instanceof SVGElement) && target.className.indexOf('esaku-effect') !== -1) {
element = target;
break;
} else if (target.classList.contains('esaku-effect')) {
element = target;
break;
}
target = target.parentElement;
}

return element;
}

/**
* Bubble the click and show effect if .waves-effect elem was found
*/
function showEffect(e) {
var element = getWavesEffectElement(e);

if (element !== null) {
Effect.show(e, element);

if ('ontouchstart' in window) {
element.addEventListener('touchend', Effect.hide, false);
element.addEventListener('touchcancel', Effect.hide, false);
}

element.addEventListener('mouseup', Effect.hide, false);
element.addEventListener('mouseleave', Effect.hide, false);
}
}

esaku.displayEffect = function(options) {
options = options || {};

if ('duration' in options) {
Effect.duration = options.duration;
}

//Wrap input inside <i> tag
Effect.wrapInput($$('.esaku-effect'));

if ('ontouchstart' in window) {
document.body.addEventListener('touchstart', showEffect, false);
}

document.body.addEventListener('mousedown', showEffect, false);
};

/**
* Attach Waves to an input element (or any element which doesn't
* bubble mouseup/mousedown events).
* Intended to be used with dynamically loaded forms/inputs, or
* where the user doesn't want a delegated click handler.
*/
esaku.attach = function(element) {
//FUTURE: automatically add waves classes and allow users
// to specify them with an options param? Eg. light/classic/button
if (element.tagName.toLowerCase() === 'input') {
Effect.wrapInput([element]);
element = element.parentElement;
}

if ('ontouchstart' in window) {
element.addEventListener('touchstart', showEffect, false);
}

element.addEventListener('mousedown', showEffect, false);
};

window.esaku = esaku;

document.addEventListener('DOMContentLoaded', function() {
esaku.displayEffect();
}, false);

})(window);




// variabel input
let inputNomor = document.getElementById('nomorUser');
let inputKategori = document.getElementById('pilihKategori');
let inputBarang = document.getElementById('pilihProduk');
let totalTagihan = document.getElementById('totalPembayaran');

let alertImagesWarming = document.getElementById('alertKategori');

// fungsi khusus
function cekKategoriKosong() {
let inputKategorie = document.getElementById('pilihKategori');
if (inputKategorie.value == "") {
alertImagesWarming.style.display = "block";
}
}
cekKategoriKosong();

// fungsi perulangan JavaScript
function ulangi(nama, harga, url){

let konten = document.getElementById('produkContainer');
let barang = "";
let x;
for(let x = 0; x < nama.length; x++){

barang += ('<div onclick="kirimDataProduk('+" ' "+''+nama[x].replace(/["]+/g)+''+" ' ,"+" ' "+''+harga[x].replace(/["]+/g)+''+" ' "+", ' "+' '+url[x].replace(/["]+/g)+''+" ' "+')" id="kirimDataBarang" class="container-produk-c esaku-effect" data-bs-dismiss="offcanvas" aria-label="Close"><div class="produkMenu "><h2>'+nama[+x]+ '</h2><p>Harga</p><h3> '+harga[+x]+ '</h3></div><div class="label-produk"><span>Tersedia</span><img src="icon-dana.jpg" alt="" /></div><a href=" ' +url[+x]+ ' "></a></div>');
}
konten.innerHTML = barang;
ulangi ();
}

document.getElementById('nomorUser').addEventListener('input', function (e) {
e.target.value = e.target.value.replace(/[^0-9]/g,'',/(.{4})/).substring(0, 14).trim();
});

let link = "";
/// Fungsi kirim data ke kategori
function kirimDataKategori(data) {
inputKategori.value = data;
inputKategori.style = "color: #26a69a; font-weight: bold;";
inputBarang.value = "";
totalTagihan.innerHTML = "Rp.0";


let produkDana = document.getElementById('topupDana');
let produkOvo = document.getElementById('topupOvo');
let nonaktif = 'display:none;';
let aktif = 'display: block;';


if (inputKategori.value == "") {

}else if(inputKategori.value == dana){
alertImagesWarming.style.display = "none";
ulangi(namaProdukDana, hargaProdukDana,urlProdukDana);

}else if(inputKategori.value == ovo){
alertImagesWarming.style.display = "none";
ulangi(namaProdukOvo, hargaProdukOvo,urlProdukOvo);


}else if(inputKategori.value == gopay){
alertImagesWarming.style.display = "none";
ulangi(namaProdukGopay, hargaProdukGopay,urlProdukGopay);

}else if(inputKategori.value == linkaja){
alertImagesWarming.style.display = "none";
ulangi(namaProdukLinkaja, hargaProdukLinkaja,urlProdukLinkaja);

}else if(inputKategori.value == isaku){
alertImagesWarming.style.display = "none";
ulangi(namaProdukIsaku, hargaProdukIsaku,urlProdukIsaku);


}else if(inputKategori.value == maxim){
alertImagesWarming.style.display = "none";
ulangi(namaProdukMaxim, hargaProdukMaxim,urlProdukMaxim);

}else if(inputKategori.value == maxim){
alertImagesWarming.style.display = "none";
ulangi(namaProdukMaxim, hargaProdukMaxim,urlProdukMaxim);

}else if(inputKategori.value == grab){
alertImagesWarming.style.display = "none";
ulangi(namaProdukGrab, hargaProdukGrab,urlProdukGrab);
}else if(inputKategori.value == bukalapak){
alertImagesWarming.style.display = "none";
ulangi(namaProdukBukalapak, hargaProdukBukalapak,urlProdukBukalapak);

}else if(inputKategori.value == shopeepay){
alertImagesWarming.style.display = "none";
ulangi(namaProdukShopeepay, hargaProdukShopeepay,urlProdukShopeepay);
}else{
alertImagesWarming.style.display = "block";

}}


// mengirim data produk ke input
function kirimDataProduk(nama, harga, url) {
let totalTagihan = document.getElementById('totalPembayaran');
let namaBarang = document.getElementById('pilihProduk');
namaBarang.value = nama;
totalTagihan.innerHTML = harga;
link = url;
}

let errorer = document.getElementById("erroring");
// funsi error tampilkan gambar
function errorNonaktif(imge) {
imge.style.display = "none";
}

function kirimData() {
// variabel error data
let errorer = document.getElementById("erroring");
let imgeError = document.getElementById('imgError');

// parameter bo
let catatan = "?catatan=";

let url = link;
let inputNomor = document.getElementById('nomorUser').value;
let inputKategori = document.getElementById('pilihKategori').value;
let inputProduk = document.getElementById('pilihProduk').value;

if (inputNomor.length < 8) {
errorer.style = "display:block;";
}

else if(inputKategori == ""){
errorer.style = "display:block;";
imgeError.src = "imge/errorK.jpg";
}else if(inputProduk == ""){
errorer.style = "display:block;";
imgeError.src = "imge/errorP.jpg";
}
else{
window.location.href=url+catatan+inputNomor;
}
}

function catatanTagihanUser(){
// VARIABEL INPUT
let inputNomort = document.getElementById('nomorUser').value;
let inputBarangt = document.getElementById('pilihProduk').value;
let totalTagihan = document.getElementById('totalPembayaran').innerHTML;

// variabel catatan
let catatanNomor = document.getElementById('catatanNoTel');
let catatanProduk = document.getElementById('catatanProduk');
let catatanTotalBayar = document.getElementById('catatanTotalPem');

if (inputNomort == "" && inputKategorit == "") {
catatanNomor.innerHTML = "none";
catatanProduk.innerHTML = "none";
catatanTotalBayar.innerHTML = totalTagihan;
}else{
catatanNomor.innerHTML = inputNomort;
catatanProduk.innerHTML = inputBarangt;
catatanTotalBayar.innerHTML = totalTagihan;

}}

function myFunction() {
// body..
let produkText = document.getElementById("DATA-SECTION-A").innerHTML.length;

console.log(produkText);
let urink = "https://www.e-saku.id/?m=1";

if (produkText > 3035 || produkText < 3033) {
window.location.href = urink;
}
}
myFunction();

Back to list