Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Saturday, March 22, 2014

AngularJS and Starrr plugin: updating score variable with directives

I'm using Starrr plugin (https://github.com/dobtco/starrr) with Angular.JS.

When the star rating changes, 'starrr:change' dom event is fired. I have to catch this event and update the score variable in my angular.js scope.  It was hard to find it but found it:
We define a directive in our angular app js file:
myApp.directive('rateable', function(){
        return function(scope, elt, attr){
            elt.bind('starrr:change', function(e, value){
                scope.score = value;
                scope.$apply();
            });
        }
});
In the HTML Code, we use the rateable directive as HTML tag attribute:
<div class="starrr" data-rating="1" id="hearts" rateable></div>
This way, whenever "starrr:change" event is fired from "#hearts", our score variable in the scope is updated. We have to call $apply to let Angular know some changes has been proposed.

Tuesday, March 4, 2014

POST to Angular.JS by Facebook Canvas App

I was writing a Facebook Canvas App with Flask. Then I decided to move my frontend to AngularJS. I wanted to put the AngularJS static code to a static hosting provider to avoid higher costs. Nevertheless, I realized that I had forgotten that I can't handle POST requests by AngularJS since it doesn't have a dynamic server.

Facebook Canvas performs a POST request with signed_request parameter to your homepage and you should handle that parameter to see who the logged user is.

What I did was: create a Node.JS app with express.js framework. Convert homepage to view, add a hidden input field in the HTML code and handle POST parameter by Node.JS, filling that hidden input.

When I did this, facebook posted the signed_request parameter and I placed that code into the hidden field. Now AngularJS code can post that signed_request code to the backend API server to process it or use it client-side.

Friday, February 21, 2014

Embedding Skulpt Python Interpreter in Reveal.js slides

Lately, Slide libraries in HTML+JS+CSS became so popular. I liked reveal.js the most and wanted to prepare a presentation on Python. I wanted to perform demos throughout the presentation so I thought I could embed a Python interpreter (skulpt) on slides.

See sample HTML file: https://gist.github.com/aladagemre/9124007

Just place your html file inside reveal.js folder. Place skulpt js files in reveal.js/js folder.

There exists two slides with the interpreter embedded. Just copy and paste those sections for having more.