mirror of
https://github.com/matrix-construct/construct
synced 2024-11-30 10:42:47 +01:00
390 lines
8.5 KiB
JavaScript
390 lines
8.5 KiB
JavaScript
/*
|
|
* IRCd Charybdis 5/Matrix
|
|
*
|
|
* Copyright (C) 2017 Charybdis Development Team
|
|
* Copyright (C) 2017 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.
|
|
*
|
|
* THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``AS IS'' AND ANY EXPRESS OR
|
|
* IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
|
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
|
* DISCLAIMED. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY DIRECT,
|
|
* INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
|
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
|
|
* SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
|
|
* HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
|
|
* STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING
|
|
* IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
|
|
* POSSIBILITY OF SUCH DAMAGE.
|
|
*
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
/**************************************
|
|
*
|
|
* Client's Angular application
|
|
*
|
|
*/
|
|
|
|
mc.ng = {};
|
|
|
|
mc.opts.ng =
|
|
{
|
|
resource_url_whitelist:
|
|
[
|
|
/* Allow same origin resource loads. */
|
|
"self",
|
|
|
|
/* Allow loading from our assets domain. Notice the difference between * and **. */
|
|
"https://*.youtube.com/**"
|
|
|
|
/**/
|
|
],
|
|
|
|
resource_url_blacklist:
|
|
[
|
|
],
|
|
|
|
// tell angular to allow mxc:// URL's for images
|
|
img_src_sanitation_whitelist: /^\s*(https?|ftp|file|mxc):/,
|
|
};
|
|
|
|
mc.ng.app = angular.module('ircd',
|
|
[
|
|
// 'ngAnimate',
|
|
]);
|
|
|
|
mc.ng.app.config(['$rootScopeProvider', function($rootScopeProvider)
|
|
{
|
|
$rootScopeProvider.digestTtl(16);
|
|
}]);
|
|
|
|
mc.ng.app.config(['$compileProvider', function($compileProvider)
|
|
{
|
|
$compileProvider.imgSrcSanitizationWhitelist(mc.opts.ng.img_src_sanitation_whitelist);
|
|
}]);
|
|
|
|
mc.ng.app.config(['$sceDelegateProvider', function($sceDelegateProvider)
|
|
{
|
|
$sceDelegateProvider.resourceUrlWhitelist(mc.opts.ng.resource_url_whitelist);
|
|
$sceDelegateProvider.resourceUrlBlacklist(mc.opts.ng.resource_url_blacklist);
|
|
}]);
|
|
|
|
/**
|
|
* Things in here can't take place at the global init; they take place after
|
|
* the document/main is ready.
|
|
*/
|
|
mc.ng.init = function()
|
|
{
|
|
let root = mc.ng.root();
|
|
root.$watch(() =>
|
|
{
|
|
mc.instance.digests++;
|
|
return null;
|
|
});
|
|
};
|
|
|
|
/**
|
|
* @returns the formal root scope of the app
|
|
*/
|
|
mc.ng.root = function()
|
|
{
|
|
let body = angular.element(document.body);
|
|
let root = body.scope().$root;
|
|
return root;
|
|
};
|
|
|
|
/**
|
|
* @returns the mc scope which is our root scope for the app. This is directly under
|
|
* the real root, and all our client scopes are children of the mc scope. Other children
|
|
* of the real root may exist but are only indirectly related.
|
|
*/
|
|
mc.ng.mc = function()
|
|
{
|
|
let charybdis = angular.element("#charybdis");
|
|
return charybdis.scope();
|
|
};
|
|
|
|
/**
|
|
* Trigger Angular manually
|
|
*/
|
|
mc.ng.apply = function(closure = undefined)
|
|
{
|
|
let root = mc.ng.root();
|
|
if(root.$$phase == "$apply")
|
|
{
|
|
console.warn("Unnecessary mc.ng.apply(); " + (new Error));
|
|
return;
|
|
}
|
|
|
|
return root.$apply(closure);
|
|
};
|
|
|
|
// Alias
|
|
mc.apply = mc.ng.apply;
|
|
|
|
/**
|
|
* Trigger Angular manually
|
|
*/
|
|
mc.ng.apply.later = function(closure = () => {})
|
|
{
|
|
let root = mc.ng.root();
|
|
root.$applyAsync(closure);
|
|
};
|
|
|
|
/**
|
|
* Trigger Angular manually
|
|
*/
|
|
mc.ng.apply.animate = function(callback)
|
|
{
|
|
let handler = () =>
|
|
{
|
|
if(callback() !== false)
|
|
mc.ng.apply.later();
|
|
};
|
|
|
|
return window.requestAnimationFrame(handler);
|
|
};
|
|
|
|
/**
|
|
* Trigger Angular manually
|
|
*/
|
|
mc.ng.apply.idle = function(timeout, callback)
|
|
{
|
|
if(typeof(timeout) == "function")
|
|
{
|
|
callback = timeout;
|
|
timeout = undefined;
|
|
}
|
|
|
|
let handler = (...params) =>
|
|
{
|
|
if(callback(...params) !== false)
|
|
mc.ng.apply.later();
|
|
};
|
|
|
|
let opts =
|
|
{
|
|
timeout: timeout,
|
|
};
|
|
|
|
return window.requestIdleCallback(handler, opts);
|
|
};
|
|
|
|
/**
|
|
* Trigger Angular manually
|
|
*/
|
|
mc.ng.apply.defer = function()
|
|
{
|
|
let root = mc.ng.root();
|
|
let watchers = root.$$watchers;
|
|
root.$$watchers = [];
|
|
root.$applyAsync(() =>
|
|
{
|
|
root.$$watchers = watchers;
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Use mc.ng.timeout instead of window.setTimeout(), as the latter
|
|
* issues an event which is unknown to Angular.
|
|
*/
|
|
mc.ng.timeout = function(timeout, closure)
|
|
{
|
|
if(typeof(timeout) == "function")
|
|
{
|
|
closure = timeout;
|
|
timeout = undefined;
|
|
}
|
|
|
|
//TODO: XXX: arbitrary
|
|
let $timeout = mc.ng.timeout.$timeout;
|
|
return $timeout(closure, timeout);
|
|
};
|
|
|
|
// Alias
|
|
mc.timeout = mc.ng.timeout;
|
|
|
|
/**
|
|
* Use mc.ng.timeout instead of window.setTimeout(), as the latter
|
|
* issues an event which is unknown to Angular.
|
|
*/
|
|
mc.ng.timeout.cancel = function(promise)
|
|
{
|
|
//TODO: XXX: arbitrary
|
|
let $timeout = mc.ng.timeout.$timeout;
|
|
$timeout.cancel(promise);
|
|
};
|
|
|
|
/**
|
|
* Non-angular event so we send a notify to handle the resize changing things
|
|
* that need to trigger that model<->view dialectic.
|
|
*/
|
|
/*
|
|
window.addEventListener("resize", (event) =>
|
|
{
|
|
maybe(() => mc.ng.apply());
|
|
});
|
|
*/
|
|
|
|
/** Abstract Controller
|
|
*
|
|
* Should be on the prototype chain of all of the controllers in client.
|
|
* This allows us to DRY things across all controllers as well as provide
|
|
* a suite of virtual convenience functions.
|
|
*
|
|
* Overrides can be async. This abstraction provides a digest for that at
|
|
* the base of this virtual call stack. Note: overrides for digesting() will
|
|
* never be waited on.
|
|
*/
|
|
mc.ng.controller = class
|
|
{
|
|
constructor(name, $scope)
|
|
{
|
|
// DEBUG
|
|
//let argc = arguments.length;
|
|
//console.log("init controller [" + name + "] " + typeof($scope));
|
|
|
|
this.$scope = $scope;
|
|
this.$apply = $scope.$apply;
|
|
|
|
// Register dtors
|
|
this.$scope.$on("$destroy", mc.ng.controller.virtual.bind(this, this.destructor));
|
|
|
|
// NOTE: $applyAsync MUST be used here rather than $evalAsync.
|
|
// $evalAsync from a directive runs after DOM update.
|
|
// $evalAsync from a controller runs before the DOM has been manipulated. <---
|
|
this.$scope.$applyAsync(mc.ng.controller.virtual.bind(this, this.constructed));
|
|
|
|
// Register digest loop
|
|
this.$scope.$watch(this.digesting.bind(this));
|
|
|
|
// DEBUG
|
|
//this.$scope.$watch(() => debug.digest(name, $scope));
|
|
}
|
|
|
|
/**
|
|
* Override to get called when the controller gets $destroy'ed
|
|
*/
|
|
destructor() {}
|
|
|
|
/**
|
|
* Override to get called after the DOM element has been inserted.
|
|
* This will be on the next digest cycle after construction.
|
|
*/
|
|
constructed() {}
|
|
|
|
/**
|
|
* Ovrride convenience to execute code during a digest
|
|
*/
|
|
digesting() {}
|
|
};
|
|
|
|
/**
|
|
*
|
|
*/
|
|
mc.ng.controller.virtual = async function(override)
|
|
{
|
|
let ret = override.call(this);
|
|
if(ret instanceof Promise)
|
|
{
|
|
ret = await ret;
|
|
this.$scope.$apply();
|
|
}
|
|
|
|
return ret;
|
|
};
|
|
|
|
/** Async Angular directives.
|
|
*
|
|
* These ang- prefixed directives are identical to the ng- directives except they
|
|
* add support for ES6 async usage up the stack. This allows the evaluation of a
|
|
* directive to digest after a promise it returns is fulfilled.
|
|
*
|
|
* Regular ng- directives run the digest loop when the evaluation returns -- even if
|
|
* it returns a promise, which happens on the first await up the stack. We need it to
|
|
* happen after the code on the other side of the await too.
|
|
*/
|
|
mc.ng.ang = function(directive_name, event_name, opts = {})
|
|
{
|
|
mc.ng.app.directive(directive_name, function()
|
|
{
|
|
return {
|
|
restrict: 'A',
|
|
link: mc.ng.ang.link.bind(null, directive_name, event_name, opts),
|
|
};
|
|
});
|
|
};
|
|
|
|
mc.ng.ang.link = function(name, on, opts, $scope, element, attr, controller)
|
|
{
|
|
let expression = attr[name];
|
|
element.on(on, async function($event)
|
|
{
|
|
let locals =
|
|
{
|
|
$event: $event,
|
|
};
|
|
|
|
let onerror = (error) =>
|
|
{
|
|
if(!error.element)
|
|
error.element = $event.delegateTarget;
|
|
|
|
mc.unhandled(error);
|
|
};
|
|
|
|
let promise; try
|
|
{
|
|
promise = $scope.$eval(expression, locals);
|
|
}
|
|
catch(error)
|
|
{
|
|
onerror(error);
|
|
}
|
|
|
|
if(promise instanceof Promise) try
|
|
{
|
|
await promise;
|
|
}
|
|
catch(error)
|
|
{
|
|
onerror(error);
|
|
}
|
|
finally
|
|
{
|
|
if(opts.apply_async !== false)
|
|
$scope.$apply();
|
|
}
|
|
else
|
|
{
|
|
if(opts.apply_sync !== false)
|
|
$scope.$apply();
|
|
}
|
|
});
|
|
};
|
|
|
|
mc.ng.ang.directives =
|
|
[
|
|
mc.ng.ang("angClick", "click"),
|
|
mc.ng.ang("angDblclick", "dblclick"),
|
|
mc.ng.ang("angMouseup", "mouseup"),
|
|
mc.ng.ang("angMousedown", "mousedown"),
|
|
|
|
// The scroll event is optioned to not digest unless the handler returns a
|
|
// promise. Note that this means a scroll event handler should not be an
|
|
// `async function()` if it has efficient return cases (and it should).
|
|
mc.ng.ang("angScroll", "scroll",
|
|
{
|
|
apply_sync: false,
|
|
}),
|
|
];
|
|
|
|
/**
|
|
* ng-repeat="foo in bar | reverse"
|
|
*/
|
|
mc.ng.app.filter('reverse', () => (items) => items.slice().reverse());
|