Merge pull request #123 from eeditiones/url-handling

Improve browser history support and URL handling

demo/demos.json

@@ -2,7 +2,8 @@
   "pb-view": {
     "demo/pb-view.html": "View TEI document",
     "demo/pb-view2.html": "Docbook document",
-    "demo/pb-view3.html": "Manipulating content via JS"
+    "demo/pb-view3.html": "Manipulating content via JS",
+    "demo/pb-view4.html": "Navigating links"
   },
   "pb-document": {
     "demo/pb-document.html": "Demo"

demo/pb-browse-docs.html

@@ -86,7 +86,8 @@
                     border-bottom: 1px solid #a0a0a0;
                 }
             </style>
-            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
+            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" 
+                url-doc="path|query" url-skip="lang," url-id="query|hash">
                 <div class="toolbar">
                     <pb-login id="login" group="tei"></pb-login>
                     <pb-lang label="language" selected="en">

demo/pb-collapse.html

@@ -26,7 +26,7 @@
                         margin: 10px 20px;
                     }
                 </style>
-                <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
+                <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
                     <pb-document id="document1" path="test/osinski.xml" odd="osinski"></pb-document>
                     <pb-collapse toggles>
                         <div slot="collapse-trigger">Metadata</div>

demo/pb-collapse2.html

@@ -27,7 +27,7 @@
                         margin: 10px 20px;
                     }
                 </style>
-                <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
+                <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
                     <pb-document id="document1" path="test/osinski.xml" odd="osinski"></pb-document>
                     <pb-collapse emit="meta">
                         <div slot="collapse-trigger">Metadata</div>

demo/pb-combo-box.html

@@ -16,7 +16,7 @@
         <pb-demo-snippet>
             <template>
                 <pb-page locales="../i18n/{{ns}}/{{lng}}.json" endpoint=".">
-                    <h2>Using pb-multi-select with a standard HTML form</h2>
+                    <h2>Using pb-combo-box with a standard HTML form</h2>
                     <form id="form" action="">
                         <fieldset>
                             <p>Select single option from a remote data source</p>

demo/pb-document.html

@@ -29,13 +29,13 @@
                     flex: 1 0;
                 }
                 </style>
-                <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
-                    <pb-document id="document1" path="test/kant_rvernunft_1781.TEI-P5.xml" odd="dta" view="page"></pb-document>
+                <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
+                    <pb-document id="document1" path="test/kant_rvernunft_1781.TEI-P5.xml" odd="dta" view="page" disable-history></pb-document>
                     <pb-document id="document2" path="doc/documentation.xml" odd="docbook" view="div"></pb-document>
 
                     <!-- Display two document views side by side -->
                     <main>
-                        <pb-view id="view1" src="document1"></pb-view>
+                        <pb-view id="view1" src="document1" disable-history></pb-view>
                         <pb-view id="view2" src="document2"></pb-view>
                     </main>
                 </pb-page>

demo/pb-drawer.html

@@ -98,7 +98,7 @@
                     color: #222222;
                 }
                 </style>
-                <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
+                <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
                     <pb-document id="document1" path="test/kant_rvernunft_1781.TEI-P5.xml" odd="dta"></pb-document>
                     <div class="toolbar">
                         <paper-icon-button id="tocToggle" class="toc-toggle" icon="icons:view-list"></paper-icon-button>

demo/pb-drawer2.html

@@ -60,7 +60,7 @@
                     content: ': ';
                 }
                 </style>
-                <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
+                <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
                     <pb-document id="document1" path="test//orlik_to_serafin.xml" odd="serafin"></pb-document>
                     <pb-progress></pb-progress>
                     <p>Disable popovers for names and places. Show the information in the drawer instead if a name is clicked.

demo/pb-edit-app.html

@@ -25,7 +25,7 @@
     </head>
 
     <body>
-        <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
+        <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
             <pb-login group="tei"></pb-login>
             <pb-edit-app></pb-edit-app>
         </pb-page>

demo/pb-facsimile-2.html

@@ -56,7 +56,7 @@
                 margin-right: 20px;
             }
             </style>
-            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
+            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
                 <pb-document id="document1" path="test/cortes_to_dantiscus.xml" odd="dantiscus"></pb-document>
                 <main>
                     <pb-facsimile base-uri="https://apps.existsolutions.com/cantaloupe/iiif/2/" default-zoom-level="0"

demo/pb-facsimile.html

@@ -43,7 +43,7 @@
                 border-bottom: 1px solid #606060;
             }
             </style>
-            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
+            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
                 <!-- Display facsimile -->
                 <main>
                     <div>

demo/pb-grid.html

@@ -27,7 +27,7 @@
 <body>
     <pb-demo-snippet>
         <template>
-            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
+            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
                 <pb-document id="document1" path="test/orlik_to_serafin.xml" odd="serafin" view="single"></pb-document>
 
                 <pb-grid-action action="add" class="grid-add" grid="#grid" initial="1">

demo/pb-link.html

@@ -42,7 +42,7 @@
                 text-decoration: none;
             }
             </style>
-            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
+            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
                 <pb-document id="document1" path="test/graves6.xml" odd="graves"></pb-document>
                 <main>
                     <ul>

