We Keep Coding

Angular, config with dynamic data

See update below.
Original question:
This might be a fundemental question about Angular. But here is the full context.
I use the Angular plugin TextAngular (1.2.2). I am trying to extend the toolbars with extra buttons. Extending the toolbar in code (client side) works rather well (se snippet below).
But i want to create buttons which i define serverside - thus they have to be downloaded to the client. When i introduce an async call (by using a service) and try to inject the config in the callback, the toolbar buttons does not show up. I suspect that this is because the angular engine needs to configure the textangular plugin, before instantiating. I have tried to create a provider, instead of a service, and feed that to the .config(), but then i get an exception about the provider not being found.
The static approach works rather well. But how should i approach this with dynamic data?
//Module
var myApp = angular.module('myApp', ['textAngular']);
//Configuration
myApp.config(function($provide) {
$provide.decorator('taOptions', ['taRegisterTool', '$delegate',
function(taRegisterTool, taOptions) {
//I found these helpers somewhere
var insertToolHelper = {
insertTextAtCursor: function(text) {
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode(document.createTextNode(text));
}
} else if (document.selection && document.selection.createRange) {
document.selection.createRange().text = text;
}
},
moveCaret: function(charCount) {
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount > 0) {
var textNode = sel.focusNode;
sel.collapse(textNode.nextSibling, charCount);
}
} else if ((sel = window.document.selection)) {
if (sel.type != "Control") {
range = sel.createRange();
range.move("character", charCount);
range.select();
}
}
}
};
var customToolbarElements = [{
value: "$name",
description: "Name",
faIcon: "fa fa-user"
}, {
value: "$today",
description: "Date",
faIcon: "fa fa-calendar"
}];
taOptions.toolbar.push([]); //Tilføj ny toolbar
angular.forEach(customToolbarElements, function(item) {
taRegisterTool(item.description, {
iconclass: item.faIcon,
tooltiptext: item.description,
action: function() {
insertToolHelper.insertTextAtCursor(item.value);
return insertToolHelper.moveCaret(1);
}
});
// register the tool with textAngular
taOptions.toolbar[4].push(item.description);
}, this);
return taOptions;
}
]);
});
Update:
Based on Simeons post, i managed to get the dynamic toolbuttons like this:
//Module
var myApp = angular.module('myApp', ['textAngular']);
//Service
myApp.service('ConfigurationData', [
'$http', '$q', function (http, q) {
var deferredConfig = q.defer();
//This method returns someting like [{ value: "name", description: "Person name", faIcon: "fa fa-user" }];
http.get(location.pathname + '/api/templates').success(function (data) {
return deferredConfig.resolve(data);
});
return {
getConfig: function () {
return deferredConfig.promise;
}
};
}
]);
//Controller
myApp.controller('SettingsCtrl', [
'$scope', 'textAngularManager', 'ConfigurationData',
function ($scope, $rootScope, textAngularManager, configurationData) {
var insertToolHelper = {
insertTextAtCursor: function (text) {
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode(document.createTextNode(text));
}
} else if (document.selection && document.selection.createRange) {
document.selection.createRange().text = text;
}
},
moveCaret: function (charCount) {
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount > 0) {
var textNode = sel.focusNode;
sel.collapse(textNode.nextSibling, charCount);
}
} else if ((sel = window.document.selection)) {
if (sel.type != "Control") {
range = sel.createRange();
range.move("character", charCount);
range.select();
}
}
}
};
configurationData.getConfig().then(function (config) {
var customToolbarElements = config.jsonArrayFromService;
angular.forEach(customToolbarElements, function (item) {
var desc = item.description ? item.description : "unknown tool";
textAngularManager.addTool(desc, {
iconclass: item.faIcon ? item.faIcon : "fa fa-gear",
tooltiptext: desc,
action: function () {
insertToolHelper.insertTextAtCursor(item.value);
return insertToolHelper.moveCaret(1);
}
});
}, this);
});
}
]);

