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