Skip to content

Commit

Permalink
fix(map-toolbar-ui): trying to make the button shrink at lower resolu…
Browse files Browse the repository at this point in the history 
…tions

Related #8660
  • Loading branch information
@AleksueiR
AleksueiR committed Mar 25, 2015
1 parent d46d73c commit 90e629d
Show file tree
Hide file tree
Showing 3 changed files with 162 additions and 29 deletions.
6 changes: 6 additions & 0 deletions src/css/toolbar/base.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@
overflow: hidden;
padding: 0;

&.compact {
.map-toolbar-item-button:not(#baseMapToggle) > span {
display: none !important;
}
}

.map-toolbar-item {
//float: right;
display: inline;
Expand Down
4 changes: 3 additions & 1 deletion src/js/RAMP/Modules/basemapSelector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,8 @@ function (

selectorSectionContainer.hide(); // hide baseselector after it's initiated

this.updateToggleLabel();

topic.publish(EventManager.BasemapSelector.UI_COMPLETE);

return this;
Expand Down Expand Up @@ -396,7 +398,7 @@ function (

ui
.init(basemapId, currentTileSchema)
.updateToggleLabel();
;
}
};
});
181 changes: 153 additions & 28 deletions src/js/RAMP/Modules/gui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -702,8 +702,137 @@ define([

transitionDuration = 0.5,

toolbarController,
layoutController;

toolbarController = (function () {
var mapToolbar,
mapTools,

toolbarWidth,
toolsWidth,

toolsTimeline = new TimelineLite(),

isTooltipsSet = false;

function updateToolbarStats() {
if (!layoutController.isFullData()) {
toolbarWidth = mapToolbar.width();

if (!isTooltipsSet) {
toolsWidth = mapTools
.map(function (i, n) { return $(n).outerWidth(); })
.get() // need to use get() as jquery.map doesn't return a true array
.reduce(function (total, width) { return total + width; })
;
}

if (!isToolbarWideEnough()) {
setToolbarTooltips();
} else {
removeToolbarTooltips();
}
}
}

function isToolbarWideEnough() {
return toolbarWidth > toolsWidth;
}

function setToolbarTooltips() {
toolsTimeline.invalidate();

if (!isTooltipsSet) {
// set tooltips on the collapsed toolbar
mapToolbar.addClass("compact");

mapTools
.filter(":not(.tooltipstered)")
.map(function (i, node) {
node = $(node);
node
.addClass("_tooltip tooltip-temp")
.attr(
"title",
node.find("span").text()
);
});

Theme.tooltipster(mapToolbar);

isTooltipsSet = true;
}

}

function removeToolbarTooltips() {
if (isTooltipsSet && isToolbarWideEnough()) {
// remove tooltips from the restored toolbar and only from the buttons with a temporary tooltip
Theme.tooltipster(
mapTools
.filter(".tooltip-temp")
.parent(),
null, "destroy");

mapToolbar
.removeClass("compact");
mapTools
.filter(".tooltip-temp")
.removeClass("_tooltip")
.removeAttr("title");

isTooltipsSet = false;
}
}

return {
init: function () {
mapToolbar = $("#map-toolbar");
mapTools = mapToolbar.find("> .map-toolbar-item > .map-toolbar-item-button");

updateToolbarStats();

jWindow.on("resize", updateToolbarStats);

toolsTimeline
.fromTo(toolbarController.mapTools().find("> span"), transitionDuration / 2, { width: "auto" }, { width: 0, ease: "easeOutCirc" }, 0)
.fromTo(toolbarController.mapTools().find("> span"), 0, { display: "inline-block" }, { display: "none" }, transitionDuration / 2)
;

return this;
},

mapTools: function () {
return mapTools;
},

toolsTimeline: function () {
return toolsTimeline;
},

update: function () {
updateToolbarStats();

return this;
},

setTooltips: function () {
setToolbarTooltips();

return this;
},

removeTooltips: function () {
removeToolbarTooltips();

return this;
}

};

}());

/**
* Controls layout transition such as full-data and full-screen modes, opening and closing of the side panel, adjusts layout when resizing the browser window.
*
Expand Down Expand Up @@ -738,20 +867,7 @@ define([
adjustHeight();
layoutChange();

// set tooltips on the collapsed toolbar
mapToolbar
.find(".map-toolbar-item-button:visible")
.map(function (i, node) {
node = $(node);
node
.addClass("_tooltip tooltip-temp")
.attr(
"title",
node.find("span").text()
);
});

Theme.tooltipster(mapToolbar);
toolbarController.setTooltips();

//console.log("finished", EventManager.Datagrid.APPLY_EXTENT_FILTER);
//topic.publish(EventManager.Datagrid.APPLY_EXTENT_FILTER);
Expand All @@ -762,17 +878,9 @@ define([
adjustHeight();
layoutChange();

// remove tooltips from the restored toolbar and only from the buttons with a temporary tooltip
Theme.tooltipster(
mapToolbar
.find(".map-toolbar-item-button.tooltip-temp")
.parent(),
null, "destroy");

mapToolbar
.find(".map-toolbar-item-button.tooltip-temp")
.removeClass("_tooltip")
.removeAttr("title");
toolbarController
.update()
.removeTooltips();

//console.log("reverse finished", EventManager.Datagrid.APPLY_EXTENT_FILTER);
//topic.publish(EventManager.Datagrid.APPLY_EXTENT_FILTER);
Expand Down Expand Up @@ -808,8 +916,10 @@ define([
{ width: "100%", height: "32px" },
{ width: "32px", height: $("#map-div").height(), ease: "easeOutCirc" }, transitionDuration / 2)

.to(mapToolbar.find(".map-toolbar-item-button span"), transitionDuration / 2, { width: 0, ease: "easeOutCirc" }, 0)
.set(mapToolbar.find(".map-toolbar-item-button span"), { display: "none" }, transitionDuration / 2)
.add(toolbarController.toolsTimeline(), 0)

//.fromTo(toolbarController.mapTools().find("> span"), transitionDuration / 2, { width: "auto" }, { width: 0, ease: "easeOutCirc" }, 0)
//.fromTo(toolbarController.mapTools().find("> span"), 0, { display: "inline-block" }, { display: "none" }, transitionDuration / 2)

.fromTo(panelDiv.find(".wb-tabs > ul li:first"), transitionDuration, { width: "50%" }, { width: "0%", display: "none", ease: "easeOutCirc" }, 0)
.fromTo(panelDiv.find(".wb-tabs > ul li:last"), transitionDuration, { width: "50%" }, { width: "100%", className: "+=h5", ease: "easeOutCirc" }, 0)
Expand Down Expand Up @@ -917,6 +1027,8 @@ define([
layoutChange();
panelChange(true);

toolbarController.update();

// update close button tooltips
panelToggle
.tooltipster("content", i18n.t("gui.actions.close"))
Expand Down Expand Up @@ -944,6 +1056,8 @@ define([
layoutChange();
panelChange(false);

toolbarController.update();

// update open button tooltips
panelToggle
.tooltipster("content", i18n.t("gui.actions.open"))
Expand Down Expand Up @@ -1006,6 +1120,7 @@ define([
* @private
*/
function optimizeLayout() {

if ((windowWidth < layoutWidthThreshold && jWindow.width() > layoutWidthThreshold) ||
(windowWidth > layoutWidthThreshold && jWindow.width() < layoutWidthThreshold)) {
windowWidth = jWindow.width();
Expand All @@ -1026,6 +1141,8 @@ define([
jWindow.on("resize", optimizeLayout);
updatePanelWidth();

toolbarController.init();

UtilMisc.resetTimelines(timeLines);

Theme
Expand Down Expand Up @@ -1511,7 +1628,15 @@ define([
}
});


// since basemap toggle may differ in width based on the basemap name, check if everything still fits
topic.subscribe(EventManager.BasemapSelector.UI_COMPLETE, function () {
toolbarController.update();
});

topic.subscribe(EventManager.BasemapSelector.BASEMAP_CHANGED, function () {
toolbarController.update();
});

sidePanelTabList.find("li a").click(function () {

console.log("inside side panel tab list on click");
Expand Down

0 comments on commit 90e629d

Please sign in to comment.