You want to have a look at the textAngularManager service, the two functions you'll want to look at are:
// toolkey, toolDefinition are required. If group is not specified will pick the last group, if index isnt defined will append to group
textAngularManager.addTool(toolKey, toolDefinition, group, index)
// adds a Tool but only to one toolbar not all
textAngularManager.addToolToToolbar(toolKey, toolDefinition, toolbarKey, group, index)
They don't need to be called in the provider so you can add Tools at any time (there is also a removeTool function as well).
The problem you faced is that config is only called once when the module is loaded.

Javascript Detect if Adobe Reader is installed

We have some PDF forms that don't display correctly in non-Adobe PDF readers (i.e. WebKit's built-in PDF reader does not properly display some proprietary Adobe things). We want to detect when users don't have Adobe's PDF Reader installed and give them a little warning, but I'm having a hard time figuring out how to do it in 2014.
It seems this script worked in 2011. Basically it loops through navigator.plugins and looks for plugins with the name Adobe Acrobat or Chrome PDF Viewer.
for(key in navigator.plugins) {
var plugin = navigator.plugins[key];
if(plugin.name == "Adobe Acrobat") return plugin;
}
Flash forward to today, Adobe must have changed something, because I have Adobe Acrobat installed, but it doesn't seem to be in navigator.plugins! Where is it now and how do I detect it?

Ok I've updated the script and it's working perfectly fine in all browsers now:
<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<script>
//
// http://thecodeabode.blogspot.com
// #author: Ben Kitzelman
// #license: FreeBSD: (http://opensource.org/licenses/BSD-2-Clause) Do whatever you like with it
// #updated: 03-03-2013
//
var getAcrobatInfo = function() {
var getBrowserName = function() {
return this.name = this.name || function() {
var userAgent = navigator ? navigator.userAgent.toLowerCase() : "other";
if(userAgent.indexOf("chrome") > -1){
return "chrome";
} else if(userAgent.indexOf("safari") > -1){
return "safari";
} else if(userAgent.indexOf("msie") > -1 || navigator.appVersion.indexOf('Trident/') > 0){
return "ie";
} else if(userAgent.indexOf("firefox") > -1){
return "firefox";
} else {
//return "ie";
return userAgent;
}
}();
};
var getActiveXObject = function(name) {
try { return new ActiveXObject(name); } catch(e) {}
};
var getNavigatorPlugin = function(name) {
for(key in navigator.plugins) {
var plugin = navigator.plugins[key];
if(plugin.name == name) return plugin;
}
};
var getPDFPlugin = function() {
return this.plugin = this.plugin || function() {
if(getBrowserName() == 'ie') {
//
// load the activeX control
// AcroPDF.PDF is used by version 7 and later
// PDF.PdfCtrl is used by version 6 and earlier
return getActiveXObject('AcroPDF.PDF') || getActiveXObject('PDF.PdfCtrl');
} else {
return getNavigatorPlugin('Adobe Acrobat') || getNavigatorPlugin('Chrome PDF Viewer') || getNavigatorPlugin('WebKit built-in PDF');
}
}();
};
var isAcrobatInstalled = function() {
return !!getPDFPlugin();
};
var getAcrobatVersion = function() {
try {
var plugin = getPDFPlugin();
if(getBrowserName() == 'ie') {
var versions = plugin.GetVersions().split(',');
var latest = versions[0].split('=');
return parseFloat(latest[1]);
}
if(plugin.version) return parseInt(plugin.version);
return plugin.name
}
catch(e) {
return null;
}
}
//
// The returned object
//
return {
browser: getBrowserName(),
acrobat: isAcrobatInstalled() ? 'installed' : false,
acrobatVersion: getAcrobatVersion()
};
};
var info = getAcrobatInfo();
alert(info.browser+ " " + info.acrobat + " " + info.acrobatVersion);
</script>
</head>
<body>
</body>
</html>

CreateTextRange is not working in Chrome

