Develop Reference

Javascript Get Selected Text: Incorrect number of lines

I am using the following code
(function(e, t) {
"use strict";
var n = t.selection;
var i = t.getSelection;
var o = i || n;
var r = function(e) {
var t = Object.prototype.toString.call(e);
return typeof e === "object" && /^\[object (HTMLCollection|NodeList|Object)\]$/.test(t) && e.hasOwnProperty("length") && (e.length === 0 || typeof e[0] === "object" && e[0].nodeType > 0)
};
var c = function(e, t) {
var n;
return function() {
var i = this,
o = arguments;
var r = function() {
n = null;
e.apply(i, o)
};
clearTimeout(n);
n = setTimeout(r, t)
}
};
var s = function(t, n) {
this.element = t;
this.callback = n || function() {};
this.isTouch = "ontouchstart" in e;
this.hasLib = e.jQuery && t instanceof e.jQuery || e.Zepto && t instanceof e.Zepto
};
s.prototype = {
events: function() {
var e = this.callback;
var t = this.getText;
this[this.isTouch ? "bindTouch" : "bindMouseUp"](function() {
e(t())
})
},
getText: function() {
var n = "";
if (i) {
n = e.getSelection().toString()
} else if (t.selection && t.selection.type !== "Control") {
n = t.selection.createRange().text
}
return n
},
checkForSelections: function(e, t, n) {
var i;
var o = function(e) {
var n = t();
var i = setInterval(function() {
if (t() !== n) {
e(t());
n = t()
} else if (t() === "") {
clearInterval(i)
}
}, 100)
};
var r = function() {
e.removeEventListener("touchend", c, false);
e.addEventListener("touchend", c, false);
if (i) {
clearInterval(i)
}
i = setInterval(function() {
var e = t();
if (e !== "") {
n(e);
c();
o(n)
}
}, 100)
};
var c = function() {
clearInterval(i);
e.removeEventListener("touchend", c, false)
};
e.addEventListener("touchstart", r, false)
},
bindTouch: function(e) {
var t = this.checkForSelections;
var n = this.getText;
if (this.hasLib) {
this.element.each(function() {
t(this, n, e)
});
return
}
var i = function(i) {
t(i, n, e)
};
if (!r(this.element)) {
i(this.element);
return
} [].forEach.call(this.element, function(e) {
i(e)
})
},
bindMouseUp: function(e) {
if (this.hasLib) {
this.element.on("mouseup", c(e, 150));
return
}
var t = function(t) {
t.addEventListener("mouseup", c(e, 150), false)
};
if (!r(this.element)) {
t(this.element);
return
} [].forEach.call(this.element, function(e) {
t(e)
})
}
};
e.selecting = function(e, t) {
if (!o) {
return
}
new s(e, t).events()
}
})(window, document);
And :
var myElement = document.body;
window.selecting(myElement, function(selector) {
var text = selector;
instance.publishState("text", text);
});
to basically get the selected/highlighted text by the user in the browser. I then use the selected text to work with it, make API calls etc.
Getting the selected text is fine, but unfortunately the number of lines in the returned text is usually incorrect which makes it impossible for me to work with.
Let me give you an example:
The user highlights the following text on the page:
Hello this is a test
Hello this is another test
The returned value from my code however than displays this text but with more line breaks in between. So for example I get returned:
Hello this is a test
Hello this is another test
This completely breaks my functionality, as I have to exactly know how many line breaks there actually are in order to work with the text. Any ideas what could be wrong or how I can access the browsers selected text with the correct number of line breaks?

The code
window.getSelection().toString()
will return the correct selection, which will produce in your case
Hello this is a test\n\nHello this is another test
Notice how you have two \n corresponding to the 2 newlines you have.
So if you do anything like this to display what the user has selected:
console.dir(window.getSelection().toString());
You will see correctly what the user has selected
Hello this is a test
Hello this is another test

How to use a rails condition within a .slim Javascript function?

