Skip to content
This repository has been archived by the owner on Nov 25, 2020. It is now read-only.

Commit

Permalink
Use flexbox instead of JS height computing when possible
Browse files Browse the repository at this point in the history 
Buffer infopanel update to avoid blinking
Optimize display. Avoid multiple $$ calls, avoid updating tree node label/icon if not necessary
Defer AjxpDroppables initialization during tree rendering
Remove resize listener on window for Scrollbar
Still todo: recheck all editors
  • Loading branch information
@cdujeu
cdujeu committed May 7, 2015
1 parent 58e6fc4 commit 1c08727
Show file tree
Hide file tree
Showing 17 changed files with 150 additions and 79 deletions.
12 changes: 11 additions & 1 deletion core/src/plugins/access.ajxp_home/home.css
View file
Expand Up @@ -25,6 +25,9 @@
#home_left_bar{
width: 420px;
background-color: rgba(34, 34, 34, 0.5);
}

.no-flexbox #home_left_bar{
float: left;
}

Expand All @@ -33,9 +36,16 @@
}

#home_center_panel {
z-index: 1;
}

.no-flexbox #home_center_panel{
position: absolute;
left: 420px;
z-index: 1;
}

.flexbox #home_center_panel{
flex: 1;
}

.repoInfoBadge {
Expand Down
12 changes: 6 additions & 6 deletions core/src/plugins/access.ajxp_home/manifest.xml
View file
Expand Up @@ -119,7 +119,7 @@
display:none;
}
</style>
<div id="home_account_pane" ajxpClass="UserDashboardHome">
<div id="home_account_pane" ajxpClass="UserDashboardHome" class="horizontal_layout">
<div id="home_left_bar" ajxpClass="AjxpPane" ajxpOptions='{"fit":"height", "fitParent":"orbit_content"}' style="width:420px;">
<div id="welcome" style="min-height:94px;"></div>
<div id="workspaces_center" ajxpClass="AjxpPane" ajxpOptions='{"fit":"height", "fitParent":"home_left_bar"}'>
Expand Down Expand Up @@ -185,25 +185,25 @@
AJXP_MESSAGE[user_home.62]
<div class="tutorial_load_button"><i class="icon-youtube-play"></i> Play Video</div>
</div>
<iframe class="tutorial_video" width="640" height="360" frameborder="0" allowfullscreen src="https://img.youtube.com/vi/80kq-T6bQO4/0.jpg"></iframe>
<img class="tutorial_video" src="https://img.youtube.com/vi/80kq-T6bQO4/0.jpg">
<div class="tutorial_legend" data-videoSrc="//www.youtube.com/embed/ZuVKsIa4XdU?list=PLxzQJCqzktEYnIChsR5h3idjAxgBssnt5">
AJXP_MESSAGE[user_home.63]
<div class="tutorial_load_button"><i class="icon-youtube-play"></i> Play Video</div>
</div>
<iframe class="tutorial_video" width="640" height="360" frameborder="0" allowfullscreen src="https://img.youtube.com/vi/ZuVKsIa4XdU/0.jpg"></iframe>
<img class="tutorial_video" src="https://img.youtube.com/vi/ZuVKsIa4XdU/0.jpg">
<div class="tutorial_legend" data-videoSrc="//www.youtube.com/embed/MEHCN64RoTY?list=PLxzQJCqzktEYnIChsR5h3idjAxgBssnt5">
AJXP_MESSAGE[user_home.64]
<div class="tutorial_load_button"><i class="icon-youtube-play"></i> Play Video</div>
</div>
<iframe class="tutorial_video" width="640" height="360" frameborder="0" allowfullscreen src="https://img.youtube.com/vi/MEHCN64RoTY/0.jpg"></iframe>
<img class="tutorial_video" src="https://img.youtube.com/vi/MEHCN64RoTY/0.jpg">
<div class="tutorial_legend" src="//www.youtube.com/embed/ot2Nq-RAnYE?list=PLxzQJCqzktEYnIChsR5h3idjAxgBssnt5">
<div class="tutorial_legend" data-videoSrc="//www.youtube.com/embed/ot2Nq-RAnYE?list=PLxzQJCqzktEYnIChsR5h3idjAxgBssnt5">
AJXP_MESSAGE[user_home.66]
<div class="tutorial_load_button"><i class="icon-youtube-play"></i> Play Video</div>
</div>
<iframe width="640" height="360" class="tutorial_video" frameborder="0" allowfullscreen src="https://img.youtube.com/vi/ot2Nq-RAnYE/0.jpg"></iframe>
<img class="tutorial_video" src="https://img.youtube.com/vi/ot2Nq-RAnYE/0.jpg">
<div style="clear:left; text-align:center;">
<a href="http://pyd.io/end-user-tutorials/" target="_blank" style="text-align: center;font-size: 25px;background-color: #e35d52;padding: 10px;border-radius: 5px;color: white;display: inline-block;margin: 40px 0;"><i class="icon-youtube-play"></i> AJXP_MESSAGE[user_home.65]</a></div>
Expand Down
2 changes: 1 addition & 1 deletion core/src/plugins/access.fs/fsTemplatePart.xml
View file
Expand Up @@ -40,7 +40,7 @@
<div id="buttons_bar" class="action_bar" ajxpClass="ActionsToolbar" ajxpOptions='{"toolbarsList":["navigation", "change_main"],"groupOtherToolbars":["more", "change", "remote"], "groupOtherLabel":"More","skipBubbling":true, "skipCarousel":true,"submenuOffsetTop":2}'></div>
</div>
</div>
<div id="vertical_splitter" ajxpClass="Splitter" ajxpOptions='{"direction": "vertical", "initB":"290", "minB":290,"fit":"height","fitParent":"browser", "minSize":280, "invisibleBar": true, "foldingButton":"B", "foldingButtonText":341, "foldingMinSize":0}'>
<div id="vertical_splitter" ajxpClass="Splitter" class="forceComputeFit" ajxpOptions='{"direction": "vertical", "initB":"290", "minB":290,"fit":"height","fitParent":"browser", "minSize":280, "invisibleBar": true, "foldingButton":"B", "foldingButtonText":341, "foldingMinSize":0}'>
<div id="content_pane" ajxpClass="FilesList" ajxpOptions='{"displayMode":"detail","replaceScroller":true, "messageBoxReference":true, "fit":"height", "fitParent":"files_lit_pane", "cellPaddingCorrection":6, "iconBgPosition" : "5px 4px"}'></div>
<div id="info_panel" ajxpClass="InfoPanel" style="top:0;" ajxpOptions='{"replaceScroller":"true", "skipActions":true}'></div>
</div>
Expand Down
3 changes: 1 addition & 2 deletions core/src/plugins/editor.diaporama/class.Diaporama.js
View file
Expand Up @@ -408,8 +408,7 @@ Class.create("Diaporama", AbstractEditor, {
}
}
if(this.scrollbar){
this.scrollbar.track.setStyle({height:parseInt(this.imgContainer.getHeight())+"px"});
this.scrollbar.recalculateLayout();
this.scrollbar.recalculateLayout(parseInt(this.imgContainer.getHeight()));
}
this.imageNavigator();
},
Expand Down
13 changes: 5 additions & 8 deletions core/src/plugins/gui.ajax/res/js/ui/prototype/class.AjxpPane.js
View file
Expand Up @@ -93,9 +93,9 @@ Class.create("AjxpPane", {
}));
this.htmlElement.insert(this.scroller);
this.htmlElement.setStyle({overflow:"hidden"});
this.scroller.setStyle({
height:this.htmlElement.getHeight() + 'px'
});
if(!Modernizr.flexbox){
this.scroller.setStyle({height:this.htmlElement.getHeight() + 'px'});
}
this.scrollbar = new Control.ScrollBar(this.htmlElement,this.scroller, {fixed_scroll_distance:50});
}