In this code, createRange is not working in Chrome. In IE it is working. Please help how to rectify in this. Is there any other property to work like create range. So that it will helpful for my project.
<script language=javascript>
var isSelected;
function markSelection ( txtObj ) {
if ( txtObj.createTextRange ) {
txtObj.caretPos = document.selection.createRange().duplicate();
isSelected = true;
}
}
function insertTag ( txtName, enclose ) {
if(document.f_activity_email == null) {
var tag = document.getElementById('EmailTokenID').value;
}
else {
var formC = document.f_activity_email;
var tag = formC.EmailTokenID.value;
}
var closeTag = tag;
if ( enclose ) {
var attribSplit = tag.indexOf ( ' ' );
if ( tag.indexOf ( ' ' ) > -1 )
closeTag = tag.substring ( 0, attribSplit );
}
if ( isSelected ) {
var txtObj = eval ( "document.forms[0]." + txtName );
if (txtObj.createTextRange && txtObj.caretPos) {
var caretPos = txtObj.caretPos;
caretPos.text = ( ( enclose ) ? "<"+tag+">"+caretPos.text+"</"+closeTag+">" : tag+caretPos.text );
markSelection ( txtObj );
if ( txtObj.caretPos.text=='' ) {
isSelected=false;
txtObj.focus();
}
}
} else {
// placeholder for loss of focus handler
}
}

CreateTextRange is a Microsoft specific function, but there is an easy work around.
Use createRange instead as in this post for example:
if (document.selection) { //IE
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select();
} else if (window.getSelection) { //others
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
}

I had this issue with node's JSDOM and codemirror (which attempts to use document.createRange)
It happens because document.createRange (chrome) does not exist ATM on JSDOM and so it tries to use document.body.createTextRange (IE) instead and falls over.
To fix this I had to stub the document.createRange function in my unit test setup as follows:
global.document.createRange = () => {
return {
setEnd: () => {},
setStart: () => {},
getBoundingClientRect: () => {}
}
}
There is talk about JSDOM polyfilling document.createRange:
See https://github.com/tmpvar/jsdom/issues/399
At the time of writing this has not yet happened.

createTextRange is only in IE.
Have a look at this one
http://help.dottoro.com/ljrvjsfe.php

As of March 31, 2020. This works for mocking JSDOM for jest unit tests
(window as any).global.document.createRange = () => {
return {
setEnd: () => {},
setStart: () => {},
getBoundingClientRect: () => {},
getClientRects: () => []
};
};

Bad escaping of EOL

