opendev/gerrit
Code Issues Proposed changes

Define DOM Hooks API

Browse Source 
plugin.getDomHook now returns a DOM Hook API instance that can be used
to setup callbacks for the dom hook insertion into DOM:

``` js
  Gerrit.install(plugin => {
    plugin.getDomHook('reply-text').onAttached(element => {
      if (!element.content) { return; }
      element.content.style.border = '1px red solid';
    });
  });
```

Includes tests, and refactoring for existing plugin api
and internal endpoints data model.

Documentation coming in next change.

Change-Id: Iefa0cac4257323fc4557dfb7c196a4a81e001eea
This commit is contained in:
Viktar Donich
2017-07-24 13:23:18 -07:00
parent b38a398d48
commit d559f19f1f
12 changed files with 373 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
polygerrit-ui/app/elements/plugins/gr-dom-hooks/gr-dom-hooks.html Normal file
View File

@@ -0,0 +1,22 @@
<!--
Copyright (C) 2017 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../shared/gr-js-api-interface/gr-js-api-interface.html">
<dom-module id="gr-dom-hooks">
<script src="gr-dom-hooks.js"></script>
</dom-module>

62
polygerrit-ui/app/elements/plugins/gr-dom-hooks/gr-dom-hooks.js Normal file
View File

@@ -0,0 +1,62 @@
// Copyright (C) 2017 The Android Open Source Project
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
(function(window) {
'use strict';
function GrDomHooks(plugin) {
this._plugin = plugin;
this._hooks = {};
}
GrDomHooks.prototype._getName = function(endpointName) {
return this._plugin.getPluginName() + '-autogenerated-' + endpointName;
};
GrDomHooks.prototype.getDomHook = function(endpointName) {
const hookName = this._getName(endpointName);
if (!this._hooks[hookName]) {
this._hooks[hookName] = new GrDomHook(hookName);
}
return this._hooks[hookName];
};
function GrDomHook(hookName) {
this._callbacks = [];
// Expose to closure.
const callbacks = this._callbacks;
this._componentClass = Polymer({
is: hookName,
properties: {
plugin: Object,
content: Object,
},
attached() {
callbacks.forEach(callback => {
callback(this);
});
},
});
}
GrDomHook.prototype.onAttached = function(callback) {
this._callbacks.push(callback);
return this;
};
GrDomHook.prototype.getModuleName = function() {
return this._componentClass.prototype.is;
};
window.GrDomHooks = GrDomHooks;
})(window);

60
polygerrit-ui/app/elements/plugins/gr-dom-hooks/gr-dom-hooks_test.html Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<!--
Copyright (C) 2017 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>gr-dom-hooks</title>
<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<link rel="import" href="../../../test/common-test-setup.html"/>
<link rel="import" href="gr-dom-hooks.html"/>
<script>void(0);</script>
<test-fixture id="basic">
<template>
<div></div>
</template>
</test-fixture>
<script>
suite('gr-dom-hooks tests', () => {
let instance;
let sandbox;
setup(() => {
sandbox = sinon.sandbox.create();
let plugin;
Gerrit.install(p => { plugin = p; }, '0.1',
'http://test.com/plugins/testplugin/static/test.js');
instance = new GrDomHooks(plugin);
});
teardown(() => {
sandbox.restore();
});
test('defines a Polymer components', () => {
const onAttachedSpy = sandbox.spy();
instance.getDomHook('foo-bar').onAttached(onAttachedSpy);
const hookName = Object.keys(instance._hooks).pop();
assert.equal(hookName, 'testplugin-autogenerated-foo-bar');
const el = fixture('basic').appendChild(document.createElement(hookName));
assert.isTrue(onAttachedSpy.calledWithExactly(el));
});
});
</script>

4
polygerrit-ui/app/elements/plugins/gr-endpoint-decorator/gr-endpoint-decorator.js
View File

@@ -43,10 +43,10 @@
ready() {
Gerrit.awaitPluginsLoaded().then(() => Promise.all(
Gerrit._getPluginsForEndpoint(this.name).map(
Gerrit._endpoints.getPlugins(this.name).map(
pluginUrl => this._import(pluginUrl)))
).then(() => {
const modulesData = Gerrit._getEndpointDetails(this.name);
const modulesData = Gerrit._endpoints.getDetails(this.name);
for (const {moduleName, plugin, type} of modulesData) {
switch (type) {
case 'decorate':

4
polygerrit-ui/app/elements/plugins/gr-external-style/gr-external-style.js
View File

@@ -35,10 +35,10 @@
ready() {
Gerrit.awaitPluginsLoaded().then(() => Promise.all(
Gerrit._getPluginsForEndpoint(this.name).map(
Gerrit._endpoints.getPlugins(this.name).map(
pluginUrl => this._import(pluginUrl)))
).then(() => {
const moduleNames = Gerrit._getModulesForEndoint(this.name);
const moduleNames = Gerrit._endpoints.getModules(this.name);
for (const name of moduleNames) {
this._applyStyle(name);
}

14
polygerrit-ui/app/elements/plugins/gr-theme-api/gr-theme-api.js
View File

@@ -22,12 +22,14 @@
}
GrThemeApi.prototype.setHeaderLogoAndTitle = function(logoUrl, title) {
this.plugin.getDomHook('header-title', {replace: true}).then(element => {
const customHeader = document.createElement('gr-custom-plugin-header');
customHeader.logoUrl = logoUrl;
customHeader.title = title;
element.appendChild(customHeader);
});
this.plugin.getDomHook('header-title', {replace: true}).onAttached(
element => {
const customHeader =
document.createElement('gr-custom-plugin-header');
customHeader.logoUrl = logoUrl;
customHeader.title = title;
element.appendChild(customHeader);
});
};
window.GrThemeApi = GrThemeApi;