Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

MDL-31901: brushing the filepicker code

- use the same function for displaying request result for list/search/login/logout commands since sometimes we can not predict what kind of result is going to be returned
- prevent default behaviour for links, so ### does not appear in URL
- use flag issearchresult as received in the response from repository because we can't guess it right sometimes
- do not make excessive AJAX request when user switches to list view
  • Loading branch information...
commit 4adecd7beb1ef29691e61d4f568b4f0f6fec7dbd 1 parent 6723372
Marina Glancy marinaglancy authored

Showing 1 changed file with 110 additions and 231 deletions. Show diff stats Hide diff stats

  1. +110 231 repository/filepicker.js
341 repository/filepicker.js
@@ -47,19 +47,6 @@ M.core_filepicker.instances = M.core_filepicker.instances || {};
47 47 M.core_filepicker.active_filepicker = null;
48 48
49 49 /**
50   - * Set selected file info
51   - *
52   - * @parma object file info
53   - */
54   -M.core_filepicker.select_file = function(file) {
55   - var fileinfo = {};
56   - fileinfo['title'] = file.title;
57   - fileinfo['source'] = file.reference;
58   - fileinfo['thumbnail'] = file.thumbnail;
59   - M.core_filepicker.active_filepicker.select_file(fileinfo);
60   -}
61   -
62   -/**
63 50 * Init and show file picker
64 51 */
65 52 M.core_filepicker.show = function(Y, options) {
@@ -381,25 +368,19 @@ M.core_filepicker.init = function(Y, options) {
381 368 tmpNode.isLeaf = true;
382 369 }
383 370 },
384   - view_files: function(page) {
385   - var p= page?page:null;
  371 + view_files: function() {
386 372 if (this.active_repo.issearchresult) {
387 373 // list view is desiged to display treeview
388 374 // it is not working well with search result
389 375 this.view_as_icons();
390 376 } else {
391   - if (this.objecttag) {
392   - // handle cancle action for repo using iframe
393   - this.create_object_container(this.objecttag);
  377 + this.viewbar.set('disabled', false);
  378 + if (this.viewmode == 1) {
  379 + this.view_as_icons();
  380 + } else if (this.viewmode == 2) {
  381 + this.view_as_list();
394 382 } else {
395   - this.viewbar.set('disabled', false);
396   - if (this.viewmode == 1) {
397   - this.view_as_icons();
398   - } else if (this.viewmode == 2) {
399   - this.view_as_list(p);
400   - } else {
401   - this.view_as_icons();
402   - }
  383 + this.view_as_icons();
403 384 }
404 385 }
405 386 },
@@ -414,7 +395,6 @@ M.core_filepicker.init = function(Y, options) {
414 395 path:node.path?node.path:'',
415 396 page:node.page?args.page:'',
416 397 callback: function(id, obj, args) {
417   - obj.issearchresult = false;
418 398 var list = obj.list;
419 399 scope.viewbar.set('disabled', false);
420 400 scope.parse_repository_options(obj);
@@ -425,70 +405,46 @@ M.core_filepicker.init = function(Y, options) {
425 405 }
426 406 }, false);
427 407 },
428   - view_as_list: function(p) {
  408 + view_as_list: function() {
429 409 var scope = this;
430   - var page = null;
431   - if (!p) {
432   - if (scope.active_repo.page) {
433   - page = scope.active_repo.page;
434   - }
435   - } else {
436   - page = p;
437   - }
438   - scope.request({
439   - action:'list',
440   - client_id: scope.options.client_id,
441   - repository_id: scope.active_repo.id,
442   - path:'',
443   - page:page,
444   - callback: function(id, obj, args) {
445   - scope.parse_repository_options(obj);
446   - if (obj.login) {
447   - scope.viewbar.set('disabled', true);
448   - scope.print_login(obj);
449   - return;
450   - }
451   - var client_id = scope.options.client_id;
452   - var dynload = scope.active_repo.dynload;
453   - var list = obj.list;
454   - var panel_id = '#panel-'+client_id;
455   - scope.viewmode = 2;
456   - Y.one(panel_id).set('innerHTML', '');
457   -
458   - scope.print_header();
  410 + var client_id = scope.options.client_id;
  411 + var dynload = scope.active_repo.dynload;
  412 + var list = this.filelist;
  413 + var panel_id = '#panel-'+client_id;
  414 + scope.viewmode = 2;
  415 + Y.one(panel_id).set('innerHTML', '');
  416 + scope.print_header();
459 417
460   - var html = '<div class="fp-tree-panel" id="treeview-'+client_id+'">';
461   - if (list && list.length==0) {
462   - html += '<div class="fp-emptylist mdl-align">' +M.str.repository.nofilesavailable+'</div>';
463   - }
464   - html += '</div>';
  418 + var html = '<div class="fp-tree-panel" id="treeview-'+client_id+'">';
  419 + if (list && list.length==0) {
  420 + html += '<div class="fp-emptylist mdl-align">' +M.str.repository.nofilesavailable+'</div>';
  421 + }
  422 + html += '</div>';
465 423
466   - var tree = Y.Node.create(html);
467   - Y.one(panel_id).appendChild(tree);
468   - if (!list || list.length==0) {
469   - return;
470   - }
  424 + var tree = Y.Node.create(html);
  425 + Y.one(panel_id).appendChild(tree);
  426 + if (!list || list.length==0) {
  427 + return;
  428 + }
471 429
472   - scope.treeview = new YAHOO.widget.TreeView('treeview-'+client_id);
473   - if (dynload) {
474   - scope.treeview.setDynamicLoad(scope.treeview_dynload, 1);
475   - }
  430 + scope.treeview = new YAHOO.widget.TreeView('treeview-'+client_id);
  431 + if (dynload) {
  432 + scope.treeview.setDynamicLoad(scope.treeview_dynload, 1);
  433 + }
476 434
477   - for(k in list) {
478   - scope.build_tree(list[k], scope.treeview.getRoot());
479   - }
480   - scope.treeview.subscribe('clickEvent', function(e){
481   - if(e.node.isLeaf){
482   - var fileinfo = {};
483   - fileinfo['title'] = e.node.data.filename;
484   - fileinfo['source'] = e.node.data.source;
485   - fileinfo['thumbnail'] = e.node.data.thumbnail;
486   - scope.select_file(fileinfo);
487   - }
488   - });
489   - scope.treeview.draw();
  435 + for(k in list) {
  436 + scope.build_tree(list[k], scope.treeview.getRoot());
  437 + }
  438 + scope.treeview.subscribe('clickEvent', function(e){
  439 + if(e.node.isLeaf){
  440 + var fileinfo = {};
  441 + fileinfo['title'] = e.node.data.filename;
  442 + fileinfo['source'] = e.node.data.source;
  443 + fileinfo['thumbnail'] = e.node.data.thumbnail;
  444 + scope.select_file(fileinfo);
490 445 }
491   - }, true);
  446 + });
  447 + scope.treeview.draw();
492 448 },
493 449 view_as_icons: function() {
494 450 var scope = this;
@@ -564,6 +520,7 @@ M.core_filepicker.init = function(Y, options) {
564 520 var dynload = this.active_repo.dynload;
565 521 if(node.children) {
566 522 y_file.on('click', function(e, p) {
  523 + e.preventDefault();
567 524 if(dynload) {
568 525 var params = {'path':p.path};
569 526 scope.list(params);
@@ -573,6 +530,7 @@ M.core_filepicker.init = function(Y, options) {
573 530 }
574 531 }, this, node);
575 532 y_title.on('click', function(e, p, id){
  533 + e.preventDefault();
576 534 var icon = Y.one(id);
577 535 icon.simulate('click');
578 536 }, this, node, '#'+link.id);
@@ -584,9 +542,11 @@ M.core_filepicker.init = function(Y, options) {
584 542 fileinfo['haslicense'] = list[k].haslicense?true:false;
585 543 fileinfo['hasauthor'] = list[k].hasauthor?true:false;
586 544 y_title.on('click', function(e, args) {
  545 + e.preventDefault();
587 546 this.select_file(args);
588 547 }, this, fileinfo);
589 548 y_file.on('click', function(e, args) {
  549 + e.preventDefault();
590 550 this.select_file(args);
591 551 }, this, fileinfo);
592 552 }
@@ -612,7 +572,6 @@ M.core_filepicker.init = function(Y, options) {
612 572 path.setStyle('display', 'none');
613 573 }
614 574 var panel = Y.one('#panel-'+client_id);
615   - panel.set('innerHTML', '');
616 575 var form_id = 'fp-rename-form-'+client_id;
617 576 var html = '<div class="fp-rename-form" id="'+form_id+'">';
618 577 html += '<p><img src="'+args.thumbnail+'" /></p>';
@@ -622,28 +581,16 @@ M.core_filepicker.init = function(Y, options) {
622 581
623 582 var le_checked = '';
624 583 var le_style = '';
625   - var returntypes = this.options.repositories[this.active_repo.id].return_types;
626   -
627   - if (returntypes == 1) {
628   - // support link only
629   - html += '<input type="checkbox" id="linkexternal-'+client_id+'" style="display:none" value="checked" checked />';
630   - } else if (returntypes == 4) {
631   - html += '<input type="checkbox" id="filereference-'+client_id+'" style="display:none" value="checked" checked />';
632   - } else {
633   - if (((returntypes & 1) == 1) && ((this.options.return_types & 1) == 1)) {
634   - // support external links
635   - html += '<tr><td></td><td class="mdl-left"><input type="checkbox" id="linkexternal-'+client_id+'" value="" />'+M.str.repository.linkexternal+'</td></tr>';
636   - }
637   - // form element support file reference and repository support it too
638   - if (((returntypes & 4) == 4) && ((this.options.return_types & 4) == 4)) {
639   - // file reference
640   - html += '<tr><td></td><td class="mdl-left"><input type="checkbox" id="filereference-'+client_id+'" value="" />'+M.str.repository.uselatestfile+'</td></tr>';
641   - }
642   -
643   - if (((returntypes & 4) != 4) && ((returntypes & 1) != 1)) {
644   - html += '<input type="checkbox" id="linkexternal-'+client_id+'" style="display:none" value="checked" />';
645   - html += '<input type="checkbox" id="filereference-'+client_id+'" style="display:none" value="checked" />';
646   - }
  584 + if (this.options.repositories[this.active_repo.id].return_types == 1) {
  585 + // support external links only
  586 + le_checked = 'checked';
  587 + le_style = ' style="display:none;"';
  588 + } else if(this.options.repositories[this.active_repo.id].return_types == 2) {
  589 + // support internal files only
  590 + le_style = ' style="display:none;"';
  591 + }
  592 + if ((this.options.externallink && this.options.env == 'editor' && this.options.return_types != 1)) {
  593 + html += '<tr'+le_style+'><td></td><td class="mdl-left"><input type="checkbox" id="linkexternal-'+client_id+'" value="" '+le_checked+' />'+M.str.repository.linkexternal+'</td></tr>';
647 594 }
648 595
649 596 if (!args.hasauthor) {
@@ -704,7 +651,7 @@ M.core_filepicker.init = function(Y, options) {
704 651 // in editor, images are stored in '/' only
705 652 params.savepath = '/';
706 653 // when image or media button is clicked
707   - if (this.options.return_types != 1) {
  654 + if ( this.options.return_types != 1 ) {
708 655 var linkexternal = Y.one('#linkexternal-'+client_id);
709 656 if (linkexternal && linkexternal.get('checked')) {
710 657 params['linkexternal'] = 'yes';
@@ -719,15 +666,6 @@ M.core_filepicker.init = function(Y, options) {
719 666 params['linkexternal'] = 'yes';
720 667 }
721 668
722   - if (this.options.return_types != 4) {
723   - var usefilereference = Y.one('#filereference-'+client_id);
724   - if (usefilereference && usefilereference.get('checked')) {
725   - params['usefilereference'] = 'yes';
726   - }
727   - } else {
728   - params['usefilereference'] = 'yes';
729   - }
730   -
731 669 this.wait('download', title);
732 670 this.request({
733 671 action:'download',
@@ -832,15 +770,19 @@ M.core_filepicker.init = function(Y, options) {
832 770 // adding buttons
833 771 var view_icons = {label: M.str.repository.iconview, value: 't', 'checked': true,
834 772 onclick: {
835   - fn: function(){
836   - scope.view_as_icons();
  773 + fn: function(e){
  774 + e.preventDefault();
  775 + scope.viewmode = 1;
  776 + scope.view_files();
837 777 }
838 778 }
839 779 };
840 780 var view_listing = {label: M.str.repository.listview, value: 'l',
841 781 onclick: {
842   - fn: function(){
843   - scope.view_as_list();
  782 + fn: function(e){
  783 + e.preventDefault();
  784 + scope.viewmode = 2;
  785 + scope.view_files();
844 786 }
845 787 }
846 788 };
@@ -868,6 +810,7 @@ M.core_filepicker.init = function(Y, options) {
868 810 list.append('<li id="'+id+'"><a class="fp-repo-name" id="'+link_id+'" href="###">'+repository.name+'</a></li>');
869 811 Y.one('#'+link_id).prepend('<img src="'+repository.icon+'" width="16" height="16" />&nbsp;');
870 812 Y.one('#'+link_id).on('click', function(e, scope, repository_id) {
  813 + e.preventDefault();
871 814 YAHOO.util.Cookie.set('recentrepository', repository_id);
872 815 scope.repository_id = repository_id;
873 816 this.list({'repo_id':repository_id});
@@ -886,9 +829,8 @@ M.core_filepicker.init = function(Y, options) {
886 829 parse_repository_options: function(data) {
887 830 this.filelist = data.list?data.list:null;
888 831 this.filepath = data.path?data.path:null;
889   - this.objecttag = data.object?data.object:null;
890 832 this.active_repo = {};
891   - this.active_repo.issearchresult = Boolean(data.issearchresult);
  833 + this.active_repo.issearchresult = data.issearchresult?true:false;
892 834 this.active_repo.dynload = data.dynload?data.dynload:false;
893 835 this.active_repo.pages = Number(data.pages?data.pages:null);
894 836 this.active_repo.page = Number(data.page?data.page:null);
@@ -1035,10 +977,7 @@ M.core_filepicker.init = function(Y, options) {
1035 977 'path': '',
1036 978 'client_id': client_id,
1037 979 'repository_id': repository_id,
1038   - 'callback': function(id, o, args) {
1039   - scope.parse_repository_options(o);
1040   - scope.view_files();
1041   - }
  980 + 'callback': this.display_response
1042 981 }, true);
1043 982 }, this);
1044 983 }
@@ -1072,11 +1011,7 @@ M.core_filepicker.init = function(Y, options) {
1072 1011 client_id: client_id,
1073 1012 repository_id: repository_id,
1074 1013 form: {id: 'fp-form-'+scope.options.client_id,upload:false,useDisabled:true},
1075   - callback: function(id, o, args) {
1076   - o.issearchresult = true;
1077   - scope.parse_repository_options(o);
1078   - scope.view_files();
1079   - }
  1014 + callback: scope.display_response
1080 1015 }, true);
1081 1016 }, this);
1082 1017 }
@@ -1110,94 +1045,47 @@ M.core_filepicker.init = function(Y, options) {
1110 1045 }, this);
1111 1046
1112 1047 },
1113   - search: function(args) {
1114   - var data = this.logindata;
1115   - var params = {};
  1048 + display_response: function(id, obj, args) {
  1049 + var scope = args.scope
  1050 + // highlight the current repository in repositories list
  1051 + Y.all('#fp-list-'+scope.options.client_id+' li a').setStyle('backgroundColor', 'transparent');
  1052 + var el = Y.one('#repository-'+scope.options.client_id+'-'+obj.repo_id+'-link');
  1053 + if (el) {
  1054 + el.setStyle('backgroundColor', '#AACCEE');
  1055 + }
  1056 + // display response
  1057 + if (obj.login) {
  1058 + scope.viewbar.set('disabled', true);
  1059 + scope.print_login(obj);
  1060 + } else if (obj.upload) {
  1061 + scope.viewbar.set('disabled', true);
  1062 + scope.parse_repository_options(obj);
  1063 + scope.create_upload_form(obj);
  1064 + } else if (obj.iframe) {
1116 1065
1117   - for (var k in data) {
1118   - if(data[k].type!='popup') {
1119   - var el = document.getElementsByName(data[k].name)[0];
1120   - params[data[k].name] = '';
1121   - if(el.type == 'checkbox') {
1122   - params[data[k].name] = el.checked;
1123   - } else if(el.type == 'radio') {
1124   - var tmp = document.getElementsByName(data[k].name);
1125   - for(var i in tmp) {
1126   - if (tmp[i].checked) {
1127   - params[data[k].name] = tmp[i].value;
1128   - }
1129   - }
1130   - } else {
1131   - params[data[k].name] = el.value;
1132   - }
1133   - }
  1066 + } else if (obj.list) {
  1067 + scope.viewbar.set('disabled', false);
  1068 + scope.parse_repository_options(obj);
  1069 + scope.view_files();
1134 1070 }
1135   - this.request({
1136   - scope: scope,
1137   - action:'search',
1138   - client_id: client_id,
1139   - repository_id: repository_id,
1140   - form: {id: 'fp-form-'+scope.options.client_id,upload:false,useDisabled:true},
1141   - callback: function(id, o, args) {
1142   - o.issearchresult = true;
1143   - scope.parse_repository_options(o);
1144   - scope.view_files();
1145   - }
1146   - }, true);
1147 1071 },
1148 1072 list: function(args) {
1149   - var scope = this;
1150 1073 if (!args) {
1151 1074 args = {};
1152 1075 }
1153 1076 if (!args.repo_id) {
1154   - args.repo_id = scope.active_repo.id;
  1077 + args.repo_id = this.active_repo.id;
1155 1078 }
1156   - scope.request({
1157   - action:'list',
1158   - client_id: scope.options.client_id,
  1079 + this.request({
  1080 + action: 'list',
  1081 + client_id: this.options.client_id,
1159 1082 repository_id: args.repo_id,
1160   - path:args.path?args.path:'',
1161   - page:args.page?args.page:'',
1162   - callback: function(id, obj, args) {
1163   - Y.all('#fp-list-'+scope.options.client_id+' li a').setStyle('backgroundColor', 'transparent');
1164   - var el = Y.one('#repository-'+scope.options.client_id+'-'+obj.repo_id+'-link');
1165   - if (el) {
1166   - el.setStyle('backgroundColor', '#AACCEE');
1167   - }
1168   - if (obj.login) {
1169   - scope.viewbar.set('disabled', true);
1170   - scope.print_login(obj);
1171   - } else if (obj.upload) {
1172   - scope.viewbar.set('disabled', true);
1173   - scope.parse_repository_options(obj);
1174   - scope.create_upload_form(obj);
1175   -
1176   - } else if (obj.object) {
1177   - M.core_filepicker.active_filepicker = scope;
1178   - scope.viewbar.set('disabled', true);
1179   - scope.parse_repository_options(obj);
1180   - scope.create_object_container(obj.object);
1181   -
1182   - } else if (obj.list) {
1183   - obj.issearchresult = false;
1184   - scope.viewbar.set('disabled', false);
1185   - scope.parse_repository_options(obj);
1186   - scope.view_files();
1187   - }
1188   - }
  1083 + path: args.path,
  1084 + page: args.page,
  1085 + scope: this,
  1086 + callback: this.display_response
1189 1087 }, true);
1190 1088 },
1191   - create_object_container: function(data) {
1192   - var client_id = this.options.client_id;
1193   - Y.one('#panel-'+client_id).set('innerHTML', '');
1194   - var types = this.options.accepted_types;
1195   - var panel = Y.one('#panel-'+client_id);
1196   - var str = '<object data="'+data.src+'" type="'+data.type+'" width="98%" height="98%" id="container_object" class="fp-object-container mdl-align">';
1197   - str += '</object>';
1198   - var container = Y.Node.create(str);
1199   - Y.one('#panel-'+client_id).appendChild(container);
1200   - },
1201 1089 create_upload_form: function(data) {
1202 1090 var client_id = this.options.client_id;
1203 1091 Y.one('#panel-'+client_id).set('innerHTML', '');
@@ -1303,7 +1191,8 @@ M.core_filepicker.init = function(Y, options) {
1303 1191 if(!r.nosearch) {
1304 1192 var html = '<a href="###"><img src="'+M.util.image_url('a/search')+'" /> '+M.str.repository.search+'</a>';
1305 1193 var search = Y.Node.create(html);
1306   - search.on('click', function() {
  1194 + search.on('click', function(e) {
  1195 + e.preventDefault();
1307 1196 scope.request({
1308 1197 scope: scope,
1309 1198 action:'searchform',
@@ -1345,10 +1234,7 @@ M.core_filepicker.init = function(Y, options) {
1345 1234 client_id: client_id,
1346 1235 repository_id: repository_id,
1347 1236 form: {id: 'fp-search-form',upload:false,useDisabled:true},
1348   - callback: function(id, o, args) {
1349   - scope.parse_repository_options(o);
1350   - scope.view_files();
1351   - }
  1237 + callback: scope.display_response
1352 1238 }, true);
1353 1239 search_dialog.cancel();
1354 1240 }
@@ -1391,7 +1277,8 @@ M.core_filepicker.init = function(Y, options) {
1391 1277 if(!r.norefresh) {
1392 1278 var html = '<a href="###"><img src="'+M.util.image_url('a/refresh')+'" /> '+M.str.repository.refresh+'</a>';
1393 1279 var refresh = Y.Node.create(html);
1394   - refresh.on('click', function() {
  1280 + refresh.on('click', function(e) {
  1281 + e.preventDefault();
1395 1282 this.list();
1396 1283 }, this);
1397 1284 toolbar.appendChild(refresh);
@@ -1400,16 +1287,14 @@ M.core_filepicker.init = function(Y, options) {
1400 1287 var label = r.logouttext?r.logouttext:M.str.repository.logout;
1401 1288 var html = '<a href="###"><img src="'+M.util.image_url('a/logout')+'" /> '+label+'</a>';
1402 1289 var logout = Y.Node.create(html);
1403   - logout.on('click', function() {
  1290 + logout.on('click', function(e) {
  1291 + e.preventDefault();
1404 1292 this.request({
1405 1293 action:'logout',
1406 1294 client_id: client_id,
1407 1295 repository_id: repository_id,
1408 1296 path:'',
1409   - callback: function(id, obj, args) {
1410   - scope.viewbar.set('disabled', true);
1411   - scope.print_login(obj);
1412   - }
  1297 + callback: this.display_response
1413 1298 }, true);
1414 1299 }, this);
1415 1300 toolbar.appendChild(logout);
@@ -1503,6 +1388,7 @@ M.core_filepicker.init = function(Y, options) {
1503 1388 Y.all('#fp-header-'+client_id+' .fp-paging a').each(
1504 1389 function(node, id) {
1505 1390 node.on('click', function(e) {
  1391 + e.preventDefault();
1506 1392 var id = node.get('id');
1507 1393 var re = new RegExp("repo-page-(\\d+)", "i");
1508 1394 var result = id.match(re);
@@ -1515,19 +1401,11 @@ M.core_filepicker.init = function(Y, options) {
1515 1401 client_id: client_id,
1516 1402 repository_id: r.id,
1517 1403 params: {'page':result[1]},
1518   - callback: function(id, o, args) {
1519   - o.issearchresult = true;
1520   - scope.parse_repository_options(o);
1521   - scope.view_files(result[1]);
1522   - }
  1404 + callback: scope.display_response
1523 1405 }, true);
1524 1406
1525 1407 } else {
1526   - if (scope.viewmode == 2) {
1527   - scope.view_as_list(result[1]);
1528   - } else {
1529   - scope.list(args);
1530   - }
  1408 + scope.list(args);
1531 1409 }
1532 1410 });
1533 1411 });
@@ -1549,7 +1427,8 @@ M.core_filepicker.init = function(Y, options) {
1549 1427 var sep = Y.Node.create('<span>/</span>');
1550 1428 path.appendChild(link);
1551 1429 path.appendChild(sep);
1552   - Y.one('#'+link.id).on('click', function(Y, path){
  1430 + Y.one('#'+link.id).on('click', function(e, path){
  1431 + e.preventDefault();
1553 1432 this.list({'path':path});
1554 1433 }, this, link_path)
1555 1434 }

0 comments on commit 4adecd7

Please sign in to comment.
Something went wrong with that request. Please try again.