In my .slim file I have a javascript block containing a URL, this URL needs to differ depending on which environment it is rendered in (staging / production etc). This is my first time using this format, so I'm not sure if what I'm trying to do is logically possible.
I aim to create a ternary operator which checks the Rails Env, if it is 'Production' do X, otherwise do Y.
Code below:
file.slim
javascript:
function zopimChat() {
window.zEmbed || function (e, t) {
var n, o, d, i, s, a = [],
r = document.createElement("iframe");
window.zESettings = {
webWidget: {
offset: {
vertical: "85px"
}
}
};
window.zEmbed = function () {
a.push(arguments)
}, window.zE = window.zE || window.zEmbed, r.src = "javascript:false", r.title = "", r.role = "presentation", (r.frameElement || r).style.cssText = "display: none", d = document.getElementsByTagName("script"), d = d[d.length - 1], d.parentNode.insertBefore(r, d), i = r.contentWindow, s = i.document;
try {
o = s
} catch (c) {
n = document.domain, r.src = 'javascript:var d=document.open();d.domain="' + n + '";void(0);', o = s
}
o.open()._l = function () {
var o = this.createElement("script");
n && (this.domain = n), o.id = "js-iframe-async", o.src = e, this.t = +new Date, this.zendeskHost = t, this.zEQueue = a, this.body.appendChild(o)
}, o.write('<body onload="document._l();">'), o.close()
}
# condition below
("https://assets.zendesk.com/embeddable_framework/main.js",
Rails.env.production? "testwebsite.zendesk.com" : "testwebsite-staging.zendesk.com" );
}

You can use interpolation:
javascript:
const railsEnv = "#{Rails.env}";
https://rdoc.info/gems/slim/frames#text-interpolation
In your case:
("https://assets.zendesk.com/embeddable_framework/main.js",
"#{Rails.env.production? ? "testwebsite.zendesk.com" : "testwebsite-staging.zendesk.com"}" );

javascript decoding webpackJsonp to readable code

there is a way to change this code into a clear and readable code ?
(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{"2wwy":function(n,t,e){n.exports=e("nhzr")},E8gZ:function(n,t,e){var o=e("jmDH"),i=e("w6GO"),r=e("NsO/"),u=e("NV0k").f;n.exports=function(n){return function(t){for(var e,c=r(t),a=i(c),f=a.length,s=0,l=[];f>s;)e=a[s++],o&&!u.call(c,e)||l.push(n?[e,c[e]]:c[e]);return l}}},f0Zw:function(n,t,e){"use strict";e.r(t);var o=e("q1tI"),i=e.n(o),r=e("/MKj"),u=e("2wwy"),c=e.n(u),a=e("G4qV"),f=Object(a.a)((function(n){return n.g_notifications}),(function(n){return c()(n)})),s=e("F7NL"),l=e("kOwS"),p=e("qNsG"),v=e("CnBM"),w=e.n(v)()({loader:function(){return Promise.all([e.e(0),e.e(6)]).then(e.bind(null,"OyQA"))},loading:function(){return null},modules:["Notification"]}),b=i.a.createElement,d=function(n){var t=n.notifications,e=n.onRemove;return b(i.a.Fragment,null,t.map((function(n){var t=n.id,o=Object(p.a)(n,["id"]);return b(w,Object(l.a)({onRemove:e},o,{key:t,id:t}))})))},O=i.a.createElement,m=Object(r.b)((function(n){return{notifications:f(n)}})),j=function(n){var t=n.dataset.id;Object(s.b)(t)},g=m((function(n){var t=n.notifications;return O(d,{onRemove:j,notifications:t})}));t.default=g},fW1p:function(n,t,e){var o=e("Y7ZC"),i=e("E8gZ")(!1);o(o.S,"Object",{values:function(n){return i(n)}})},nhzr:function(n,t,e){e("fW1p"),n.exports=e("WEpk").Object.values}}]);

