We Keep Coding

Add tinymce editor to element object instead of selector

I have a custom-element (Aurelia equivelent of a web component) that creates a tinymce editor. There is no way to select the textarea by using a selector (because there can exist any number of these custom-elements on a page). I need some way of initializing the tinymce instance by passing it the element object. Is there such a possibility? I haven't been able to find this functionality anywhere...
Thanks in advance.

Sorry that I'm a bit late. I had this exact same problem. I used an Angular directive, and I wanted to initialize TinyMCE on $element. It turns out you can use this syntax:
var element = getYourHTMLElementSomehow();
//...
tinymce.init({
target: element
});
So you don't use selector at all, and instead use target.
I had to look in the source code for this, because it doesn't seem to be explicitly documented anywhere.

Since TinyMCE seems to require you to use a selector and won't let you simply pass an element instance (and the developer doesn't seem to grasp the utility of this use-case, based on his forum responses), your best bet would be to do something like this:
View
<template>
<textarea id.one-time="uniqueId" ...other bindings go here...></textarea>
</template>
ViewModel
export class TinyMceCustomElement {
constructor() {
this.uniqueId = generateUUID();
}
attached() {
tinymce.init({
selector: `#${this.uniqueId}`,
inline: true,
menubar: false,
toolbar: 'undo redo'
});
}
}
function generateUUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
return v.toString(16);
});
}
My UUID function comes from here: Create GUID / UUID in JavaScript?

Convert a minified jQuery plugin into a plain JavaScript plugin

