@teipublisher/pb-components 2.2.0 → 2.3.1

package/src/pb-manage-odds.js

@@ -211,14 +211,15 @@ export class PbManageOdds extends pbMixin(LitElement) {
             ${this.odds.map((odd) =>
             html`
                 <div class="odd">
-                    <a href="odd-editor.html?odd=${odd.name}.odd" target="_blank">${odd.label}</a>
+                    <a href="odd-editor.html?odd=${odd.name}.odd" target="_blank"
+                        title="edit ODD in graphical editor">${odd.label}</a>
                     <!-- TODO this toolbar should only appear once per ODD files papercard -->
                     <app-toolbar>
                         ${
                 odd.canWrite ?
                     html`
                                     <pb-restricted login="login">
-                                        <pb-ajax url="${regenUrl}?odd=${odd.name}.odd" method="post" 
+                                        <pb-ajax url="${regenUrl}?odd=${odd.name}.odd" method="post"
                                             emit="${this.emit ? this.emit : ''}" .emitConfig="${this.emitConfig}">
                                             <h2 slot="title">${translate('menu.admin.recompile')}</h2>
                                             <paper-icon-button title="Regenerate ODD" icon="update"></paper-icon-button>
@@ -227,8 +228,10 @@ export class PbManageOdds extends pbMixin(LitElement) {
                                     </pb-restricted>
                                 ` : null
                 }
-                        <pb-edit-xml path="${odd.path}">
-                            <paper-icon-button title="Edit ODD" icon="code"></paper-icon-button>
+                        <a href="odd-editor.html?odd=${odd.name}.odd" target="_blank" class="editor-link"
+                           title="edit ODD in graphical editor"><iron-icon icon="reorder"></iron-icon></a>
+                        <pb-edit-xml path="${odd.path}" class="editor-link">
+                            <paper-icon-button title="Edit XML" icon="create"></paper-icon-button>
                         </pb-edit-xml>
                     </app-toolbar>
                 </div>
@@ -295,15 +298,19 @@ export class PbManageOdds extends pbMixin(LitElement) {
                 margin-right: 1em;
             }
 
-            .odd a {
+            .odd a,
+            .odd a:link,
+            .odd a:visited{
                 display: block;
-                flex: 2 0;
+                flex: 10 0;
+                color:var(--pb-manage-odds-link-color);
             }
 
             .odd app-toolbar {
                 flex: 1 0;
-                justify-content: flex-end;  
-                padding: 0;  
+                justify-content: flex-end;
+                padding: 0;
+                min-height:0.25rem;
             }
 
             pb-restricted {
@@ -313,7 +320,7 @@ export class PbManageOdds extends pbMixin(LitElement) {
             .odd-description {
                 color: #888888;
                 font-size: 0.8em;
-                margin-top: -1em;
+                margin-bottom: 0.25rem;
             }
 
             #regenerateAll {
@@ -322,7 +329,28 @@ export class PbManageOdds extends pbMixin(LitElement) {
                 margin-top: 10px;
                 text-align: right;
             }
+            [icon]{
+                color:var(--pb-manage-odds-icon-color);
+            }
+
+            [icon='reorder']
+            {
+                width:24px;
+                height: 24px;
+            }
+
+            @media (hover:hover) and (pointer: fine){
+                .odd app-toolbar .editor-link{
+                    opacity: 0;
+                }
+                .odd:hover .editor-link{
+                    opacity: 1;
+                    transition: opacity 0.6s;
+                }
+            }
         `;
     }
 }
-customElements.define('pb-manage-odds', PbManageOdds);
+if(!customElements.get('pb-manage-odds')){
+    customElements.define('pb-manage-odds', PbManageOdds);
+}

package/src/pb-page.js

@@ -39,10 +39,24 @@ export class PbPage extends pbMixin(LitElement) {
                 type: String,
                 attribute: 'app-root'
             },
+            /**
+             * Is the resource path part of the URL or should it be
+             * encoded as a parameter? TEI Publisher uses the
+             * URL path, but the webcomponent demos need to encode the resource path
+             * in a query parameter.
+             */
             urlPath: {
                 type: String,
                 attribute: 'url-path'
             },
+            /**
+             * If enabled, a hash in the URL (e.g. documentation.xml#introduction) will
+             * be interpreted as an xml:id to navigate to when talking to the server.
+             */
+            idHash: {
+                type: Boolean,
+                attribute: 'id-hash'
+            },
             /**
              * TEI Publisher internal: set to the current page template.
              */
@@ -148,6 +162,7 @@ export class PbPage extends pbMixin(LitElement) {
         this.unresolved = true;
         this.endpoint = ".";
         this.urlPath = 'path';
+        this.idHash = false;
         this.apiVersion = undefined;
         this.requireLanguage = false;
         this.theme = null;
@@ -189,7 +204,7 @@ export class PbPage extends pbMixin(LitElement) {
             this.appRoot = window.location.pathname;
         }
 
-        registry.configure(this.urlPath === 'path', this.appRoot);
+        registry.configure(this.urlPath === 'path', this.idHash, this.appRoot);
 
         this.endpoint = this.endpoint.replace(/\/+$/, '');
         

package/src/pb-paginate.js

@@ -10,6 +10,7 @@ import { translate } from "./pb-i18n.js";
  * which should cause the connected `pb-load` element to refresh.
  *
  * @fires pb-load - Fires when user selects new page to show
+ * @fires pb-paginate - Fires when user selects new page to show
  * @fires pb-results-received - When received, recalculates page ranges to display according to the parameters received
  */
 export class PbPaginate extends pbMixin(LitElement) {

package/src/pb-search.js

@@ -23,6 +23,7 @@ import '@cwmr/paper-autocomplete';
  * @slot - searchButton allows to plug a component that acts as submit button. Must support the 'click' event
  * @slot - resetButton allows to plug a component that acts as reset button. Must support the 'click' event
  * @fires pb-load - Fired to perform the actual search with parameters passed to the request
+ * @fires pb-paginate - When received, triggers the search again with the new value of the start property
  * @fires pb-search-resubmit - When received, triggers the search again
  */
 export class PbSearch extends pbMixin(LitElement) {
@@ -62,6 +63,18 @@ export class PbSearch extends pbMixin(LitElement) {
             disableAutocomplete: {
                 type: Boolean,
                 attribute: 'disable-autocomplete'
+            },
+            /**
+             * Optional URL to query for suggestions. If relative, it is interpreted
+             * relative to the endpoint defined on a surrounding `pb-page`.
+             * 
+             * Upon autocomplete, the current input by the user will be sent with a query parameter
+             * `query`. The name/values of form controls nested within `pb-search` or subforms will also be
+             * appended to the request as parameters. This allows the server side code to distinguish
+             * different states.
+             */
+            source: {
+                type: String
             }
         };
     }
@@ -109,8 +122,9 @@ export class PbSearch extends pbMixin(LitElement) {
         );
         waitOnce('pb-page-ready', (options) => {
             const loader = this.shadowRoot.getElementById('autocompleteLoader');
+            const url = this.source || "api/search/autocomplete";
             if (this.minApiVersion('1.0.0')) {
-                loader.url = `${options.endpoint}/api/search/autocomplete`;
+                loader.url = `${options.endpoint}/${url}`;
             } else {
                 loader.url = `${options.endpoint}/modules/autocomplete.xql`;
             }

package/src/pb-view.js

@@ -907,13 +907,13 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
         if (this.noScroll) {
             return;
         }
-        if (registry.state.id) {
-            const target = this.shadowRoot.getElementById(registry.state.id);
+        if (registry.hash) {
+            const target = this.shadowRoot.getElementById(registry.hash.substring(1));
             console.log('hash target: %o', target);
             if (target) {
                 window.requestAnimationFrame(() =>
                     setTimeout(() => {
-                        target.scrollIntoView({block: 'nearest'});
+                        target.scrollIntoView({ block: "center", inline: "nearest" });
                     }, 400)
                 );
             }

package/src/urls.js

@@ -36,6 +36,11 @@ class Registry {
     
     constructor() {
         this.rootPath = '';
+        /**
+         * Is the resource path part of the URL path or is it
+         * passed in a query parameter?
+         */
+        this.usePath = false;
         /**
          * Records current state as determined from parsing the URL.
          * This should be used to initialize components.
@@ -46,12 +51,21 @@ class Registry {
          * if a component calls commit or replace.
          */
         this.channelStates = {};
+        /**
+         * Records the hash part of the URL, if any
+         */
+        this.hash = null;
+        /**
+         * Should a hash in the URL be interpreted as an xml:id for loading the content?
+         */
+        this.idHash = true;
         this._listeners = [];
     }
 
-    configure(usePath = true, rootPath = '') {
+    configure(usePath = true, idHash = false, rootPath = '') {
         this.rootPath = rootPath;
         this.usePath = usePath;
+        this.idHash = idHash;
 
         // determine initial state of the registry by parsing current URL
         const initialState = this._stateFromURL();
@@ -92,8 +106,11 @@ class Registry {
 
     _stateFromURL() {
         const params = {};
-        if (window.location.hash.length > 0) {
-            params.id = window.location.hash.substring(1);
+        this.hash = window.location.hash;
+        // use the hash as an xml:id?
+        // hashs of the form #1.2.3.4 are internal eXist ids though and thus excluded
+        if (this.idHash && this.hash.length > 0 && (!/^#\d+\./.test(this.hash))) {
+            params.id = this.hash.substring(1);
         }
         if (this.usePath) {
             params.path = window.location.pathname.replace(new RegExp(`^${this.rootPath}/?`), '');
@@ -216,7 +233,9 @@ class Registry {
             newUrl.pathname = `${this.rootPath}/${this.state.path}`;
         }
 
-        newUrl.hash = this.state.id ? `#${this.state.id}` : '';
+        if (this.state.id) {
+            newUrl.hash = `#${this.state.id}`;
+        }
 
         console.log('urlFromState', newUrl.searchParams.toString())
         return newUrl;