I am trying to work with a simple WYSIWYG editor. JSLint is saying it has "Bad escaping of EOL". Since I am new to javascript I am having a hard time figuring out what it means, since I am working with code found online. Can anyone tell me please what I should be doing instead of ending the line with a slash?
Here is the code in question: http://jsfiddle.net/spadez/KSA5e/9/
/*
* WYSIWYG EDITOR BASED ON JQUERY RTE
*/
// define the rte light plugin
(function ($) {
if (typeof $.fn.rte === "undefined") {
var defaults = {
content_css_url: "rte.css",
dot_net_button_class: null,
max_height: 350
};
$.fn.rte = function (options) {
$.fn.rte.html = function (iframe) {
return iframe.contentWindow.document.getElementsByTagName("body")[0].innerHTML;
};
// build main options before element iteration
var opts = $.extend(defaults, options);
// iterate and construct the RTEs
return this.each(function () {
var textarea = $(this);
var iframe;
var element_id = textarea.attr("id");
// enable design mode
function enableDesignMode() {
var content = textarea.val();
// Mozilla needs this to display caret
if ($.trim(content) === '') {
content = '<br />';
}
// already created? show/hide
if (iframe) {
console.log("already created");
textarea.hide();
$(iframe).contents().find("body").html(content);
$(iframe).show();
$("#toolbar-" + element_id).remove();
textarea.before(toolbar());
return true;
}
// for compatibility reasons, need to be created this way
iframe = document.createElement("iframe");
iframe.frameBorder = 0;
iframe.frameMargin = 0;
iframe.framePadding = 0;
iframe.height = 200;
if (textarea.attr('class')) iframe.className = textarea.attr('class');
if (textarea.attr('id')) iframe.id = element_id;
if (textarea.attr('name')) iframe.title = textarea.attr('name');
textarea.after(iframe);
var css = "";
if (opts.content_css_url) {
css = "<link type='text/css' rel='stylesheet' href='" + opts.content_css_url + "' />";
}
var doc = "<html><head>" + css + "</head><body class='frameBody'>" + content + "</body></html>";
tryEnableDesignMode(doc, function () {
$("#toolbar-" + element_id).remove();
textarea.before(toolbar());
// hide textarea
textarea.hide();
});
}
function tryEnableDesignMode(doc, callback) {
if (!iframe) {
return false;
}
try {
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(doc);
iframe.contentWindow.document.close();
} catch (error) {
console.log(error);
}
if (document.contentEditable) {
iframe.contentWindow.document.designMode = "On";
callback();
return true;
} else if (document.designMode !== null) {
try {
iframe.contentWindow.document.designMode = "on";
callback();
return true;
} catch (error) {
console.log(error);
}
}
setTimeout(function () {
tryEnableDesignMode(doc, callback);
}, 500);
return false;
}
function disableDesignMode(submit) {
var content = $(iframe).contents().find("body").html();
if ($(iframe).is(":visible")) {
textarea.val(content);
}
if (submit !== true) {
textarea.show();
$(iframe).hide();
}
}
// create toolbar and bind events to it's elements
function toolbar() {
var tb = $("<div class='rte-toolbar' id='toolbar-" + element_id + "'><div>\
<p>\
<a href='#' class='bold'>Bold</a>\
<a href='#' class='italic'>Italic</a>\
<a href='#' class='unorderedlist'>List</a>\
</p></div></div>");
$('.bold', tb).click(function () {
formatText('bold');
return false;
});
$('.italic', tb).click(function () {
formatText('italic');
return false;
});
$('.unorderedlist', tb).click(function () {
formatText('insertunorderedlist');
return false;
});
// .NET compatability
if (opts.dot_net_button_class) {
var dot_net_button = $(iframe).parents('form').find(opts.dot_net_button_class);
dot_net_button.click(function () {
disableDesignMode(true);
});
// Regular forms
} else {
$(iframe).parents('form').submit(function () {
disableDesignMode(true);
});
}
var iframeDoc = $(iframe.contentWindow.document);
var select = $('select', tb)[0];
iframeDoc.mouseup(function () {
setSelectedType(getSelectionElement(), select);
return true;
});
iframeDoc.keyup(function () {
setSelectedType(getSelectionElement(), select);
var body = $('body', iframeDoc);
if (body.scrollTop() > 0) {
var iframe_height = parseInt(iframe.style['height']);
if (isNaN(iframe_height)) iframe_height = 0;
var h = Math.min(opts.max_height, iframe_height + body.scrollTop()) + 'px';
iframe.style['height'] = h;
}
return true;
});
return tb;
}
function formatText(command, option) {
iframe.contentWindow.focus();
try {
iframe.contentWindow.document.execCommand(command, false, option);
} catch (e) {
//console.log(e)
}
iframe.contentWindow.focus();
}
function setSelectedType(node, select) {
while (node.parentNode) {
var nName = node.nodeName.toLowerCase();
for (var i = 0; i < select.options.length; i++) {
if (nName == select.options[i].value) {
select.selectedIndex = i;
return true;
}
}
node = node.parentNode;
}
select.selectedIndex = 0;
return true;
}
function getSelectionElement() {
if (iframe.contentWindow.document.selection) {
// IE selections
selection = iframe.contentWindow.document.selection;
range = selection.createRange();
try {
node = range.parentElement();
} catch (e) {
return false;
}
} else {
// Mozilla selections
try {
selection = iframe.contentWindow.getSelection();
range = selection.getRangeAt(0);
} catch (e) {
return false;
}
node = range.commonAncestorContainer;
}
return node;
}
// enable design mode now
enableDesignMode();
}); //return this.each
}; // rte
} // if
$(".rte-zone").rte({});
})(jQuery);
EDIT: For bonus marks there are also two other errors which I haven't been able to squish -
Missing radix parameter
Height is better written in dot notation

JS didn't support end-of-line escaping with \ until ES5 - you can use multiple strings with a + operator instead, i.e.
"string 1" +
"string 2" +
"string 3"
Re: your other questions:
Use parseInt(n, 10) to force base (aka radix) 10, i.e. decimal
Use iframe.style.height instead of iframe.style['height']