This looks like output from Webpack 4.
If the site you're looking at exposes source maps, you will see a section under sources in your browser's dev tools labelled "Webpack", which will contain the source for the scripts bundled using Webpack.
If the site doesn't expose source maps, the first step is to format the code. You can then start manually renaming variables as you figure out what they do. In this case, there must be more scripts on the site because there seem to be references to modules not defined in the file.
Passing this code through Prettier gives:
(window.webpackJsonp = window.webpackJsonp || []).push([
[7],
{
"2wwy": function(n, t, e) {
n.exports = e("nhzr");
},
E8gZ: function(n, t, e) {
var o = e("jmDH"),
i = e("w6GO"),
r = e("NsO/"),
u = e("NV0k").f;
n.exports = function(n) {
return function(t) {
for (var e, c = r(t), a = i(c), f = a.length, s = 0, l = []; f > s; )
(e = a[s++]), (o && !u.call(c, e)) || l.push(n ? [e, c[e]] : c[e]);
return l;
};
};
},
f0Zw: function(n, t, e) {
"use strict";
e.r(t);
var o = e("q1tI"),
i = e.n(o),
r = e("/MKj"),
u = e("2wwy"),
c = e.n(u),
a = e("G4qV"),
f = Object(a.a)(
function(n) {
return n.g_notifications;
},
function(n) {
return c()(n);
}
),
s = e("F7NL"),
l = e("kOwS"),
p = e("qNsG"),
v = e("CnBM"),
w = e.n(v)()({
loader: function() {
return Promise.all([e.e(0), e.e(6)]).then(e.bind(null, "OyQA"));
},
loading: function() {
return null;
},
modules: ["Notification"]
}),
b = i.a.createElement,
d = function(n) {
var t = n.notifications,
e = n.onRemove;
return b(
i.a.Fragment,
null,
t.map(function(n) {
var t = n.id,
o = Object(p.a)(n, ["id"]);
return b(w, Object(l.a)({ onRemove: e }, o, { key: t, id: t }));
})
);
},
O = i.a.createElement,
m = Object(r.b)(function(n) {
return { notifications: f(n) };
}),
j = function(n) {
var t = n.dataset.id;
Object(s.b)(t);
},
g = m(function(n) {
var t = n.notifications;
return O(d, { onRemove: j, notifications: t });
});
t.default = g;
},
fW1p: function(n, t, e) {
var o = e("Y7ZC"),
i = e("E8gZ")(!1);
o(o.S, "Object", {
values: function(n) {
return i(n);
}
});
},
nhzr: function(n, t, e) {
e("fW1p"), (n.exports = e("WEpk").Object.values);
}
}
]);

finding yourself in this is almost impossible, I mean that the result of decoding was on this principle:
var func = {
init: function() {
console.log('test');
this.set();
},
set: function(){
$('.body .test').innerHTML = 'test';
}
}
func.init();
easy and legible

Redirect on JQuery between other functions

