${data.sites[i].site.length > 7 ? '
' : ''+data.sites[i].site+'
'}`); } }); } }); } $(document).on("click",".innerTalking",function(){ var ctxTalk = $(this).find(".activeTalk"); var ctxScene = $(this).closest(".scene"); var closestEl = $(this).closest(".element"); if($(ctxTalk).next("p").length > 0){ $(ctxTalk).empty(); $(ctxTalk).removeClass("activeTalk"); $(ctxTalk).next("p").addClass("activeTalk"); startMajorityVoteTalk(closestEl); } else { if($(ctxScene).next(".scene").length>0){ $(ctxScene).next(".scene").addClass("active"); $(ctxScene).find(".activeTalk").removeClass("activeTalk"); $(ctxScene).removeClass("active"); $(ctxScene).next(".scene").find(".innerTalking p").eq(0).addClass("activeTalk"); startMajorityVoteTalk(closestEl); } else { $(".activeTalk").removeClass("activeTalk"); $(this).closest(".element").find(".active").removeClass("active"); $(this).closest(".element").find(".scene").eq(0).addClass("active"); $(this).closest(".element").find(".scene.active .innerTalking p").eq(0).addClass("activeTalk"); startMajorityVoteTalk(closestEl); } } }); var amaCtx; $(document).on("click",".spotItem",function(){ $(amaCtx).find("img").remove(); $(amaCtx).find(".askExtra").append(`
`); $(amaCtx).data("song",$(this).find("h5").text()); $(amaCtx).data("artist",$(this).find("p").text()); $(amaCtx).data("sound",$(this).find(".spotMeta").attr("data-sound")); $(".spotSearch").removeClass("bringUp"); }); $(document).on("click",".askExtra",function(){ amaCtx = $(this).closest(".element"); $(".spotSearch").addClass("bringUp"); }); $(document).on("click",".spotSearch .closer",function(){ $(".spotSearch").removeClass("bringUp"); }); $(document).on("click",".element[data-scrollto]",function(e){ e.stopImmediatePropagation(); var getScrollID = $(this).data("scrollto").trim(); $('html, body').animate({ scrollTop: $(`.element[data-uid=${getScrollID}]`).offset().top }, 400); }); function convertRemToPixels(rem) { return rem * parseFloat(getComputedStyle($(".content")[0]).fontSize); } function calculateH(desiredHeight) { const remInPixels = convertRemToPixels(1); const multiplier = 2.34375; const baseHeight = remInPixels * multiplier; const h = desiredHeight / baseHeight; return h; } $(window).on("load",function(){ $(".element[data-type=blogcontent]").each(function(){ var getBound = $(this)[0].getBoundingClientRect(); var oldH = parseFloat($(this).css("--h")); var oldY = parseFloat($(this).css("--y")); var diffH = calculateH(getBound.height) - oldH; $(".element").not(this).each(function(){ var ctxBound = $(this)[0].getBoundingClientRect(); if (ctxBound.left < getBound.right && ctxBound.right > getBound.left) { var ctxY = parseFloat($(this).css("--y")); if(ctxY >= oldY+oldH){ $(this).css("--y",ctxY+diffH); } } }); }); calculateEditorHeight(); }); if($(".first").css("--cu")){ if(!isTouchDevice()){ $(document).on("mousemove",function(e){ $(".cursorReal").css("left",e.clientX+"px"); $(".cursorReal").css("top",e.clientY+"px"); }); $(".first").append(``); $("body").addClass("cursorMode"); } } $(document).on("click","a",function(){ if($(this).find(".element[data-type=button2]").length > 0){ var getLinkText = $(this).text().trim(); ok.track("clicked: " + getLinkText); } }); function findExtraInfo(uid){ for(var i=0; i`); } } }); }, 300)(); }); $(document).on("click",".memeControls i.fa-plus,.memeInp i",function(){ $(this).closest(".element").find(".memeGallery").toggleClass("showMemeGallery"); }); $('.element[data-type=memegen]').each(function() { const $element = $(this); const $container = $element.find('.officialMemeContainer'); const uniqueID = 'container-' + Math.random().toString(36).substr(2, 9); $container.attr('id', uniqueID); const stage = new Konva.Stage({ container: uniqueID, width: $container.outerWidth(), height: $container.outerHeight() }); const layer = new Konva.Layer(); stage.add(layer); const bgImageSrc = $(this).data("img");; const bgImage = new Image(); bgImage.crossOrigin = "anonymous"; bgImage.src = bgImageSrc; let backgroundImage; bgImage.onload = function() { const canvasWidth = stage.width(); const canvasHeight = stage.height(); const imgWidth = bgImage.width; const imgHeight = bgImage.height; const scale = Math.max(canvasWidth / imgWidth, canvasHeight / imgHeight); const scaledWidth = imgWidth * scale; const scaledHeight = imgHeight * scale; const x = (canvasWidth - scaledWidth) / 2; const y = (canvasHeight - scaledHeight) / 2; backgroundImage = new Konva.Image({ image: bgImage, x: x, y: y, width: scaledWidth, height: scaledHeight, listening: false, }); layer.add(backgroundImage); layer.moveToBottom(); layer.draw(); }; $element.on('click', '.memeGallResults img', function() { const img = new Image(); img.crossOrigin = "anonymous"; img.src = $(this).attr('src'); $(this).closest(".memeGallery").removeClass("showMemeGallery"); img.onload = function() { const maxSize = 100; let scaleFactor = 1; if (img.width > img.height) { scaleFactor = maxSize / img.width; } else { scaleFactor = maxSize / img.height; } const scaledWidth = img.width * scaleFactor; const scaledHeight = img.height * scaleFactor; const sticker = new Konva.Image({ image: img, x: (stage.width() - scaledWidth) / 2, y: (stage.height() - scaledHeight) / 2, width: scaledWidth, height: scaledHeight, draggable: true, }); layer.add(sticker); layer.draw(); const tr = new Konva.Transformer({ nodes: [sticker], rotateEnabled: true, enabledAnchors: [ 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'middle-left', 'middle-right', 'top-center', 'bottom-center', ], flipEnabled: true, stroke: 'black', strokeWidth: 2, anchorStroke: 'black', anchorFill: 'black', anchorSize: 6, borderStroke: 'black', borderStrokeWidth: 1, }); layer.add(tr); layer.draw(); const $stickerButtons = $element.find('.stickerButtons'); sticker.on('click', function() { tr.nodes([sticker]); layer.draw(); $stickerButtons.addClass("showMemeGallery"); }); stage.on('click', function(e) { if (e.target === stage) { tr.nodes([]); layer.draw(); $stickerButtons.removeClass("showMemeGallery"); } }); $stickerButtons.find('.fa-trash').on('click', function() { sticker.destroy(); tr.destroy(); layer.draw(); $stickerButtons.removeClass("showMemeGallery"); }); $stickerButtons.addClass("showMemeGallery"); } }); $element.find('.downloadMeme').on('click', function() { const transformers = stage.find('Transformer'); transformers.forEach(tr => tr.hide()); layer.draw(); const dataURL = stage.toDataURL({ pixelRatio: 3 }); transformers.forEach(tr => tr.show()); layer.draw(); const link = document.createElement('a'); link.href = dataURL; link.download = 'meme.png'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }); $element.find('.resetMeme').on('click', function() { layer.destroyChildren(); layer.add(backgroundImage); layer.draw(); }); $element.find('.changeBackground').on('click', function() { const input = document.createElement('input'); input.type = 'file'; input.accept = 'image/*'; input.onchange = function(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = function(e) { const newBgImage = new Image(); newBgImage.src = e.target.result; newBgImage.crossOrigin = "anonymous"; newBgImage.onload = function() { const canvasWidth = stage.width(); const canvasHeight = stage.height(); const imgWidth = newBgImage.width; const imgHeight = newBgImage.height; const scale = Math.max(canvasWidth / imgWidth, canvasHeight / imgHeight); const scaledWidth = imgWidth * scale; const scaledHeight = imgHeight * scale; const x = (canvasWidth - scaledWidth) / 2; const y = (canvasHeight - scaledHeight) / 2; backgroundImage.image(newBgImage); backgroundImage.width(scaledWidth); backgroundImage.height(scaledHeight); backgroundImage.position({ x: x, y: y }); layer.draw(); }; }; reader.readAsDataURL(file); }; input.click(); }); });