Source: Clickbox.js

  1. require ('./iView.js');
  2. /**
  3. * @param {Telll} t the telll object
  4. * @author Monsenhor filipo at kobkob.org
  5. * Clickbox --> init -> loadPhotolinks -> telll.getPhotolinksOfUser -> tws.readUserPhotolinks
  6. * @constructor
  7. */
  8. function Clickbox(t){
  9.     this.t = t;
  10.     this._init(t);
  11. }
  13. Clickbox.prototype = Object.create(iView.prototype);
  15. /**
  16. * @param t {} 
  17. * @return bool
  18. */
  19. Clickbox.prototype._init = function(t){
  20.     if (!this.t.credentials.authKey){ throw("No authKey ... hmmm, aborting!"); }
  21.     //this.verifyCWS(); // to have compatibility
  22.      this.date = this.Date(0);
  23.     // default pick photolinks from one week ago
  24.     this.beginDate = this.Date(-7);
  25.     var me = this;
  26.     this.loadPhotolinks(this.beginDate, function(ps){
  27.         me.photolinks = ps;
  28.         me.state = "loaded";
  29.         me.emit("loaded", me);
  30.         t.store.clickbox = ps;
  31.         me._showWidget(t.store);
  32.     });
  33.     me.state = "init";
  34.     me.emit ("init");
  35.     me.createPhotolink();
  36.     return null;
  37. }
  39. /**
  40. * @param data {} 
  41. * @return bool
  42. */
  43. Clickbox.prototype.verifyCWS = function(){
  44.    // to be done ... ;) 
  45. };
  46.  
  48. /**
  49. * @param data {} 
  50. * @return bool
  51. */
  52. Clickbox.prototype._showWidget = function(data){
  53.     var tmpl = require('./templates/clickbox.mtjs');
  54.     var html = Mustache.render(tmpl.html, data);
  55.     if (tmpl.css)
  56.     $('<style id="clickbox-css">'+tmpl.css+'</style>').appendTo('head');
  57.     $(html).appendTo('body');
  58.     var telll = this.t;
  59.     var me = this;
  60.     $(".telll-clickbox-widget .close").on( "click", function( e, data ) {
  61. 	me.detach();
  62.     });
  63.     // The popup 
  64.     $('<div id="popup-clickbox" class="popup"><div class="top-line rgb-bg" style="z-index: 9;"></div></div>').appendTo('body');
  65.     $("#clickbox-widget").appendTo('#popup-clickbox').fadeIn();
  66.     $('#popup-clickbox').css('z-index','999');
  67.     $('html').addClass('overlay');
  68.     this.state = "show";
  69.     me.emit("show", me);
  70.     return true;
  71. };
  73. /**
  74. * @return null
  75. */
  76. Clickbox.prototype.createPhotolink = function(){
  77.     var me = this;
  78.     me.t.getPhotolink( function(e,got){
  79.         if (e) throw (e)
  80.         else {
  81. 		// TODO: deprecate photolinkbb param
  82.             if (got.photolinkbb){
  83.                got.photolink = got.photolinkbb; // compatibility with demo
  84.             }
  85.             var rData = unescape(got.extra_data);
  86.             try {
  87.             var got = JSON.parse(rData); } catch(e){
  88.             throw(e)}
  89.             me.state = "got";
  90.             me.emit ("got", got);
  91.             me.updatePhotolinksList(got);
  92.             me.showPhotolinkImage(got);
  93.         }
  94.     });
  95.     me.state = "created";
  96.     me.emit ("created");
  97. };
  99. /** 
  100.  */
  101. Clickbox.prototype.showPhotolinkImage =  function (got){
  102.     var me = this;
  103.     var myPl = got;
  104.     // TODO hmmm ... it looks bad ... we need an image size manager
  105.     try {
  106.     var img = got.thumb.replace('_180x90','');
  107.     } catch (err) {
  108.     var img = "/img/transp.png";
  109.     }
  110.     $('<div id="photolink-image"><img class="main"/></div>').appendTo("body");
  111.     $('#photolink-image img.main').attr('src', img);
  112.     $('#photolink-image img.main').css({'width':'100%'});
  113.     $('#photolink-image a').attr('href', myPl.link);
  114.     $('#photolink-image a').attr('target', '_blank');
  115.     $('#photolink-image').fadeIn(); 
  116.     setTimeout(function(){
  117.         $('#photolink-image').fadeOut("slow", function (){$('#photolink-image').detach()}); 
  118.     }, 4000);
  119.     me.state = "image";
  120.     me.emit ("image",got);
  121.        
  122. };
  124. /** 
  125.  *
  126.  * @see Telll.store.clickbox
  127.  */
  128. Clickbox.prototype.updatePhotolinksList = function (got) {
  129.     var me = this;
  130.     var myList ="";
  131.     this.t.store.clickbox.push(got);
  132.     var devicePhotolinks = this.t.store.clickbox;
  133.     this.emit("got", got);
  134.     $('#clickbox-empty').detach();
  135.     $('#clickbox *').detach();
  136.     $('#clickbox').height($(window).height()-40); 
  137.     for(var i=0; i<devicePhotolinks.length;i++){
  138.         if (! devicePhotolinks[i] || devicePhotolinks[i].photolink === undefined){ 
  139.             throw("Error: clickbox has a bad photolinks list ...");
  140.             return false 
  141.         }
  142.         else {
  143.             var $element     = $('<div class="photolink-list-element"></div>');
  144.             var $controlsFrm = $('<div class="ple-controls-frame"></div>');
  145.             var $shareBtn    = $('<div class="share telll-control"></div>');
  146.             var $favBlueBtn  = $('<div class="favorite-blue telll-control"></div>');
  147.             var $buyBtn      = $('<div class="buy telll-control"></div>');
  148.             var myPl = devicePhotolinks[i];
  149.             var $content     = $('<a target="_blank" href="'+myPl.link+'"><div class="ple-img"><img src="'+myPl.thumb+'"></div><div class="ple-info"><span class="ple-title">'+myPl.title+'</span><span class="ple-desc">'+myPl.description+'</span><span class="ple-desc">'+myPl.imdbPlot+'</span></a>');
  150.             $element.append(
  151.                 $content,
  152.                 $controlsFrm.append($shareBtn, $favBlueBtn, $buyBtn)
  153.             );
  154. 	    // Special share feed
  155. 	    $shareBtn.on ("click", function(){
  156. 	        FB.ui({
  157. 	            method: 'feed',
  158. 	            picture: myPl.thumb,
  159. 	            link: 'http://webapp.telll.me/cgi-bin/photolink.pl?id='+myPl.id,
  160. 	            caption: myPl.title,
  161. 	        }, function(response){
  162. 	            if (response) telllDialog("Thanks to share on Facebook!",3000);
  163. 	        });
  164. 	    });
  165. 	    $buyBtn.on ("click", function(){
  166.                 window.open(myPl.link,'_blank');  
  167.             });
  168. 	    $favBlueBtn.on ("click", function(){
  169.                 window.open("http://webapp.telll.me/cgi-bin/photolink.pl?id="+myPl.id,'_blank');  
  170.             });
  171.             $('#clickbox').append($element);
  172.         }
  173.     }
  174.     me.state = "list";
  175.     me.emit ("list",got);
  176. };
  178. /**
  179. * @return null
  180. */
  181. Clickbox.prototype.detach = function(){
  182.     $('.telll-clickbox-widget').detach();
  183.     $('#popup-clickbox').detach();
  184.     this.state = "detached";
  185.     this.emit("detached");
  186. };
  188. /**
  189. * @return null
  190. */
  191. Clickbox.prototype.attach = function(){
  192.     this._showWidget(this.t.store);
  193. };
  195. /**
  196. * Return actual date plus offset
  197. * @param offset {int} number off days
  198. * @return {string} the time in the format YYY-MM-DD hh:mm:ss
  199. * it must be escaped to work in tws
  200. */
  201. Clickbox.prototype.Date = function(offset){
  202. var n = new Date();
  203. var m = new Date(n.getTime() + offset * 24 * 60 * 60 * 1000);
  204. var dateString =
  205.   m.getUTCFullYear() +"-"+
  206.   ("0" + (m.getUTCMonth()+1)).slice(-2) +"-"+
  207.   ("0" + m.getUTCDate()).slice(-2) + " " +
  208.   ("0" + m.getUTCHours()).slice(-2) + ":" +
  209.   ("0" + m.getUTCMinutes()).slice(-2) + ":" +
  210.   ("0" + m.getUTCSeconds()).slice(-2);
  211.   return dateString;
  212. };
  214. /**
  215. * @param date {String} the date from
  216. * @param cb {Function} callback
  217. * @return null 
  218. * the list of photolinks sent to this user since date
  219. */
  220. Clickbox.prototype.loadPhotolinks = function(date, cb){
  221.      var me = this;
  222.      // read cookies
  223.      var deleted = this.t.getCookie("deleted");
  224.      this.deleted = deleted || this.deleted || [];
  225.      // read user data
  226.      me.t.getPhotolinksOfUser(null, escape(date), function(list){
  227.          if (!list.length) {
  228.                // TODO what can we do here? :P
  229.                list = [];
  230.          }
  231.          if (cb){ cb(list) } 
  232.          else{
  233. 	 throw("Fatal error: Clickbox.loadPhotolinks needs a callback, please.")}
  234.      });
  235. };
  237. module.exports = {Clickbox:Clickbox};