application/views/rotation/js/rotation.js

   1
   2 (function () {
   3
   4         function ucwords (str) {
   5                 return (str + '').replace(/^([a-z])|\s+([a-z])/g, function ($1) {
   6                         return $1.toUpperCase();
   7                 });
   8         }
   9
  10         function arrayRemoveValue(arr){
  11                 var what, a= arguments, L= a.length, ax;
  12                 while(L> 1 && arr.length){
  13                         what= a[--L];
  14                         while((ax= arr.indexOf(what))!= -1){
  15                                 arr.splice(ax, 1);
  16                         }
  17                 }
  18                 return arr;
  19         }
  20
  21         var STATUS_PAUSED = 0,
  22                 STATUS_PLAYING = 1;
  23
  24         var RotationalView = function () {
  25
  26                 var self = Object.create(RotationalView.prototype);
  27
  28                 self.config = {
  29
  30                         basepath: _site_domain + _index_page,
  31
  32                         max_interval: 30000,
  33                         min_interval: 5000,
  34                         interval_increment: 1000,
  35                         interval: 10000
  36
  37                 };
  38
  39                 self.showing = false;
  40                 self.status = STATUS_PAUSED;
  41                 self.hideTimer;
  42
  43                 self.frame = $('#rotation-frame');
  44                 self.help = $('#page-rotation-initial');
  45
  46                 self.x_css = [];
  47                 self.x_scripts = [];
  48
  49                 self.pages = [];
  50                 self.current = -1;
  51                 self.timer;
  52
  53                 $.ajax(self.config.basepath + '/ajax/get_setting', {
  54
  55                         data: {
  56                                 'type': 'rotation_queue',
  57                                 'page': 'page_rotation'
  58                         },
  59
  60                         type: 'POST',
  61
  62                         success: function (obj) {
  63
  64                                 var pages = obj['rotation_queue'] || [];
  65
  66                                 if (pages.length >= 1) {
  67                                         $('#page-rotation-play').css('opacity','1.0');
  68                                 }
  69
  70                                 for (var i = 0; i < pages.length; i += 1) {
  71                                         self.add(pages[i]);
  72                                 }
  73
  74                         }
  75                 });
  76
  77                 self.events();
  78
  79                 return self;
  80
  81         };
  82
  83         RotationalView.prototype = {
  84
  85                 page: function () {
  86                         return this.pages[this.current];
  87                 },
  88
  89                 hoisting: function hoisting (frame) {
  90
  91                         var self = this;
  92
  93                         frame.load(function () {
  94
  95                                 var contents = frame.contents().find('body').children(),
  96
  97                                         scripts = frame.contents().find('script'),
  98                                         css = frame.contents().find('link[rel="stylesheet"]'),
  99
 100                                         cscripts = $('head').find('script'),
 101                                         ccss = $('head').find('link[rel="stylesheet"]');
 102
 103                                 scripts.each(function () {
 104
 105                                         var i = cscripts.length,
 106                                                 insert = true;
 107
 108                                         if (this.src) {
 109
 110                                                 for (i; i--;)
 111                                                         insert = (this.src == cscripts[0].src) ? false : insert;
 112
 113                                                 if (insert) {
 114                                                         $('head').prepend($(this));
 115                                                         addedscripts.push($(this));
 116                                                 }
 117                                         }
 118
 119                                 });
 120
 121                                 css.each(function () {
 122
 123                                         var i = ccss.length,
 124                                                 insert = true;
 125
 126                                         if (this.href) {
 127
 128                                                 for (i; i--;)
 129                                                         insert = (this.href == ccss[i].href) ? false : insert;
 130
 131                                                 if (insert) {
 132                                                         $('head').prepend($(this));
 133                                                         addedcss.push($(this));
 134                                                 }
 135
 136                                         }
 137
 138                                 });
 139
 140                                 self.frame.html('').
 141                                         append(contents).
 142                                         css({'margin': '1% auto'}).
 143                                         animate({'opacity': 'show'}, 1000);
 144
 145                                 clearTimeout(self.timer);
 146                                 self.timer = setTimeout(function () {
 147                                         self.rotate();
 148                                 }, self.config.interval);
 149
 150                         });
 151                 },
 152
 153                 interpret: function interpret (request) {
 154
 155                         var tmp = document.implementation.createHTMLDocument("tmp"),
 156                                 self = this,
 157                                 doc = null;
 158
 159                         tmp.documentElement.innerHTML = request.responseText;
 160                         doc = $(tmp);
 161
 162                         for (var i = 0; i < this.x_scripts.length; i += 1)
 163                                 this.x_scripts[i].remove();
 164
 165                         for (var i = 0; i < this.x_css.length; i += 1)
 166                                 this.x_css[i].remove();
 167
 168                         this.x_scripts = [];
 169                         this.x_css = [];
 170                         this.frame.html('');
 171
 172                         if (this.page().indexOf('widget') > 0) {
 173
 174                                 var name = this.page().split(' ')[0];
 175                                         widget = doc.find("[id*=" + name + "]");
 176
 177                                 if (widget) {
 178                                         this.frame.append(widget.children());
 179                                 } else {
 180                                         this.frame.html('Could not resolve widget ' + name);
 181                                 }
 182
 183                         } else {
 184
 185                                 this.frame.append(
 186                                         doc.find('.content').children()
 187                                 );
 188
 189                                 var frame = this.frame.find('iframe');
 190
 191                                 if (frame.length > 0) {
 192
 193                                         this.hoisting(frame);
 194
 195                                 } else {
 196
 197                                         this.frame.css({'margin': '0'});
 198                                         this.frame.animate({'opacity': 'show'}, 1000);
 199
 200                                         clearTimeout(this.timer);
 201                                         this.timer = setTimeout(function () {
 202                                                 self.rotate();
 203                                         }, this.config.interval);
 204
 205                                 }
 206
 207                         }
 208                 },
 209
 210                 rotate: function rotate () {
 211
 212                         var self = this,
 213                                 callback = function (request) {
 214                                         if (request.status != 200) {
 215                                                 self.note('The requested frame did not return status 200, ' +
 216                                                                 'jumping to next in 3 seconds', self.rotate);
 217                                         }
 218                                         self.interpret(request);
 219                                 },
 220                                 path;
 221
 222                         this.help.css('display', 'none');
 223                         this.current = (this.current === this.pages.length - 1) ? 0 : this.current + 1;
 224                         this.frame.animate({'opacity': 'hide'}, 400);
 225
 226                         if (this.page().indexOf('widget') > 0) {
 227                                 path = this.config.basepath + '/tac';
 228                         } else {
 229                                 path = this.config.basepath + this.pages[this.current];
 230                         }
 231
 232                         $.ajax(path, {
 233                                 crossDomain: true,
 234                                 complete: callback
 235                         });
 236
 237                 },
 238
 239                 note: function note (message, ref) {
 240                         if (typeof(ref) == 'function') {
 241                                 $('#page-rotation-note').html(message).fadeIn(500).delay(2000).fadeOut(1000, ref);
 242                         } else {
 243                                 $('#page-rotation-note').html(message).fadeIn(500).delay(2000).fadeOut(1000);
 244                         }
 245                 },
 246
 247                 hide: function () {
 248                         $('#page-rotation-opts').fadeOut(400);
 249                         $('#page-rotation-views').fadeOut(400);
 250                         $('#content').animate({'margin-top': '0px'}, {'duration': 800, 'queue': false});
 251                         $('#header').fadeOut(400, function () {
 252                                 optsstick = false;
 253                         });
 254                 },
 255
 256                 show: function () {
 257                         $('#page-rotation-opts').fadeIn(400);
 258                         $('#page-rotation-views').fadeIn(400);
 259                         $('#content').animate({'margin-top': '48px'}, {'duration': 200, 'queue': false});
 260                         $('#header').fadeIn(400);
 261                 },
 262
 263                 add: function add (uri) {
 264
 265                         var self = this,
 266                                 value = uri;
 267
 268                         if (value.indexOf('widget') > 0) {
 269
 270                                 // Holder for widgets
 271
 272                         } else {
 273
 274                                 if (value.indexOf('index.php') > 0)
 275                                         value = value.split('index.php')[1];
 276
 277                                 if (value[0] != '/')
 278                                         value = '/' + value;
 279
 280                                 value += ( value.indexOf('rotation_token') > 0 ) ? "" :
 281                                         ( value.indexOf('?') > 0 ) ?
 282                                         '&rotation_token=' + (new Date()).getTime() :
 283                                         '?rotation_token=' + (new Date()).getTime();
 284
 285                                 $.ajax(this.config.basepath + value, {
 286                                         type: 'GET',
 287                                         crossDomain: true,
 288                                         complete: function (request) {
 289
 290                                                 var title = request.responseText,
 291                                                         i1 = title.indexOf('<title>') + 7,
 292                                                         i2 = title.indexOf('</title>') - i1;
 293
 294                                                 title = title.substr(i1, i2);
 295
 296                                                 if (request.status == 200) {
 297
 298                                                         $('#page-rotation-fields-list').append(
 299                                                                 $('<li>').append(
 300                                                                         $('<input type="checkbox" checked="true" value="' + value + '" />').bind('click', function (e) {
 301                                                                                 arrayRemoveValue(self.pages, $(e.target).val());
 302                                                                         })
 303                                                                 ).append(
 304                                                                         $('<span>').text(' ' + title)
 305                                                                 )
 306                                                         );
 307
 308                                                         self.pages.push(value);
 309
 310                                                 } else {
 311
 312                                                         self.note('HEAD test of the given URI could not be resolved!<br /><br />' +
 313                                                                 'This is either due to a faulty URI or the request is targetting a ' +
 314                                                                 'page outside of Op5 Monitors Web Interface.<br />' +
 315                                                                 'Try copying URI\'s from existing pages in Op5 Monitors Web Interface.');
 316
 317                                                 }
 318                                         }
 319                                 });
 320
 321                         }
 322
 323                 },
 324
 325                 save: function save () {
 326
 327                         var button = $('#page-rotation-save');
 328                         button.css('opacity', '0.4');
 329
 330                         $.ajax(this.config.basepath + '/ajax/save_page_setting', {
 331                                 data: {
 332                                         'type': 'rotation_queue',
 333                                         'page': 'page_rotation',
 334                                         'setting': JSON.stringify(this.pages)
 335                                 },
 336                                 type: 'POST',
 337                                 complete: function (request) {
 338                                         button.css('opacity', '1.0');
 339                                 }
 340                         });
 341
 342                 },
 343
 344                 gotoPage: function () {
 345                         if (this.page().indexOf('widget') > 0) {
 346                                 window.location.href = this.config.basepath + '/tac';
 347                         } else {
 348                                 window.location.href = this.config.basepath + this.page();
 349                         }
 350                 },
 351
 352                 element: function (btn) {
 353                         return $('#page-rotation-' + btn);
 354                 },
 355
 356                 events: function () {
 357
 358                         var self = this,
 359
 360                                 reveal = function () {
 361
 362                                         if (!self.showing) {
 363                                                 self.show();
 364                                                 self.showing = true;
 365                                         }
 366
 367                                         if (self.hideTimer)
 368                                                 clearTimeout(self.hideTimer);
 369                                         self.hideTimer = setTimeout(function () {
 370                                                 self.hide();
 371                                                 self.showing = false;
 372                                         }, 2000);
 373
 374                                 };
 375
 376                         this.show();
 377
 378                         $('#page-rotation-add').bind('click', function () {self.add($('#page-rotation-new').attr('value'));});
 379                         $('#page-rotation-save').bind('click', function () {self.save();});
 380
 381                         $('#page-rotation-prev').bind('click', function () {
 382                                 self.current -= 2;
 383                                 self.current = (self.current < -1) ? self.pages.length - 2 : self.current;
 384                                 self.rotate();
 385                         });
 386
 387                         $('#page-rotation-next').bind('click', function () {
 388                                 self.rotate();
 389                         });
 390
 391                         $('#page-rotation-play').bind('click', function () {
 392
 393                                 self.status = STATUS_PLAYING;
 394                                 self.rotate();
 395
 396                                 clearTimeout(self.hideTimer);
 397                                 $(window).unbind('mousemove', reveal);
 398                                 $(window).bind('mousemove', reveal);
 399
 400                                 $('#page-rotation-play').css('display', 'none');
 401                                 $('#page-rotation-pause').css('display', 'inline-block');
 402                         });
 403
 404                         $('#page-rotation-pause').bind('click', function () {
 405
 406                                 self.status = STATUS_PAUSED;
 407                                 clearTimeout(self.timer);
 408
 409                                 clearTimeout(self.hideTimer);
 410                                 $(window).unbind('mousemove', reveal);
 411
 412                                 $('#page-rotation-play').css('display', 'inline-block');
 413                                 $('#page-rotation-pause').css('display', 'none');
 414                         });
 415
 416                         self.element('goto').bind('click', function () {
 417                                 self.gotoPage();
 418                         });
 419
 420                         self.element('slower').bind('click', function () {
 421                                 if (self.config.interval + self.config.interval_increment <= self.config.max_interval)
 422                                         self.config.interval += self.config.interval_increment;
 423                                 self.element('speed').val(self.config.interval / 1000);
 424                         });
 425
 426                         self.element('faster').bind('click', function () {
 427                                 if (self.config.interval - self.config.interval_increment >= self.config.min_interval)
 428                                         self.config.interval -= self.config.interval_increment;
 429                                 self.element('speed').val(self.config.interval / 1000);
 430                         });
 431
 432                 }
 433
 434         }
 435
 436         $(window).bind('load', function onmainload () {
 437                 RotationalView();
 438         });
 439
 440 }());