Started work on JSDoc for www/js/channel
This commit is contained in:
parent
5ad20f6823
commit
ac06f839ea
97 changed files with 18556 additions and 91 deletions
|
|
@ -14,39 +14,114 @@ GNU Affero General Public License for more details.
|
|||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.*/
|
||||
|
||||
/**
|
||||
* Class for Object containing code for managing the Canopy Panel UX
|
||||
*/
|
||||
class cPanel{
|
||||
/**
|
||||
* Instantiates a new Canopy Panel Management object
|
||||
* @param {channel} client - Parent client Management Object
|
||||
*/
|
||||
constructor(client){
|
||||
//Client Object
|
||||
/**
|
||||
* Parent Client Management object
|
||||
*/
|
||||
this.client = client;
|
||||
|
||||
//Panel Objects
|
||||
/**
|
||||
* Active Panel Object
|
||||
*/
|
||||
this.activePanel = null;
|
||||
|
||||
/**
|
||||
* Pinned Panel Object
|
||||
*/
|
||||
this.pinnedPanel = null;
|
||||
|
||||
/**
|
||||
* Popped Panel Objects
|
||||
*/
|
||||
this.poppedPanels = [];
|
||||
|
||||
//ClickDragger Objects
|
||||
/**
|
||||
* Click-Dragger object for re-sizable active panel
|
||||
*/
|
||||
this.activePanelDragger = new canopyUXUtils.clickDragger("#cpanel-active-drag-handle", "#cpanel-active-div", false, null, false);
|
||||
|
||||
/**
|
||||
* Click-Dragger object for re-sizable pinned panel
|
||||
*/
|
||||
this.pinnedPanelDragger = new canopyUXUtils.clickDragger("#cpanel-pinned-drag-handle", "#cpanel-pinned-div", false, this.client.chatBox.clickDragger);
|
||||
|
||||
//Element Nodes
|
||||
//Active Panel
|
||||
/**
|
||||
* Active Panel Container
|
||||
*/
|
||||
this.activePanelDiv = document.querySelector("#cpanel-active-div");
|
||||
|
||||
/**
|
||||
* Active Panel Title
|
||||
*/
|
||||
this.activePanelTitle = document.querySelector("#cpanel-active-title");
|
||||
|
||||
/**
|
||||
* Active Title Document Div
|
||||
*/
|
||||
this.activePanelDoc = document.querySelector("#cpanel-active-doc");
|
||||
|
||||
/**
|
||||
* Active Panel Pin Icon
|
||||
*/
|
||||
this.activePanelPinIcon = document.querySelector("#cpanel-active-pin-icon");
|
||||
|
||||
/**
|
||||
* Active Panel Pop-Out Icon
|
||||
*/
|
||||
this.activePanelPopoutIcon = document.querySelector("#cpanel-active-popout-icon");
|
||||
|
||||
/**
|
||||
* Active Panel Close Icon
|
||||
*/
|
||||
this.activePanelCloseIcon = document.querySelector("#cpanel-active-close-icon");
|
||||
|
||||
//Pinned Panel
|
||||
/**
|
||||
* Pinned Panel Contianer
|
||||
*/
|
||||
this.pinnedPanelDiv = document.querySelector("#cpanel-pinned-div");
|
||||
|
||||
/**
|
||||
* Pinned Panel Title
|
||||
*/
|
||||
this.pinnedPanelTitle = document.querySelector("#cpanel-pinned-title");
|
||||
|
||||
/**
|
||||
* Pinned Panel Document Div
|
||||
*/
|
||||
this.pinnedPanelDoc = document.querySelector("#cpanel-pinned-doc");
|
||||
|
||||
/**
|
||||
* Pinned Panel Un-Pin Icon
|
||||
*/
|
||||
this.pinnedPanelUnpinIcon = document.querySelector("#cpanel-pinned-unpin-icon");
|
||||
|
||||
/**
|
||||
* Pinned Panel Pop-Out Icon
|
||||
*/
|
||||
this.pinnedPanelPopoutIcon = document.querySelector("#cpanel-pinned-popout-icon");
|
||||
|
||||
/**
|
||||
* Pinned Panel Close Icon
|
||||
*/
|
||||
this.pinnedPanelCloseIcon = document.querySelector("#cpanel-pinned-close-icon");
|
||||
|
||||
this.setupInput();
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines input-related event listeners
|
||||
*/
|
||||
setupInput(){
|
||||
this.activePanelCloseIcon.addEventListener("click", this.hideActivePanel.bind(this));
|
||||
this.activePanelPinIcon.addEventListener("click", this.pinPanel.bind(this));
|
||||
|
|
@ -56,6 +131,11 @@ class cPanel{
|
|||
this.pinnedPanelPopoutIcon.addEventListener("click", this.popPinnedPanel.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets Active Panel
|
||||
* @param {panelObj} panel - Panel Object to set as active
|
||||
* @param {String} panelBody - innerHTML of Panel, pulls from panelObj.getPage() if empty
|
||||
*/
|
||||
async setActivePanel(panel, panelBody){
|
||||
//Set active panel
|
||||
this.activePanel = panel;
|
||||
|
|
@ -73,6 +153,11 @@ class cPanel{
|
|||
this.activePanel.docSwitch();
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides active panel
|
||||
* @param {Event} event - Event passed down from Input Handler
|
||||
* @param {Boolean} keepAlive - Prevents closing panel if true
|
||||
*/
|
||||
hideActivePanel(event, keepAlive = false){
|
||||
if(!keepAlive){
|
||||
this.activePanel.closer();
|
||||
|
|
@ -86,16 +171,27 @@ class cPanel{
|
|||
this.activePanel = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Pins active panel
|
||||
*/
|
||||
pinPanel(){
|
||||
this.setPinnedPanel(this.activePanel, this.activePanelDoc.innerHTML);
|
||||
this.hideActivePanel(null, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Pop's out active panel
|
||||
*/
|
||||
popActivePanel(){
|
||||
this.popPanel(this.activePanel, this.activePanelDoc.innerHTML);
|
||||
this.hideActivePanel(null, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets pinned panel
|
||||
* @param {panelObj} panel - Panel Object to apply to panel
|
||||
* @param {String} panelBody - Raw HTML to inject into panel body, defaults to panel page if null
|
||||
*/
|
||||
async setPinnedPanel(panel, panelBody){
|
||||
//Set pinned panel
|
||||
this.pinnedPanel = panel;
|
||||
|
|
@ -117,6 +213,11 @@ class cPanel{
|
|||
this.pinnedPanelDragger.fixCutoff();
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides pinned panel
|
||||
* @param {Event} event - Passed down input event
|
||||
* @param {Boolean} keepAlive - Prevents panel.closer() from running if true
|
||||
*/
|
||||
hidePinnedPanel(event, keepAlive = false){
|
||||
this.pinnedPanelDiv.style.display = "none";
|
||||
|
||||
|
|
@ -127,16 +228,27 @@ class cPanel{
|
|||
this.pinnedPanel = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets pinned panel to active
|
||||
*/
|
||||
unpinPanel(){
|
||||
this.setActivePanel(this.pinnedPanel, this.pinnedPanelDoc.innerHTML);
|
||||
this.hidePinnedPanel(null, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Pops pinned panel
|
||||
*/
|
||||
popPinnedPanel(){
|
||||
this.popPanel(this.pinnedPanel, this.pinnedPanelDoc.innerHTML);
|
||||
this.hidePinnedPanel(null, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Pops a new pop-out panel
|
||||
* @param {panelObj} panel - panelObj to apply to the panel
|
||||
* @param {String} panelBody - Raw HTML to inject into panel body, injects panel default if left to null
|
||||
*/
|
||||
popPanel(panel, panelBody){
|
||||
var newPanel = new poppedPanel(panel, panelBody, this)
|
||||
|
||||
|
|
@ -145,15 +257,48 @@ class cPanel{
|
|||
|
||||
}
|
||||
|
||||
/**
|
||||
* Template Class for other Classes for Objects which represent a single Canopy Panel
|
||||
*/
|
||||
class panelObj{
|
||||
/**
|
||||
* Instantiates a new Panel Object
|
||||
* @param {channel} client - Parent client Management Object
|
||||
* @param {String} name - Panel Name
|
||||
* @param {String} pageURL - Panel Default Page URL
|
||||
* @param {Document} panelDocument - Panel Document
|
||||
*/
|
||||
constructor(client, name = "Placeholder Panel", pageURL = "/panel/placeholder", panelDocument = window.document){
|
||||
/**
|
||||
* Panel Name
|
||||
*/
|
||||
this.name = name;
|
||||
|
||||
/**
|
||||
* Panel Default Page URL
|
||||
*/
|
||||
this.pageURL = pageURL;
|
||||
|
||||
/**
|
||||
* Panel Document
|
||||
*/
|
||||
this.panelDocument = panelDocument;
|
||||
|
||||
/**
|
||||
* Current root document panel doc lives within
|
||||
*/
|
||||
this.ownerDoc = this.panelDocument.ownerDocument == null ? this.panelDocument : this.panelDocument.ownerDocument;
|
||||
|
||||
/**
|
||||
* Parent Client Management object
|
||||
*/
|
||||
this.client = client;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches panel page from the server
|
||||
* @returns {String} Raw panel doc HTML
|
||||
*/
|
||||
async getPage(){
|
||||
var response = await fetch(this.pageURL,{
|
||||
method: "GET",
|
||||
|
|
@ -162,39 +307,84 @@ class panelObj{
|
|||
return await response.text();
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles Document/Panel Changes
|
||||
*/
|
||||
docSwitch(){
|
||||
//Set owner doc
|
||||
this.ownerDoc = this.panelDocument.ownerDocument == null ? this.panelDocument : this.panelDocument.ownerDocument;
|
||||
}
|
||||
|
||||
/**
|
||||
* Called upon panel close/exit
|
||||
*/
|
||||
closer(){
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Class for Objects which represent a single instance of a popped-out panel
|
||||
*/
|
||||
class poppedPanel{
|
||||
/**
|
||||
* Instantiates a new Popped Panel Object
|
||||
* @param {panelObj} panel - Panel Object to apply to Popped Panel
|
||||
* @param {String} panelBody - Raw HTML to inject into panel body, defaults to panel page if null
|
||||
* @param {cPanel} cPanel - Parent Canopy Panel Management Object
|
||||
*/
|
||||
constructor(panel, panelBody, cPanel){
|
||||
//Set Panel Object
|
||||
/**
|
||||
* Panel Object to apply to Popped Panel
|
||||
*/
|
||||
this.panel = panel;
|
||||
//Set Panel Body
|
||||
|
||||
/**
|
||||
* Raw HTML to inject into panel body, defaults to panel page if null
|
||||
*/
|
||||
this.panelBody = panelBody;
|
||||
//Set Window Placeholder
|
||||
|
||||
/**
|
||||
* Browser Window taken up by the Popped Panel
|
||||
*/
|
||||
this.window = null;
|
||||
|
||||
//Element Node Placeholders
|
||||
/**
|
||||
* Popped Panel Container Div
|
||||
*/
|
||||
this.pinnedPanelDiv = null;
|
||||
|
||||
/**
|
||||
* Popped Panel Title
|
||||
*/
|
||||
this.pinnedPanelTitle = null;
|
||||
|
||||
/**
|
||||
* Popped Panel Document Div
|
||||
*/
|
||||
this.pinnedPanelDoc = null;
|
||||
|
||||
/**
|
||||
* Popped Panel Close Icon
|
||||
*/
|
||||
this.pinnedPanelCloseIcon = null;
|
||||
|
||||
//Functions
|
||||
/**
|
||||
* Parent Canopy Panel Management Object
|
||||
*/
|
||||
this.cPanel = cPanel;
|
||||
|
||||
/**
|
||||
* Disables this.panel.closer() calls from this.closer()
|
||||
*/
|
||||
this.keepAlive = false;
|
||||
|
||||
//Continue constructor asynchrnously
|
||||
this.asyncConstructor();
|
||||
}
|
||||
|
||||
/**
|
||||
* Continuation of constructor method for asynchronous function calls
|
||||
*/
|
||||
async asyncConstructor(){
|
||||
//Set panel body properly
|
||||
this.panelBody = (this.panelBody == null || this.panelBody == "") ? await this.panel.getPage() : this.panelBody;
|
||||
|
|
@ -203,12 +393,18 @@ class poppedPanel{
|
|||
this.popContainer();
|
||||
}
|
||||
|
||||
/**
|
||||
* Pops/Opens container window upon start
|
||||
*/
|
||||
popContainer(){
|
||||
//Set Window Object
|
||||
this.window = window.open("/panel/popoutContainer","",`menubar=no,height=850,width=600`);
|
||||
this.window.addEventListener("load", this.fillContainer.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* Fills container window with Popped Panel container elements
|
||||
*/
|
||||
fillContainer(){
|
||||
//Set Element Nodes
|
||||
this.panelDiv = this.window.document.querySelector("#cpanel-div");
|
||||
|
|
@ -231,12 +427,18 @@ class poppedPanel{
|
|||
this.setupInput();
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines default input-related popped-panel Event Listeners
|
||||
*/
|
||||
setupInput(){
|
||||
this.panelPopinIcon.addEventListener("click", this.unpop.bind(this));
|
||||
this.panelPinIcon.addEventListener("click", this.pin.bind(this));
|
||||
this.window.addEventListener("unload", this.closer.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* Called upon close/exit of panel
|
||||
*/
|
||||
closer(){
|
||||
if(!this.keepAlive){
|
||||
this.panel.closer();
|
||||
|
|
@ -245,6 +447,9 @@ class poppedPanel{
|
|||
this.cPanel.poppedPanels.splice(this.cPanel.poppedPanels.indexOf(this),1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Un-pops panel into active-panel slot
|
||||
*/
|
||||
unpop(){
|
||||
//Set active panel
|
||||
this.cPanel.setActivePanel(this.panel, this.panelDoc.innerHTML);
|
||||
|
|
@ -255,6 +460,9 @@ class poppedPanel{
|
|||
this.window.close();
|
||||
}
|
||||
|
||||
/**
|
||||
* Pins panel next to chat
|
||||
*/
|
||||
pin(){
|
||||
this.cPanel.setPinnedPanel(this.panel, this.panelDoc.innerHTML);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue