js/app.ui.js

   1 /*jslint devel: true */
   2 /*global $, app, TemplateManager, Helpers */
   3
   4 /**
   5  * @class Ui
   6  */
   7 function Ui() {
   8         'use strict';
   9 }
  10
  11 (function () { // strict mode wrapper
  12         'use strict';
  13         Ui.prototype = {
  14                 /**
  15                  * root mode
  16                  * @type {boolean}
  17                  */
  18                 root: true,
  19
  20                 /**
  21                  * locked folders
  22                  * @type {array}
  23                  */
  24                 lockedFolders: ['ringtones'],
  25
  26                 /**
  27                  * UI edit mode
  28                  * @type {boolean}
  29                  */
  30                 editMode: false,
  31
  32                 /**
  33                  * @type {bool} block taps until the page change is completed
  34                  */
  35                 nodeTapBlock: false,
  36
  37                 /**
  38                  * @type {TemplateManager}
  39                  */
  40                 templateManager: null,
  41
  42                 /**
  43                  * @type Helpers
  44                  */
  45                 helpers: null,
  46
  47                 /**
  48                  * @type Info popup lock
  49                  */
  50                 infoPopupVisibility: false,
  51
  52                 /**
  53                  * @const {number}
  54                  */
  55                 PATH_DIV_HEIGHT: 20,
  56
  57                 /**
  58                  * @const {number}
  59                  */
  60                 SELECT_ALL_HEIGHT: 32,
  61
  62                 /**
  63                  * @const {number} header height, set on domReady
  64                  */
  65                 HEADER_HEIGHT: 53,
  66
  67                 /**
  68                  * name of row gradient class
  69                  */
  70                 CSS_GRADIENT_CLASS: 'gradientBackground',
  71
  72                 /**
  73                  * Standard tabbar actions
  74                  * @type {number}
  75                  */
  76                 STD_TABBAR_EDIT_ACTION: 0,
  77                 STD_TABBAR_MORE_ACTION: 1,
  78                 STD_TABBAR_EXIT_ACTION: 2,
  79
  80                 /**
  81                  * Edit tabbar actions
  82                  * @type {number}
  83                  */
  84                 EDIT_TABBAR_DELETE_ACTION: 0,
  85                 EDIT_TABBAR_MOVE_ACTION: 1,
  86                 EDIT_TABBAR_COPY_ACTION: 2,
  87                 EDIT_TABBAR_CANCEL_ACTION: 3,
  88
  89                 currentHeaderHeight: null,
  90                 currentScrollPosition: null,
  91
  92                 /**
  93                  * UI Initialization
  94                  */
  95                 init: function Ui_init(storages) {
  96                         this.templateManager = new TemplateManager();
  97                         this.helpers = new Helpers();
  98                         // Disable text selection
  99                         $.mobile.tizen.disableSelection(document);
 100                         $(document).ready(this.initDom.bind(this, storages));
 101                 },
 102
 103                 initDom: function Ui_initDom(storages) {
 104                         var self = this,
 105                                 overlay = $('#overlay'),
 106                                 popup = $('#infoPopup'),
 107                                 windowWidth,
 108                                 windowHeight,
 109                                 popWidth;
 110
 111                         this.templateManager.loadToCache(['main', 'fileRow', 'folderRow', 'levelUpRow', 'emptyFolder'], function () {
 112                                 $('#main').append($(self.templateManager.get('main')).children()).trigger('pagecreate');
 113                                 self.addEvents();
 114                                 self.displayStorages(storages);
 115                         });
 116
 117                         windowWidth = $(window).width();
 118                         windowHeight = $(window).height();
 119
 120                         overlay.css({
 121                                 'width': windowWidth + 'px',
 122                                 'height': windowHeight + 'px'
 123                         });
 124
 125                         popWidth = windowWidth / 2 + 30;
 126                         popup.css({
 127                                 'width': popWidth + 'px',
 128                                 'left': (windowWidth / 2 - popWidth / 2) + 'px',
 129                                 'top': (windowHeight / 2 - popup.height() / 2) + 'px'
 130                         });
 131                 },
 132
 133                 /**
 134                  * Add UI events
 135                  */
 136                 addEvents: function Ui_addEvents() {
 137                         var self = this;
 138
 139                         document.addEventListener('webkitvisibilitychange', function () {
 140                                 if (document.webkitVisibilityState === 'visible') {
 141                                         app.refreshCurrentPage(true);
 142                                 }
 143                         });
 144
 145                         window.addEventListener('tizenhwkey', function(e) {
 146                                 var uri = $('#navbar span+span').attr('uri');
 147                                 if (e.keyName == "back") {
 148                                         if (self.infoPopupVisibility) {
 149                                                 return;
 150                                         } else if ($.mobile.popup.active) {
 151                                                 $.mobile.popup.active.close();
 152                                         } else if (self.editMode === true) {
 153                                                 self.handleCancelEditAction();
 154                                         } else if (!uri) {
 155                                                 if ( app.ui.root === false ) {
 156                                                         $('#fileList').empty();
 157                                                         app.ui.prepareFolderRow(0, "root");
 158                                                         app.ui.root = true;
 159                                                 } else {
 160                                                         tizen.application.getCurrentApplication().exit();
 161                                                 }
 162                                         } else {
 163                                                 app.goLevelUp();
 164                                         }
 165                                 }
 166                         });
 167
 168                         $(window).resize( function () {
 169                                 $.mobile.activePage.page('refresh')
 170                         });
 171
 172                         // touch events for all nodes
 173                         $('ul#fileList')
 174                                 .on('tap', 'li.levelUp', function () {
 175                                         if (self.editMode === true) {
 176                                                 self.handleCancelEditAction();
 177                                         }
 178                                         app.goLevelUp();
 179                                 })
 180                                 .on('tap', 'li.node', function (e) {
 181                                         e.preventDefault();
 182                                         e.stopPropagation();
 183                                         self.handleNodeClick($(this), true);
 184                                 })
 185                                 .on('change', 'input[type=checkbox]', function (e) {
 186                                         self.handleNodeClick($(this).closest('li.node'), false);
 187                                 })
 188                                 .on('touchstart', 'li', function (event) {
 189                                         $(this).addClass(self.CSS_GRADIENT_CLASS);
 190                                 })
 191                                 .on('touchend touchmove', 'li', function (event) {
 192                                         $(this).removeClass(self.CSS_GRADIENT_CLASS);
 193                                 });
 194
 195                         $('.selectAll input').on('change', this.handleSelectAllChange.bind(this));
 196
 197                         // navbar
 198                         $('#navbar').on('tap', 'span', function () {
 199                                 var uri = $(this).attr('uri');
 200                                 if (uri === 'home') {
 201                                         if (app.currentPath !== '') {
 202                                                 app.displayStorages();
 203                                         }
 204                                 } else if (uri === app.model.currentPath) {
 205                                         app.displayFolder(uri,true);
 206                                 } else {
 207                                         if (self.editMode === true) {
 208                                                 self.handleCancelEditAction();
 209                                         }
 210                                         app.displayFolder(uri);
 211                                 }
 212                         });
 213
 214                         // level up
 215                         $('#levelUpBtn').on('tap', function () {
 216                                 if (self.editMode === true) {
 217                                         self.handleCancelEditAction();
 218                                 }
 219                                 app.goLevelUp();
 220                         });
 221
 222                         $('#homeBtn').on('tap', app.displayStorages.bind(app));
 223
 224                         // edit action
 225                         $('#editActionBtn').on('tap', this.handleEditAction.bind(this));
 226
 227                         // delete action
 228                         $('#deleteActionBtn').on('tap', this.handleDeleteAction.bind(this));
 229
 230                         // cancel edit
 231                         $('#cancelActionBtn').on('tap', function (e) {
 232                                 e.preventDefault();
 233                                 e.stopPropagation();
 234                                 self.handleCancelEditAction();
 235                         });
 236
 237                         // copy action
 238                         $('#copyActionBtn').on('tap', this.handleCopyAction.bind(this));
 239
 240                         // move action
 241                         $('#moveActionBtn').on('tap', this.handleMoveAction.bind(this));
 242
 243                         // paste action
 244                         $('a#pasteActionBtn').on('tap', function () {
 245                                 if (!self.infoPopupVisibility) {
 246                                         self.toggleInfoPopup();
 247                                         setTimeout(app.pasteClipboard.bind(app), 100);
 248                                 }
 249                                 $("#morePopup").popup('close');
 250                         });
 251
 252                         // remove active class
 253                         $('[data-role = "tabbar"] li > a').on('click', function () {
 254                                 $(this).removeClass('ui-focus, ui-btn-active');
 255                         });
 256                         // exit
 257                         $('.ui-myExit').on('tap', app.exit);
 258
 259                         // add folder popup actions
 260                         $('#addFolderPopup').on("popupafterclose", function () {
 261                                 // clear input value
 262                                 $('#newFolderName').val('New folder');
 263                         });
 264
 265                         $('#newFolderName').on('tap', function () {
 266                                 if ($(this).attr('value') === 'New folder') {
 267                                         $(this).attr('value', '');
 268                                 }
 269                         });
 270
 271                         $('#saveNewFolder').on('tap', this.saveNewFolder.bind(this));
 272                         $('#newFolderForm').on('submit', this.saveNewFolder.bind(this));
 273                 },
 274
 275                 saveNewFolder: function Ui_saveNewFolder(e) {
 276                         var folderName = $('#newFolderName').val().trim(), status = true,
 277                                 open = function () {
 278                                         $("#addFolderPopup").popup('open', {
 279                                                 positionTo: "window"
 280                                         });
 281                                 },
 282                                 self = this,
 283                                 buttons = $("#addFolderPopup .ui-popup-button-bg a"),
 284                                 activePopup;
 285                         e.preventDefault();
 286                         e.stopPropagation();
 287                         buttons.addClass('ui-disabled');
 288                         $("#addFolderPopup").one("popupafterclose", function () {
 289                                 if (folderName === '') {
 290                                         self.alertPopup("Empty folder name", open);
 291                                         status = false;
 292                                 } else if (folderName.match(/[\*\.\/\\\?\"\'\:<>|]/)) {
 293                                         self.alertPopup("The following special characters "
 294                                                 +"are not allowed: *./\\?:<>|'\"", open);
 295                                         status = false;
 296                                 } else {
 297                                         status = app.createDir(folderName, open);
 298                                 }
 299                                 buttons.removeClass('ui-disabled');
 300                         });
 301                         activePopup = $.mobile.popup.active;
 302                         if (
 303                                 activePopup &&
 304                                 activePopup.element.attr('id') === 'addFolderPopup'
 305                         ) {
 306                                 activePopup.close();
 307                         }
 308                         return status;
 309                 },
 310
 311                 toggleInfoPopup: function () {
 312                         var overlay = $('#overlay');
 313
 314                         if (this.infoPopupVisibility) {
 315                                 overlay.hide();
 316                         } else {
 317                                 overlay.show();
 318                         }
 319
 320                         this.infoPopupVisibility = !this.infoPopupVisibility;
 321                 },
 322
 323                 alertPopup: function (text, callback) {
 324                         $("#alertPopup .text").text(text);
 325                         $("#alertPopup").popup('open', {'positionTo': 'window'});
 326                         if (callback instanceof Function) {
 327                                 $("#alertPopup").one("popupafterclose", function () {
 328                                         callback();
 329                                 });
 330                         }
 331                         if (this.infoPopupVisibility) {
 332                                 this.toggleInfoPopup();
 333                         }
 334                 },
 335
 336                 confirmPopup: function (text, confirmCallback, completeCallback) {
 337                         $("#confirmPopup .text").text(text);
 338                         setTimeout(function () {
 339                                 $("#confirmPopup").popup('close');
 340                                 setTimeout(function () {
 341                                         $("#confirmPopup").popup('open');
 342                                         $("#confirmPopup .confirm").one("tap", function () {
 343                                                 $("#confirmPopup").popup('close');
 344                                                 if (confirmCallback instanceof Function) {
 345                                                         confirmCallback();
 346                                                 }
 347                                         });
 348                                         if (completeCallback instanceof Function) {
 349                                                 $("#confirmPopup").one('popupafterclose', function () {
 350                                                         completeCallback();
 351                                                 });
 352                                         }
 353                                 }, 200);
 354                         }, 200);
 355                 },
 356
 357                 clearTabbars: function Ui_clearTabbars() {
 358                         $('[data-role = "tabbar"] li > a').removeClass('ui-focus, ui-btn-active');
 359                 },
 360
 361                 /**
 362                  * Handler for node click
 363                  * @param {File} node
 364                  * @param {boolean} toggleCheckbox
 365                  */
 366                 handleNodeClick: function Ui_handleNodeClick(node, toggleCheckbox) {
 367                         if (this.root) {
 368                                 app.model.loadInternalStorages(function () { app.displayStorages(); });
 369                                 this.root = false;
 370                         } else if (this.editMode === true) {
 371                                 //if edit mode is on toggle checkbox state
 372                                 if (toggleCheckbox === true) {
 373                                         this.toggleCheckBoxState(node); // select the checkbox
 374                                 }
 375
 376                                 this.refreshSelectAllStatus();
 377                                 this.refreshEditMenu();
 378                         } else if (node.hasClass('folder')) {
 379                                 // otherwise display folder
 380                                 app.displayFolder(node.attr('uri'));
 381                         } else {
 382                                 // file
 383                                 app.openFile(node.attr('uri'), node.attr('fullUri'));
 384                         }
 385                 },
 386
 387                 /**
 388                  * Handler for edit action
 389                  */
 390                 handleEditAction: function Ui_handleEditAction() {
 391                         this.editMode = true;
 392                         this.clearTabbars();
 393                         $('.standardTabbar').hide();
 394                         $('div.editTabbar').show();
 395                         this.disableControlBarButtons($('div.editTabbar'), [this.EDIT_TABBAR_DELETE_ACTION, this.EDIT_TABBAR_COPY_ACTION, this.EDIT_TABBAR_MOVE_ACTION]);
 396                         $('#fileList .folder .nodename, #fileList > li > span.nodename')
 397                                 .animate({'width': '70%'});
 398                         this.showEditCheckBoxes();
 399                 },
 400
 401                 /**
 402                  * Handler for cancel edit action
 403                  */
 404                 handleCancelEditAction: function Ui_handleCancelEditAction() {
 405                         this.editMode = false;
 406                         this.clearTabbars();
 407                         $('div.editTabbar').hide();
 408                         $('.standardTabbar').show();
 409                         $('#fileList .folder .nodename,  #fileList > li > span.nodename')
 410                                 .animate({'width': '75%'});
 411                         this.hideEditCheckBoxes();
 412                         if (this.isFileListEmpty()) {
 413                                 $('#editActionBtn').addClass('vhidden');
 414                         }
 415                 },
 416
 417                 /**
 418                  * Handler for delete action
 419                  */
 420                 handleDeleteAction: function Ui_handleDeleteAction(e) {
 421                         var nodesToDelete = [],
 422                                 $rowElement,
 423                                 self = this,
 424                                 conf;
 425
 426                         e.stopPropagation();
 427                         e.preventDefault();
 428
 429                         this.confirmPopup('Selected nodes will be deleted. Are you sure?',
 430                                 function () {
 431                                         $('ul#fileList input:checkbox:checked').each(function (index) {
 432                                                 $rowElement = $(this).closest('li');
 433                                                 nodesToDelete.push({
 434                                                         id: $rowElement.attr('id'),
 435                                                         uri: $rowElement.attr('uri'),
 436                                                         name: $rowElement.attr('label'),
 437                                                         folder: $rowElement.hasClass('folder')
 438                                                 });
 439                                         });
 440                                         if (nodesToDelete.length > 0) {
 441                                                 app.deleteNodes(nodesToDelete);
 442                                                 self.scrollContentTo(0);
 443                                                 $('ul#fileList input:checkbox:checked').remove();
 444                                                 self.refreshEditMenu();
 445                                         }
 446                                 },
 447                                 function () {
 448                                         self.clearTabbars();
 449                                 }
 450                         );
 451                 },
 452
 453                 /**
 454                  * Handler for copy action
 455                  */
 456                 handleCopyAction: function Ui_handleCopyAction(e) {
 457                         var paths = [];
 458
 459                         e.stopPropagation();
 460                         e.preventDefault();
 461
 462                         if (this.editMode === true) {
 463                                 $('ul#fileList input:checkbox:checked').each(function (index) {
 464                                         paths.push($(this).closest('li').attr('uri'));
 465                                 });
 466                                 app.saveToClipboard(paths, app.clipboard.COPY_MODE_ID);
 467                         }
 468                 },
 469
 470                 /**
 471                  * Handler for move action
 472                  */
 473                 handleMoveAction: function Ui_handleMoveAction(e) {
 474                         var paths = [];
 475
 476                         e.stopPropagation();
 477                         e.preventDefault();
 478
 479                         if (this.editMode === true) {
 480                                 $('ul#fileList input:checkbox:checked').each(function (index) {
 481                                         paths.push($(this).closest('li').attr('uri'));
 482                                 });
 483                                 app.saveToClipboard(paths, app.clipboard.MOVE_MODE_ID);
 484                         }
 485                 },
 486
 487                 /**
 488                  * Handler for paste action
 489                  */
 490                 handlePasteAction: function Ui_handlePasteAction() {
 491                 },
 492
 493                 /**
 494                  * Scrolls content to the specified position
 495                  */
 496                 scrollContentTo: function scrollContentTo(value) {
 497                         $('#main [data-role="content"]').scrollview('scrollTo', 0, value);
 498                 },
 499
 500                 /**
 501                  * @param {FileSystemStorage[]} nodes Storage elements
 502                  */
 503                 displayStorages: function Ui_displayStorages(nodes) {
 504                         var len = nodes.length, nodeName, i;
 505
 506                         this.updateNavbar('');
 507                         $('#fileList').empty();
 508
 509                         for (i = 0; i < len; i = i + 1) {
 510                                 nodeName = nodes[i].label.trim();
 511                                 if (nodeName !== ''
 512                                                 && (nodes[i].type === 0 || nodes[i].type === 'INTERNAL')
 513                                                 && nodeName.indexOf('wgt-') === -1
 514                                                 && $.inArray(nodeName, this.lockedFolders) === -1
 515                                         ) {
 516                                         if (!this.root) {
 517                                                 app.model.isStorageExists(nodeName,
 518                                                         app.ui.prepareFolderRow.bind(app.ui, i, nodeName), null);
 519                                         } else {
 520                                                 this.prepareFolderRow(i, nodeName);
 521                                         }
 522                                 }
 523                         }
 524
 525                         $('#levelUpBtn').addClass('vhidden');
 526                         $('#homeBtn').addClass('vhidden');
 527
 528                         $('#editActionBtn').addClass('vhidden');
 529                         $('#moreActionBtn').addClass('vhidden');
 530                         $('h1#mainTitle').html('Media');
 531
 532                         if (this.editMode) {
 533                                 this.scrollContentTo(0);
 534                         }
 535
 536                         this.resetDefaultCheckBoxLabelEvents();
 537                         this.hideSelectAllArea();
 538                         this.handleCancelEditAction();
 539
 540                         if (this.infoPopupVisibility) {
 541                                 this.toggleInfoPopup();
 542                         }
 543                 },
 544
 545                 prepareFolderRow: function (id, name) {
 546                         $(this.templateManager.get('folderRow', {
 547                                 id: id,
 548                                 name: name,
 549                                 uri: name,
 550                                 fullUri: name,
 551                         })).appendTo('#fileList');
 552                 },
 553
 554                 /**
 555                  * File comparison function using their names (case insensitive)
 556                  *
 557                  * @param {File} x
 558                  * @param {File} y
 559                  * @returns {Number}
 560                  */
 561                 fileComparison: function fileComparison(x, y) {
 562                         var a = x.name.toLowerCase(),
 563                                 b = y.name.toLowerCase();
 564
 565                         if (a < b) {
 566                                 return -1;
 567                         }
 568                         if (a > b) {
 569                                 return 1;
 570                         }
 571                         return 0;
 572                 },
 573
 574                 /**
 575                  * renders node list for folder
 576                  * @param {string} folderName
 577                  * @param {File[]} nodes
 578                  * @param {bool} [refresh=false]
 579                  */
 580                 displayFolder: function Ui_displayFolder(folderName, nodes, refresh) {
 581                         var len = nodes.length,
 582                                 listElements = [this.templateManager.get('levelUpRow')],
 583                                 nodeName,
 584                                 checkedRows = [],
 585                                 checkedRowsLen,
 586                                 i;
 587
 588                         refresh = refresh || false;
 589
 590                         // update title
 591                         this.updateTitle(this.templateManager.modifiers.escape(folderName));
 592                         // update navbar
 593                         this.updateNavbar(this.templateManager.modifiers.escape(folderName));
 594                         this.refreshPasteActionBtn();
 595
 596                         nodes.sort(this.fileComparison);
 597
 598                         // render nodes
 599                         for (i = 0; i < len; i = i + 1) {
 600                                 nodeName = nodes[i].name.trim();
 601                                 if (nodeName !== '') {
 602                                         if (nodes[i].isDirectory) {
 603                                                 // folder
 604                                                 listElements.push(this.templateManager.get('folderRow', {
 605                                                         id: i,
 606                                                         name: nodeName,
 607                                                         uri: nodes[i].fullPath,
 608                                                         fullUri: nodes[i].toURI()
 609                                                 }));
 610                                         } else {
 611                                                 // file
 612                                                 listElements.push(this.templateManager.get('fileRow', {
 613                                                         id: i,
 614                                                         name: nodeName,
 615                                                         uri: nodes[i].fullPath,
 616                                                         fullUri: nodes[i].toURI(),
 617                                                         thumbnailURI: this.helpers.getThumbnailURI(nodeName, nodes[i])
 618                                                 }));
 619                                         }
 620                                 }
 621                         }
 622
 623                         if (listElements.length === 1) {
 624                                 // set content for empty folder
 625                                 listElements.push(this.templateManager.get('emptyFolder'));
 626                                 // hide edit button for empty content
 627                                 $('#editActionBtn').addClass('vhidden');
 628                                 this.handleCancelEditAction();
 629                         } else {
 630                                 $('#editActionBtn').removeClass('vhidden');
 631                         }
 632
 633                         // scroll to top of list
 634                         this.scrollContentTo(0);
 635
 636                         $('#levelUpBtn').removeClass('vhidden');
 637                         $('#homeBtn').removeClass('vhidden');
 638                         $('#moreActionBtn').removeClass('vhidden');
 639
 640                         if (refresh === true && this.editMode === true) {
 641                                 $.each($('#fileList .ui-checkbox input:checked'), function () {
 642                                         checkedRows.push($(this).closest('li').attr('uri'));
 643                                 });
 644                         }
 645
 646                         // update file list
 647                         $('#fileList').html(listElements.join(''))
 648                                 .trigger('refresh')
 649                                 .trigger('create');
 650
 651                         if (this.editMode === true) {
 652                                 $('.selectAll').show();
 653                                 $('#fileList .folder .nodename, #fileList > li > span.nodename')
 654                                         .css('width', '70%');
 655                                 $('ul#fileList > li').css('paddingLeft', '2rem');
 656                                 $('.my-ui-checkbox').removeClass('hidden');
 657
 658                                 if (refresh === true) {
 659                                         checkedRowsLen = checkedRows.length;
 660                                         if (checkedRowsLen) {
 661                                                 if (checkedRowsLen !== $('#fileList .ui-checkbox input').length) {
 662                                                         this.setCheckboxValue('.selectAll input', false);
 663                                                 }
 664                                                 // restore checked checkboxes
 665                                                 for (i = 0; i < checkedRowsLen; i += 1) {
 666                                                         this.setCheckboxValue(
 667                                                                 '#' +
 668                                                                 $('[uri="'+ checkedRows[i] +'"]').attr('id') +
 669                                                                 ' input:checkbox',
 670                                                                 'checked'
 671                                                         );
 672                                                 }
 673                                         } else {
 674                                                 this.setCheckboxValue('.selectAll input', false);
 675                                                 // close confirm popup if visibible
 676                                                 if (
 677                                                         $.mobile.popup.active &&
 678                                                         $.mobile.popup.active.element.attr('id') === 'confirmPopup'
 679                                                         ) {
 680                                                                 $.mobile.popup.active.close();
 681                                                 }
 682                                         }
 683                                 }
 684                         } else {
 685                                 $('.selectAll').hide();
 686                                 $('#fileList .folder .nodename, #fileList > li > span.nodename')
 687                                         .css('width', '75%');
 688                                 $('ul#fileList > li').css('paddingLeft', '0');
 689                                 $('.my-ui-checkbox').addClass('hidden');
 690                         }
 691                         if (!refresh) this.hideSelectAllArea();
 692
 693                         if (this.infoPopupVisibility) {
 694                                 this.toggleInfoPopup();
 695                         }
 696                 },
 697
 698                 /**
 699                  * Toggle a checkbox associated with a given list element
 700                  * @param {jQuery} listElement
 701                  */
 702                 toggleCheckBoxState: function Ui_toggleCheckBoxState(listElement) {
 703                         var checkboxInput = null;
 704
 705                         checkboxInput = listElement.find('form > div.ui-checkbox input');
 706                         this.setCheckboxValue(checkboxInput, !checkboxInput.attr('checked'));
 707                 },
 708
 709                 /**
 710                  * Shows item checkboxes and topbar with select all option
 711                  */
 712                 showEditCheckBoxes: function Ui_showEditCheckBoxes() {
 713                         var self = this;
 714
 715                         this.showSelectAllArea();
 716
 717                         $('ul#fileList > li').animate({paddingLeft: '2rem'}, 500, 'swing', function () {
 718                                 self.editMode = true;
 719                                 $('.my-ui-checkbox').removeClass('hidden');
 720                         });
 721                 },
 722
 723                 /**
 724                  * Hides item checkboxes and topbar with select all option
 725                  * All checkboxes are auto uncheked
 726                  */
 727                 hideEditCheckBoxes: function Ui_hideEditCheckBoxes() {
 728                         var self = this;
 729
 730                         this.hideSelectAllArea(); // hide select all option topbar
 731
 732                         $('ul#fileList > li').animate({paddingLeft: '0'}, 200, 'swing', function () {
 733                                 $('.my-ui-checkbox').addClass('hidden');
 734                                 $.mobile.activePage.page('refresh');
 735                         });
 736
 737                         // uncheck all checkboxes
 738                         $('ul#fileList input[type=checkbox]').each(function (index) {
 739                                 self.setCheckboxValue(this, false);
 740                         });
 741
 742                         //uncheck select all input
 743                         this.setCheckboxValue('.ui-header .selectAll input', false);
 744                 },
 745
 746                 /**
 747                  * Save current header and content height
 748                  */
 749                 saveHeights: function Ui_saveHeights() {
 750                         this.currentHeaderHeight = $('#main div[data-role="header"]').height();
 751                         this.currentScrollPosition = $('#main div[data-role="content"]').scrollview('getScrollPosition').y;
 752                 },
 753
 754                 /**
 755                  * Changes content scroll position after showing/hiding selectAllArea
 756                  */
 757                 changeContentScrollPosition: function Ui_changeContentScrollPosition() {
 758                         var diff;
 759                         if (this.currentScrollPosition !== 0) {
 760                                 diff = $('#main div[data-role="header"]').height() - this.currentHeaderHeight;
 761                                 $('#main div[data-role="content"]').scrollview('scrollTo', 0, -(this.currentScrollPosition + diff));
 762                         }
 763                 },
 764
 765                 /**
 766                  * Shows topbar with select all option
 767                  */
 768                 showSelectAllArea: function Ui_showSelectAllArea() {
 769                         this.saveHeights();
 770                         $('.selectAll').show();
 771                         $.mobile.activePage.page('refresh');
 772                         this.changeContentScrollPosition();
 773                 },
 774
 775                 /**
 776                  * Hides topbar with select all option
 777                  */
 778                 hideSelectAllArea: function Ui_hideSelectAllArea() {
 779                         this.saveHeights();
 780                         $('.selectAll').hide();
 781                         $.mobile.activePage.page('refresh');
 782                         this.changeContentScrollPosition();
 783                 },
 784
 785                 /**
 786                  * Enable specified options for tabbar
 787                  * @param {object} tabbar
 788                  * @param {array} enableOptions options to enable
 789                  */
 790                 enableControlBarButtons: function Ui_enableControlBarButtons(tabbar, enableOptions) {
 791                         var i = 0,
 792                                 len = enableOptions.length;
 793
 794                         for (i = 0; i < len; i += 1) {
 795                                 tabbar.tabbar('enable', enableOptions[i]);
 796                         }
 797                 },
 798
 799                 /**
 800                  * Disable specified options for tabbar
 801                  * @param {object} tabbar controlbar
 802                  * @param {array} disableOptions options to enable
 803                  */
 804                 disableControlBarButtons: function Ui_disableControlBarButtons(tabbar, disableOptions) {
 805                         var i = 0,
 806                                 len = disableOptions.length;
 807
 808                         for (i = 0; i < len; i += 1) {
 809                                 tabbar.tabbar('disable', disableOptions[i]);
 810                         }
 811                 },
 812
 813                 /**
 814                  * @param {string} path
 815                  */
 816                 updateTitle: function Ui_updateTitle(path) {
 817                         var regexp = new RegExp('([^\/])+$', 'g'),
 818                                 match = path.match(regexp),
 819                                 lastDir = match[0] || '(dir)';
 820                         $('h1#mainTitle').html(lastDir);
 821                 },
 822
 823                 /**
 824                  * @param {string} path
 825                  */
 826                 updateNavbar: function Ui_updateNavbar(path) {
 827                         var html = ['<span uri="home">Media</span>'],
 828                                 splitted,
 829                                 len,
 830                                 i;
 831
 832                         if (typeof path === 'string' && path !== '') {
 833                                 splitted = path.split('/');
 834                                 len = splitted.length;
 835
 836                                 for (i = 0; i < len; i = i + 1) {
 837                                         html.push('<span uri="' + splitted.slice(0, i + 1).join('/') + '">' + splitted[i] + '</span>');
 838                                 }
 839                         }
 840                         $('#navbar').html(html.join(' > '));
 841                 },
 842
 843                 handleSelectAllChange: function Ui_handleSelectAllChange() {
 844                         var $selectAllInput = $('.ui-header .selectAll .ui-checkbox input'),
 845                                 self = this;
 846                         $selectAllInput.data('checkboxradio').refresh();
 847
 848                         if ($selectAllInput.is(':checked')) {
 849                                 // check all checkboxes
 850                                 $('ul#fileList input[type=checkbox]').each(function (index) {
 851                                         self.setCheckboxValue(this, true);
 852                                 });
 853
 854                                 this.enableControlBarButtons($('.editTabbar'), [this.EDIT_TABBAR_DELETE_ACTION, this.EDIT_TABBAR_COPY_ACTION, this.EDIT_TABBAR_MOVE_ACTION]);
 855                         } else {
 856                                 $('ul#fileList input[type=checkbox]').each(function (index) {
 857                                         self.setCheckboxValue(this, false);
 858                                 });
 859
 860                                 this.disableControlBarButtons($('.editTabbar'), [this.EDIT_TABBAR_DELETE_ACTION, this.EDIT_TABBAR_COPY_ACTION, this.EDIT_TABBAR_MOVE_ACTION]);
 861                         }
 862                 },
 863
 864                 /**
 865                  *
 866                  */
 867                 refreshSelectAllStatus: function Ui_refreshSelectAllStatus() {
 868                         var $selectAllInput = $('.ui-header .selectAll .ui-checkbox input');
 869                         // update status of select all checkbox
 870                         if ($('ul#fileList input:checkbox:not(:checked)').length === 0) {
 871                                 // all nodes checked
 872                                 this.setCheckboxValue($selectAllInput, true);
 873                         } else {
 874                                 // some node is not checked
 875                                 this.setCheckboxValue($selectAllInput, false);
 876                         }
 877                 },
 878
 879                 /**
 880                  * Refresh activity of edit menu
 881                  */
 882                 refreshEditMenu: function () {
 883                         if ($('ul#fileList input:checkbox:checked').length > 0) {
 884                                 this.enableControlBarButtons($('.editTabbar'),
 885                                         [this.EDIT_TABBAR_DELETE_ACTION, this.EDIT_TABBAR_COPY_ACTION, this.EDIT_TABBAR_MOVE_ACTION]);
 886                         } else {
 887                                 this.disableControlBarButtons($('.editTabbar'),
 888                                         [this.EDIT_TABBAR_DELETE_ACTION, this.EDIT_TABBAR_COPY_ACTION, this.EDIT_TABBAR_MOVE_ACTION]);
 889                         }
 890                 },
 891
 892                 /**
 893                  * Unbinds default events for checkbox labels
 894                  */
 895                 resetDefaultCheckBoxLabelEvents: function Ui_resetDefaultCheckBoxLabelEvents() {
 896                         $('div.ui-checkbox > label')
 897                                 .unbind('vmousedown')
 898                                 .unbind('vmouseup')
 899                                 .unbind('vmouseover')
 900                                 .unbind('vclick');
 901                 },
 902
 903                 /**
 904                  * Remove html node element from list
 905                  * @param {string} nodeId node id
 906                  */
 907                 removeNodeFromList: function Ui_removeNodeFromList(nodeId) {
 908                         $('ul#fileList > li#' + nodeId).remove();
 909
 910                         // hide select All checkbox if removed all elements;
 911                         if ($('ul#fileList > li.node').length === 0) {
 912                                 this.hideSelectAllArea();
 913                         }
 914                 },
 915
 916                 /**
 917                  * Enable/Disable
 918                  */
 919                 refreshPasteActionBtn: function Ui_refreshPasteActionBtn() {
 920                         if (app.emptyClipboard()) {
 921                                 $('#pasteActionBtnRow').addClass('hidden');
 922                         } else {
 923                                 $('#pasteActionBtnRow').removeClass('hidden');
 924                         }
 925                 },
 926
 927                 isFileListEmpty: function Ui_isFileListEmpty() {
 928                         return ($('ul#fileList').children('.node').length < 1);
 929                 },
 930
 931                 setCheckboxValue: function Ui_setCheckboxValue (element, value) {
 932                         var $element = $(element),
 933                                 checkboxradio = $element.data('checkboxradio');
 934
 935                         $(element).attr('checked', value);
 936                         if (checkboxradio) {
 937                                 checkboxradio.refresh();
 938                         }
 939
 940                 }
 941         };
 942 }());