You have two options:
1) activate multistr: true as suggested by #csharpfolk. (You can do it at file level by adding /*jshint multistr: true */ or add it in your linter config file (.jshintrc, .eslintrc, etc.)).
2) Replace your multistring as suggested by #Altinak or use an array and join:
["string 1",
"string 2",
"string 3",
].join('')

Requirejs, Backbonejs browser support function

I need to check whether the browser is supported by my application and I do this the following way:
main.js (main require.js module)
define(['underscore', 'backbone', 'views/mainView', 'views/oldBrowser', 'ui', function(_, Backbone, mainView, oldBrowser){
var _browserHandshaking = function(){
var browserSupportedCookie = $.cookie('browserSupported');
var browserNameCookie = $.cookie('browserName');
var browserVersionCookie = $.cookie('browserVersion');
if(browserSupportedCookie === null){
if(/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
$.ui.browserName = 'chrome';
} else if(/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
$.ui.browserName = 'opera';
/Version[\/\s](\d+\.\d+)/.test(navigator.userAgent);
} else if(/MSIE (\d+\.\d+);/.test(navigator.userAgent)){
$.ui.browserName = 'ie';
} else if(/Safari[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
$.ui.browserName = 'safari';
/Version[\/\s](\d+\.\d+)/.test(navigator.userAgent);
} else if(/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
$.ui.browserName = 'firefox';
} else if(/webOS/i.test(navigator.userAgent)){
$.ui.browserName = 'webos';
} else if(/Android/i.test(navigator.userAgent)){
$.ui.browserName = 'android'
} else if(/iPhone/i.test(navigator.userAgent)){
$.ui.browserName = 'iphone';
} else if(/iPod/i.test(navigator.userAgent)){
$.ui.browserName = 'ipod';
} else if(/BlackBerry/i.test(navigator.userAgent)){
$.ui.browserName = 'blackberry';
}
if($.ui.browserName !== false){
// Set browser version.
if(!$.ui.browserVersion){
$.ui.browserVersion = parseFloat(new Number(RegExp.$1));
}
for(var browserName in $.ui.supportedBrowsers){
if($.ui.browserName === browserName){
if($.ui.browserVersion >= $.ui.supportedBrowsers[browserName]){
$.ui.browserSupported = true;
break;
}
}
}
$.cookie('browserVersion', $.ui.browserVersion, { expires: 7 });
$.cookie('browserName', $.ui.browserName, { expires: 7 });
$.cookie('browserSupported', $.ui.browserSupported, { expires: 7 });
}
} else {
$.ui.browserSupported = browserSupportedCookie;
$.ui.browserName = browserNameCookie;
$.ui.browserVersion = browserVersionCookie;
}
};
_browserHandshaking.call(this);
var Router = Backbone.Router.extend({
routes: {
"old-browser": "oldBrowser",
"*actions": "main",
},
oldBrowser: function(){
oldBrowser.render();
},
main: function(){
mainView.render();
}
});
$.ui.router = new Router();
// Start routing.
Backbone.history.start({
pushState: true,
root: $.ui.rootDir
});
});
Is there a function in Backbone.js that triggers at every action, there I could easily implement this:
preRouting: function(){
if(!$.ui.browserSupported){
return false;
}
return true;
}
I just need to check, if the browser is supported, and if it is supported it can call the mainView, else the oldBrowser view should be triggered, I just don't want to do this at each route function call.
Someone has a better solution for this? And does someone know if it is possible to create a check that is basically a prelimiter for a route function call.
Thanks for help :)

Based on comments, you can check for push state with: (from Can use pushState )
var hasPushstate = !!(window.history && history.pushState);
css3 animations with: ( from Detect css transitions using javascript (and without modernizr)? )
function supportsTransitions() {
var b = document.body || document.documentElement;
var s = b.style;
var p = 'transition';
if(typeof s[p] == 'string') {return true; }
// Tests for vendor specific prop
v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
p = p.charAt(0).toUpperCase() + p.substr(1);
for(var i=0; i<v.length; i++) {
if(typeof s[v[i] + p] == 'string') { return true; }
}
return false;
}
var hasCSS3Transitions = supportsTransitions();
There's no need to check the browser name/version if you can simply check to see if the browser has the functionality your application needs.