JavaScript

In one of my AngularJS projects, I am using the angular-split-pane directive which is basically wrapping the split-pane JQuery plugin. This directive finds out how to split the panes and position the slider by reading the height and width attributes of the HTML tag.

I needed to add a functionality to my application so that the position of the slider is written to some session file on the server and reused next time the application is started to reposition the sliders at the same position, basically setting the height of the lower pane in percentage.

The previous position is fetched using $http. The problem is that it runs asynchronously and by the time the results are there, the directive has already been processed and changing the height tag has no effect anymore.

You can define the order in which directives are run by setting the priority property. But I needed a way to have the directive processed after the results from the server were available, not after or before another directive is processed.

After searching for a solution for quite some time, I finally find a way of implementing it late at night. This is actually pretty simple but for some reason it took me forever to think about such a solution.

When I fetch the data from the server I set some variable in my scope e.g.:

Since I only want to execute the directive once the data is fetched, this means I want to have it executed once sessionModel.ui has a value. So all I need to do is add an ng-if attribute to my tag. Since the variable is initially not set, AngularJS will remove the element from the DOM and once the value is set, it will recreate it having the directive executed. So my tag would now look like this:

<split-pane ng-if="sessionModel.ui">

Of course the small disadvantage of this solution is that my UI is first shortly rendered without the split pane and when the data has been fetched, the split-pane is also rendered. In order not to have a partial rendering of the UI, you could of course move the ng-if attribute higher in your HTML code so that the whole UI is only rendered once the data from the server is available.

If your directive is not replacing the DOM element but just manipulating them, another solution would be to have the logic run asynchronously using $timeout and repeat until the data from the server is available. Or having it applied once the data is available by using $watch.

This will unfortunately not work and you will get the following error message in the JavaScript console:

Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

This basically means that the value we provided to ng-bind-html is not inherently safe and is also not marked as safe. So we need to mark it as trustworthy. This can be done by using $sce.trustAsHtml. An easy fix to the problem is to use the following:

Also note that if you want to set the HTML to the scope variable and then perform some DOM manipulation on this HTML code, you’ll run into a problem, because as long as your code is running, the data binding won’t be reflected until you return. Here is such an example:

For a current project, I needed to get the extension of a file being given it’s full path. In C#, you’d do something like this:

var extension = Path.GetExtension(path);

Unfortunately, we have no such possibility in JavaScript. Fortunately, writing a function returning the extension in JavaScript is not that difficult.

First you need to get the file name from the full path (basically getting rid of all parent directories in the path). In order to do this you have to also consider that you could either have a slash or a backslash as separator in the path.

The file name is basically, the last part of the path when you split it with the file path separator. This means you just need to use a split and a pop:

var filename = path.split('/').pop(); // when using slash as a file path separator
var filename = path.split('\\').pop(); // when using backslash as a file path separator

In order to handle both, you just need to do it twice:

var filename = path.split('\\').pop().split('/').pop();

It doesn’t really matter in which order you do it. If you use slashes, the first split/pop combination will not do anything. If you use backslashes, the second one will not do anything.

Getting the file name without path information is important because we’ll be searching for the extension based on dots in the path. If one of the parent directories does contain a dot, it will return a wrong results, so it’s safer to first get the file name without path information and then get the file extension.

Now we have the file name (without full path information), we need to extract the extension.

Let’s first look at which results we expect in different cases:

if the input name is an empty string, the returned extension should be an empty string as well

if the input name is does not contain any dots, the returned extension should be an empty string

if the input name contains only one dot and it’s the first character of the file name (e.g. .htpasswd), the returned extension should be an empty string

if the input name starts with a dot but contains another dot (e.g. .htpasswd.sav), the returned extension should be the part after the last dot

in general if the name contains any dots which are not at the beginning of the file, the returned extension should be the part after the last dot

You can get the index of the last dot in the file name using:

filename.lastIndexOf(".")

This will return -1 if no dot is present in the name. In this case, there is no extension and we can return an empty string:

Plupload is a very configurable JavaScript library you can use to allow your users to upload images. I’ve already used it in a few projects. I now wanted to use it in my current AngularJS project. Integrating Plupload in an AngularJS project is not especially difficult. There are already a few articles showing how this can be done. But it gets more difficult, when you try to integrate it into a dialog.

When initialized, Plupload puts an overlay above the browse button. This unfortunately only works if this element is displayed. If it is not displayed, the Plupload initialization will fail.

When working with dialogs, this means you need to execute the initialization of Plupload once the dialog is already displayed.

Let’s assume you have the use the following method to open a dialog using ngDialog:

You will see that although you do not get any kind of error, nothing will happen when you click on the browse button. This is because no overlay was added by Plupload. If you put a breakpoint in the controller code, you will see that the dialog is not yet displayed when the code runs.

This is because Plupload has issues rendering inside elements which are hidden at initialization time You need to “refresh” Plupload after the dialog has been displayed:

$scope.uploader.refresh();

Now we know the root cause of the problem, all we need to do is either call the refresh method after displaying the dialog or just initialize Plupload after displaying the dialog. The problem is that I never found out how to provide a callback to get triggered after the dialog has been displayed.

After googling for it with no result, I decided to do it with a hack (won’t win a design price with this one but it works). Assuming the dialog will never take more than 300 milliseconds to display and the user will need at least 300 milliseconds to find the browse button, you can just solve it by executing some code asynchronously using setTimeout or $timeout (since we work with AngularJS):

I am working on a project where users can be created and assigned an image. The natural choice to upload images is to use Plupload. Plupload is a well-known JavaScript library to upload images using a variaty of uploader runtimes. It provides an HTML4 and an HTML5 runtime but also a Flash and a Silverlight runtime. You can configure a list of runtimes. Plupload will check for you which one is available on the particular client.

The usual way to use Plupload is to let the user select files with a native dialog or using drag&drop. You then upload the file to some server side business logic and display the progress. In my case, I wanted something different. First I want to show the selected image to the user and second I want to store the image not on the server but in a model on the client (which contains other data and will eventually be stored somewhere).

In this article, I will describe how to display a preview of the image in a canvas and how to convert the image to a Data URI.

First you need to deploy Plupload on your web server and reference it’s JavaScript file e.g.:

<script src="vendor/plupload/plupload.full.min.js"></script>

Then you need to have some HTML code to define a button which will be clicked by the user to open the file browser and a tag to display the image preview:

We’ve defined that Plupload should use the selectfiles element to let the user open the file browser. If you use the Flash and/or Silverlight runtimes, you have to point Plupload to the URL of those SWF and XAP files. And we define that a user can only choose one file and that it needs to be a GIF, JPEG or PNG file. This all pretty standard.

The only special trick is that we use “about:blank” as URL for the upload. Actually, you can specify whatever you want. It just needs to be a non-empty string. Otherwise Plupload will not initialize successfully. But since we won’t use Plupload to actually upload the file, we do not care about the value of this option, as long as it is defined.

Then we’ll want to be notified when the user as selected a file. So we need to register for an event:

Now we’ll implement the filesAdded function. It will get the selected file and will need to embed that image in canvas in our preview element. Luckily, Plupload provides us with an Image class which provides us with all we need to do this:

Now once the user select a file, it will be displayed as a preview. Now once the user decides to save, we can use this preview to save the image (note that this works in my case because I only want to store a 100×100 image and do not need the original image):

var dataURI = $("#preview canvas")[0].toDataURL();

Now you can store the data URI however you want.

Additionally, if you have a previously stored data URI and want to display it in the preview area, you can use the following code:

I am working on a project where I have a board containing different lanes (a kind of grid) on which you can place cards and move them according to their completion status. In order to implement the drag&drop functionality, I am using the angular-dragdrop module.

It is a wrapper for jQueryUI draggable/droppable components which makes it easy to implement drag and drop functionality in AngularJS.

In order to install the module, just run the following in your terminal:

bower install angular-dragdrop

Then in order to load it, you need to reference its JavaScript file, just after the reference to angular.js (and also a reference to jQuery and jQuery UI which are used by this module):

I’ve just copied the index, placeholder and animate options from some example, so you’ll have to use Google to find more info on them.

revertCard and startCallBack are functions on my controller which are used to control the way the draggable element react.

The zIndex is set so that the element is on top of all other elements while dragged. In my first try, I hadn’t set the appendTo and helper options. Since my draggable elements where contained in a container on which the overflow property was set, I could not move it out of its container. That’s because the element being dragged still had the same parent as the original element.

So you need to attach the element being dragged to the body of the page so that it can be moved anywhere. Unfortunately, attachTo with the “body” value only works if the helper option is set to “clone” i.e. it will not detach the element from its current container and attach it to the body but needs to work with a clone of the element which can be attached to the body.

The drawback is that the original element is still displayed. This is fine if you are writing an editor with some toolbox and want to use drag&drop to create new instances of this element. But if you actually want to move the element, it just doesn’t look good. So you need to additionally hide the original element while its clone is being dragged. That’s what is done in the startCallback of my controller:

It makes sure that the clone element doesn’t grow to take up the whole screen (because its size is not limited by its parent anymore).

It hides it by setting its opacity to 0.

