Category Archives: JavaScript

IMDb REST API Version 3

I spent the last couple of days to fully reconsider and rewrite my IMDb REST API (formerly known as IMDb Fetcher) and I am happy to announce version 3 and the new website.

What’s New:

  • Improved speed.
  • Ease of use.
  • The request by title or name has been removed and now all requests are done by IMDb ID:
    // http://imdb.wemakesites.net/api/tt0120782 (http://www.imdb.com/title/tt0120782/)
    {
    	"status": "success",
    	"code": 200,
    	"message": "ok",
    	"data": {
    		"id": "tt0120782",
    		"type": "title",
    		"title": "Palmetto",
    		"year": "1998",
    		"description": "A recently released ex-con gets involved in a fake kidnapping scheme that turns very real.",
    		"certificate": "",
    		"duration": "114 min",
    		"released": "1998-02-20",
    		"cast": [
    			"Woody Harrelson",
    			"Elisabeth Shue",
    			"Gina Gershon",
    			"Rolf Hoppe",
    			"Michael Rapaport",
    			"Chloë Sevigny",
    			"Tom Wright",
    			"Marc Macaulay",
    			"Joe Hickey",
    			"Ralph Wilcox",
    			"Peter Paul DeLeo",
    			"Hal Jones",
    			"Salvador Levy",
    			"Richard Booker",
    			"Mikki Scanlon"
    		],
    		"genres": [
    			"crime",
    			"drama",
    			"mystery",
    			"romance",
    			"thriller"
    		],
    		"directors": [
    			"Volker Schlöndorff"
    		],
    		"writers": [
    			"James Hadley Chase",
    			"E. Max Frye"
    		],
    		"image": "http://ia.media-imdb.com/images/M/MV5BNTk2MjE2NDY2NV5BMl5BanBnXkFtZTcwMTcxMTQyMQ@@._V1_SY317_CR3,0,214,317_AL_.jpg",
    		"review": {
    			"text": "I think this is one of those modern-day film noirs (neo noir) that went under the radar. It is excellent, and few people know about it. It's a very underrated film.It had an interesting and unpredictable story with some very neat twists which a good noir might have. I'm not really sure I liked the very ending, but I sure enjoyed the rest of it. That entertainment included ogling a couple of sexy female leads, played by Elisabeth Shue and Chloe Sevigny and I loved the wonderful colors in this movie. Not only was the cinematography great, so was the soundtrack with some solid blues tracks. The guitar playing reminded me of the Ry Cooder's work in "Midnight Run."The movie was labeled by some national critics as a "poor man's 'Body Heat.'" Well, that's fine with me because I liked "Body Heat" a lot, too. If you liked that, you should like this movie, too.Yes, there are a few holes in the story but nothing that damaged the storyline to any degree. Woody Harrelson was good in the lead and Gina Gershon and Michael Rapaport provided solid performance in supporting roles.",
    			"rating": "9/10"
    		}
    	}
    }
  • New search by keywords, within any IMDb category – title, name, keywords, characters, companies, etc. The result is an array, containing all of the data found from the query, for example:
    // http://imdb.wemakesites.net/api/search?q=Danny+Trejo (http://www.imdb.com/find?ref_=nv_sr_fn&q=danny+trejo&s=all)
    {
    	"status": "success",
    	"code": 200,
    	"message": "ok",
    	"term": "jQuery21404515186028318603_1450864617567&q",
    	"search_url": "http://www.imdb.com/find?q=Danny Trejo&s=all567a729f642f2",
    	"data": {
    		"results": {
    			"names": [
    				{
    					"title": "Dan Aykroyd",
    					"id": "nm0000101",
    					"url": "http://www.imdb.com/name/nm0000101/?ref_=fn_al_nm_1"
    				},
    				{
    					"title": "Daniella Alonso",
    					"id": "nm0022161",
    					"url": "http://www.imdb.com/name/nm0022161/?ref_=fn_al_nm_2"
    				},
    				{
    					"title": "Danny Dyer",
    					"id": "nm0245705",
    					"url": "http://www.imdb.com/name/nm0245705/?ref_=fn_al_nm_3"
    				},
    				{
    					"title": "Danny Kaye",
    					"id": "nm0001414",
    					"url": "http://www.imdb.com/name/nm0001414/?ref_=fn_al_nm_4"
    				},
    				{
    					"title": "Danny Trejo",
    					"id": "nm0001803",
    					"url": "http://www.imdb.com/name/nm0001803/?ref_=fn_al_nm_5"
    				},
    				{
    					"title": "Danny DeVito",
    					"id": "nm0000362",
    					"url": "http://www.imdb.com/name/nm0000362/?ref_=fn_al_nm_6"
    				},
    				{
    					"title": "Danny Masterson",
    					"id": "nm0005194",
    					"url": "http://www.imdb.com/name/nm0005194/?ref_=fn_al_nm_7"
    				},
    				{
    					"title": "Danny McBride",
    					"id": "nm1144419",
    					"url": "http://www.imdb.com/name/nm1144419/?ref_=fn_al_nm_8"
    				},
    				{
    					"title": "Danny Glover",
    					"id": "nm0000418",
    					"url": "http://www.imdb.com/name/nm0000418/?ref_=fn_al_nm_9"
    				},
    				{
    					"title": "Danny Elfman",
    					"id": "nm0000384",
    					"url": "http://www.imdb.com/name/nm0000384/?ref_=fn_al_nm_10"
    				}
    			],
    			"titles": [
    				{
    					"title": "So Dear to My Heart",
    					"id": "tt0041890",
    					"url": "http://www.imdb.com/title/tt0041890/?ref_=fn_al_tt_1"
    				},
    				{
    					"title": "Danny Collins",
    					"id": "tt1772288",
    					"url": "http://www.imdb.com/title/tt1772288/?ref_=fn_al_tt_2"
    				}
    			]
    		}
    	}
    }