Expand Down Expand Up @@ -227,13 +227,10 @@ Class.create("AjxpPane", {
}
fitHeightToBottom(this.htmlElement, this.options.fitParent, marginBottom, false, minOffsetTop);
if(this.scrollbar){
this.scroller.setStyle({
height:this.htmlElement.getHeight() + 'px'
});
this.scrollbar.recalculateLayout();
this.scrollbar.recalculateLayout(this.htmlElement.getHeight());
}
}
if(this.options.flexTo){
if(this.options.flexTo && !(Modernizr.flexbox && $(this.options.flexTo).hasClassName('horizontal_layout'))){
var parentWidth = $(this.options.flexTo).getWidth();
var siblingWidth = 0;
this.htmlElement.siblings().each(function(s){
Expand Down
32 changes: 15 additions & 17 deletions core/src/plugins/gui.ajax/res/js/ui/prototype/class.FilesList.js
View file
Expand Up @@ -974,8 +974,7 @@ Class.create("FilesList", SelectableElements, {
}else{
if(this.options.fit && this.options.fit == 'height') fitHeightToBottom(scrollElement, this.htmlElement);
}
this.scroller.setStyle({height:parseInt(scrollElement.getHeight())+"px"});
this.scrollbar.recalculateLayout();
this.scrollbar.recalculateLayout(parseInt(scrollElement.getHeight()));
}.bind(this), 0.01);
}.bind(this);
this.observe("resize", this.scrollSizeObserver);
Expand Down Expand Up @@ -1245,11 +1244,9 @@ Class.create("FilesList", SelectableElements, {
this._previewFactory.clear();
if(this.protoMenu){
if(this._displayMode == "thumb" || this._displayMode == "detail"){
this.protoMenu.removeElements('#selectable_div-'+this.__currentInstanceIndex + ' > .ajxpNodeProvider');
this.protoMenu.removeElements('#selectable_div-'+this.__currentInstanceIndex);
this.protoMenu.removeElements('#selectable_div-'+this.__currentInstanceIndex +', #selectable_div-'+this.__currentInstanceIndex + ' > .ajxpNodeProvider');
}else{
this.protoMenu.removeElements('#table_rows_container-'+this.__currentInstanceIndex);
this.protoMenu.removeElements('#table_rows_container-'+this.__currentInstanceIndex+ ' > .ajxpNodeProvider');
this.protoMenu.removeElements('#table_rows_container-'+this.__currentInstanceIndex + ', #table_rows_container-'+this.__currentInstanceIndex+ ' > .ajxpNodeProvider');
}
}
for(var i = 0; i< AllAjxpDroppables.length;i++){
Expand Down Expand Up @@ -1287,6 +1284,9 @@ Class.create("FilesList", SelectableElements, {
makeItemRefreshObserver: function (ajxpNode, item, renderer){
return function(){
//try{
if(this.loading){
return;
}
if(item.ajxpNode) {
if(item.REMOVE_OBS) item.ajxpNode.stopObserving("node_removed", item.REMOVE_OBS);
if(item.REPLACE_OBS) item.ajxpNode.stopObserving("node_replaced", item.REPLACE_OBS);
Expand All @@ -1302,7 +1302,7 @@ Class.create("FilesList", SelectableElements, {
if(ajxpNode.isLeaf()) newItem.addClassName("ajxpNodeLeaf");
this.initRows();
item.ajxpNode = null;
delete item;
item = undefined;
newItem.REPLACE_OBS = this.makeItemRefreshObserver(ajxpNode, newItem, renderer);
newItem.REMOVE_OBS = this.makeItemRemovedObserver(ajxpNode, newItem);
ajxpNode.observe("node_replaced", newItem.REPLACE_OBS);
Expand Down Expand Up @@ -1343,15 +1343,15 @@ Class.create("FilesList", SelectableElements, {
if(Prototype.Browser.IE && Prototype.Version.startsWith('1.6')){
window.setTimeout(function(){
item.remove();
delete item;
item = undefined;
this.initRowsBuffered();
}.bind(this), 10);
}else{
new Effect.RowFade(item, {afterFinish:function(){
try{
item.remove();
}catch(e){if(window.console) console.log(e);}
delete item;
item = undefined;
this.initRowsBuffered();
}.bind(this), duration:0.2});
}
Expand Down Expand Up @@ -1990,12 +1990,11 @@ Class.create("FilesList", SelectableElements, {
scroll:($('tree_container')?'tree_container':null),
containerScroll:this.htmlElement.down(".selectable_div")
}, this, 'filesList');
if(!ajxpNode.isLeaf() && (this.options.droppable === undefined || this.options.droppable === true )){
AjxpDroppables.add(newRow, ajxpNode);
}
}.bind(this), 500);
}
if(!ajxpNode.isLeaf() && (this.options.droppable === undefined || this.options.droppable === true ))
{
AjxpDroppables.add(newRow, ajxpNode);
}

this.addInlineToolbar(newRow, ajxpNode);

Expand Down Expand Up @@ -2139,12 +2138,11 @@ Class.create("FilesList", SelectableElements, {
scroll:($('tree_container')?'tree_container':null),
containerScroll:this.htmlElement.down(".selectable_div")
}, this, 'filesList');
if(!ajxpNode.isLeaf() && (this.options.droppable === undefined || this.options.droppable === true )){
AjxpDroppables.add(largeRow, ajxpNode);
}
}.bind(this), 500);
}
if(!ajxpNode.isLeaf() && (this.options.droppable === undefined || this.options.droppable === true ))
{
AjxpDroppables.add(largeRow, ajxpNode);
}

this.addInlineToolbar(largeRow, ajxpNode);

Expand Down
3 changes: 1 addition & 2 deletions core/src/plugins/gui.ajax/res/js/ui/prototype/class.FoldersTree.js
View file
Expand Up @@ -186,8 +186,7 @@ Class.create("FoldersTree", AjxpPane, {
fitHeightToBottom(this.treeContainer, this.options['fitParent']);
}
if(this.scrollbar){
this.scroller.setStyle({height:parseInt(this.treeContainer.getHeight())+'px'});
this.scrollbar.recalculateLayout();
this.scrollbar.recalculateLayout(parseInt(this.treeContainer.getHeight()));
}
document.fire("ajaxplorer:resize-FoldersTree-" + this.htmlElement.id, this.htmlElement.getDimensions());
},
Expand Down
10 changes: 7 additions & 3 deletions core/src/plugins/gui.ajax/res/js/ui/prototype/class.InfoPanel.js
View file
Expand Up @@ -57,7 +57,12 @@ Class.create("InfoPanel", AjxpPane, {
this.registeredMimes = new Hash();
this.primaryTemplates = new Hash();

this.updateHandler = this.update.bind(this);
//this.updateHandler = this.update.bind(this);
this.updateHandler = function(objectOrEvent){
bufferCallback('InfoPanelUpdater', 100, function(){
this.update(objectOrEvent);
}.bind(this));
}.bind(this);
this.componentConfigHandler = function(event){
if(event.memo.className == "InfoPanel"){
this.parseComponentConfig(event.memo.classConfig.get('all'));
Expand Down Expand Up @@ -363,8 +368,7 @@ Class.create("InfoPanel", AjxpPane, {
fitHeightToBottom(this.contentContainer, null);
previewMaxHeight = Math.min(previewMaxHeight, parseInt(this.contentContainer.getHeight()) - parseInt(this.contentContainer.getStyle('paddingTop')));
if(this.scrollbar){
this.scroller.setStyle({height:parseInt(this.contentContainer.getHeight())+'px'});
this.scrollbar.recalculateLayout();
this.scrollbar.recalculateLayout(parseInt(this.contentContainer.getHeight()));
}
if(this.htmlElement && this.currentPreviewElement && this.currentPreviewElement.visible()){
var squareDim = Math.min(parseInt(this.htmlElement.getWidth()-40));
Expand Down
8 changes: 5 additions & 3 deletions core/src/plugins/gui.ajax/res/js/ui/prototype/class.SearchEngine.js
View file
Expand Up @@ -171,7 +171,7 @@ Class.create("SearchEngine", AjxpPane, {
formPanel.insert(searchChooser);
}

formPanel.insert('<div>' +
formPanel.insert('<div style="height: 100%;">' +
'<div class="scroller_track"><div class="scroller_handle"></div></div> ' +
'<div id="search_meta_detailed"><div class="advanced_search_section_title"><span class="icon-circle"></span> '+MessageHash[489]+'</div><div class="advanced_search_section search_section_freemeta"></div></div>' +
'</div>');
Expand Down Expand Up @@ -541,7 +541,9 @@ Class.create("SearchEngine", AjxpPane, {
* Resize the widget
*/
resize: function($super){
$(this._resultsBoxId).addClassName('forceComputeFit');
if(this._ajxpOptions.toggleResultsVisibility){
$(this._ajxpOptions.toggleResultsVisibility).addClassName('forceComputeFit');
fitHeightToBottom($(this._ajxpOptions.toggleResultsVisibility), (this._ajxpOptions.toggleResultsFitTo?$(this._ajxpOptions.toggleResultsFitTo):null), (this._ajxpOptions.fitMarginBottom?this._ajxpOptions.fitMarginBottom:0));
fitHeightToBottom($(this._resultsBoxId));
if(this._ajxpOptions.toggleResultsFitTo && $(this._ajxpOptions.toggleResultsFitTo) && $(this._ajxpOptions.toggleResultsVisibility)){
Expand All @@ -553,15 +555,15 @@ Class.create("SearchEngine", AjxpPane, {

if(this.htmlElement && this.htmlElement.down('#search_meta')){
var formPanel = this.htmlElement.down('#search_meta');
formPanel.addClassName('forceComputeFit');
if(formPanel.getStyle('float') == 'left'){
fitHeightToBottom(formPanel);
formPanel.select('.advanced_search_section').invoke('addClassName', 'visible');
formPanel.select('.toggle_button').invoke('hide');
}
fitHeightToBottom(formPanel.down('#search_meta_detailed'), formPanel);
if(this.scrollbar) {
this.scrollbar.track.setStyle({height:formPanel.down('#search_meta_detailed').getHeight()+'px'});
this.scrollbar.recalculateLayout();
this.scrollbar.recalculateLayout(formPanel.down('#search_meta_detailed').getHeight());
}
}

Expand Down
17 changes: 16 additions & 1 deletion core/src/plugins/gui.ajax/res/js/ui/prototype/util/ajxp_utils.js
View file
Expand Up @@ -298,9 +298,24 @@ function fitRectangleToDimension(rectDim, targetDim){
* @returns Object|null
*/
function fitHeightToBottom(element, parentElement, addMarginBottom, listen, minOffsetTop)
{
{
element = $(element);
if(!element) return;
if(Modernizr.flexbox && element.parentNode && !element.hasClassName('forceComputeFit') && !element.parentNode.hasClassName('horizontal_layout')){
if(!element.hasClassName('vertical_fit')){
element.parentNode.addClassName('vertical_layout');
element.addClassName('vertical_fit');
}
if(listen){
Event.observe(window, 'resize', function(){
if(element.ajxpPaneObject){
element.ajxpPaneObject.resize();
}
element.fire('resize', null, null, false);
});
}
return;
}
if(typeof(parentElement) == "undefined" || parentElement == null){
parentElement = Position.offsetParent($(element));
}else if(parentElement == "window") {
Expand Down
11 changes: 5 additions & 6 deletions core/src/plugins/gui.ajax/res/js/vendor/prototype/proto.menu.js
View file
Expand Up @@ -128,13 +128,12 @@ Proto.Menu = Class.create({

removeElements:function(selectorOrObject){
if(typeof(selectorOrObject) == "string"){
$$(selectorOrObject).invoke('removeClassName', 'protomenu_selector');
$$(selectorOrObject).invoke('stopObserving',
this.eventToObserve,
this.observerFunctionBound);
$$(selectorOrObject).each(function(oc){
oc.removeClassName('protomenu_selector');
oc.stopObserving(this.eventToObserve, this.observerFunctionBound);
}.bind(this));
}else{
$(selectorOrObject).removeClassName('protomenu_selector');
$(selectorOrObject).stopObserving(this.eventToObserve, this.observerFunctionBound);
selectorOrObject.removeClassName('protomenu_selector').stopObserving(this.eventToObserve, this.observerFunctionBound);
}
},

Expand Down
9 changes: 6 additions & 3 deletions core/src/plugins/gui.ajax/res/js/vendor/prototype/proto.scroller.js
View file
Expand Up @@ -56,7 +56,7 @@ Control.ScrollBar = Class.create({
onChange: this.onChange.bind(this)
},this.options.slider_options));
this.recalculateLayout();
Event.observe(window,'resize',this.boundResizeObserver);
//Event.observe(window,'resize',this.boundResizeObserver);
if (this.options.custom_event) {
if (Object.isFunction(this.options.custom_event_handler)) {
this.container.observe(this.options.custom_event, this.options.custom_event_handler);
Expand All @@ -71,7 +71,7 @@ Control.ScrollBar = Class.create({
attachMobileScroll(container, 'vertical');
},
destroy: function(){
Event.stopObserving(window,'resize',this.boundResizeObserver);
//Event.stopObserving(window,'resize',this.boundResizeObserver);
if(this.options.active_class_name)
$(this.options.apply_active_class_name_to).removeClassName(this.options.active_class_name);
if (this.options.custom_event) {
Expand Down Expand Up @@ -107,7 +107,10 @@ Control.ScrollBar = Class.create({
reset: function(){
this.slider.setValue(0);
},
recalculateLayout: function(){
recalculateLayout: function(parentHeight){
if(parentHeight && !Modernizr.flexbox){
this.track.setStyle({height: parentHeight + 'px'});
}
if(this.scrollLength() <= this.offsetLength())
this.disable();
else{
Expand Down

0 comments on commit 1c08727

Please sign in to comment.