In one of my early tries, I had hidden the original element by using display:none. The problem is that all other elements in this container would then move because this element was not displayed anymore. But setting its opacity to 0, it works as an empty placeholder.

Later on, once the dragging is stopped, I’ll make it visible again if required (only if it is not dropped at a valid location).

Usually, you will find that most example will set the revert option to “invalid”. This means that if you drop the component outside of a valid drop area, the helper will just come back to the original location and disappear. The problem is that since we’ve hidden the original element, you will end up with no element displayed at all. Thankfully, revert can also take a function as value. This is our second callback:

Returning false will cause the helper to return to the original location. The default duration of the animation is 500 milliseconds. Before returning true of false, we check whether the drop location was valid and if yes, we make the original element visible again. If we set the opacity to “inherit” immediately, the original element would be visible while the helper is moving back to the original location. That’s why we make the CSS change with a timeout of 500 milliseconds so that the original element is made visible as soon as the revert animation is finished.

Now we have a working draggable element and just need to define droppable areas where we can drop it:

The hoverClass is just used so that we can display the droppable area below the mouse pointer differently.

The tolerance option is used so that the element is dropped on the area below the mouse pointer and not on the area below the corner of the dragged element. This is useful when the dragged element is larger than the droppable areas.

It updates the model so that the card is displayed on the lane it was dropped on.

It prevents dropping the card on the lane it was on before dragging.

The first part is pretty straightforward. The second one just involves checking the original lane ID and the lane ID on which the drop operation is being performed. If they do not match we allow the drop. Otherwise we return false which is similar to a revert. Unfortunately, returning false doesn’t cause the revert callback to be called. So I have to change the opacity of the original element before returning false.

You’ll also notice that I do not set a timeout of 500 milliseconds. This is because returning false in the drop callback doesn’t cause a revert animation to be executed. I haven’t yet found out how to do this. So the helper just immediately disappears and I have to make the original element visible immediately.

That’s it ! It was actually pretty easy. Since you can set any draggable and droppable options without limitation, having this angular module between you and jQuery UI doesn’t seem to introduce any additional limitation. And since all references to event handler all point to callback in your controller, everything stays clean.

Update: I’ve also come accross an issue with a button on the card. I’m using the angular dialog service to display a dialog when a button on the card is clicked (using ng-click to trigger a function in my controller). At first, nothing happened when clicking on the button. This is because the mouse click didn’t go to the button. The solution was to increase the z-index of the button to 500 i.e. higher than the 350 configured for the draggable card.

Prism is a is a lightweight and extensible syntax highlighter written in JavaScript and CSS by Lea Verou. It’s fast and the rendered code looks great.

WP Prism Syntax Highlighter is one of the WordPress plugins integrating the Prism syntax highlighter. It is relatively new and I didn’t see much updating done but it works well.

Until now, I’ve only found one real problem with this plugin: althought it does work fine on individual posts, it just doesn’t work on archive pages and on the home page. So basically it fails to work on all pages showing lists of posts. It’s not an issue if you only display excerpts on those pages. But if you display full posts on them, all you see is the standard appearance of <pre> tags. This is because Prism will not be loaded on such pages.

The problem is that the plugin tries to limit the pages on which it loads Prism to those pages which actually do display some code. It does it with the following code:

It basically gets the content of the current post and checks whether a Prism code tag is there. Only then will it load prism. This ensures that you do not load Prism on pages where you don’t need it in the first place e.g. posts without code, disclaimers, about me pages…

The problem is that this piece of code actually only works on single posts, not on archive pages or on the home page. Anyway for such pages, you’d need to check whether the whole post is displayed, if yes go through the posts being displayed and check whether code is present there. That’s kind of complex and probably the reason why it was implemented this way.

So to solve this you could delete the “if” line and the corresponding closing bracket. But then you’d load Prism on all pages including the ones where you definitely do not need it. After loading on all pages displaying code no matter whether a single post or a list of posts, the second best solution would be to make sure that single post pages only load Prism if required and on archives / on the home page, Prism is always loaded.

To implement it, open wp-prism-syntax-highlighter.php (http://YOURSITE/wp-admin/plugin-editor.php?file=wp-prism-syntax-highlighter/wp-prism-syntax-highlighter.php&a=te), search for “decide_load_prism” and replace this function by this one:

This is almost the same as the previous one. The only difference is that it also loads Prism if is_single() is false i.e. we’re displaying a list of posts.

Now, the code displayed in my category archives and on my homepage also looks great !! Of course, if you don’t have a problem in the first place e.g. because you only display excerpts on these pages, then there is no point in implementing this since it will unnecessarily load Prism on these pages.

Please note that when the changes you make in a plugin will be overwritten after every update of the plugin. So until this issue is fixed in the plugin, you will need to reapply it after every update.

Update: There are no support requests on the plugin page on wordpress.org but I’ve just seen that there is a bug report on github.

and immediately afterwards display the contents of myVar, you will also get undefined as result.

Why is the variable not set?

In all examples above, the function defined are what’s called asynchronous callbacks. This means that they are immediately created but not immediately executed. setTimeout pushes it into the event queue, the AJAX calls will execute it once the call returns and onload will be executed when the DOM element is loaded.

In all three cases, the function does not execute right away but rather whenever it is triggered asynchronously. So when you log or display the contents of the variable, the function has not yet run and the content has not yet been set.

So even though JavaScript actually works with a single-thread model, you’ve landed in the asynchronous problem zone.

Synchronous vs. Asynchronous

Basically the difference between a synchronous function call and an asynchronous one can be shown with these 2 pieces of code:

Of course, here another solution is to make the AJAX call synchronous by adding the following to the options:

async: false

Also if you use $.get or $.post, you’ll need to rewrite it to use $.ajax instead.

But this is not a good idea. First if the call lasts longer than expected, you will block the UI making your browser window unresponsive. And at some point in the time the browser will ask your user whether you want to stop the unresponsive script. So, even though programing everything in an asynchronous way with callbacks is not always trivial, doing everything in a synchronous way will cause more sporadic and difficult to handle issues.

So to summarize, you should either use a callback or directly call a function after processing and not only rely on setting a variable in the asynchronous part.

Even though Internet Explorer 8 is now very old and outdated, there are unfortunately still many corporate users who are still stuck with this old browser. Many things are broken in IE8. One of them is the implementation of Object.defineProperty.

I noticed it when using the polyfill for String.startswith you can find on MDN looks. It looks like this:

While Object.defineProperty is fully supported in IE9, it’s only partially supported in IE8. Internet Explorer 8 only supports defineProperty for DOM objects. If you use it for anything else, IE will complain that there is nothing like Object.defineProperty.

This is especially bad since calling defineProperty will cause and error which will prevent the rest of your JavaScript code to run.

As shown in this post logging to the console can be very useful when writing JavaScript code. Unfortunately, the JavaScript console is not evenly supported by all browsers. You first have browsers which don’t know it at all (like IE8) and will throw the error which I use as the title of this post. And then even two browsers which do have a console object do not all implement the same functions.

Here’s a short overview of what’s supported by which browser (note that if you do not have the latest version of a specific browser, this particular version may not support all listed functions):

Function

Firefox

Chrome

Internet Explorer

Safari

Opera

assert

X

X

X

clear

X

X

count

X

X

X

X

X

debug

X

X

X

X

X

dir

X

X

X

X

dirxml

X

X

X

X

error

X

X

X

X

_exception

X

group

X

X

X

X

X

groupCollapsed

X

X

X

X

X

groupEnd

X

X

X

X

X

info

X

X

X

X

log

X

X

X

X

markTimeline

X

profile

X

X

X

profileEnd

X

X

X

table

X

time

X

X

X

X

X

timeEnd

X

X

X

X

X

timeline

X

timelineEnd

X

timeStamp

X

trace

X

X

X

X

warn

X

X

X

X

So even though there are quite a few functions supported by all browsers, you should still check whether the console exists and whether the particular function you want to use exists. But adding before each call to a console function a check for the console and for the function quickly becomes a pain.

A way to work around it is to:

Create a dummy console object if console is not defined

Create dummy functions for all functions not supported by the console object in this particular browser

The dummy console object is created by this code:

if (!window.console) {
window.console = {};
}

So simple, if the global console variable doesn’t exist, create one as an empty object. Now we’ve got either a real console object or a dummy object, we got rid of the error message saying that console is undefined. But we’ll still get errors when our code calls undefined functions. So let’s go through all functions and for each of them create a dummy function if missing:

Here a few explanations how this works. First wrapping it all in (function() { … })() is used to scope the variables we define in there, so that we do not pollute the global scope.

Then we define an array containing all known console functions and iterate through them. For each function, we check whether the console object (the real one or the dummy one) have such a function defined. If not, we assign an empty function. This is done by using the fact that functions of an object are just special properties of the object and that object properties are indexed.

So, using this, you will get rid of all errors related to the console being undefined or console functions being undefined, but of course since we add empty implementations, using these empty implementations will still have no effect.

Of course, instead of using empty implementations you could log the calls to console functions somewhere (e.g. an array) so that you can access it. If I ever need it, I might actually write some code for it and update this post.

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners.OkRead more