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