demo/pb-load.html

@@ -53,14 +53,14 @@
                 color: #222222;
             }
             </style>
-            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
-                <pb-document id="document1" path="test/kant_rvernunft_1781.TEI-P5.xml" odd="dta"></pb-document>
+            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
+                <pb-document id="document1" path="test/kant_rvernunft_1781.TEI-P5.xml" odd="dta" view="page"></pb-document>
 
                 <main>
                     <pb-load url="api/document/{doc}/contents?target=transcription&icons=true" expand src="document1" auto>Loading table of
                         contents...</pb-load>
                     <div class="transcription">
-                        <pb-view src="document1" subscribe="transcription" view="page"></pb-view>
+                        <pb-view src="document1" subscribe="transcription"></pb-view>
                     </div>
                 </main>
             </pb-page>

demo/pb-search.html

@@ -52,7 +52,7 @@
                 margin-right: 10px;
             }
             </style>
-            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
+            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
                 <pb-progress></pb-progress>
                 <main>
                     <pb-search id="search-form">

demo/pb-search2.html

@@ -51,7 +51,7 @@
                 margin-right: 10px;
             }
             </style>
-            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
+            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
                 <pb-progress></pb-progress>
                 <main>
                     <pb-search id="search-form">

demo/pb-search3.html

@@ -58,7 +58,7 @@
             }
 
             </style>
-            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
+            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
                 <pb-progress></pb-progress>
                 <main>
                     <h2>multi-select</h2>

demo/pb-select-feature.html

@@ -46,13 +46,13 @@ <h1>Using pb-select-feature with pb-view</h1>
                 display: block;
             }
             </style>
-            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
+            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
                 <pb-document id="document1" path="test/cortes_to_dantiscus.xml" odd="dantiscus"></pb-document>
 
                 <div class="toolbar">
                     <pb-select-feature id="select-view1" name="view1" label="View" items='[
                     {"name": "Diplomatic View", "properties": {"mode": "diplomatic", "view": "page"}}, 
-                    {"name": "Normalized View", "properties": {"mode": "norm", "view": "single"}}
+                    {"name": "Normalized View", "properties": {"mode": "norm", "view": "single", "root": null}}
                     ]'></pb-select-feature>
                     <pb-navigation direction="backward" keyboard="left">
                         <paper-icon-button icon="icons:chevron-left"></paper-icon-button>

demo/pb-select-feature2.html

@@ -42,18 +42,25 @@ <h1>Using pb-select-feature without server reload</h1>
                 padding: 10px;
                 background-color: #E0E0E0;
             }
+            .message {
+                display: none;
+            }
+            .message.toggle {
+                display: block;
+            }
             pb-toggle-feature {
                 display: block;
             }
             </style>
-            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
+            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
                 <pb-document id="document1" path="test/cortes_to_dantiscus.xml" odd="dantiscus"></pb-document>
 
+                <p class="message">You are viewing the text in plain reading view.</p>
                 <div class="toolbar">
                     <pb-select-feature id="select-view1" name="view1" label="View" items='[
-                    {"name": "Diplomatic View", "selectors": [{"selector": ".choice,.choice-alternate,br", "state": false},{"selector": ".tei-foreign,pb-highlight,pb-popover", "command": "disable"}]},
-                    {"name": "Normalized View", "selectors": [{"selector": ".choice,.choice-alternate,br", "state": true},{"selector": ".tei-foreign,pb-highlight,pb-popover", "command": "disable"}]},
-                    {"name": "Plain Reading View", "selectors": [{"selector": ".choice,.choice-alternate,br", "state": true}, {"selector": ".tei-foreign,pb-highlight,pb-popover", "command": "disable", "state": true}]}
+                    {"name": "Diplomatic View", "selectors": [{"selector": ".choice,.choice-alternate,br", "state": false},{"selector": ".tei-foreign,pb-highlight,pb-popover", "command": "disable"}, {"selector": ".message", "state": false, "global": true}]},
+                    {"name": "Normalized View", "selectors": [{"selector": ".choice,.choice-alternate,br", "state": true},{"selector": ".tei-foreign,pb-highlight,pb-popover", "command": "disable"}, {"selector": ".message", "state": false, "global": true}]},
+                    {"name": "Plain Reading View", "selectors": [{"selector": ".choice,.choice-alternate,br", "state": true}, {"selector": ".tei-foreign,pb-highlight,pb-popover", "command": "disable", "state": true}, {"selector": ".message", "state": true, "global": true}]}
                     ]' emit="ex2" subscribe="ex2"></pb-select-feature>
                     <!-- Navigate to previous page -->
                     <pb-navigation direction="backward" keyboard="left" emit="ex2" subscribe="ex2">

demo/pb-select-feature3.html

@@ -52,7 +52,7 @@ <h1>Using pb-select-feature with pb-load</h1>
                 color: #888888;
             }
             </style>
-            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
+            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
                 <pb-document id="document1" path="test/cortes_to_dantiscus.xml" odd="dantiscus"></pb-document>
 
                 <div class="toolbar">