The API is free and does not require API keys, so you can start using it today!

Happy holidays!

Auto Resizing Textarea HTML5 WebComponent

Just finished my next experiment with HTML5 WebComponents. AcidJs.XTextarea is an advanced replacement of the classic <textarea /> HTML element, supporting custom events and auto resizing as-you-type. Check the extensive documentation in the distribution file (click the download button at the top of the demo page) or scroll this page to see the demos.

thumb

Usage

<acdisj-xtextarea></acdisj-xtextarea>
<acdisj-xtextarea placeholder="Type your message..." id="textarea-1" name="textarea-1" rows="5" cols="40"></acdisj-xtextarea>
<acdisj-xtextarea name="textarea-2" rows="10" cols="30" disabled></acdisj-xtextarea>
<acdisj-xtextarea name="textarea-5" autoresize="off" rows="5" cols="30"></acdisj-xtextarea>
<acdisj-xtextarea autofocus name="textarea-8" cols="60" rows="5"></acdisj-xtextarea>
<acdisj-xtextarea name="textarea-4" hidden></acdisj-xtextarea>

HTML Attributes of the Component

Apart from the form attributes like name, rows, cols, placeholder, spellcheck, autofocus, disabled and readonly etc. and the HTML standard attributes such is id and style AcidJs.XTextarea supports one custom property, allowing to turn the autoresizing off:

  • [autoresize="off"]

JavaScript API – Methods, Accessors and Events

The component supports all standard JavaScript methods querySelector, querySelectorAll, getElementById, etc. plus the following custom methods, accessors and events:

Methods

  • enable() – the method enables back a previously disabled textbox by using the disable() method, the enabled accessor or the disabled and readonly properties.
  • disable() – the method disables the queried textbox, so no user input is possible.
  • getValue() – the method returns the current value of the queried textbox, similar to the enabled accessor.
  • setValue(String|null) – the method sets new value to the queried textbox.

Accessors

  • enabled – gets or sets the enabled state of the textbox. Use Boolean value for the setter.
  • value – gets or sets value of the textbox. The setter requires a string or empty value.

Events

  • type – the event is triggered upon user input and returns an object, containing the current value of the textbox to which the event handler is bound to:
    {
        data: "Lorem ipsum dolor sit amet..."
    }
    /*
     * Bind to the "type" event of the textbox
     **/
     $("#my-textarea").on("type", function(e, data) {
         window.console.log("textbox event:", e.type, data);
     });

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Corporate BS Generator HTML5 WebComponent

Nothing serious this time, just a small fun HTML5 WebComponent, inspired by BS Generator, stitching-up (bullshit) sentences out of random buzzwords:

thumb

Usage:

<acidjs-xbsgenerator></acidjs-xbsgenerator>

The component does not have it’s own methods, setters, getters or styles. Just use the tag wherever you want.

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

5 Years of Ribbon JS!

Ribbon JS is turning 5 this month! If you are planning to purchase a license, now it’s the time. Join the celebration and get any commercial license for the most advanced and feature-complete JavaScript, HTML5 and CSS3 MSOffice-like ribbon control available on the Internet today at a half price only in August 2015!

ribbonjs.promo

EU Cookie Consent HTML5 Web Component

AcidJs.XCookieConsent is a ready-made, fully customizable solution to the EU Cookie Law, wrapped as a custom HTML5 Web Component.

thumb

The component is being used on this blog as well. If you have dismissed the cookie consent bar, click the button below to open show it again:

Using the Tag *

First, go to the demo page and download the sample project, then try one of the following (you need just one instance of the tag on your page).

<acidjs-xcookie-consent>
This website uses cookies to ensure you get the best experience.
</acidjs-xcookie-consent>
<acidjs-xcookie-consent position="top" dismiss-button-text="Understood">
This website uses cookies to ensure you get the best experience.
</acidjs-xcookie-consent>
<acidjs-xcookie-consent dir="rtl"></acidjs-xcookie-consent>

* The message should be set between the <acidjs-xcookie-consent></acidjs-xcookie-consent> tag and HTML is supported. If no content is set, the default text will be “This website uses cookies to ensure you get the best experience“.

HTML Attributes of the Tag

Apart from the standard HTML attributes, the following component-specific ones are supported:

  • position – optional position of the cookie consent bar. By default, position is "bottom", the possible value is "top".
  • dismiss-button-text – optional custom text for the dismiss button. If not set, the default value is "Got it!"

Direction is also supported – you could try dir="rtl" or dir="ltr" (default).

JavaScript Methods of the Tag

Apart from the standard JavaScript methods, getters and setters, the following component specific methods are also supported:

  • show() – to programmatically show the cookie consent bar. Calling this method will, however not delete the _acidjs_xcookie_consent_dismissed cookie.
    // JavaScript
    document.querySelector("acidjs-xcookie-consent").show();
    // jQuery
    $("acidjs-xcookie-consent").get(0).show();
  • hide() –  to programmatically hide the cookie consent bar. This will, however not set the _acidjs_xcookie_consent_dismissed cookie.  Cookie will be set only if user clicks the button to dismiss the message.
    // JavaScript
    document.querySelector("acidjs-xcookie-consent").hide();
    // jQuery
    $("acidjs-xcookie-consent").get(0).hide();
    

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.