Related
There is a loading effect which I want to remove from the below given Interactive particle logo.
The attempted code and codepen URL are as follows.
https://codepen.io/Zaku/pen/EDaunCodepent Interactive Particle Logo
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ParticleSlider</title>
</head>
<body id="particle-slider">
<div class="slides">
<div id="first-slide" class="slide" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAGQCAMAAABh+/QGAAAC9FBMVEXu7u7u7u7////5+fn////u7u78/Pz7+/v////////////5+fn////////////7+/v////////////39/f////6+vr+/v76+vr////////39/f////v7+/9/f3v7+/////////+/v74+Pj////////////////////8/Pz5+fn////////////w8PD+/v7z8/P////7+/v////////9/f3u7u7////////4+Pj////////////////////////////////////u7u7////6+vr////09PT////////////////////////////////4+Pj////////y8vL////////////////////////v7+/////////////09PTu7u79/f3////////39/f////////////////////////////////////////////8/Pz////29vb////////z8/P////////////////x8fH////////////////////////z8/P////z8/P////////////////////////////////////19fX////v7+/x8fH////////////////////39/f////////w8PD////////x8fHz8/P////////////z8/P19fX////19fX////////////y8vL////29vb////x8fH////29vb////////////////////////////////v7+/////////////////x8fH////////19fX19fX////////x8fHw8PD09PT29vb////////w8PD////////y8vLw8PDw8PDy8vL09PTv7+/////////////////////////////////////////////////////////////////4+Pj////v7+/////y8vL///////////////8AAADu7u7u7u7v7+/y8vL19fXz8/P29vb5+fn4+Pj09PT39/f6+vr9/f37+/v8/Pz+/v7v7+////8Ohw90AAAA6nRSTlP+/VG3EfiorVyeTbVdYkysPhdSvl+yobNjU8Fg9qf3NWGjuzuEG0kSq7YfHVjuotZtrpwypftBIryRXlcWnXaNm5P5g7CQ0RpkixNFlHs9vXpW3UoUfk98dPRO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">
</div>
</div>
<canvas class="draw"></canvas>
</body>
</html>
Script
var init = function(){
var isMobile = navigator.userAgent &&
navigator.userAgent.toLowerCase().indexOf('mobile') >= 0;
var isSmall = window.innerWidth < 1000;
var ps = new ParticleSlider({
ptlGap: isMobile || isSmall ? 3 : 0,
ptlSize: isMobile || isSmall ? 3 : 1,
width: 1e9,
height: 1e9
});
var gui = new dat.GUI();
gui.add(ps, 'ptlGap').min(0).max(5).step(1).onChange(function(){
ps.init(true);
});
gui.add(ps, 'ptlSize').min(1).max(5).step(1).onChange(function(){
ps.init(true);
});
gui.add(ps, 'restless');
gui.addColor(ps, 'color').onChange(function(value){
ps.monochrome = true;
ps.setColor(value);
ps.init(true);
});
(window.addEventListener
? window.addEventListener('click', function(){ps.init(true)}, false)
: window.onclick = function(){ps.init(true)});
}
var initParticleSlider = function(){
var psScript = document.createElement('script');
(psScript.addEventListener
? psScript.addEventListener('load', init, false)
: psScript.onload = init);
psScript.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/23500/ps-0.9.js';
psScript.setAttribute('type', 'text/javascript');
document.body.appendChild(psScript);
}
(window.addEventListener
? window.addEventListener('load', initParticleSlider, false)
: window.onload = initParticleSlider);
I wanted to make a logo exactly like this but without loading effect on page load.
function ParticleSlider(a) {
var b = this;
b.sliderId = "particle-slider", b.color = "#fff", b.hoverColor = "#88f", b.width = 0, b.height = 20, b.ptlGap = 0, b.ptlSize = 1, b.slideDelay = 10, b.arrowPadding = 10, b.showArrowControls = !0, b.onNextSlide = null, b.onWidthChange = null, b.onHeightChange = null, b.onSizeChange = null, b.monochrome = !1, b.mouseForce = 1e4, b.restless = !0, b.imgs = [];
if (a) {
var c = ["color", "hoverColor", "width", "height", "ptlGap", "ptlSize", "slideDelay", "arrowPadding", "sliderId", "showArrowControls", "onNextSlide", "monochrome", "mouseForce", "restless", "imgs", "onSizeChange", "onWidthChange", "onHeightChange"];
for (var d = 0, e = c.length; d < e; d++) a[c[d]] && (b[c[d]] = a[c[d]])
}
b.$container = b.$("#" + b.sliderId), b.$$children = b.$container.childNodes, b.$controlsContainer = b.$(".controls"), b.$$slides = b.$(".slide", b.$(".slides").childNodes, !0), b.$controlLeft = null, b.$controlRight = null, b.$canv = b.$(".draw"), b.$srcCanv = document.createElement("canvas"), b.$srcCanv.style.display = "none", b.$container.appendChild(b.$srcCanv), b.$prevCanv = document.createElement("canvas"), b.$prevCanv.style.display = "none", b.$container.appendChild(b.$prevCanv), b.$nextCanv = document.createElement("canvas"), b.$nextCanv.style.display = "none", b.$container.appendChild(b.$nextCanv), b.$overlay = document.createElement("p"), b.$container.appendChild(b.$overlay), b.imgControlPrev = null, b.imgControlNext = null, b.$$slides.length <= 1 && (b.showArrowControls = !1), b.$controlsContainer && b.$controlsContainer.childNodes && b.showArrowControls == !0 ? (b.$controlLeft = b.$(".left", b.$controlsContainer.childNodes), b.$controlRight = b.$(".right", b.$controlsContainer.childNodes), b.imgControlPrev = new Image, b.imgControlNext = new Image, b.imgControlPrev.onload = function () {
b.$prevCanv.height = this.height, b.$prevCanv.width = this.width, b.loadingStep()
},
b.imgControlNext.onload = function () {
b.$nextCanv.height = this.height, b.$nextCanv.width = this.width, b.loadingStep()
},
b.imgControlPrev.src = b.$controlLeft.getAttribute("data-src"), b.imgControlNext.src = b.$controlRight.getAttribute("data-src")) : b.showArrowControls = !1, b.width <= 0 && (b.width = b.$container.clientWidth), b.height <= 0 && (b.height = b.$container.clientHeight), b.mouseDownRegion = 0, b.colorArr = b.parseColor(b.color), b.hoverColorArr = b.parseColor(b.hoverColor), b.mx = -1, b.my = -1, b.swipeOffset = 0, b.cw = b.getCw(), b.ch = b.getCh(), b.frame = 0, b.nextSlideTimer = !1, b.currImg = 0, b.lastImg = 0, b.imagesLoaded = 0, b.pxlBuffer = {
first: null
},
b.recycleBuffer = {
first: null
}, b.ctx = b.$canv.getContext("2d"), b.srcCtx = b.$srcCanv.getContext("2d"), b.prevCtx = b.$prevCanv.getContext("2d"), b.nextCtx = b.$nextCanv.getContext("2d"), b.$canv.width = b.cw, b.$canv.height = b.ch, b.shuffle = function () {
var a, b;
for (var c = 0, d = this.length; c < d; c++) b = Math.floor(Math.random() * d), a = this[c], this[c] = this[b], this[b] = a
}, Array.prototype.shuffle = b.shuffle, b.$canv.onmouseout = function () {
b.mx = -1, b.my = -1, b.mouseDownRegion = 0
}, b.$canv.onmousemove = function (a) {
function c(a) {
var c = 0,
d = 0,
e = typeof a == "string" ? b.$(a) : a;
if (e) {
c = e.offsetLeft, d = e.offsetTop;
var f = document.getElementsByTagName("body")[0];
while (e.offsetParent && e != f) c += e.offsetParent.offsetLeft, d += e.offsetParent.offsetTop, e = e.offsetParent
}
this.x = c, this.y = d
}
var d = new c(b.$container);
b.mx = a.clientX - d.x + document.body.scrollLeft + document.documentElement.scrollLeft, b.my = a.clientY - d.y + document.body.scrollTop + document.documentElement.scrollTop
}, b.$canv.onmousedown = function () {
if (b.imgs.length > 1) {
var a = 0;
b.mx >= 0 && b.mx < b.arrowPadding * 2 + b.$prevCanv.width ? a = -1 : b.mx > 0 && b.mx > b.cw - (b.arrowPadding * 2 + b.$nextCanv.width) && (a = 1), b.mouseDownRegion = a
}
}, b.$canv.onmouseup = function () {
if (b.imgs.length > 1) {
var a = "";
b.mx >= 0 && b.mx < b.arrowPadding * 2 + b.$prevCanv.width ? a = -1 : b.mx > 0 && b.mx > b.cw - (b.arrowPadding * 2 + b.$nextCanv.width) && (a = 1), a != 0 && b.mouseDownRegion != 0 && (a != b.mouseDownRegion && (a *= -1), b.nextSlideTimer && clearTimeout(b.nextSlideTimer), b.nextSlide(a)), b.mouseDownRegion = 0
}
};
if (b.imgs.length == 0)
for (var d = 0, e = b.$$slides.length; d < e; d++) {
var f = new Image;
b.imgs.push(f), f.src = b.$$slides[d].getAttribute("data-src")
}
b.imgs.length > 0 && (b.imgs[0].onload = function () {
b.loadingStep()
}), b.requestAnimationFrame(function () {
b.nextFrame()
})
}
var psParticle = function (a) {
this.ps = a, this.ttl = null, this.color = a.colorArr, this.next = null, this.prev = null, this.gravityX = 0, this.gravityY = 0, this.x = 0, this.y = 0, this.velocityX = 0, this.velocityY = 0
};
psParticle.prototype.move = function () {
var a = this.ps,
b = this;
if (this.ttl != null && this.ttl-- <= 0) a.swapList(b, a.pxlBuffer, a.recycleBuffer), this.ttl = null;
else {
var c = this.gravityX + a.swipeOffset - this.x,
d = this.gravityY - this.y,
e = Math.sqrt(Math.pow(c, 2) + Math.pow(d, 2)),
f = Math.atan2(d, c),
g = e * .01;
a.restless == !0 ? g = 0 : (this.x = this.gravityX - 60, this.y = this.gravityY);
var h = 0,
i = 0;
if (a.mx >= 0 && a.mouseForce) {
var j = this.x - a.mx,
k = this.y - a.my;
h = Math.min(a.mouseForce / (Math.pow(j, 2) + Math.pow(k, 2)), a.mouseForce), i = Math.atan2(k, j), typeof this.color == "function" && (i += Math.PI, h *= .001 + Math.random() * .1 - .05)
} else h = 0, i = 0;
this.velocityX += g * Math.cos(f) + h * Math.cos(i), this.velocityY += g * Math.sin(f) + h * Math.sin(i), this.velocityX *= .92, this.velocityY *= .92, this.x += this.velocityX, this.y += this.velocityY
}
}, ParticleSlider.prototype.Particle = psParticle, ParticleSlider.prototype.swapList = function (a, b, c) {
var d = this;
a == null ? a = new d.Particle(d) : b.first == a ? a.next != null ? (a.next.prev = null, b.first = a.next) : b.first = null : a.next == null ? a.prev.next = null : (a.prev.next = a.next, a.next.prev = a.prev), c.first == null ? (c.first = a, a.prev = null, a.next = null) : (a.next = c.first, c.first.prev = a, c.first = a, a.prev = null)
}, ParticleSlider.prototype.parseColor = function (a) {
var b, a = a.replace(" ", "");
if (b = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})/.exec(a)) b = [parseInt(b[1], 16), parseInt(b[2], 16), parseInt(b[3], 16)];
else if (b = /^#([\da-fA-F])([\da-fA-F])([\da-fA-F])/.exec(a)) b = [parseInt(b[1], 16) * 17, parseInt(b[2], 16) * 17, parseInt(b[3], 16) * 17];
else if (b = /^rgba\(([\d]+),([\d]+),([\d]+),([\d]+|[\d]*.[\d]+)\)/.exec(a)) b = [+b[1], +b[2], +b[3], +b[4]];
else if (b = /^rgb\(([\d]+),([\d]+),([\d]+)\)/.exec(a)) b = [+b[1], +b[2], +b[3]];
else return null;
isNaN(b[3]) && (b[3] = 1), b[3] *= 255;
return b
}, ParticleSlider.prototype.loadingStep = function () {
var a = this;
a.imagesLoaded++;
if (a.imagesLoaded >= 3 || a.showArrowControls == !1) a.resize(), a.slideDelay > 0 && (a.nextSlideTimer = setTimeout(function () {
a.nextSlide()
}, 1e3 * a.slideDelay))
}, ParticleSlider.prototype.$ = function (a, b, c) {
var d = this;
if (a[0] == ".") {
var e = a.substr(1);
b || (b = d.$$children);
var f = [];
for (var g = 0, h = b.length; g < h; g++) b[g].className && b[g].className == e && f.push(b[g]);
return f.length == 0 ? null : f.length == 1 && !c ? f[0] : f
}
return document.getElementById(a.substr(1))
}, ParticleSlider.prototype.nextFrame = function () {
var a = this;
a.mouseDownRegion == 1 && a.mx < a.cw / 2 || a.mouseDownRegion == -1 && a.mx > a.cw / 2 ? a.swipeOffset = a.mx - a.cw / 2 : a.swipeOffset = 0;
var b = a.pxlBuffer.first,
c = null;
while (b != null) c = b.next, b.move(), b = c;
a.drawParticles();
if (a.frame++ % 25 == 0 && (a.cw != a.getCw() || a.ch != a.getCh())) {
var d = a.getCh(),
e = a.getCw();
a.ch != e && typeof a.onWidthChange == "function" && a.onWidthChange(a, e), a.ch != d && typeof a.onHeightChange == "function" && a.onHeightChange(a, d), typeof a.onSizeChange == "function" && a.onSizeChange(a, e, d), a.resize()
}
setTimeout(function () {
a.requestAnimationFrame(function () {
a.nextFrame()
})
}, 15)
}, ParticleSlider.prototype.nextSlide = function (a) {
var b = this;
b.nextSlideTimer != null && b.imgs.length > 1 ? (b.currImg = (b.currImg + b.imgs.length + (a ? a : 1)) % b.imgs.length, b.resize(), b.slideDelay > 0 && (b.nextSlideTimer = setTimeout(function () {
b.nextSlide()
}, 1e3 * b.slideDelay))) : b.slideDelay > 0 && (b.nextSlideTimer = setTimeout(function () {
b.nextSlide()
}, 1e3 * b.slideDelay)), typeof b.onNextSlide == "function" && b.onNextSlide(b.currImg)
}, ParticleSlider.prototype.drawParticles = function () {
var a = this,
b = a.ctx.createImageData(a.cw, a.ch),
c = b.data,
d, e, f, g, h, i, j = a.pxlBuffer.first;
while (j != null) {
e = ~~j.x, f = ~~j.y;
for (g = e; g < e + a.ptlSize && g >= 0 && g < a.cw; g++)
for (h = f; h < f + a.ptlSize && h >= 0 && h < a.ch; h++) d = (h * b.width + g) * 4, i = typeof j.color == "function" ? j.color() : j.color, c[d + 0] = i[0], c[d + 1] = i[1], c[d + 2] = i[2], c[d + 3] = i[3];
j = j.next
}
b.data = c, a.ctx.putImageData(b, 0, 0)
}, ParticleSlider.prototype.getPixelFromImageData = function (a, b, c) {
var d = this,
e = [];
for (var f = 0; f < a.width; f += d.ptlGap + 1)
for (var g = 0; g < a.height; g += d.ptlGap + 1) i = (g * a.width + f) * 4, a.data[i + 3] > 0 && e.push({
x: b + f,
y: c + g,
color: d.monochrome == !0 ? [d.colorArr[0], d.colorArr[1], d.colorArr[2], d.colorArr[3]] : [a.data[i], a.data[i + 1], a.data[i + 2], a.data[i + 3]]
});
return e
}, ParticleSlider.prototype.init = function (a) {
var b = this;
if (b.imgs.length > 0) {
b.$srcCanv.width = b.imgs[b.currImg].width, b.$srcCanv.height = b.imgs[b.currImg].height, b.srcCtx.clearRect(0, 0, b.$srcCanv.width, b.$srcCanv.height), b.srcCtx.drawImage(b.imgs[b.currImg], 0, 0);
var c = b.getPixelFromImageData(b.srcCtx.getImageData(0, 0, b.$srcCanv.width, b.$srcCanv.height), ~~(b.cw / 2 - b.$srcCanv.width / 2), ~~(b.ch / 2 - b.$srcCanv.height / 2));
if (b.showArrowControls == !0) {
b.prevCtx.clearRect(0, 0, b.$prevCanv.width, b.$prevCanv.height), b.prevCtx.drawImage(b.imgControlPrev, 0, 0);
var d = b.getPixelFromImageData(b.prevCtx.getImageData(0, 0, b.$prevCanv.width, b.$prevCanv.height), b.arrowPadding, ~~(b.ch / 2 - b.$prevCanv.height / 2));
for (var e = 0, f = d.length; e < f; e++) d[e].color = function () {
return b.mx >= 0 && b.mx < b.arrowPadding * 2 + b.$prevCanv.width ? b.hoverColorArr : b.colorArr
}, c.push(d[e]);
b.nextCtx.clearRect(0, 0, b.$nextCanv.width, b.$nextCanv.height), b.nextCtx.drawImage(b.imgControlNext, 0, 0);
var g = b.getPixelFromImageData(b.nextCtx.getImageData(0, 0, b.$nextCanv.width, b.$nextCanv.height), b.cw - b.arrowPadding - b.$nextCanv.width, ~~(b.ch / 2 - b.$nextCanv.height / 2));
for (var e = 0, f = g.length; e < f; e++) g[e].color = function () {
return b.mx > 0 && b.mx > b.cw - (b.arrowPadding * 2 + b.$nextCanv.width) ? b.hoverColorArr : b.colorArr
}, c.push(g[e])
}
if (b.currImg != b.lastImg || a == !0) c.shuffle(), b.lastImg = b.currImg;
var h = b.pxlBuffer.first;
for (var e = 0, f = c.length; e < f; e++) {
var i = null;
h != null ? (i = h, h = h.next) : (b.swapList(b.recycleBuffer.first, b.recycleBuffer, b.pxlBuffer), i = b.pxlBuffer.first), i.gravityX = c[e].x, i.gravityY = c[e].y, i.color = c[e].color
}
while (h != null) h.ttl = ~~(Math.random() * 10), h.gravityY = ~~(b.ch * Math.random()), h.gravityX = ~~(b.cw * Math.random()), h = h.next;
b.$overlay.innerHTML = b.$$slides[b.currImg].innerHTML
}
}, ParticleSlider.prototype.getCw = function () {
var a = this;
return Math.min(document.body.clientWidth, a.width, a.$container.clientWidth)
}, ParticleSlider.prototype.getCh = function () {
var a = this;
return Math.min(document.body.clientHeight, a.height, a.$container.clientHeight)
}, ParticleSlider.prototype.resize = function () {
var a = this;
a.cw = a.getCw(), a.ch = a.getCh(), a.$canv.width = a.cw, a.$canv.height = a.ch, a.init(!0)
}, ParticleSlider.prototype.setColor = function (a) {
var b = this;
b.colorArr = b.parseColor(a)
}, ParticleSlider.prototype.setHoverColor = function (a) {
var b = this;
b.hoverColorArr = b.parseColor(a)
}, ParticleSlider.prototype.requestAnimationFrame = function (a) {
var b = this,
c = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (a) {
window.setTimeout(a, 1e3 / 60)
};
c(a)
};
I had updated the particle.js file to remove loading animation.try this..
I have a page with video styles - http://picovico.com/video-styles/ in my WordPress. Everything is working fine, except that I would like to scroll down to content when the thumbnails are clicked. Right now the content box is opening but the window is not scrolling down to it. Actually I am using a plugin called expand grid. I am not getting support from the plugin author.
I am using bellow code:
$(".cq-expandgrid-item").click(function() {
$('html, body').animate({
scrollTop: $(".cq-expandgrid-content").offset().top
}, 5000);
});
Thanks.
#TTCC Here's the init.min.js present in the plugin file. The code is given below. With your help, I hope I can locate and add the code you suggested now:
jQuery(document).ready(function(a) {
a(".cq-expandgrid").each(function(b, c) {
function r() {
o = setInterval(function() {
clearInterval(o), k++, k > m && (k = 0), a(".cq-expandgrid-toggle", p).eq(k).trigger("click"), r()
}, 1e3 * j)
}
var d = a(this),
e = a(this).data("itemsize"),
f = "yes" == a(this).data("transparentitem") ? !0 : !1,
g = a(this).data("labelfontsize"),
h = a(this).data("subfontsize"),
i = parseInt(a(this).data("itemheight"), 10),
j = parseInt(a(this).data("autoslide"), 10),
k = 0,
m = a(".cq-expandgrid-item", d).length,
n = "yes" == a(this).data("openfirst") ? !1 : !0,
o = 0,
p = a(".cq-expandgrid-item", d).each(function(b) {
a(this).data("index", b);
var c = a(this).data("image"),
d = a(this).data("avatar"),
f = a(this).data("backgroundcolor"),
j = a(this).data("iconcolor"),
k = a(this).data("iconsize"),
l = a(this).data("contentcolor"),
m = a(this).data("labelcolor"),
n = a(this).data("subtitlecolor"),
o = a(this).data("bgstyle"),
p = a(this).data("avatartype"),
q = a(this),
r = a(this).attr("title");
if (r && "" !== r) var r = a(".cq-expandgrid-face", q).tooltipster({
content: r,
position: "top",
delay: 200,
interactive: !0,
speed: 300,
touchDevices: !0,
animation: "grow",
theme: "tooltipster-shadow",
contentAsHTML: !0
});
"" != l && a(".cq-expandgrid-text, .cq-expandgrid-text p, .cq-expandgrid-text h2, .cq-expandgrid-text h3, .cq-expandgrid-text h4, .cq-expandgrid-text h5, .cq-expandgrid-text h6", q).css("color", l), "" != m && a(".cq-expandgrid-title", q).css("color", m), "" != n && a(".cq-expandgrid-subtitle", q).css("color", n), "" != g && a(".cq-expandgrid-title", q).css("font-size", g), "" != h && a(".cq-expandgrid-subtitle", q).css("font-size", h), i > 0 && "customized" == e && a(".cq-expandgrid-face", q).css("height", i), "" != f && "customized" == o && a(".cq-expandgrid-face", q).css("background-color", f), "" != j && a(".cq-expandgrid-icon", q).css("color", j), "" != k && a(".cq-expandgrid-icon", q).css("font-size", k), "" != c && "undefined" != c && c && a(".cq-expandgrid-face", q).css({
"background-image": "url(" + c + ")"
}), "image" == p && "" != d && "undefined" != d && d && a(".cq-expandgrid-avatar", q).css({
"background-image": "url(" + d + ")"
})
}),
q = null;
d.on("mouseover", function(a) {
clearInterval(o)
}).on("mouseleave", function(a) {
j > 0 && r()
}), a(".cq-expandgrid-toggle", p).click(function() {
var b = a(this).closest(".cq-expandgrid-item");
b.data("backgroundcolor");
if (k = b.data("index"), clearInterval(o), q && !b.is(q)) {
q.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), f && p.removeClass("outfoucs");
var d = a("iframe", q).attr("src");
d && "" != d && (d.indexOf("youtube") > -1 || d.indexOf("vimeo") > -1) && (a("iframe", q).attr("src", ""), a("iframe", q).attr("src", d))
}
b.hasClass("cq-expandgrid-initstate") ? (q = b.removeClass("cq-expandgrid-initstate").addClass("cq-expandgrid-openstate"), p.not(b).hasClass("outfoucs") || f && p.not(b).addClass("outfoucs")) : (b.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), f && p.not(b).removeClass("outfoucs"))
}), (n || j > 0) && a(".cq-expandgrid-toggle", p).eq(0).trigger("click"), j > 0 && r(), p.find(".cq-expandgrid-close").click(function() {
var b = a(this).closest(".cq-expandgrid-item");
b.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), p.not(b).removeClass("outfoucs")
})
})
});
#TTCC, Here's the code I implemented as per your suggestion:
b.hasClass("cq-expandgrid-initstate") ? (q = b.removeClass("cq-expandgrid-initstate").addClass("cq-expandgrid-openstate"), p.not(b).hasClass("outfoucs") || f && p.not(b).addClass("outfoucs")) : (b.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), f && p.not(b).removeClass("outfoucs")), b.hasClass("cq-expandgrid-initstate") && a('body').stop().animate({scrollTop: b.find(".cq-expandgrid-content").offset().top - 50 }, 500);
})
Your javascript code has two script tag in your page, and this error make code can not run.
Actually, you don't need to write a piece of code alone, and just move it to the "cq-expandgrid-toggle" click event in vc-extensions-expandgrid/js/init.min.js" file.
You can use jQuery.animate() and scrollTop property to achieve it.
Replace code in init.min.js file from line 63 to 65 (before "})") by my code below:
b.hasClass("cq-expandgrid-initstate") ? (a('body').stop().animate({scrollTop: b.find(".cq-expandgrid-content").offset().top - 0}, 200),q = b.removeClass("cq-expandgrid-initstate").addClass("cq-expandgrid-openstate"), p.not(b).hasClass("outfoucs") || f && p.not(b).addClass("outfoucs"))
: (b.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), f && p.not(b).removeClass("outfoucs"));
"500" is a number determining in millisecond how long the animation will run, and you can change it as your wish.
And remove transition style of .cq-expandgrid-content in /wp-content/plugins/vc-extensions-expandgrid/css/style.css file (about line 378).
transition: all 0.2s ease-in-out;
Here is a jsfiddle.
Try like this:
$(".cq-expandgrid-item").click(function() {
var $this = $(this);
$('html, body').animate({
scrollTop: $this.find(".cq-expandgrid-content").offset().top
}, 5000);
});
PD: with $(".cq-expandgrid-content").offset().top you where trying get multiple values, because there are many .cq-expandgrid-content" occurrences
I'm wondering how to decode the script, I'm trying to customize the design but its so hard to read the code
there script is here:
https://blockadblock.com/blockadblock_basic_script.php
It's just encrypted inline with a function, no "obfuscation with a key"
Run the function without the initial "eval" here: http://www.webtoolkitonline.com/javascript-tester.html
and you'll get the code:
Result = ;
var xcJQCflAmpis = '',
KkUCuxqIgh = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (var i = 0; i < 12; i++) xcJQCflAmpis += KkUCuxqIgh.charAt(Math.floor(Math.random() * KkUCuxqIgh.length));
var VABjXzYzJp = 8,
WSpSwDLzQd = 91,
nsJjjBITZC = 178,
neMuFFBFgq = 19,
rMwHazIJjv = function(t) {
var o = !1,
i = function() {
if (document.addEventListener) {
document.removeEventListener('DOMContentLoaded', e);
window.removeEventListener('load', e)
} else {
document.detachEvent('onreadystatechange', e);
window.detachEvent('onload', e)
}
},
e = function() {
if (!o && (document.addEventListener || event.type === 'load' || document.readyState === 'complete')) {
o = !0;
i();
t()
}
};
if (document.readyState === 'complete') {
t()
} else if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', e);
window.addEventListener('load', e)
} else {
document.attachEvent('onreadystatechange', e);
window.attachEvent('onload', e);
var n = !1;
try {
n = window.frameElement == null && document.documentElement
} catch (r) {};
if (n && n.doScroll) {
(function a() {
if (o) return;
try {
n.doScroll('left')
} catch (e) {
return setTimeout(a, 50)
};
o = !0;
i();
t()
})()
}
}
};
window['' + xcJQCflAmpis + ''] = (function() {
var t = {
t$: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
encode: function(e) {
var d = '',
l, r, i, s, c, a, n, o = 0;
e = t.n$(e);
while (o < e.length) {
l = e.charCodeAt(o++);
r = e.charCodeAt(o++);
i = e.charCodeAt(o++);
s = l >> 2;
c = (l & 3) << 4 | r >> 4;
a = (r & 15) << 2 | i >> 6;
n = i & 63;
if (isNaN(r)) {
a = n = 64
} else if (isNaN(i)) {
n = 64
};
d = d + this.t$.charAt(s) + this.t$.charAt(c) + this.t$.charAt(a) + this.t$.charAt(n)
};
return d
},
decode: function(e) {
var n = '',
l, c, d, s, r, i, a, o = 0;
e = e.replace(/[^A-Za-z0-9\+\/\=]/g, '');
while (o < e.length) {
s = this.t$.indexOf(e.charAt(o++));
r = this.t$.indexOf(e.charAt(o++));
i = this.t$.indexOf(e.charAt(o++));
a = this.t$.indexOf(e.charAt(o++));
l = s << 2 | r >> 4;
c = (r & 15) << 4 | i >> 2;
d = (i & 3) << 6 | a;
n = n + String.fromCharCode(l);
if (i != 64) {
n = n + String.fromCharCode(c)
};
if (a != 64) {
n = n + String.fromCharCode(d)
}
};
n = t.e$(n);
return n
},
n$: function(t) {
t = t.replace(/;/g, ';');
var n = '';
for (var o = 0; o < t.length; o++) {
var e = t.charCodeAt(o);
if (e < 128) {
n += String.fromCharCode(e)
} else if (e > 127 && e < 2048) {
n += String.fromCharCode(e >> 6 | 192);
n += String.fromCharCode(e & 63 | 128)
} else {
n += String.fromCharCode(e >> 12 | 224);
n += String.fromCharCode(e >> 6 & 63 | 128);
n += String.fromCharCode(e & 63 | 128)
}
};
return n
},
e$: function(t) {
var o = '',
e = 0,
n = c1 = c2 = 0;
while (e < t.length) {
n = t.charCodeAt(e);
if (n < 128) {
o += String.fromCharCode(n);
e++
} else if (n > 191 && n < 224) {
c2 = t.charCodeAt(e + 1);
o += String.fromCharCode((n & 31) << 6 | c2 & 63);
e += 2
} else {
c2 = t.charCodeAt(e + 1);
c3 = t.charCodeAt(e + 2);
o += String.fromCharCode((n & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
e += 3
}
};
return o
}
};
var a = ['YWQtbGVmdA==', 'YWRCYW5uZXJXcmFw', 'YWQtZnJhbWU=', 'YWQtaGVhZGVy', 'YWQtaW1n', 'YWQtaW5uZXI=', 'YWQtbGFiZWw=', 'YWQtbGI=', 'YWQtZm9vdGVy', 'YWQtY29udGFpbmVy', 'YWQtY29udGFpbmVyLTE=', 'YWQtY29udGFpbmVyLTI=', 'QWQzMDB4MTQ1', 'QWQzMDB4MjUw', 'QWQ3Mjh4OTA=', 'QWRBcmVh', 'QWRGcmFtZTE=', 'QWRGcmFtZTI=', 'QWRGcmFtZTM=', 'QWRGcmFtZTQ=', 'QWRMYXllcjE=', 'QWRMYXllcjI=', 'QWRzX2dvb2dsZV8wMQ==', 'QWRzX2dvb2dsZV8wMg==', 'QWRzX2dvb2dsZV8wMw==', 'QWRzX2dvb2dsZV8wNA==', 'RGl2QWQ=', 'RGl2QWQx', 'RGl2QWQy', 'RGl2QWQz', 'RGl2QWRB', 'RGl2QWRC', 'RGl2QWRD', 'QWRJbWFnZQ==', 'QWREaXY=', 'QWRCb3gxNjA=', 'QWRDb250YWluZXI=', 'Z2xpbmtzd3JhcHBlcg==', 'YWRUZWFzZXI=', 'YmFubmVyX2Fk', 'YWRCYW5uZXI=', 'YWRiYW5uZXI=', 'YWRBZA==', 'YmFubmVyYWQ=', 'IGFkX2JveA==', 'YWRfY2hhbm5lbA==', 'YWRzZXJ2ZXI=', 'YmFubmVyaWQ=', 'YWRzbG90', 'cG9wdXBhZA==', 'YWRzZW5zZQ==', 'Z29vZ2xlX2Fk', 'b3V0YnJhaW4tcGFpZA==', 'c3BvbnNvcmVkX2xpbms='],
y = Math.floor(Math.random() * a.length),
Y = t.decode(a[y]),
b = Y,
C = 1,
f = '#EEEEEE',
r = '#777777',
g = '#adb8ff',
w = '#FFFFFF',
Q = '',
W = 'Welcome!',
v = 'It looks like you\'re using an ad blocker. That\'s okay. Who doesn\'t?',
p = 'But without advertising-income, we can\'t keep making this site awesome.',
s = 'I understand, I have disabled my ad blocker. Let me in!',
o = 0,
u = 0,
n = 'moc.kcolbdakcolb',
l = 0,
M = e() + '.jpg';
function h(t) {
if (t) t = t.substr(t.length - 15);
var n = document.getElementsByTagName('script');
for (var o = n.length; o--;) {
var e = String(n[o].src);
if (e) e = e.substr(e.length - 15);
if (e === t) return !0
};
return !1
};
function m(t) {
if (t) t = t.substr(t.length - 15);
var e = document.styleSheets;
x = 0;
while (x < e.length) {
thisurl = e[x].href;
if (thisurl) thisurl = thisurl.substr(thisurl.length - 15);
if (thisurl === t) return !0;
x++
};
return !1
};
function e(t) {
var o = '',
e = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
t = t || 30;
for (var n = 0; n < t; n++) o += e.charAt(Math.floor(Math.random() * e.length));
return o
};
function i(o) {
var i = ['YWRuLmViYXkuY29t', 'YWQubWFpbC5ydQ==', 'anVpY3lhZHMuY29t', 'YWQuZm94bmV0d29ya3MuY29t', 'cGFydG5lcmFkcy55c20ueWFob28uY29t', 'YS5saXZlc3BvcnRtZWRpYS5ldQ==', 'YWdvZGEubmV0L2Jhbm5lcnM=', 'YWR2ZXJ0aXNpbmcuYW9sLmNvbQ==', 'Y2FzLmNsaWNrYWJpbGl0eS5jb20=', 'cHJvbW90ZS5wYWlyLmNvbQ==', 'YWRzLnlhaG9vLmNvbQ==', 'YWRzLnp5bmdhLmNvbQ==', 'YWRzYXR0LmFiY25ld3Muc3RhcndhdmUuY29t', 'YWRzYXR0LmVzcG4uc3RhcndhdmUuY29t', 'YXMuaW5ib3guY29t', 'cGFydG5lcmFkcy55c20ueWFob28uY29t'],
r = ['ZmF2aWNvbi5pY28=', 'YmFubmVyLmpwZw==', 'NDY4eDYwLmpwZw==', 'NzIweDkwLmpwZw==', 'c2t5c2NyYXBlci5qcGc=', 'MTM2N19hZC1jbGllbnRJRDI0NjQuanBn', 'YWRjbGllbnQtMDAyMTQ3LWhvc3QxLWJhbm5lci1hZC5qcGc=', 'Q0ROLTMzNC0xMDktMTM3eC1hZC1iYW5uZXI=', 'ZmF2aWNvbi5pY28=', 'YWQtbGFyZ2UucG5n', 'c3F1YXJlLWFkLnBuZw==', 'ZmF2aWNvbjEuaWNv', 'YmFubmVyX2FkLmdpZg==', 'bGFyZ2VfYmFubmVyLmdpZg==', 'd2lkZV9za3lzY3JhcGVyLmpwZw==', 'YWR2ZXJ0aXNlbWVudC0zNDMyMy5qcGc='];
x = 0;
spimg = [];
while (x < o) {
c = i[Math.floor(Math.random() * i.length)];
d = r[Math.floor(Math.random() * r.length)];
c = t.decode(c);
d = t.decode(d);
var a = Math.floor(Math.random() * 2) + 1;
if (a == 1) {
n = '//' + c + '/' + d
} else {
n = '//' + c + '/' + e(Math.floor(Math.random() * 20) + 4) + '.jpg'
};
spimg[x] = new Image();
spimg[x].onerror = function() {
var t = 1;
while (t < 7) {
t++
}
};
spimg[x].src = n;
x++
}
};
function A(t) {};
return {
ekgBSgaBPk: function(t, r) {
if (typeof document.body == 'undefined') {
return
};
var o = '0.1',
r = b,
e = document.createElement('DIV');
e.id = r;
e.style.position = 'absolute';
e.style.left = '-5000px';
e.style.top = '-5000px';
e.style.height = '60px';
e.style.width = '468px';
var d = document.body.childNodes,
a = Math.floor(d.length / 2);
if (a > 15) {
var n = document.createElement('div');
n.style.position = 'absolute';
n.style.height = '0px';
n.style.width = '0px';
n.style.top = '-5000px';
n.style.left = '-5000px';
document.body.insertBefore(n, document.body.childNodes[a]);
n.appendChild(e);
var i = document.createElement('DIV');
i.id = 'banner_ad';
i.style.position = 'absolute';
i.style.left = '-5000px';
i.style.top = '-5000px';
document.body.appendChild(i)
} else {
e.id = 'banner_ad';
document.body.appendChild(e)
};
l = setInterval(function() {
if (e) {
t((e.clientHeight == 0), o);
t((e.clientWidth == 0), o);
t((e.display == 'hidden'), o);
t((e.visibility == 'none'), o);
t((e.opacity == 0), o)
} else {
t(!0, o)
}
}, 1000)
},
bPqodbIKMt: function(e, m) {
if ((e) && (o == 0)) {
o = 1;
window['' + xcJQCflAmpis + ''].NhnwYPCjqO();
window['' + xcJQCflAmpis + ''].bPqodbIKMt = function() {
return
}
} else {
var p = t.decode('aW5zLmFkc2J5Z29vZ2xl'),
c = document.querySelector(p);
if ((c) && (o == 0)) {
if ((WSpSwDLzQd % 3) == 0) {
var d = 'Ly9wYWdlYWQyLmdvb2dsZXN5bmRpY2F0aW9uLmNvbS9wYWdlYWQvanMvYWRzYnlnb29nbGUuanM=';
d = t.decode(d);
if (h(d)) {
if (c.innerHTML.replace(/\s/g, '').length == 0) {
o = 1;
window['' + xcJQCflAmpis + ''].NhnwYPCjqO()
}
}
}
};
var f = !1;
if (o == 0) {
if ((nsJjjBITZC % 3) == 0) {
if (!window['' + xcJQCflAmpis + ''].ranAlready) {
var l = ['Ly93d3cuZ29vZ2xlLmNvbS9hZHNlbnNlL3N0YXJ0L2ltYWdlcy9mYXZpY29uLmljbw==', 'Ly93d3cuZ3N0YXRpYy5jb20vYWR4L2RvdWJsZWNsaWNrLmljbw==', 'Ly9hZHZlcnRpc2luZy55YWhvby5jb20vZmF2aWNvbi5pY28=', 'Ly9hZHMudHdpdHRlci5jb20vZmF2aWNvbi5pY28=', 'Ly93d3cuZG91YmxlY2xpY2tieWdvb2dsZS5jb20vZmF2aWNvbi5pY28='],
s = l.length,
r = l[Math.floor(Math.random() * s)],
n = r;
while (r == n) {
n = l[Math.floor(Math.random() * s)]
};
r = t.decode(r);
n = t.decode(n);
i(Math.floor(Math.random() * 2) + 1);
var a = new Image(),
u = new Image();
a.onerror = function() {
i(Math.floor(Math.random() * 2) + 1);
u.src = n;
i(Math.floor(Math.random() * 2) + 1)
};
u.onerror = function() {
o = 1;
i(Math.floor(Math.random() * 3) + 1);
window['' + xcJQCflAmpis + ''].NhnwYPCjqO()
};
a.src = r;
if ((neMuFFBFgq % 3) == 0) {
a.onload = function() {
if ((a.width < 8) && (a.width > 0)) {
window['' + xcJQCflAmpis + ''].NhnwYPCjqO()
}
}
};
i(Math.floor(Math.random() * 3) + 1);
window['' + xcJQCflAmpis + ''].ranAlready = !0
};
window['' + xcJQCflAmpis + ''].bPqodbIKMt = function() {
return
}
}
}
}
},
NhnwYPCjqO: function() {
if (u == 1) {
var C = sessionStorage.getItem('babn');
if (C > 0) {
return !0
} else {
sessionStorage.setItem('babn', (Math.random() + 1) * 1000)
}
};
var c = 'Ly95dWkueWFob29hcGlzLmNvbS8zLjE4LjEvYnVpbGQvY3NzcmVzZXQvY3NzcmVzZXQtbWluLmNzcw==';
c = t.decode(c);
if (!m(c)) {
var h = document.createElement('link');
h.setAttribute('rel', 'stylesheet');
h.setAttribute('type', 'text/css');
h.setAttribute('href', c);
document.getElementsByTagName('head')[0].appendChild(h)
};
clearInterval(l);
document.body.innerHTML = '';
document.body.style.cssText += 'margin:0px !important';
document.body.style.cssText += 'padding:0px !important';
var Q = document.documentElement.clientWidth || window.innerWidth || document.body.clientWidth,
y = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight,
a = document.createElement('DIV'),
b = e();
a.id = b;
a.style.position = 'fixed';
a.style.left = '0';
a.style.top = '0';
a.style.width = Q + 'px';
a.style.height = y + 'px';
a.style.backgroundColor = f;
a.style.zIndex = '9999';
document.body.appendChild(a);
var d = '<a href="http://blockadblock.com"><svg id="FILLVECTID1" width="160" height="40"><image id="FILLVECTID2" width="160" height="40" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAoCAMAAABO8gGqAAAB+1BMVEXr6+sAAADr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+sAAADMAAAsKysKCgokJCRycnIEBATq6uoUFBTMzMzr6urjqqoSEhIGBgaxsbHcd3dYWFg0NDTmw8PZY2M5OTkfHx+enp7TNTUoJyfm5ualpaV5eXkODg7k5OTaamoqKSnc3NzZ2dmHh4dra2tHR0fVQUFAQEDPExPNBQXo6Ohvb28ICAjp19fS0tLnzc29vb25ubm1tbWWlpaNjY3dfX1oaGhUVFRMTEwaGhoXFxfq5ubh4eHe3t7Hx8fgk5PfjY3eg4OBgYF+fn5EREQ9PT3SKSnV1dXks7OsrKypqambmpqRkZFdXV1RUVHRISHQHR309PTq4eHp3NzPz8/Ly8vKysrDw8O4uLjkt7fhnJzgl5d7e3tkZGTYVlZPT08vLi7OCwu/v792dnbbdHTZYWHZXl7YWlpZWVnVRkYnJib8/PzNzc3myMjlurrjsLDhoaHdf3/aa2thYWHXUFDUPDzUOTno0dHipqbceHjaZ2dCQkLSLy/v7+/b29vlvb2xn5/ejIzabW26SkqgMDA7HByRAADoM7kjAAAAInRSTlM6ACT4xhkPtY5iNiAI9PLv6drSpqGYclpM5bengkQ8NDAnsGiGMwAABetJREFUWMPN2GdTE1EYhmFQ7L339
You can partially deobfuscate it simply by removing the eval() that the code is wrapped inside. The entirety of the code that's inside the eval() will return the stringified code so you just need to run it to get that string.
Sidenote: I usually use the JsFormat plugin for Sublime Text for that. It evaluates the content of the eval() and also nicely formats the code afterwards.
Here is a full blockadblock standard script that you ask, just copy it and paste anywehere after open "body" and before closed "body" tag. Also you can change everything in this code, like: bgcolor, font, text, logo, button, delay time... everything.. in the end of the script. You'll see.
Your page code must be like this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
// Place this code snippet near the footer of your page before the close of the /body tag
// LEGAL NOTICE: The content of this website and all associated program code are protected under the Digital Millennium Copyright Act. Intentionally circumventing this code may constitute a violation of the DMCA.
eval(function(p,a,c,k,e,d){
e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){
while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}
return p});
var xcJQCflAmpis = '',
KkUCuxqIgh = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (var i = 0; i < 12; i++) xcJQCflAmpis += KkUCuxqIgh.charAt(Math.floor(Math.random() * KkUCuxqIgh.length));
var VABjXzYzJp = 8, //-- delay time in seconds
WSpSwDLzQd = 91,
nsJjjBITZC = 178,
neMuFFBFgq = 19,
rMwHazIJjv = function (t) {
var o = !1,
i = function () {
if (document.addEventListener) {
document.removeEventListener('DOMContentLoaded', e);
window.removeEventListener('load', e)
} else {
document.detachEvent('onreadystatechange', e);
window.detachEvent('onload', e)
}
},
e = function () {
if (!o && (document.addEventListener || event.type === 'load' || document.readyState === 'complete')) {
o = !0;
i();
t()
}
};
if (document.readyState === 'complete') {
t()
} else if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', e);
window.addEventListener('load', e)
} else {
document.attachEvent('onreadystatechange', e);
window.attachEvent('onload', e);
var n = !1;
try {
n = window.frameElement == null && document.documentElement
} catch (r) {};
if (n && n.doScroll) {
(function a() {
if (o) return;
try {
n.doScroll('left')
} catch (e) {
return setTimeout(a, 50)
};
o = !0;
i();
t()
})()
}
}
};
window['' + xcJQCflAmpis + ''] = (function () {
var t = {
t$: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
encode: function (e) {
var d = '',
l, r, i, s, c, a, n, o = 0;
e = t.n$(e);
while (o < e.length) {
l = e.charCodeAt(o++);
r = e.charCodeAt(o++);
i = e.charCodeAt(o++);
s = l >> 2;
c = (l & 3) << 4 | r >> 4;
a = (r & 15) << 2 | i >> 6;
n = i & 63;
if (isNaN(r)) {
a = n = 64
} else if (isNaN(i)) {
n = 64
};
d = d + this.t$.charAt(s) + this.t$.charAt(c) + this.t$.charAt(a) + this.t$.charAt(n)
};
return d
},
decode: function (e) {
var n = '',
l, c, d, s, r, i, a, o = 0;
e = e.replace(/[^A-Za-z0-9\+\/\=]/g, '');
while (o < e.length) {
s = this.t$.indexOf(e.charAt(o++));
r = this.t$.indexOf(e.charAt(o++));
i = this.t$.indexOf(e.charAt(o++));
a = this.t$.indexOf(e.charAt(o++));
l = s << 2 | r >> 4;
c = (r & 15) << 4 | i >> 2;
d = (i & 3) << 6 | a;
n = n + String.fromCharCode(l);
if (i != 64) {
n = n + String.fromCharCode(c)
};
if (a != 64) {
n = n + String.fromCharCode(d)
}
};
n = t.e$(n);
return n
},
n$: function (t) {
t = t.replace(/;/g, ';');
var n = '';
for (var o = 0; o < t.length; o++) {
var e = t.charCodeAt(o);
if (e < 128) {
n += String.fromCharCode(e)
} else if (e > 127 && e < 2048) {
n += String.fromCharCode(e >> 6 | 192);
n += String.fromCharCode(e & 63 | 128)
} else {
n += String.fromCharCode(e >> 12 | 224);
n += String.fromCharCode(e >> 6 & 63 | 128);
n += String.fromCharCode(e & 63 | 128)
}
};
return n
},
e$: function (t) {
var o = '',
e = 0,
n = c1 = c2 = 0;
while (e < t.length) {
n = t.charCodeAt(e);
if (n < 128) {
o += String.fromCharCode(n);
e++
} else if (n > 191 && n < 224) {
c2 = t.charCodeAt(e + 1);
o += String.fromCharCode((n & 31) << 6 | c2 & 63);
e += 2
} else {
c2 = t.charCodeAt(e + 1);
c3 = t.charCodeAt(e + 2);
o += String.fromCharCode((n & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
e += 3
}
};
return o
}
};
var a = ['YWQtbGVmdA==', 'YWRCYW5uZXJXcmFw', 'YWQtZnJhbWU=', 'YWQtaGVhZGVy', 'YWQtaW1n', 'YWQtaW5uZXI=', 'YWQtbGFiZWw=', 'YWQtbGI=', 'YWQtZm9vdGVy', 'YWQtY29udGFpbmVy', 'YWQtY29udGFpbmVyLTE=', 'YWQtY29udGFpbmVyLTI=', 'QWQzMDB4MTQ1', 'QWQzMDB4MjUw', 'QWQ3Mjh4OTA=', 'QWRBcmVh', 'QWRGcmFtZTE=', 'QWRGcmFtZTI=', 'QWRGcmFtZTM=', 'QWRGcmFtZTQ=', 'QWRMYXllcjE=', 'QWRMYXllcjI=', 'QWRzX2dvb2dsZV8wMQ==', 'QWRzX2dvb2dsZV8wMg==', 'QWRzX2dvb2dsZV8wMw==', 'QWRzX2dvb2dsZV8wNA==', 'RGl2QWQ=', 'RGl2QWQx', 'RGl2QWQy', 'RGl2QWQz', 'RGl2QWRB', 'RGl2QWRC', 'RGl2QWRD', 'QWRJbWFnZQ==', 'QWREaXY=', 'QWRCb3gxNjA=', 'QWRDb250YWluZXI=', 'Z2xpbmtzd3JhcHBlcg==', 'YWRUZWFzZXI=', 'YmFubmVyX2Fk', 'YWRCYW5uZXI=', 'YWRiYW5uZXI=', 'YWRBZA==', 'YmFubmVyYWQ=', 'IGFkX2JveA==', 'YWRfY2hhbm5lbA==', 'YWRzZXJ2ZXI=', 'YmFubmVyaWQ=', 'YWRzbG90', 'cG9wdXBhZA==', 'YWRzZW5zZQ==', 'Z29vZ2xlX2Fk', 'b3V0YnJhaW4tcGFpZA==', 'c3BvbnNvcmVkX2xpbms='],
y = Math.floor(Math.random() * a.length),
Y = t.decode(a[y]),
b = Y,
C = 1,
f = '#EEEEEE', //-- colors
r = '#777777',
g = '#adb8ff',
w = '#FFFFFF',
Q = '',
W = 'Welcome!', //-- text
v = 'It looks like you\'re using an ad blocker. That\'s okay. Who doesn\'t?',
p = 'But without advertising-income, we can\'t keep making this site awesome.',
s = 'I understand, I have disabled my ad blocker. Let me in!',
o = 0,
u = 0,
n = 'moc.kcolbdakcolb', //-- blockaddblock.com link in left bottom
l = 0,
M = e() + '.jpg';
function h(t) {
if (t) t = t.substr(t.length - 15);
var n = document.getElementsByTagName('script');
for (var o = n.length; o--;) {
var e = String(n[o].src);
if (e) e = e.substr(e.length - 15);
if (e === t) return !0
};
return !1
};
function m(t) {
if (t) t = t.substr(t.length - 15);
var e = document.styleSheets;
x = 0;
while (x < e.length) {
thisurl = e[x].href;
if (thisurl) thisurl = thisurl.substr(thisurl.length - 15);
if (thisurl === t) return !0;
x++
};
return !1
};
function e(t) {
var o = '',
e = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
t = t || 30;
for (var n = 0; n < t; n++) o += e.charAt(Math.floor(Math.random() * e.length));
return o
};
function i(o) {
var i = ['YWRuLmViYXkuY29t', 'YWQubWFpbC5ydQ==', 'anVpY3lhZHMuY29t', 'YWQuZm94bmV0d29ya3MuY29t', 'cGFydG5lcmFkcy55c20ueWFob28uY29t', 'YS5saXZlc3BvcnRtZWRpYS5ldQ==', 'YWdvZGEubmV0L2Jhbm5lcnM=', 'YWR2ZXJ0aXNpbmcuYW9sLmNvbQ==', 'Y2FzLmNsaWNrYWJpbGl0eS5jb20=', 'cHJvbW90ZS5wYWlyLmNvbQ==', 'YWRzLnlhaG9vLmNvbQ==', 'YWRzLnp5bmdhLmNvbQ==', 'YWRzYXR0LmFiY25ld3Muc3RhcndhdmUuY29t', 'YWRzYXR0LmVzcG4uc3RhcndhdmUuY29t', 'YXMuaW5ib3guY29t', 'cGFydG5lcmFkcy55c20ueWFob28uY29t'],
r = ['ZmF2aWNvbi5pY28=', 'YmFubmVyLmpwZw==', 'NDY4eDYwLmpwZw==', 'NzIweDkwLmpwZw==', 'c2t5c2NyYXBlci5qcGc=', 'MTM2N19hZC1jbGllbnRJRDI0NjQuanBn', 'YWRjbGllbnQtMDAyMTQ3LWhvc3QxLWJhbm5lci1hZC5qcGc=', 'Q0ROLTMzNC0xMDktMTM3eC1hZC1iYW5uZXI=', 'ZmF2aWNvbi5pY28=', 'YWQtbGFyZ2UucG5n', 'c3F1YXJlLWFkLnBuZw==', 'ZmF2aWNvbjEuaWNv', 'YmFubmVyX2FkLmdpZg==', 'bGFyZ2VfYmFubmVyLmdpZg==', 'd2lkZV9za3lzY3JhcGVyLmpwZw==', 'YWR2ZXJ0aXNlbWVudC0zNDMyMy5qcGc='];
x = 0;
spimg = [];
while (x < o) {
c = i[Math.floor(Math.random() * i.length)];
d = r[Math.floor(Math.random() * r.length)];
c = t.decode(c);
d = t.decode(d);
var a = Math.floor(Math.random() * 2) + 1;
if (a == 1) {
n = '//' + c + '/' + d
} else {
n = '//' + c + '/' + e(Math.floor(Math.random() * 20) + 4) + '.jpg'
};
spimg[x] = new Image();
spimg[x].onerror = function () {
var t = 1;
while (t < 7) {
t++
}
};
spimg[x].src = n;
x++
}
};
function A(t) {};
return {
ekgBSgaBPk: function (t, r) {
if (typeof document.body == 'undefined') {
return
};
var o = '0.1',
r = b,
e = document.createElement('DIV');
e.id = r;
e.style.position = 'absolute';
e.style.left = '-5000px';
e.style.top = '-5000px';
e.style.height = '60px';
e.style.width = '468px';
var d = document.body.childNodes,
a = Math.floor(d.length / 2);
if (a > 15) {
var n = document.createElement('div');
n.style.position = 'absolute';
n.style.height = '0px';
n.style.width = '0px';
n.style.top = '-5000px';
n.style.left = '-5000px';
document.body.insertBefore(n, document.body.childNodes[a]);
n.appendChild(e);
var i = document.createElement('DIV');
i.id = 'banner_ad';
i.style.position = 'absolute';
i.style.left = '-5000px';
i.style.top = '-5000px';
document.body.appendChild(i)
} else {
e.id = 'banner_ad';
document.body.appendChild(e)
};
l = setInterval(function () {
if (e) {
t((e.clientHeight == 0), o);
t((e.clientWidth == 0), o);
t((e.display == 'hidden'), o);
t((e.visibility == 'none'), o);
t((e.opacity == 0), o)
} else {
t(!0, o)
}
}, 1000)
},
bPqodbIKMt: function (e, m) {
if ((e) && (o == 0)) {
o = 1;
window['' + xcJQCflAmpis + ''].NhnwYPCjqO();
window['' + xcJQCflAmpis + ''].bPqodbIKMt = function () {
return
}
} else {
var p = t.decode('aW5zLmFkc2J5Z29vZ2xl'),
c = document.querySelector(p);
if ((c) && (o == 0)) {
if ((WSpSwDLzQd % 3) == 0) {
var d = 'Ly9wYWdlYWQyLmdvb2dsZXN5bmRpY2F0aW9uLmNvbS9wYWdlYWQvanMvYWRzYnlnb29nbGUuanM=';
d = t.decode(d);
if (h(d)) {
if (c.innerHTML.replace(/\s/g, '').length == 0) {
o = 1;
window['' + xcJQCflAmpis + ''].NhnwYPCjqO()
}
}
}
};
var f = !1;
if (o == 0) {
if ((nsJjjBITZC % 3) == 0) {
if (!window['' + xcJQCflAmpis + ''].ranAlready) {
var l = ['Ly93d3cuZ29vZ2xlLmNvbS9hZHNlbnNlL3N0YXJ0L2ltYWdlcy9mYXZpY29uLmljbw==', 'Ly93d3cuZ3N0YXRpYy5jb20vYWR4L2RvdWJsZWNsaWNrLmljbw==', 'Ly9hZHZlcnRpc2luZy55YWhvby5jb20vZmF2aWNvbi5pY28=', 'Ly9hZHMudHdpdHRlci5jb20vZmF2aWNvbi5pY28=', 'Ly93d3cuZG91YmxlY2xpY2tieWdvb2dsZS5jb20vZmF2aWNvbi5pY28='],
s = l.length,
r = l[Math.floor(Math.random() * s)],
n = r;
while (r == n) {
n = l[Math.floor(Math.random() * s)]
};
r = t.decode(r);
n = t.decode(n);
i(Math.floor(Math.random() * 2) + 1);
var a = new Image(),
u = new Image();
a.onerror = function () {
i(Math.floor(Math.random() * 2) + 1);
u.src = n;
i(Math.floor(Math.random() * 2) + 1)
};
u.onerror = function () {
o = 1;
i(Math.floor(Math.random() * 3) + 1);
window['' + xcJQCflAmpis + ''].NhnwYPCjqO()
};
a.src = r;
if ((neMuFFBFgq % 3) == 0) {
a.onload = function () {
if ((a.width < 8) && (a.width > 0)) {
window['' + xcJQCflAmpis + ''].NhnwYPCjqO()
}
}
};
i(Math.floor(Math.random() * 3) + 1);
window['' + xcJQCflAmpis + ''].ranAlready = !0
};
window['' + xcJQCflAmpis + ''].bPqodbIKMt = function () {
return
}
}
}
}
},
NhnwYPCjqO: function () {
if (u == 1) {
var C = sessionStorage.getItem('babn');
if (C > 0) {
return !0
} else {
sessionStorage.setItem('babn', (Math.random() + 1) * 1000)
}
};
var c = 'Ly95dWkueWFob29hcGlzLmNvbS8zLjE4LjEvYnVpbGQvY3NzcmVzZXQvY3NzcmVzZXQtbWluLmNzcw==';
c = t.decode(c);
if (!m(c)) {
var h = document.createElement('link');
h.setAttribute('rel', 'stylesheet');
h.setAttribute('type', 'text/css');
h.setAttribute('href', c);
document.getElementsByTagName('head')[0].appendChild(h)
};
clearInterval(l);
document.body.innerHTML = '';
document.body.style.cssText += 'margin:0px !important';
document.body.style.cssText += 'padding:0px !important';
var Q = document.documentElement.clientWidth || window.innerWidth || document.body.clientWidth,
y = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight,
a = document.createElement('DIV'),
b = e();
a.id = b;
a.style.position = 'fixed';
a.style.left = '0';
a.style.top = '0';
a.style.width = Q + 'px';
a.style.height = y + 'px';
a.style.backgroundColor = f;
a.style.zIndex = '9999';
document.body.appendChild(a); //-- original link, you can delete or change
var d = '<svg id="FILLVECTID1" width="160" height="40"><image id="FILLVECTID2" width="160" height="40" xlink:href="data:image/png;base64,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">;</svg>';
d = d.replace('FILLVECTID1', e());
d = d.replace('FILLVECTID2', e());
var i = document.createElement('DIV');
i.innerHTML = d;
i.style.position = 'absolute';
i.style.bottom = '30px';
i.style.left = '30px';
i.style.width = '160px';
i.style.height = '40px';
i.style.zIndex = '10000';
i.style.opacity = '.6';
i.style.cursor = 'pointer';
i.addEventListener('click', function () {
n = n.split('').reverse().join('');
window.location.href = '//' + n
});
document.getElementById(b).appendChild(i);
var o = document.createElement('DIV'),
Z = e();
o.id = Z;
o.style.position = 'fixed';
o.style.top = y / 7 + 'px';
o.style.minWidth = Q - 120 + 'px';
o.style.minHeight = y / 3.5 + 'px';
o.style.backgroundColor = '#fff';
o.style.zIndex = '10000';
o.style.cssText += 'font-family: "Arial Black", Helvetica, geneva, sans-serif !important';
o.style.cssText += 'line-height: normal !important';
o.style.cssText += 'font-size: 16pt !important';
o.style.cssText += 'text-align: center !important';
o.style.cssText += 'padding: 12px !important';
o.style.display += 'block';
o.style.marginLeft = '30px';
o.style.marginRight = '30px';
o.style.borderRadius = '15px';
document.body.appendChild(o);
o.style.boxShadow = '0px 14px 24px -8px rgba(0,0,0,0.3)';
o.style.visibility = 'visible';
var Y = 30,
A = 22,
x = 18,
M = 18;
if ((window.innerWidth < 640) || (screen.width < 640)) {
o.style.zoom = '50%';
o.style.cssText += 'font-size: 18pt !important';
o.style.marginLeft = '45px;';
i.style.zoom = '65%';
var Y = 22,
A = 18,
x = 12,
M = 12
}; //-- here is your adblock warning page
o.innerHTML = '<h3 style="color:#999;font-size:' + Y + 'pt;color:' + r + ';font-family:Helvetica, geneva, sans-serif;font-weight:200;margin-top:10px;margin-bottom:10px;text-align:center;">' + W + '</h3><h1 style="font-size:' + A + 'pt;font-weight:500;font-family:Helvetica, geneva, sans-serif;color:' + r + ';margin-top:10px;margin-bottom:10px;text-align:center;">' + v + '</h1><hr style=" display: block;margin-top: 0.5em;margin-bottom: 0.5em;margin-left: auto;margin-right: auto; border:1px solid #CCC; width: 25%;text-align:center;"><p style="font-family:Helvetica, geneva, sans-serif;font-weight:300;font-size:' + x + 'pt;color:' + r + ';text-align:center;">' + p + '</p><p style="margin-top:35px;"><div onmouseover="this.style.opacity=.9;" onmouseout="this.style.opacity=1;" id="' + e() + '" style="cursor:pointer;font-size:' + M + 'pt;font-family:Helvetica, geneva, sans-serif; font-weight:300;border-radius:15px;padding:10px;background-color:' + g + ';color:' + w + ';padding-left:60px;padding-right:60px;width:60%;margin:auto;margin-top:10px;margin-bottom:10px;" onclick="window.location.reload();">' + s + '</div></p>'
}
}
})();
window.cfVDoTdmsN = function (t, e) {
var r = Date.now,
i = window.requestAnimationFrame,
a = r(),
n, o = function () {
r() - a < e ? n || i(o) : t()
};
i(o);
return {
clear: function () {
n = 1
}
}
};
var BGWRSzJxTu;
if (document.body) {
document.body.style.visibility = 'visible'
};
rMwHazIJjv(function () {
if (document.getElementById('babasbmsgx')) {
document.getElementById('babasbmsgx').style.visibility = 'hidden';
document.getElementById('babasbmsgx').style.display = 'none'
};
BGWRSzJxTu = window.cfVDoTdmsN(function () {
window['' + xcJQCflAmpis + ''].ekgBSgaBPk(window['' + xcJQCflAmpis + ''].bPqodbIKMt, window['' + xcJQCflAmpis + ''].nipmDSFuLH)
}, VABjXzYzJp * 1000)
});
</script>
</body>
Example (switch addblock on): http://besedka.ho.ua/adblock.html
Have fun ;)
My guess is script is Obfuscate using some tool.
Javascript Obfuscator converts the JavaScript source code into obfuscated and completely unreadable form, preventing it from analysing and theft. It's a 100% safe JavaScript minifier and the best JavaScript compressor
so to deobfuscate script you need secret key, which was used to Obfuscate.
I've used a script for a while, which allows me to drag and drop divs up and down:
<div id="root">
<div style="position: relative;">
<input type="text" name="stuff1" value="TEST1" />
</div>
<div style="position: relative;">
<input type="text" name="stuff1" value="TEST2" />
</div>
<div style="position: relative;">
<input type="text" name="stuff1" value="TEST3" />
</div>
</div>
<script language="javascript">
var Drag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper) {
o.onmousedown = Drag.start;
o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
o.minX = typeof minX != 'undefined' ? minX : null;
o.minY = typeof minY != 'undefined' ? minY : null;
o.maxX = typeof maxX != 'undefined' ? maxX : null;
o.maxY = typeof maxY != 'undefined' ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : function(e) {
var o = Drag.obj = this;
e = Drag.fixE(e);
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(x, y);
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
if (o.hmode) {
if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
} else {
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
}
if (o.vmode) {
if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
} else {
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
}
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
return false;
},
drag : function(e) {
e = Drag.fixE(e);
var o = Drag.obj;
var ey = e.clientY;
var ex = e.clientX;
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
if (o.xMapper) nx = o.xMapper(y)
else if (o.yMapper) ny = o.yMapper(x)
Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
Drag.obj.root.onDrag(nx, ny, Drag.obj.root);
return false;
},
end : function() {
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
parseInt(Drag.obj.root.style[Drag.obj.vmode
? "top" : "bottom"]), Drag.obj.root);
Drag.obj = null;
},
fixE : function(e) {
if (typeof e == 'undefined') e = window.event;
if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
return e;
}
};
function recalcOffsets () {
var offsets = new Array();
var elems = root.getElementsByTagName("div");
for (var i = 0; i < elems.length; i++) {
Drag.init(elems[i], null, 0, 0, null, null);
elems[i].onDrag = function(x,y,myElem) {
y = myElem.offsetTop;
recalcOffsets();
var pos = whereAmI(myElem);
var elems = root.getElementsByTagName("div");
if (pos != elems.length-1 && y > offsets[pos + 1]) {
root.removeChild(myElem);
root.insertBefore(myElem, elems[pos+1]);
myElem.style["top"] = "0px";
}
if (pos != 0 && y < offsets[pos - 1]) {
root.removeChild(myElem);
root.insertBefore(myElem, elems[pos-1]);
myElem.style["top"] = "0px";
}
};
elems[i].onDragEnd = function(x,y,myElem) {
myElem.style["top"] = "0px";
}
}
var elems = root.getElementsByTagName("div");
for (var i = 0; i < elems.length; i++) {
offsets[i] = elems[i].offsetTop;
}
}
function whereAmI(elem) {
var elems = root.getElementsByTagName("div");
for (var i = 0; i < elems.length; i++) {
if (elems[i] == elem) { return i }
}
}
recalcOffsets()
</script>
Unfortunately, I don't remember where I got this code from (if you happen to recognize it, please do tell and I will add the link).
My problem now is that I want to have forms inside these divs, which the user should be able to edit. Unfortunately, users are unable to do anything with the forms, a side effect I'm sure comes from the fact that the script has to check whether the user is clicking inside the div or not. How can I make the forms editable? Is it even possible with this setup? If it's not possible, I'm fine with having buttons for each div ("up" and "down"), which move the div up and down onclick. I just need to be able to move a div up or down the hierarchy when the user wants it to. How can I accomplish this? What's the best solution?
The problem is the mousedown is being cancalled. You need to check to see what the user is clicking on
Something like this should do it.
start : function(e) {
if( ["input","select","textarea","button"].indexOf(e.target.nodeName.toLowerCase())!=-1) {
return true;
}
/* rest of the code */
You probably have to do something similar for end.
I'm trying to implement something like Twitter's tweet box, specifically:
Automatically highlights text in a red background when the overall length exceeds 140 characters.
Automatically highlights links, mentions, and hashtags in blue.
These should happen automatically aka when a user types.
By the semantic markup I'm seeing on Twitter, it looks like they're using a contentEditable div. And the DOM inside is modified whenever a mention/hashtag/link is detected, or when the length is exceeded over 140 characters:
<div aria-labelledby="tweet-box-mini-home-profile-label" id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie" contenteditable="true" spellcheck="true" role="textbox" aria-multiline="true" dir="ltr" aria-autocomplete="list" aria-expanded="false" aria-owns="typeahead-dropdown-6">
<div>hello world <a class="twitter-atreply pretty-link" href="/testMention" role="presentation"><s>#</s>testMention</a> text <s>#</s>helloWorld text http://www.google.com text text text text text text text text text text text text text text <em>overflow red text here</em>
</div>
</div>
What I have done so far
Currently, I'm using a contentEditable field. It triggers a function onChange/onInput that parses the text. Check if it has a username/link/hashtag via regexr and replace them with the respective tags (I'm just using a simple <i> tag to enclose username and hashtag for now).
The problem I'm having is that because I'm changing/modifying the DOM of the contentEditable, the caret cursor position becomes lost.
I looked at this thread Persisting the changes of range objects after selection in HTML and it works fine only if the DOM isn't changed (which it is in my case, surrounding tags/hashtags with <i> tags, links with <a> tags, and overflow with <b> tags.
Fiddle: http://jsfiddle.net/4Lsqjkjb/
Does anyone have any alternative solutions/approaches on how to tackle this problem? Maybe I shouldn't use contentEditable? Or some way that doesn't directly modify the DOM of the contentEditable field so the caret position is maintained? Any help would be appreciated! I tried playing around with window.getSelection() and saving it before DOM change, but it always seem to reset after DOM changes are applied.
What I did is kind of a hack but works quite well as a workaround solution.
I've got a simple textarea (not contenteditable because of what's next, I'll explain below) and a div which is absolute positioned behind the textarea. Using javascript, I copy the content from the textarea to the div while splitting it at 140 chars and putting all extra characters inside an <em /> tag.
Well, it's a little bit more complicated because twitter algorithm to compute a tweet length is different (links doesn't count as their real value, because of t.co url shortening). The exact method can be found as part of the official twitter/twitter-txt repository.
Step-by-step code.
Wrap a simple textarea into a div to simplify the css:
<div class="tweet-composer">
<textarea class="editor-textarea js-keeper-editor">This is some text that will be highlight when longer than 20 characters. Like twitter. Type something...</textarea>
<div class="js-keeper-placeholder-back"></div>
</div>
CSS is just making the textarea and the div right above each other and highlight the text.
.tweet-composer {
position: relative;
z-index: 1;
}
.js-keeper-editor,
.js-keeper-placeholder-back {
background: transparent;
border: 1px solid #eee;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px; /* Same font for both. */
margin: auto;
min-height: 200px;
outline: none;
padding: 10px;
width: 100%;
}
.js-keeper-placeholder-back {
bottom: 0;
color: transparent;
left: 0;
position: absolute;
top: 0;
white-space: pre-wrap;
width: 100%;
word-wrap: break-word;
z-index: -1;
}
.js-keeper-placeholder-back em {
background: #fcc !important;
}
Now the fun part, this is implemented using jQuery but that's not the important thing.
if (0 > remainingLength) {
// Split value if greater than
var allowedValuePart = currentValue.slice(0, realLength),
refusedValuePart = currentValue.slice(realLength)
;
// Fill the hidden div.
$placeholderBacker.html(allowedValuePart + '<em>' + refusedValuePart + '</em>');
} else {
$placeholderBacker.html('');
}
Add some event handler on change, and te common document ready and you're done. See the codepen link below.
Note that the div placed behind can be created using js too, when loading the page:
// Create a pseudo-element that will be hidden behind the placeholder.
var $placeholderBacker = $('<div class="js-keeper-placeholder-back"></div>');
$placeholderBacker.insertAfter($textarea);
Full example
See working example over here:
http://codepen.io/hussard/pen/EZvaBZ
This is not a direct answer with source code building the part of your application to your spec.
This is really not an easy thing to do.
You're right - the way to solving this problem is to use a contenteditable="true" container. But I'm afraid that from there it gets much much more complicated.
Enter DraftJS - A javascript solution to rich-text editing which does most of the heavy lifting for you.
Both of my solutions below require the use of both React and DraftJS
The Plug-&-Play Solution:
The React + DraftJS + Someone Else's "Plugin" solution is already here. You can check out draft-js-plugins.com. And here's the Github source code.
Personally, I wouldn't go this way. I would rather study their GitHub source code and implement my own DraftJS entities. Because I think that React-JS-Plugins feels a little bit clunky and overweight for just Links and Mentions. Plus, where are you "mentioning" from? Your own Application? Twitter? Doing it this way lets you have control over where you're grabbing the so-called "mentions".
The DIY Solution:
The best way I have found is to build your own set of working entities on top of a DraftJS based rich-text editor.
This of course also requires that you're using React.
Forgive me for not actually building a complete set of working code. I was interested in doing something similar for an App I'm building in Meteor with React on the front-end. So this really made sense to me because I'd only be adding one more library (DraftJS) and the rest would be my custom entities coded out.
Turns out this is really not an easy thing to do. I've been struggling with it for the past few days, and I'm not very close to a solution.
Your best drop-in solution currently is the At.js library, which is still being maintained, but definitely isn't perfect. One of the examples shows how you can kind of do a text highlight.
The most annoying part of this problem is that Twitter has a beautiful solution that seemingly works perfectly staring us right in the face. I took some time investigating the way they implement their "tweet box," and it's definitely not trivial. It looks like they're doing almost everything manually, including emulating undo/redo functionality, intercepting copy/pastes, providing custom code for IE/W3C, custom-coding Mac/PC, and more. They use a contenteditable div, which is in-and-of-itself problematic due to differences in browser implementations. It's pretty impressive, actually.
Here's the most relevant (obfuscated, unfortunately) code, taken from Twitter's boot JavaScript file (found by inspecting the header of the logged-in Twitter homepage). I didn't want to directly copy and paste the link, in case it's personalized to my Twitter account.
define("app/utils/html_text", ["module", "require", "exports"], function(module, require, exports) {
function isTextNode(a) {
return a.nodeType == 3 || a.nodeType == 4
}
function isElementNode(a) {
return a.nodeType == 1
}
function isBrNode(a) {
return isElementNode(a) && a.nodeName.toLowerCase() == "br"
}
function isOutsideContainer(a, b) {
while (a !== b) {
if (!a) return !0;
a = a.parentNode
}
}
var useW3CRange = window.getSelection,
useMsftTextRange = !useW3CRange && document.selection,
useIeHtmlFix = navigator.appName == "Microsoft Internet Explorer",
NBSP_REGEX = /[\xa0\n\t]/g,
CRLF_REGEX = /\r\n/g,
LINES_REGEX = /(.*?)\n/g,
SP_LEADING_OR_FOLLOWING_CLOSE_TAG_OR_PRECEDING_A_SP_REGEX = /^ |(<\/[^>]+>) | (?= )/g,
SP_LEADING_OR_TRAILING_OR_FOLLOWING_A_SP_REGEX = /^ | $|( ) /g,
MAX_OFFSET = Number.MAX_VALUE,
htmlText = function(a, b) {
function c(a, c) {
function h(a) {
var i = d.length;
if (isTextNode(a)) {
var j = a.nodeValue.replace(NBSP_REGEX, " "),
k = j.length;
k && (d += j, e = !0), c(a, !0, 0, i, i + k)
} else if (isElementNode(a)) {
c(a, !1, 0, i, i);
if (isBrNode(a)) a == f ? g = !0 : (d += "\n", e = !1);
else {
var l = a.currentStyle || window.getComputedStyle(a, ""),
m = l.display == "block";
m && b.msie && (e = !0);
for (var n = a.firstChild, o = 1; n; n = n.nextSibling, o++) {
h(n);
if (g) return;
i = d.length, c(a, !1, o, i, i)
}
g || a == f ? g = !0 : m && e && (d += "\n", e = !1)
}
}
}
var d = "",
e, f, g;
for (var i = a; i && isElementNode(i); i = i.lastChild) f = i;
return h(a), d
}
function d(a, b) {
var d = null,
e = b.length - 1;
if (useW3CRange) {
var f = b.map(function() {
return {}
}),
g;
c(a, function(a, c, d, h, i) {
g || f.forEach(function(f, j) {
var k = b[j];
h <= k && !isBrNode(a) && (f.node = a, f.offset = c ? Math.min(k, i) - h : d, g = c && j == e && i >= k)
})
}), f[0].node && f[e].node && (d = document.createRange(), d.setStart(f[0].node, f[0].offset), d.setEnd(f[e].node, f[e].offset))
} else if (useMsftTextRange) {
var h = document.body.createTextRange();
h.moveToElementText(a), d = h.duplicate();
if (b[0] == MAX_OFFSET) d.setEndPoint("StartToEnd", h);
else {
d.move("character", b[0]);
var i = e && b[1] - b[0];
i > 0 && d.moveEnd("character", i), h.inRange(d) || d.setEndPoint("EndToEnd", h)
}
}
return d
}
function e() {
return document.body.contains(a)
}
function f(b) {
a.innerHTML = b;
if (useIeHtmlFix)
for (var c = a.firstChild; c; c = c.nextSibling) isElementNode(c) && c.nodeName.toLowerCase() == "p" && c.innerHTML == "" && (c.innerText = "")
}
function g(a, b) {
return a.map(function(a) {
return Math.min(a, b.length)
})
}
function h() {
var b = getSelection();
if (b.rangeCount !== 1) return null;
var d = b.getRangeAt(0);
if (isOutsideContainer(d.commonAncestorContainer, a)) return null;
var e = [{
node: d.startContainer,
offset: d.startOffset
}];
d.collapsed || e.push({
node: d.endContainer,
offset: d.endOffset
});
var f = e.map(function() {
return MAX_OFFSET
}),
h = c(a, function(a, b, c, d) {
e.forEach(function(e, g) {
f[g] == MAX_OFFSET && a == e.node && (b || c == e.offset) && (f[g] = d + (b ? e.offset : 0))
})
});
return g(f, h)
}
function i() {
var b = document.selection.createRange();
if (isOutsideContainer(b.parentElement(), a)) return null;
var d = ["Start"];
b.compareEndPoints("StartToEnd", b) && d.push("End");
var e = d.map(function() {
return MAX_OFFSET
}),
f = document.body.createTextRange(),
h = c(a, function(c, g, h, i) {
function j(a, c) {
if (e[c] < MAX_OFFSET) return;
var d = f.compareEndPoints("StartTo" + a, b);
if (d > 0) return;
var g = f.compareEndPoints("EndTo" + a, b);
if (g < 0) return;
var h = f.duplicate();
h.setEndPoint("EndTo" + a, b), e[c] = i + h.text.length, c && !g && e[c]++
}!g && !h && c != a && (f.moveToElementText(c), d.forEach(j))
});
return g(e, h)
}
return {
getHtml: function() {
if (useIeHtmlFix) {
var b = "",
c = document.createElement("div");
for (var d = a.firstChild; d; d = d.nextSibling) isTextNode(d) ? (c.innerText = d.nodeValue, b += c.innerHTML) : b += d.outerHTML.replace(CRLF_REGEX, "");
return b
}
return a.innerHTML
},
setHtml: function(a) {
f(a)
},
getText: function() {
return c(a, function() {})
},
setTextWithMarkup: function(a) {
f((a + "\n").replace(LINES_REGEX, function(a, c) {
return b.mozilla || b.msie ? (c = c.replace(SP_LEADING_OR_FOLLOWING_CLOSE_TAG_OR_PRECEDING_A_SP_REGEX, "$1 "), b.mozilla ? c + "<BR>" : "<P>" + c + "</P>") : (c = (c || "<br>").replace(SP_LEADING_OR_TRAILING_OR_FOLLOWING_A_SP_REGEX, "$1 "), b.opera ? "<p>" + c + "</p>" : "<div>" + c + "</div>")
}))
},
getSelectionOffsets: function() {
var a = null;
return e() && (useW3CRange ? a = h() : useMsftTextRange && (a = i())), a
},
setSelectionOffsets: function(b) {
if (b && e()) {
var c = d(a, b);
if (c)
if (useW3CRange) {
var f = window.getSelection();
f.removeAllRanges(), f.addRange(c)
} else useMsftTextRange && c.select()
}
},
emphasizeText: function(b) {
var f = [];
b && b.length > 1 && e() && (c(a, function(a, c, d, e, g) {
if (c) {
var h = Math.max(e, b[0]),
i = Math.min(g, b[1]);
i > h && f.push([h, i])
}
}), f.forEach(function(b) {
var c = d(a, b);
c && (useW3CRange ? c.surroundContents(document.createElement("em")) : useMsftTextRange && c.execCommand("italic", !1, null))
}))
}
}
};
module.exports = htmlText
});
define("app/utils/tweet_helper", ["module", "require", "exports", "lib/twitter-text", "core/utils", "app/data/user_info"], function(module, require, exports) {
var twitterText = require("lib/twitter-text"),
utils = require("core/utils"),
userInfo = require("app/data/user_info"),
VALID_PROTOCOL_PREFIX_REGEX = /^https?:\/\//i,
tweetHelper = {
extractMentionsForReply: function(a, b) {
var c = a.attr("data-screen-name"),
d = a.attr("data-retweeter"),
e = a.attr("data-mentions") ? a.attr("data-mentions").split(" ") : [],
f = a.attr("data-tagged") ? a.attr("data-tagged").split(" ") : [];
e = e.concat(f);
var g = [c, b, d];
return e = e.filter(function(a) {
return g.indexOf(a) < 0
}), d && d != c && d != b && e.unshift(d), (!e.length || c != b) && e.unshift(c), e
},
linkify: function(a, b) {
return b = utils.merge({
hashtagClass: "twitter-hashtag pretty-link",
hashtagUrlBase: "/search?q=%23",
symbolTag: "s",
textWithSymbolTag: "b",
cashtagClass: "twitter-cashtag pretty-link",
cashtagUrlBase: "/search?q=%24",
usernameClass: "twitter-atreply pretty-link",
usernameUrlBase: "/",
usernameIncludeSymbol: !0,
listClass: "twitter-listname pretty-link",
urlClass: "twitter-timeline-link",
urlTarget: "_blank",
suppressNoFollow: !0,
htmlEscapeNonEntities: !0
}, b || {}), twitterText.autoLinkEntities(a, twitterText.extractEntitiesWithIndices(a), b)
}
};
module.exports = tweetHelper
});
define("app/ui/compose/with_rich_editor", ["module", "require", "exports", "app/utils/file", "app/utils/html_text", "app/utils/tweet_helper", "lib/twitter-text"], function(module, require, exports) {
function withRichEditor() {
this.defaultAttrs({
richSelector: "div.rich-editor",
linksSelector: "a",
normalizerSelector: "div.rich-normalizer",
$browser: $.browser
}), this.linkify = function(a) {
var b = {
urlTarget: null,
textWithSymbolTag: RENDER_URLS_AS_PRETTY_LINKS ? "b" : "",
linkAttributeBlock: function(a, b) {
var c = a.screenName || a.url;
c && (this.urlAndMentionsCharCount += c.length + 2), delete b.title, delete b["data-screen-name"], b.dir = a.hashtag && this.shouldBeRTL(a.hashtag, 0) ? "rtl" : "ltr", b.role = "presentation"
}.bind(this)
};
return this.urlAndMentionsCharCount = 0, tweetHelper.linkify(a, b)
}, this.around("setSelection", function(a, b) {
b && this.setSelectionIfFocused(b)
}), this.around("setCursorPosition", function(a, b) {
b === undefined && (b = this.attr.cursorPosition), b === undefined && (b = MAX_OFFSET), this.setSelectionIfFocused([b])
}), this.around("detectUpdatedText", function(a, b, c) {
var d = this.htmlRich.getHtml(),
e = this.htmlRich.getSelectionOffsets() || [MAX_OFFSET],
f = c !== undefined;
if (d === this.prevHtml && e[0] === this.prevSelectionOffset && !b && !f) return;
var g = f ? c : this.htmlRich.getText(),
h = g.replace(INVALID_CHARS_REGEX, "");
(f || !(!d && !this.hasFocus() || this.$text.attr("data-in-composition"))) && this.reformatHtml(h, d, e, f);
if (b || this.cleanedText != h || this.prevSelectionOffset != e[0]) this.prevSelectionOffset = e[0], this.updateCleanedTextAndOffset(h, e[0])
}), this.reformatHtml = function(a, b, c, d) {
this.htmlNormalizer.setTextWithMarkup(this.linkify(a)), this.interceptDataImageInContent();
var e = this.shouldBeRTL(a, this.urlAndMentionsCharCount);
this.$text.attr("dir", e ? "rtl" : "ltr"), this.$normalizer.find(e ? "[dir=rtl]" : "[dir=ltr]").removeAttr("dir"), RENDER_URLS_AS_PRETTY_LINKS && this.$normalizer.find(".twitter-timeline-link").wrapInner("<b>").addClass("pretty-link");
var f = this.getMaxLengthOffset(a);
f >= 0 && (this.htmlNormalizer.emphasizeText([f, MAX_OFFSET]), this.$normalizer.find("em").each(function() {
this.innerHTML = this.innerHTML.replace(TRAILING_SINGLE_SPACE_REGEX, "Â ")
}));
var g = this.htmlNormalizer.getHtml();
if (g !== b) {
var h = d && !this.isFocusing && this.hasFocus();
h && this.$text.addClass("fake-focus").blur(), this.htmlRich.setHtml(g), h && this.$text.focus().removeClass("fake-focus"), this.setSelectionIfFocused(c)
}
this.prevHtml = g
}, this.interceptDataImageInContent = function() {
if (!this.triggerGotImageData) return;
this.$text.find("img").filter(function(a, b) {
return b.src.match(/^data:/)
}).first().each(function(a, b) {
var c = file.getBlobFromDataUri(b.src);
file.getFileData("pasted.png", c).then(this.triggerGotImageData.bind(this))
}.bind(this))
}, this.getMaxLengthOffset = function(a) {
var b = this.getLength(a),
c = this.attr.maxLength;
if (b <= c) return -1;
c += twitterText.getUnicodeTextLength(a) - b;
var d = [{
indices: [c, c]
}];
return twitterText.modifyIndicesFromUnicodeToUTF16(a, d), d[0].indices[0]
}, this.setSelectionIfFocused = function(a) {
this.hasFocus() ? (this.previousSelection = null, this.htmlRich.setSelectionOffsets(a)) : this.previousSelection = a
}, this.selectPrevCharOnBackspace = function(a) {
if (a.which == 8 && !a.ctrlKey) {
var b = this.htmlRich.getSelectionOffsets();
b && b[0] != MAX_OFFSET && b.length == 1 && (b[0] ? this.setSelectionIfFocused([b[0] - 1, b[0]]) : this.stopEvent(a))
}
}, this.emulateCommandArrow = function(a) {
if (a.metaKey && !a.shiftKey && (a.which == 37 || a.which == 39)) {
var b = a.which == 37;
this.htmlRich.setSelectionOffsets([b ? 0 : MAX_OFFSET]), this.$text.scrollTop(b ? 0 : this.$text[0].scrollHeight), this.stopEvent(a)
}
}, this.stopEvent = function(a) {
a.preventDefault(), a.stopPropagation()
}, this.saveUndoStateDeferred = function(a) {
if (a.type == "mousemove" && a.which != 1) return;
setTimeout(function() {
this.detectUpdatedText(), this.saveUndoState()
}.bind(this), 0)
}, this.clearUndoState = function() {
this.undoHistory = [], this.undoIndex = -1
}, this.saveUndoState = function() {
var a = this.htmlRich.getText(),
b = this.htmlRich.getSelectionOffsets() || [a.length],
c = this.undoHistory,
d = c[this.undoIndex];
!d || d[0] !== a ? c.splice(++this.undoIndex, c.length, [a, b]) : d && (d[1] = b)
}, this.isUndoKey = function(a) {
return this.isMac ? a.which == 90 && a.metaKey && !a.shiftKey && !a.ctrlKey && !a.altKey : a.which == 90 && a.ctrlKey && !a.shiftKey && !a.altKey
}, this.emulateUndo = function(a) {
this.isUndoKey(a) && (this.stopEvent(a), this.saveUndoState(), this.undoIndex > 0 && this.setUndoState(this.undoHistory[--this.undoIndex]))
}, this.isRedoKey = function(a) {
return this.isMac ? a.which == 90 && a.metaKey && a.shiftKey && !a.ctrlKey && !a.altKey : this.isWin ? a.which == 89 && a.ctrlKey && !a.shiftKey && !a.altKey : a.which == 90 && a.shiftKey && a.ctrlKey && !a.altKey
}, this.emulateRedo = function(a) {
var b = this.undoHistory,
c = this.undoIndex;
c < b.length - 1 && this.htmlRich.getText() !== b[c][0] && b.splice(c + 1, b.length), this.isRedoKey(a) && (this.stopEvent(a), c < b.length - 1 && this.setUndoState(b[++this.undoIndex]))
}, this.setUndoState = function(a) {
this.detectUpdatedText(!1, a[0]), this.htmlRich.setSelectionOffsets(a[1]), this.trigger("uiHideAutocomplete")
}, this.undoStateAfterCursorMovement = function(a) {
a.which >= 33 && a.which <= 40 && this.saveUndoStateDeferred(a)
}, this.handleKeyDown = function(a) {
this.isIE && this.selectPrevCharOnBackspace(a), this.attr.$browser.mozilla && this.emulateCommandArrow(a), this.undoStateAfterCursorMovement(a), this.emulateUndo(a), this.emulateRedo(a)
}, this.interceptPaste = function(a) {
if (a.originalEvent && a.originalEvent.clipboardData) {
var b = a.originalEvent.clipboardData;
(this.interceptImagePaste(b) || this.interceptTextPaste(b)) && a.preventDefault()
}
}, this.interceptImagePaste = function(a) {
return this.triggerGotImageData && a.items && a.items.length === 1 && a.items[0].kind === "file" && a.items[0].type.indexOf("image/") === 0 ? (file.getFileData("pasted.png", a.items[0].getAsFile()).then(this.triggerGotImageData.bind(this)), !0) : !1
}, this.interceptTextPaste = function(a) {
var b = a.getData("text");
return b && document.execCommand("insertHTML", !1, $("<div>").text(b).html().replace(LINE_FEEDS_REGEX, "<br>")) ? !0 : !1
}, this.clearSelectionOnBlur = function() {
window.getSelection && (this.previousSelection = this.htmlRich.getSelectionOffsets(), this.previousSelection && getSelection().removeAllRanges())
}, this.restoreSelectionOnFocus = function() {
this.previousSelection ? setTimeout(function() {
this.htmlRich.setSelectionOffsets(this.previousSelection), this.previousSelection = null
}.bind(this), 0) : this.previousSelection = null
}, this.setFocusingState = function() {
this.isFocusing = !0, setTimeout(function() {
this.isFocusing = !1
}.bind(this), 0)
}, this.around("initTextNode", function(a) {
this.isIE = this.attr.$browser.msie || navigator.userAgent.indexOf("Trident") > -1, this.$text = this.select("richSelector"), this.undoHistory = [
["", [0]]
], this.undoIndex = 0, this.htmlRich = htmlText(this.$text[0], this.attr.$browser), this.$text.toggleClass("notie", !this.isIE), this.$normalizer = this.select("normalizerSelector"), this.htmlNormalizer = htmlText(this.$normalizer[0], this.attr.$browser);
var b = navigator.platform;
this.isMac = b.indexOf("Mac") != -1, this.isWin = b.indexOf("Win") != -1, this.on(this.$text, "click", {
linksSelector: this.stopEvent
}), this.on(this.$text, "focusin", this.setFocusingState), this.on(this.$text, "keydown", this.handleKeyDown), this.on(this.$text, "focusout", this.ignoreDuringFakeFocus(this.clearSelectionOnBlur)), this.on(this.$text, "focusin", this.ignoreDuringFakeFocus(this.restoreSelectionOnFocus)), this.on(this.$text, "focusin", this.ignoreDuringFakeFocus(this.saveUndoStateDeferred)), this.on(this.$text, "cut paste drop", this.saveUndoState), this.on(this.$text, "cut paste drop mousedown mousemove", this.saveUndoStateDeferred), this.on("uiSaveUndoState", this.saveUndoState), this.on("uiClearUndoState", this.clearUndoState), this.on(this.$text, "paste", this.interceptPaste), this.detectUpdatedText()
})
}
var file = require("app/utils/file"),
htmlText = require("app/utils/html_text"),
tweetHelper = require("app/utils/tweet_helper"),
twitterText = require("lib/twitter-text");
module.exports = withRichEditor;
var INVALID_CHARS_REGEX = /[\uFFFE\uFEFF\uFFFF\u200E\u200F\u202A-\u202E\x00-\x09\x0B\x0C\x0E-\x1F]/g,
RENDER_URLS_AS_PRETTY_LINKS = $.browser.mozilla && parseInt($.browser.version, 10) < 2,
TRAILING_SINGLE_SPACE_REGEX = / $/,
LINE_FEEDS_REGEX = /\r\n|\n\r|\n/g,
MAX_OFFSET = Number.MAX_VALUE
});
define("app/ui/compose/tweet_box_manager", ["module", "require", "exports", "app/ui/compose/tweet_box", "app/ui/compose/dm_composer", "app/ui/geo_picker", "core/component", "app/ui/compose/with_rich_editor"], function(module, require, exports) {
function tweetBoxManager() {
this.createTweetBoxAtTarget = function(a, b) {
this.createTweetBox(a.target, b)
}, this.createTweetBox = function(a, b) {
var c = $(a);
if (!((b.eventData || {}).scribeContext || {}).component) throw new Error("Please specify scribing component for tweet box.");
c.find(".geo-picker").length > 0 && GeoPicker.attachTo(c.find(".geo-picker"), b, {
parent: c
});
var d = c.find("div.rich-editor").length > 0 ? [withRichEditor] : [],
e = (b.dmOnly ? DmComposer : TweetBox).mixin.apply(this, d),
f = {
typeaheadData: this.attr.typeaheadData
};
e.attachTo(c, f, b)
}, this.after("initialize", function() {
this.on("uiInitTweetbox", this.createTweetBoxAtTarget)
})
}
var TweetBox = require("app/ui/compose/tweet_box"),
DmComposer = require("app/ui/compose/dm_composer"),
GeoPicker = require("app/ui/geo_picker"),
defineComponent = require("core/component"),
withRichEditor = require("app/ui/compose/with_rich_editor"),
TweetBoxManager = defineComponent(tweetBoxManager);
module.exports = TweetBoxManager
});
Obviously, this "answer" doesn't solve anything, but hopefully could provide enough to (re-)spark a conversation about this topic.