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