How do I redirect to any page after the script below got sucess?
Something like: If the code below did everything right, I need to go to the thanks page. Please help me. Thanks
jQuery(function(t) {
var e = function() {
var e = ("https:" == location.protocol ? "https:" : "http:") + "//formoid.net/api/push",
a = function() {
var e = (/MSIE (\d+)\./.exec(navigator.userAgent) || [0, 0])[1]
return 8 == e || 9 == e && "file:" != location.protocol ? function(e, a) {
var n = new XDomainRequest,
r = t.Deferred()
return n.open(a.type, e), n.onload = function() {
r.resolve(this.responseText)
}, n.onerror = function() {
r.reject()
}, n.send(a.data), r
} : (t.support.cors = !0, t.ajax)
}(),
n = function(t, e) {
return t = "__" + t + "__", e.length ? (this[t] = e[0], this) : this[t]
},
r = function(e, a, n) {
return t.each(n, function(t, n) {
e[n] = function() {
return a[n].apply(a, arguments)
}
}), e
},
i = function(t) {
t = t || {}, this.__email__ = t.email || "", this.__title__ = t.title || "", this.__data__ = t.data || []
}
return i.prototype.email = function(t) {
return n.call(this, "email", arguments)
}, i.prototype.title = function(t) {
return n.call(this, "title", arguments)
}, i.prototype.data = function(t) {
return n.call(this, "data", arguments)
}, i.prototype.send = function(n, i) {
var o = r(t.Deferred(), this, ["email", "title", "data", "send"])
return i && (i.call(this, o), "pending" != o.state()) ? o : (a(e, {
type: "POST",
data: JSON.stringify({
email: this.__email__,
form: {
title: this.__title__,
data: arguments.length ? n : this.__data__
}
})
}).done(function(t) {
try {
var e = JSON.parse(t)
e.error ? o.reject(e.error) : o.resolve(e.response)
} catch (a) {
o.reject("Incorrect server response.")
}
}).fail(function() {
var t = "Failed to query the server. "
t += "onLine" in navigator && !navigator.onLine ? "No connection to the Internet." : "Check the connection and try again.", o.reject(t)
}), o)
}, {
Form: function(t) {
return new i(t)
}
}
}(),
a = function(e) {
if (e.checkValidity) return e.checkValidity()
var a = !0,
n = t(e).val(),
r = t(e).attr("type")
return n ? a = !("email" === r && !/^([^#]+?)#(([a-z0-9]-*)*[a-z0-9]+\.)+([a-z0-9]+)$/i.test(n)) : t(e).attr("required") && (a = !1), t(e)[(a ? "remove" : "add") + "Class"]("form-invalid"), a
}
t('[data-form-type="formoid"]').each(function() {
var n, r = t(this),
i = r.is("form") ? r : r.find("form"),
o = r.find("[data-form-alert]"),
s = r.is("[data-form-title]") ? r : r.find("[data-form-title]"),
l = r.find('[type="submit"]'),
c = o.attr("data-success") || o.find("[data-form-alert-success]").html()
l.html('<span class="btn-text">' + l.html() + '</span><i class="btn-loader"></i>').click(function() {
i.addClass("form-active")
}), i.submit(function(d) {
if (d.preventDefault(), i.addClass("form-active"), !l.hasClass("btn-loading")) {
var f = !0,
u = []
n = n || e.Form({
email: r.find("[data-form-email]").val(),
title: s.attr("data-form-title") || s.text()
}), o.html(""), r.find("[data-form-field]").each(function() {
a(this) || (f = !1), u.push([t(this).attr("data-form-field") || t(this).attr("name"), t(this).val()])
}), f && (l.addClass("btn-loading").prop("disabled", !0), n.send(u).done(function(e) {
i.removeClass("form-active"), r.find("[data-form-field]").val(""), o.append(t('<div class="alert alert-form alert-success text-xs-center"/>').text(c || e))
}).fail(function(e) {
o.append(t('<div class="alert alert-form alert-danger text-xs-center"/>').text(e))
}).always(function() {
l.removeClass("btn-loading").prop("disabled", !1)
}))
}
})
})
})
Everything works fine but in the end I want to redirect to a page right after the form data has been sent. Can you help me? Thanks

Bind an event to the submit of the form, if you have one, or run a callback after a successful response comes back from the server and use window.location to send the user to your desired URL. More information on window.location can be found here: https://developer.mozilla.org/en-US/docs/Web/API/Window/location. (Look at the example #1)
I can't say more than that from the code you shared.

Angular filter with typescript is not working after minification

I wrote an angular filter with typescript which works fine until I minify the source code.
Here is the filter:
module App.Test {
export interface IGroupingFilter extends ng.IFilterService {
(name:"grouping-filter"): (collection:any[]) => collection:any[];
}
class GroupingFilter {
static $inject:string[] = ["underscore"];
static ConvertDateTime(item:any):number {
var time = "" + item.time;
var newTime = (time.length == 3) ? "0" + time : time;
return +(item.pickupDate.replace(/\-/g, '') + newTime);
}
public static Factory(underscore:UnderscoreStatic) {
return underscore.memoize((collection:any[]) => {
var groupKey = "id";
var group:any = underscore.groupBy(collection, (item:any) => {
return item[groupKey];
});
var grpArray = [];
angular.forEach(group, (item) => {
grpArray.push({
"groupKey": item[0][groupKey],
"items": item
});
});
var grpArraySorted = underscore.sortBy(grpArray, (grpObj:any) => {
var min:any = underscore.min(grpObj.items, (item:any) => {
return GroupingFilter.ConvertDateTime(item);
});
return GroupingFilter.ConvertDateTime(min);
});
return grpArraySorted;
});
}
}
angular.module("app").filter("groupingFilter", GroupingFilter.Factory);
}
Here is the minified version:
var App;
!function (t) {
var e;
!function (t) {
var e = function () {
function t() {
}
return t.ConvertDateTime = function (t) {
var e = "" + t.time, r = 3 == e.length ? "0" + e : e;
return +(t.pickupDate.replace(/\-/g, "") + r)
}, t.Factory = function (e) {
return e.memoize(function (r) {
var n = "id", i = e.groupBy(r, function (t) {
return t[n]
}), o = [];
angular.forEach(i, function (t) {
o.push({groupKey: t[0][n], items: t})
});
var a = e.sortBy(o, function (r) {
var n = e.min(r.items, function (e) {
return t.ConvertDateTime(e)
});
return t.ConvertDateTime(n)
});
return a
})
}, t.$inject = ["underscore"], t
}();
angular.module("app").filter("groupingFilter", e.Factory)
}(e = t.Test || (t.Test = {}))
}(App || (App = {}));
Here is the angular error message
Error: [$injector:unpr] Unknown provider: eProvider <- e <-
groupingFilterFilter
Many thanks

The reason it does not work when minified is that you inject "underscore" into the FooFilter class not the actual filter, which is the result of FooFilter.Factory. To create such a simple filter you don't really need a class, just pass a simple function.
angular.module('app').filter('fooFilter', fooFilter);
fooFilter.$inject = ['underscore'];
function fooFilter(underscore) {
return underscore.memoize((collection:any[]) => {
return underscore.shuffle(collection);
});
}
If you really want to write the filter factory function as a static class method, you could use the array syntax like this:
angular.module("app")
.filter("groupingFilter", ['underscore', GroupingFilter.Factory]);
Remove the $inject array from your class in this case.