@@ -63,7 +63,7 @@ <h1>Using pb-select-feature with pb-load</h1>
                 </div>
                 <main>
                     <pb-load id="load" url="api/parts/{doc}/html?xpath=//text[@type='source']&view=single" expand
-                        src="document1" auto subscribe="loader" emit="loader">Loading document ...</pb-load>
+                        src="document1" auto subscribe="loader" emit="loader" history>Loading document ...</pb-load>
                 </main>
             </pb-page>
         </template>

demo/pb-select-odd.html

@@ -28,7 +28,7 @@
                 flex: 1 0;
             }
             </style>
-            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
+            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
                 <pb-document id="document1" path="test/graves6.xml" odd="graves"></pb-document>
                 <pb-select-odd src="document1"></pb-select-odd>
                 <main>
@@ -39,4 +39,4 @@
     </pb-demo-snippet>
 </body>
 
-</html>
+</html>

demo/pb-table-grid.html

@@ -9,7 +9,7 @@
     <body>
         <h1>Using pb-table-grid</h1>
 
-        <pb-page theme="components.css">
+        <pb-page theme="components.css" url-path="query">
             <pb-table-grid class="table-grid" source="./people.json" css-path="/css/gridjs" resizable>
                 <pb-table-column label="Name" property="name"></pb-table-column>
                 <pb-table-column label="Born" property="birth"></pb-table-column>

demo/pb-tabs.html

@@ -8,6 +8,7 @@
         <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" defer></script>
         <script type="module" src="../src/docs/pb-demo-snippet.js"></script>
         <script type="module" src="../src/pb-tabs.js"></script>
+        <script type="module" src="../src/pb-page.js"></script>
         <!--/scripts-->
     </head>
 
@@ -16,17 +17,23 @@
             <template>
                 <!-- Display two document views side by side -->
                 <main>
+                    <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
                     <pb-tabs>
-                        <paper-tab slot="tab">Local Collection</paper-tab>
-                        <paper-tab slot="tab">Distributed Text Services (Experimental)</paper-tab>
+                        <paper-tab slot="tab">Tab 1</paper-tab>
+                        <paper-tab slot="tab">Tab 2</paper-tab>
+                        <paper-tab slot="tab">Tab 3</paper-tab>
 
                         <div slot="page">
                             <p>This is the first tab.</p>
                         </div>
                         <div slot="page">
                             <p>And a second tab.</p>
                         </div>
+                        <div slot="page">
+                            <p>The third tab.</p>
+                        </div>
                     </pb-tabs>
+                    </pb-page>
                 </main>
             </template>
         </pb-demo-snippet>

demo/pb-toggle-feature.html

@@ -64,17 +64,17 @@ <h1>Using pb-toggle-feature with pb-view</h1>
                 display: block;
             }
             </style>
-            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
+            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
                 <pb-document id="document1" path="test/cortes_to_dantiscus.xml" odd="dantiscus"></pb-document>
 
                 <div class="toolbar">
-                    <pb-toggle-feature name="highlight1" selector=".tei-foreign,pb-highlight,pb-popover"
+                    <pb-toggle-feature name="plain" selector=".tei-foreign,pb-highlight,pb-popover"
                         action="disable" default="off">Plain Reading View</pb-toggle-feature>
                     <!-- pass a parameter 'mode'. pb-view will forward this to the ODD as a user-defined parameter-->
                     <pb-toggle-feature name="mode" on="diplomatic" off="norm">Diplomatic View</pb-toggle-feature>
                     <!-- directly change properties of the pb-view -->
                     <pb-toggle-feature name="view" on="page" off="single" default="off">Page View</pb-toggle-feature>
-                    <pb-toggle-feature name="xpath" default="off"
+                    <pb-toggle-feature name="translation" default="off"
                         properties-on='{"xpath": "//text[@type=&apos;translation&apos;]", "odd": "teipublisher", "nodeId": null, "view": "single"}'
                         properties-off='{"xpath": "//text[@type=&apos;source&apos;]", "odd": "dantiscus"}'>
                         Translation

demo/pb-toggle-feature2.html

@@ -64,12 +64,12 @@ <h1>Toggling features without content reload</h1>
                 display: block;
             }
             </style>
-            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher">
+            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
                 <pb-document id="document2" path="test/cortes_to_dantiscus.xml" odd="dantiscus"></pb-document>
                 <div class="toolbar">
-                    <pb-toggle-feature name="highlight2" selector=".tei-foreign,pb-highlight,pb-popover"
+                    <pb-toggle-feature name="plain" selector=".tei-foreign,pb-highlight,pb-popover"
                         action="disable" default="off" emit="ex2" subscribe="ex2">Plain Reading View</pb-toggle-feature>
-                    <pb-toggle-feature name="norm2" selector=".choice,.choice-alternate,br" emit="ex2" subscribe="ex2">
+                    <pb-toggle-feature name="norm" selector=".choice,.choice-alternate,br" emit="ex2" subscribe="ex2">
                         Normalized View</pb-toggle-feature>
                     <!-- Navigate to previous page -->
                     <pb-navigation direction="backward" keyboard="left" emit="ex2" subscribe="ex2">