add js script using a controller

This commit is contained in:
Simon Vieille 2020-04-17 13:57:23 +02:00
parent 91db830ea7
commit 0cceb03213
Signed by: deblan
GPG Key ID: 03383D15A1D31745
5 changed files with 136 additions and 40 deletions

View File

@ -24,6 +24,11 @@ use OCP\Util;
$config = \OC::$server->getConfig();
$cspnm = \OC::$server->getContentSecurityPolicyNonceManager();
Util::addScript('side_menu', 'sideMenu');
Util::addStyle('side_menu', 'sideMenu');
$stylesheet = \OC::$server->getURLGenerator()->linkToRoute(
'side_menu.Css.stylesheet',
[
@ -31,6 +36,13 @@ $stylesheet = \OC::$server->getURLGenerator()->linkToRoute(
]
);
$script = \OC::$server->getURLGenerator()->linkToRoute(
'side_menu.Js.script',
[
'v' => $config->getAppValue('side_menu', 'cache', '0'),
]
);
Util::addHeader(
'link',
[
@ -40,13 +52,11 @@ Util::addHeader(
''
);
Util::addScript('side_menu', 'main');
Util::addScript('side_menu', 'sideMenu');
Util::addStyle('side_menu', 'sideMenu');
// whitelist the URL to allow loading JS from this external domain
// $CSPManager = \OC::$server->getContentSecurityPolicyManager();
// $policy = new ContentSecurityPolicy();
// $policy->addAllowedScriptDomain($url);
// $policy->addAllowedImageDomain($url);
// $policy->addAllowedConnectDomain($url);
// $CSPManager->addDefaultPolicy($policy);
Util::addHeader(
'script',
[
'src' => $script,
'nonce' => $cspnm->getNonce(),
],
''
);

View File

@ -20,5 +20,6 @@
return [
'routes' => [
['name' => 'Css#stylesheet', 'url' => '/css/stylesheet.css', 'verb' => 'GET'],
['name' => 'Js#script', 'url' => '/js/script.js', 'verb' => 'GET'],
],
];

View File

@ -0,0 +1,63 @@
<?php
/**
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* 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 <http://www.gnu.org/licenses/>.
*/
namespace OCA\SideMenu\Controller;
use OCP\AppFramework\Controller;
use OCP\AppFramework\Http\TemplateResponse;
use OCP\AppFramework\Http\Response;
use OCP\IConfig;
use OCP\IRequest;
class JsController extends Controller
{
/** @var \OCP\IConfig */
protected $config;
/**
* @param string $appName
* @param IRequest $request
* @param IConfig $config
*/
public function __construct($appName, IRequest $request, IConfig $config)
{
parent::__construct($appName, $request);
$this->config = $config;
}
/**
* @NoAdminRequired
* @NoCSRFRequired
* @PublicPage
*
* @return Response
*/
public function script()
{
$parameters = [
'opener-hover' => (bool) $this->config->getAppValue('side_menu', 'opener-hover', '0'),
];
$response = new TemplateResponse('side_menu', 'js/script', $parameters, 'blank');
$response->addHeader('Content-Type', 'text/javascript');
return $response;
}
}

View File

@ -1,30 +0,0 @@
/**
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* 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 <http://www.gnu.org/licenses/>.
*/
const sideMenuContainer = $('<div id="side-menu-container">')
const sideMenuOpener = $('<button class="side-menu-opener"></button>')
const sideMenu = $('<div id="side-menu">')
sideMenuContainer.append(sideMenu);
$('body').append(sideMenuContainer);
sideMenuOpener.insertBefore('#nextcloud');
$('body').on('click', '.side-menu-opener', () => {
$('#side-menu').toggleClass('open');
})

52
templates/js/script.php Normal file
View File

@ -0,0 +1,52 @@
(function() {
var sideMenuContainer = $('<div id="side-menu-container">')
var sideMenuOpener = $('<button class="side-menu-opener"></button>')
var sideMenu = $('<div id="side-menu">')
var body = $('body')
body.append(sideMenuContainer)
sideMenuContainer.append(sideMenu)
sideMenuOpener.insertBefore('#nextcloud')
var isTouchDevice = window.matchMedia("(pointer: coarse)").matches
body.on('side-menu.ready', function() {
sideMenu = $('#side-menu')
var headerMenuOpener = $('#header .side-menu-opener')
var sideMenuOpener = $('#side-menu .side-menu-opener')
<?php if ($_['opener-hover']): ?>
var sideMenuMouseLeave = function() {
sideMenu
.removeClass('open')
.off('mouseleave', sideMenuMouseLeave)
}
var sideMenuMouseEnter = function() {
sideMenu.on('mouseleave', sideMenuMouseLeave)
}
var sideMenuOpenerMouseEnter = function() {
sideMenu
.addClass('open')
.on('mouseenter', sideMenuMouseEnter)
}
if (!isTouchDevice) {
headerMenuOpener.on('mouseenter', sideMenuOpenerMouseEnter)
sideMenu.addClass('hide-opener')
}
<?php endif; ?>
headerMenuOpener.on('click', function() {
sideMenu.addClass('open');
})
sideMenuOpener.on('click', function() {
sideMenu.removeClass('open');
})
})
})();