I'm running a project where people can find doctors on the map and And book Online , ...
Previously I decided to use Angularjs and change the whole project, so I had to forget about some jQuery plugins which I've used before.
**Problem ** :
I'm using a jQuery plugin that works awesome with Google map API (Landcarte) , and I haven't find anything else to compare with this plugin in AngularJS.
So I couldn't do anything but to use both jquery and angular and this plugin in my site , But I dont know , I feel that its wrong to use both jquery and angular because I think that makes my firstload heavy.
**Questions : **
1- Is this possible to convert this plugin into a normal Javascript so I can omit the Jquery in my site ?
2- If not , What can I do ?
3- Can I use RequireJS to load jquery and this plugin later in my site ? (I dont know how to :()

I don't know about the Landcarte plugin so I can't help you with question 1.
If you want to initialize a jquery plugin but it's not working, a common cause of the problem is that the DOM is not ready yet.
To solve this, there are three options:
Method 1 Initialize the plugin inside of the link property of your directive. Within the link function, the children of the directive element have already been compiled and linked. If your plugin relies only on the children of the element being DOM ready, then this option is suitable.
app.directive('myDirective', function(){
return {
link: function(scope, element,attr){
element.plugin();
}
}
});
Method 2 Using $evalAsyc which runs after the compile and link phase but before the Render phase. Use this method if your plugin relies on the entire page being DOM ready, but it is not important that expressions have been rendered.
app.directive('myDirective', function(){
return {
link: function(scope, element,attr){
scope.$evalAsync(function(scope){
element.plugin();
});
}
}
});
Method 3 Using $timeout which runs after the render phase. Use this method if your plugin relies on the entire page being DOM ready, and all the expressions have been rendered.
app.directive('myDirective', function($timeout){
return {
link: function(scope, element,attr){
$timeout(function(){
element.plugin();
});
}
}
});
Depending on the plugin, one of these options should work for you. Prefer one that meets the need of the plugin minimally - meaning prefer option 1, over option 2, over option 3, but ultimately go with the one that works.

To turn min.js file into normal.js you can use this
but it just set tabulations and spaces and make script readable.
For example this script:
var a={log:function(){try{var e=Array.prototype.slice.call(arguments);if(typeof e[0]==="string"){if(/[\{\}]/.test(e[0])&&e.length>1){var t=e.length>2?e.slice(1):e[1];return console.log(this.text(e[0],t))}}return console.log.apply(console,e)}catch(n){}}}
will be:
var a = {
log: function () {
try {
var e = Array.prototype.slice.call(arguments);
if (typeof e[0] === "string") {
if (/[\{\}]/.test(e[0]) && e.length > 1) {
var t = e.length > 2 ? e.slice(1) : e[1];
return console.log(this.text(e[0], t))
}
}
return console.log.apply(console, e)
} catch (n) {}
}
}

Landcarte can be used in a pure JS code without jQuery as well. A map can be initialized by an explicit call of the at.geo.Map class constructor:
var container = document.getElementById("map");
var map = new at.geo.Map(container);
This class is mentioned in the reference.

Any reason why this javascript blink code won't work?

I have the below code in the second of two js files from a web-app.
It works fine, until I combine the two js files into one. Then the js breaks.
function oBlink()
{
return window.setInterval
(
function()
{
$("#sOr").css("background-color", function (){ this.switch = !this.switch; return this.switch ? "#F90" : "" });
}
, 500
);
}
I've isolated the problem to the code
this.switch = !this.switch; return this.switch ? "#F90" : ""
If I take that out, the rest of my js works fine.
I understand there are a lot of external variables that could be coming into play here, but I just wanted to check with you guys that the above function code doesn't have any errors in it.
Thanks for taking a look.

it's working fine in the browser, but failing when checking it on certain devices in the Android emulator.
That's probably because you are using switch in your code which is a reserved word in JavaScript. Only ECMAScript5-based browsers allow using reserved words as object's properties.
Instead of using a flag you can declare a CSS class and use the jQuery's toggleClass method.

Make sure you define somewhere
switch = false
Then Try
$("#sOr").css("background-color", function (){ this.switch =
!this.switch; return (this.switch ? "#F90" : "#FFF" ) });

Javascript: How to check if element is visible?

i'm using the lightweight zepto.js framework and now I need to test if an element on the page is visible or not … this my case:
A button triggers the function show_guides().
function show_guides() {
$('#guides').toggle();
if ( $('#guides').is(':visible') ) { // does not work
//$.cookie('guides_visible', 'true');
console.log("visible");
} else {
console.log("invisible");
//$.cookie('guides_visible', null);
}
}
If the $('#guides') are visible I want to save a cookie and if they are not I want to get rid of it.
However zepto.js doesn't support selectors like :visible so I have to find a different way.
Any ideas how to do that? Right now I'm getting the following error:
Uncaught Error: SYNTAX_ERR: DOM Exception 12
In the zepto documentation i've read this …
For basic support of jQuery’s non-standard pseudo-selectors such as
:visible, include the optional “selector” module.
But I have no idea how to include this.
Anybody out the who could help me out here? Thank you in advance.

You can check the display CSS property:
function show_guides() {
$('#guides').toggle();
if ( $('#guides').css('display') == 'block' ) {
console.log("visible");
} else {
console.log("invisible");
}
}

try
style.display="block";
and
style.display="hidden";

You can check visibility:visible/hidden, or display:block/none
$('#guides').css('visibility') == 'visible'
$('#guides').css('display') == 'block'

If all you want is to check visibility you can just use this
function visible(elem){
elem = $(elem)
return !!(elem.width() || elem.height()) && elem.css("display") !== "none"
}
taken straight from the zepto selectors plugin. Otherwise you can just include the selectors module from https://github.com/madrobby/zepto/blob/master/src/selector.js as Felix Kling suggested

jQuery not Working on my site

I have this code: http://jsfiddle.net/AH4As/3/
It works in the fiddle, but on my site, it does not. I'm getting this error in Web Inspector
Tracking.js:4TypeError: 'undefined' is not an object (evaluating '$('a').attr('onClick').replace')
Does anybody know what wrong?
Here's my source code: http://jsfiddle.net/AH4As/24/

UPDATED:
$(document).ready(function(){
$('a').attr('onClick', $('a').attr('onClick').replace("window.open('", "window.open('http://example.com/"));
});
​
http://jsfiddle.net/AH4As/10/
And here it is with an alert to show you the code has been changed:
http://jsfiddle.net/AH4As/11/

Try:
$('a').removeAttr('onclick').click(function(){window.open('http://example.com');return false;});

What about:
$(document).ready(function(){
$('a').removeAttr('onclick');
$('a').click(function(){
window.open('http://www.example.com', '','location=1,menubar=1,scrollbars=1,status=1,resizable=1,width=635,height=460');
});
});

You won't be able to (reliably) replace on the onclick with jQuery 1.4:
'function' === typeof $('a').attr('onclick');
And Functions don't have replace methods:
'undefined' === typeof $('a').attr('onclick').replace;
You're getting a function because jQuery is returning the property value rather than the attribute value.
The confusion from this is why jQuery added the .prop() method in 1.6 -- so it's clear that you want the attribute value, not the property value:
// with jQuery 1.6+
'string' === typeof $('a').attr('onclick');
Now, if you're not able to update jQuery currently, you can try inserting a toString before the replace:
$('a').attr('onclick').toString().replace(...)
On a side-note: for better coupling of the original and adjusted value, you may look at using an alternate syntax for .attr():
$('a').attr('onclick', function (i, value) {
return value.toString().replace('window.open(\'', 'window.open(\'http://example.com/'));
});

Other anchors on the page made the Query fail, in a nutshell this was my solution:
<script type="text/javascript">
$(document).ready(function(){
$('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick', $('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick').replace("window.open('", "window.open('http://eastcoasttvs.com/"));
});
</script>