0
0
Fork 0
mirror of https://github.com/matrix-construct/construct synced 2024-11-27 01:02:46 +01:00
construct/share/webapp/js/menu.js
2018-09-13 21:17:08 -07:00

130 lines
3 KiB
JavaScript

/*
// Matrix Construct
//
// Copyright (C) Matrix Construct Developers, Authors & Contributors
// Copyright (C) 2016-2018 Jason Volk <jason@zemos.net>
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice is present in all copies. The
// full license for this software is available in the LICENSE file.
*/
'use strict';
/**
*
* Menu controller
*
*/
mc.ng.app.controller('menu', class extends mc.ng.controller
{
constructor($scope)
{
super("menu", $scope);
}
/* (a)ng-click on a menu button
*
* 1. Item tab can define a click(event) function.
* 2. Item tab can define a target element, which will be shown/hidden.
*/
async toggle(menu, name, event, ...args)
{
let e = event.delegateTarget;
let item = menu[name];
if(item === undefined)
return;
if(item.disabled)
return;
if(item.holds !== undefined && event.type == "click")
return;
if(typeof(item.click) == "function")
if(await item.click(event, ...args) === false)
return;
if(item.target !== undefined)
{
let state = mc.show[item.target]? true : false;
mc.show[item.target] = !state;
}
}
/* hold down on a menu button
* use ng-mousedown and ng-mouseup, or ng-click
*
*/
hold(menu, name, event, ...args)
{
let e = event.delegateTarget;
let item = menu[name];
if(item === undefined)
return;
if(item.holds === undefined)
return;
let click = () =>
this.toggle(menu, name, event, ...args);
switch(event.type)
{
case "mousedown":
$(e).addClass("holding");
item.holding = mc.timeout(item.holds, click);
event.stopPropagation();
break;
case "mouseup":
$(e).removeClass("holding");
mc.timeout.cancel(item.holding);
event.stopPropagation();
break;
}
}
/* Determines whether a menu button is considered "selected"
* which generally applies a CSS class to change the color etc.
*
* The goal here is not simply to determine selection by the user's interaction
* with the menu button itself, but to also allow distant functionality to assert
* the menu button is no longer selected. For example: closing a div without using
* menu button that opened it should not leave the menu button in the selected state.
*
* Options:
* 1. Use mc.show boolean dictionary by element ID
* 2. A boolean value in the menu item tab 'selected': true/false,
* 3. A function in place of the boolean value in #1.
* 4. If the menu item uses the "target" concept, the target element is :hidden.
*/
selected(menu, name, item)
{
if(item === undefined)
return false;
switch(typeof(item.selected))
{
case "undefined":
break;
case "function":
return item.selected();
default:
return item.selected == true;
}
if(item.target !== undefined)
{
if($(item.target).length == 0)
return false;
return mc.show[item.target] === true? true : false;
}
return false;
}
});