kopia lustrzana https://github.com/c9/core
489 wiersze
18 KiB
JavaScript
489 wiersze
18 KiB
JavaScript
define(function(require, module, exports) {
|
|
main.consumes = ["Plugin", "layout", "settings", "anims", "ui", "menus"];
|
|
main.provides = ["panels.Area"];
|
|
return main;
|
|
|
|
function main(options, imports, register) {
|
|
var Plugin = imports.Plugin;
|
|
var layout = imports.layout;
|
|
var anims = imports.anims;
|
|
var ui = imports.ui;
|
|
var menus = imports.menus;
|
|
var settings = imports.settings;
|
|
|
|
var uCaseFirst = require("c9/string").uCaseFirst;
|
|
|
|
var BARWIDTH = 36;
|
|
var WIDTH = 200;
|
|
|
|
function Area(where, defaultActive, panels, emit) {
|
|
var plugin = new Plugin("Ajax.org", main.consumes);
|
|
|
|
var query = "state/panels/@width-" + where;
|
|
var activePanel = null;
|
|
var CURWIDTH = 0;
|
|
|
|
var column, lastPanel, bar, splitter, animating;
|
|
|
|
function getElement(name) {
|
|
var panel = panels.panels[name];
|
|
return panel && panel.aml;
|
|
}
|
|
|
|
var drawn = false;
|
|
function draw() {
|
|
if (drawn) return bar;
|
|
drawn = true;
|
|
|
|
emit("draw");
|
|
|
|
column = layout.findParent(plugin, where);
|
|
bar = column.appendChild(new ui.bar({ "skinset": "panels" }));
|
|
plugin.addElement(bar);
|
|
|
|
column.setWidth(CURWIDTH);
|
|
column.setAttribute("class", where);
|
|
|
|
bar.oncontextmenu = function(e) {
|
|
var menu = menus.get("Window").menu;
|
|
menu.display(e.x, e.y);
|
|
menu.childNodes.forEach(function(x) {
|
|
if (x.visible && !x.panel) {
|
|
x.hide();
|
|
menu.on("prop.visible", function show(e) {
|
|
if (!e.value) {
|
|
menu.off("prop.visible", show);
|
|
x.show();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
return false;
|
|
};
|
|
|
|
// Prevent scrolling
|
|
column.$int.addEventListener("scroll", function(e) {
|
|
column.$int.scrollTop = 0;
|
|
}, true);
|
|
|
|
var name = "splitterPanel" + uCaseFirst(where);
|
|
splitter = layout.getElement(name);
|
|
splitter.on("dragdrop", function(e) {
|
|
if (!activePanel)
|
|
return;
|
|
|
|
var width = column.getWidth() - CURWIDTH;
|
|
|
|
if (settings.get(query) != width)
|
|
settings.set(query, width);
|
|
});
|
|
|
|
bar.hide();
|
|
|
|
return bar;
|
|
}
|
|
|
|
var animateCounter = 0;
|
|
function animate(fromName, toName, toWidth, noAnim) {
|
|
var win = getElement(fromName);
|
|
var toWin = getElement(toName);
|
|
var autohide = fromName && panels.panels[fromName].autohide;
|
|
|
|
if (win === toWin && win)
|
|
return;
|
|
|
|
column.setAttribute("minwidth", CURWIDTH);
|
|
|
|
animateCounter++;
|
|
|
|
var onfinish = function() {
|
|
if (onfinish.counter != animateCounter)
|
|
return;
|
|
|
|
setTimeout(function() {
|
|
if (onfinish.counter != animateCounter)
|
|
return;
|
|
|
|
if (toWin) {
|
|
toWinExt.style.zIndex = zIndex2;
|
|
toWinExt.style[where] = CURWIDTH + "px";
|
|
toWinExt.style.minWidth = "";
|
|
toWinExt.style.maxWidth = "";
|
|
|
|
if (where == "right")
|
|
toWinExt.style.left = "0";
|
|
|
|
// column.setAttribute("minwidth", toWin.minwidth + CURWIDTH);
|
|
panels.showing = false;
|
|
}
|
|
else {
|
|
column.setWidth(CURWIDTH);
|
|
}
|
|
if (win) {
|
|
winExt.style.zIndex = zIndex;
|
|
win.$ext.style[where] = CURWIDTH + "px";
|
|
win.$ext.style.minWidth = "";
|
|
win.hide();
|
|
}
|
|
}, 100);
|
|
|
|
emit("afterAnimate");
|
|
};
|
|
onfinish.counter = animateCounter;
|
|
|
|
if (toWin) {
|
|
var toWinExt = toWin.$altExt || toWin.$ext;
|
|
var zIndex2 = toWinExt.style.zIndex;
|
|
toWinExt.style.zIndex = 2000;
|
|
toWin.show();
|
|
|
|
if (panels.panels[toName].autohide)
|
|
panels.showing = true;
|
|
}
|
|
|
|
var anim = {
|
|
duration: 0.15,
|
|
timingFunction: "cubic-bezier(.10, .10, .25, .90)",
|
|
immediate: noAnim
|
|
};
|
|
|
|
if (win) {
|
|
var winExt = win.$altExt || win.$ext;
|
|
var zIndex = winExt.style.zIndex;
|
|
var diff, width;
|
|
|
|
if (toWin) {
|
|
|
|
// Hide over the other
|
|
if (autohide) {
|
|
winExt.style.zIndex = 3000;
|
|
|
|
diff = apf.getWidthDiff(winExt);
|
|
width = winExt.offsetWidth - diff;
|
|
winExt.style.minWidth = width + "px";
|
|
winExt.style.maxWidth = width + "px";
|
|
if (where == "right")
|
|
winExt.style.left = "";
|
|
anim[where] = (CURWIDTH - win.getWidth() - 1) + "px";
|
|
anims.animate(win, anim, onfinish);
|
|
}
|
|
// Show over the other
|
|
else {
|
|
winExt.style.zIndex = 1000;
|
|
|
|
diff = apf.getWidthDiff(winExt);
|
|
width = winExt.offsetWidth - diff - 1;
|
|
toWinExt.style.minWidth = width + "px";
|
|
toWinExt.style.maxWidth = width + "px";
|
|
if (where == "right")
|
|
toWinExt.style.left = "";
|
|
toWinExt.style[where] = (CURWIDTH - win.getWidth()) + "px";
|
|
anim[where] = CURWIDTH + "px";
|
|
anims.animate(toWin, anim, onfinish);
|
|
}
|
|
}
|
|
|
|
// Hide
|
|
else {
|
|
winExt.style.minWidth = (winExt.offsetWidth - apf.getWidthDiff(winExt)) + "px";
|
|
winExt.style[where] = ""; //CURWIDTH + "px";
|
|
anim.width = CURWIDTH + "px";
|
|
anims.animateSplitBoxNode(column, anim, onfinish);
|
|
}
|
|
}
|
|
|
|
// Show
|
|
else {
|
|
toWin.show();
|
|
if (!column.visible) {
|
|
column.show();
|
|
setTabPadding(1);
|
|
}
|
|
|
|
toWinExt.style.minWidth = (toWidth - apf.getWidthDiff(toWinExt) - CURWIDTH) + "px";
|
|
toWinExt.style[where] = ""; //CURWIDTH + "px";
|
|
anim.width = toWidth + "px";
|
|
anims.animateSplitBoxNode(column, anim, onfinish);
|
|
}
|
|
}
|
|
|
|
function activate(name, noAnim, viaButton) {
|
|
if (activePanel == name)
|
|
return;
|
|
|
|
draw();
|
|
|
|
var panel = panels.panels[name];
|
|
// old settings can try to activate panel at the wrong area
|
|
// todo should we change area based on setting?
|
|
if (!panel || panel.area !== plugin)
|
|
return;
|
|
|
|
lastPanel = activePanel;
|
|
if (activePanel && (activePanel != name))
|
|
deactivate(true, noAnim === true);
|
|
|
|
var width = (settings.getNumber("state/panels/@width-" + where)
|
|
|| panel.width || WIDTH) + CURWIDTH;
|
|
|
|
var firstTime = panel.draw();
|
|
|
|
if (!noAnim)
|
|
noAnim = !settings.getBool('user/general/@animateui');
|
|
|
|
if (firstTime && !noAnim) {
|
|
setTimeout(function() {
|
|
animate(lastPanel, name, width, noAnim);
|
|
});
|
|
}
|
|
else {
|
|
animate(lastPanel, name, width, noAnim);
|
|
}
|
|
|
|
activePanel = name;
|
|
|
|
emit("showPanel" + uCaseFirst(name), {
|
|
lastPanel: lastPanel,
|
|
button: viaButton
|
|
});
|
|
|
|
if (!panel.autohide)
|
|
settings.set("state/panels/@active-" + where, name);
|
|
|
|
splitter.show();
|
|
}
|
|
|
|
function deactivate(admin, noAnim, viaButton) {
|
|
if (!activePanel)
|
|
return;
|
|
|
|
var animSetting = settings.getBool('user/general/@animateui');
|
|
|
|
if (!admin) {
|
|
if (animSetting) {
|
|
noAnim = 0;
|
|
animate(activePanel);
|
|
}
|
|
else {
|
|
column.setWidth(CURWIDTH);
|
|
anims.emitAnimate({ noanim: true });
|
|
}
|
|
}
|
|
|
|
if (noAnim !== 0 && (!admin || !animSetting))
|
|
getElement(activePanel).hide();
|
|
|
|
emit("hidePanel" + uCaseFirst(activePanel), {
|
|
button: viaButton
|
|
});
|
|
|
|
activePanel = null;
|
|
|
|
if (!admin) {
|
|
settings.set("state/panels/@active-" + where, "none");
|
|
splitter.hide();
|
|
}
|
|
}
|
|
|
|
function toggle(name, autohide, viaButton) {
|
|
// If this is the current panel, deactivate it
|
|
if (activePanel != name)
|
|
activate(name, null, viaButton);
|
|
|
|
// If this is an autohiding panel, activate the last panel
|
|
else if (autohide && lastPanel)
|
|
activate(lastPanel, null, viaButton);
|
|
|
|
// Else deactivate the active panel
|
|
else
|
|
deactivate(null, null, viaButton);
|
|
}
|
|
|
|
function setTabPadding(which) {
|
|
if (where != "right") return;
|
|
|
|
ui.setStyleRule(".editor_tab.morepadding .btnsesssioncontainer",
|
|
"padding-right", which ? "14px" : "53px");
|
|
}
|
|
|
|
function enablePanel(name) {
|
|
var panel = panels.panels[name];
|
|
CURWIDTH = BARWIDTH;
|
|
|
|
draw();
|
|
|
|
if (!bar.visible) {
|
|
if (panels.areas[panel.where].activePanel == name) {
|
|
getElement(name).$ext.style[where] = CURWIDTH + "px";
|
|
column.setWidth(column.width + CURWIDTH);
|
|
activate(name, true);
|
|
}
|
|
else {
|
|
column.setAttribute("minwidth", CURWIDTH);
|
|
column.setWidth(CURWIDTH);
|
|
}
|
|
|
|
bar.show();
|
|
|
|
if (!column.visible) {
|
|
column.show();
|
|
// column.show triggers splitter.show, even though the column isn't
|
|
// reisizable yet. So we hide it and show again when panel is activated.
|
|
splitter.hide();
|
|
setTabPadding(1);
|
|
}
|
|
}
|
|
|
|
panel.enable();
|
|
|
|
settings.set("state/panels/" + panel.name + "/@enabled", "true");
|
|
}
|
|
|
|
function disablePanel(name, noAnim, keep) {
|
|
var panel = panels.panels[name];
|
|
panel.disable();
|
|
|
|
if (!bar)
|
|
return;
|
|
|
|
// Detect whether all buttons are hidden
|
|
if (bar.childNodes) {
|
|
var hideBar = bar.childNodes.every(function(x) {
|
|
return !x.visible;
|
|
});
|
|
}
|
|
|
|
if (hideBar)
|
|
CURWIDTH = 0;
|
|
|
|
if (!keep && panels.areas[panel.where].activePanel == name) {
|
|
animating = !noAnim;
|
|
panels.areas[panel.where].deactivate(null, noAnim);
|
|
}
|
|
|
|
// If all buttons are invisible, hide bar
|
|
if (hideBar) {
|
|
setTimeout(function() {
|
|
bar.hide();
|
|
|
|
if (!panels.areas[panel.where].activePanel) {
|
|
column.hide();
|
|
setTabPadding(0);
|
|
}
|
|
else {
|
|
var width = (settings.getNumber("state/panels/@width-" + panel.where)
|
|
|| panel.width || WIDTH) + CURWIDTH;
|
|
column.setAttribute("minwidth", panel.minWidth + CURWIDTH);
|
|
column.setWidth(width);
|
|
column.$int.lastChild.style.left = 0;
|
|
|
|
if (keep && panels.areas[panel.where].activePanel == name)
|
|
panel.aml.setLeft(0);
|
|
}
|
|
}, animating ? 150 : 0);
|
|
}
|
|
|
|
settings.set("state/panels/" + panel.name + "/@enabled", "false");
|
|
}
|
|
|
|
/**
|
|
* Area class for the {@link Panel panels}. Panels are located in
|
|
* different areas. By default these areas are on the left and
|
|
* right of the screen.
|
|
*
|
|
* * {@link panels} - Manages all areas and panels
|
|
* * **Area - Manages a single area of panels.
|
|
* By default there is a panel area on the left and on the right side
|
|
* of the UI.**
|
|
* * {@link Panel} - A single panel that lives in an area.
|
|
*
|
|
* In this example we'll fetch the name of the active panel on the
|
|
* right side and hide it:
|
|
*
|
|
* var activePanel = panels.areas.right.activePanel;
|
|
* panels.deactivate(activePanel);
|
|
*
|
|
* @class panels.Area
|
|
*/
|
|
plugin.freezePublicAPI({
|
|
/**
|
|
* @property {String} activePanel The name of the active panel in this area, if any.
|
|
* @readonly
|
|
*/
|
|
get activePanel() { return activePanel; },
|
|
/**
|
|
* @property {String} defaultActive The name of the panel that is active by default in this area.
|
|
* @readonly
|
|
*/
|
|
get defaultActive() { return defaultActive; },
|
|
/**
|
|
* @property {HTMLElement} container The html element that is the containing element of the area.
|
|
* @readonly
|
|
*/
|
|
get container() { return column.$ext; },
|
|
/**
|
|
* The APF UI element that is presenting the area in the UI.
|
|
* This property is here for internal reasons only. *Do not
|
|
* depend on this property in your plugin.*
|
|
* @property {AMLElement} aml
|
|
* @private
|
|
* @readonly
|
|
*/
|
|
get aml() { return column; },
|
|
/**
|
|
* @property {Number} width The width in pixels of this area
|
|
* @readonly
|
|
*/
|
|
get width() { return CURWIDTH; },
|
|
|
|
/**
|
|
* @ignore
|
|
*/
|
|
draw: draw,
|
|
|
|
/**
|
|
* Toggles the activity state of a panel
|
|
* @param {String} name The name of the panel to toggle
|
|
*/
|
|
toggle: toggle,
|
|
/**
|
|
* Activates a panel, showing it as the only visible
|
|
* panel in it's area.
|
|
* @param {String} name The name of the panel to activate
|
|
* @private
|
|
*/
|
|
activate: activate,
|
|
/**
|
|
* Deactivates the active panel of this area.
|
|
* @private
|
|
*/
|
|
deactivate: deactivate,
|
|
/**
|
|
* Add the button to it's button bar. If the bar was hidden, the
|
|
* bar is shown.
|
|
* @param {String} name The name of the panel to enable.
|
|
* @private
|
|
*/
|
|
enablePanel: enablePanel,
|
|
/**
|
|
* Remove the button from it's button bar. If the bar is empty, the
|
|
* bar is hidden.
|
|
* @param {String} name The name of the panel to disable.
|
|
* @private
|
|
*/
|
|
disablePanel: disablePanel
|
|
});
|
|
|
|
plugin.load("area-" + where);
|
|
|
|
return plugin;
|
|
}
|
|
|
|
/***** Register and define API *****/
|
|
|
|
register(null, {
|
|
"panels.Area": Area
|
|
});
|
|
}
|
|
});
|