[SUCE-76]: Sutta view with tools & information (main functionality)

README.md

@@ -241,7 +241,7 @@ The page-selector also parses the input-data and loads one of 6 possible page-vi
   - static pages: **sc-page-static.html**
   - search page: **sc-page-search.html**
   - dictionary page: **sc-page-dictionary.html**
-  - normal html text pages: **sc-page-text.html**
+  - normal html text pages: **sc-simple-text.html**
   - segmented text pages from pootle output: **sc-segmented-text.html**
   - suttaplex list: **sc-view-suttaplex.html**
 
@@ -272,10 +272,10 @@ Issues that need to be fixed:
   - The related items are now loaded straight from a mockup file in `../data/dictionaries/related.json`. This will have to be changed to relevant terms. Check on the live SC site how adjacent and similar terms are calculated and create a function to do this.
 
 
-### sc-page-text.html
+### sc-simple-text.html
 This element loads the plain html pages which are at the moment defined as all pages that have an author which is not "sujato" or "pali". It only loads English pages at the moment. Files are loaded from the mockup directory in `../data/texts/en/bodhi`. The paragraph numbers are loaded from `../data/paragraphtitles.json`(this file is complete and correct).
 
-The relevant suttaplex card is shown at the top, hidden behind a dropdown (`addons/sc-text-options.html`).
+The relevant suttaplex card is shown at the top, hidden behind a dropdown (`text/sc-text-options.html`).
 
 Via the settings-menu in the toolbar, paragraph numbers can be displayed or hidden as requested.
 
@@ -290,7 +290,7 @@ This element loads the segmented text pages that are created in Pootle, which ar
 
 This elements first loads the html markup file from `../data/texts/markup`, then the translation by Sujato from `../data/texts/en/sujato` and the pali from `../data/texts/pi` as well as the file that contains the paragraph numbers from `../data/paragraphtitles.json`. 
 
-The relevant suttaplex card is shown at the top, hidden behind a dropdown (`addons/sc-text-options.html`).
+The relevant suttaplex card is shown at the top, hidden behind a dropdown (`text/sc-text-options.html`).
 
 Via the settings-menu in the toolbar, paragraph numbers can be displayed or hidden as requested. Via this menu, also the type of view (none, side-by-side, line-by-line or popup) can be chosen to display the english and pali in relation to each other.
 The type of script used for the pali can be chosen.

client/bower.json

@@ -56,7 +56,8 @@
     "iron-form": "^2.0.1",
     "paper-checkbox": "^2.0.1",
     "paper-toast": "^2.0.0",
-    "iron-lazy-pages": "TimvdLippe/iron-lazy-pages#^2.1.0"
+    "iron-lazy-pages": "TimvdLippe/iron-lazy-pages#^2.1.0",
+    "isw-dialog": "IswPolymerElements/isw-dialog#^1.0.3"
   },
   "devDependencies": {
     "web-component-tester": "^6.2.0"

client/bower_components/isw-dialog/.bower.json

@@ -0,0 +1,36 @@
+{
+  "name": "isw-dialog",
+  "description": "Material Design Polymer 2.0 Dialog, stacking context safe with remote-control.",
+  "main": [
+    "isw-dialog.html",
+    "isw-dialog-remote.html"
+  ],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^2.0.0",
+    "paper-dialog-behavior": "PolymerElements/paper-dialog-behavior#^2.0.0"
+  },
+  "devDependencies": {
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
+    "paper-button": "PolymerElements/paper-button#^2.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^2.0.0",
+    "paper-input": "PolymerElements/paper-input#^2.0.0",
+    "app-layout": "PolymerElements/app-layout#^2.0.0",
+    "paper-dialog": "PolymerElements/paper-dialog#^2.0.0"
+  },
+  "resolutions": {
+    "polymer": "^2.0.0"
+  },
+  "homepage": "https://github.com/IswPolymerElements/isw-dialog",
+  "version": "1.0.3",
+  "_release": "1.0.3",
+  "_resolution": {
+    "type": "version",
+    "tag": "1.0.3",
+    "commit": "8f80cde629a08612d6457f300a19fbb9b287efa0"
+  },
+  "_source": "https://github.com/IswPolymerElements/isw-dialog.git",
+  "_target": "^1.0.3",
+  "_originalSource": "IswPolymerElements/isw-dialog"
+}

client/bower_components/isw-dialog/.gitignore

@@ -0,0 +1 @@
+bower_components

client/bower_components/isw-dialog/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 ISW Polymer Elements
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

client/bower_components/isw-dialog/README.md

@@ -0,0 +1,38 @@
+# \<isw-dialog\>
+
+A stacking-context safe paper-dialog with remote-control.
+
+Place your dialog somewhere save from stacking-context issues, and access it over a remote element in your view.
+
+Designed as a workshift solution till the stacking context issues in paper-dialog are fixed.
+
+```html
+<isw-dialog name="myUniqueDialogName" data="{{dataFromRemote}}">
+  <h2>Header</h2>
+  <paper-dialog-scrollable>
+    Lorem ipsum: [[dataFromRemote.someTextProperty]]
+  </paper-dialog-scrollable>
+  <div class="buttons">
+    <paper-button dialog-dismiss>Cancel</paper-button>
+    <paper-button dialog-confirm autofocus>Accept</paper-button>
+  </div>
+</isw-dialog>
+```
+
+```html
+<isw-dialog-remote
+    id="dialogRemote"
+    dialog="myUniqueDialogName"
+    data="[[dataForDialog]]"
+    on-iron-overlay-closed="_closed">
+</isw-dialog-remote>
+```
+
+```javascript
+open() {
+  this.$.dialogRemote.open();
+}
+_closed( event ) {
+  console.log( event );
+}
+```

client/bower_components/isw-dialog/bower.json

@@ -0,0 +1,25 @@
+{
+  "name": "isw-dialog",
+  "description": "Material Design Polymer 2.0 Dialog, stacking context safe with remote-control.",
+  "main": [
+    "isw-dialog.html",
+    "isw-dialog-remote.html"
+  ],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^2.0.0",
+    "paper-dialog-behavior": "PolymerElements/paper-dialog-behavior#^2.0.0"
+  },
+  "devDependencies": {
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
+    "paper-button": "PolymerElements/paper-button#^2.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^2.0.0",
+    "paper-input": "PolymerElements/paper-input#^2.0.0",
+    "app-layout": "PolymerElements/app-layout#^2.0.0",
+    "paper-dialog": "PolymerElements/paper-dialog#^2.0.0"
+  },
+  "resolutions": {
+    "polymer": "^2.0.0"
+  }
+}

client/bower_components/isw-dialog/demo/index.html

@@ -0,0 +1,168 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+	<title>isw-dialog demo</title>
+
+	<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+	<link rel="import" href="../../app-layout/app-layout.html">
+	<link rel="import" href="../../paper-button/paper-button.html">
+	<link rel="import" href="../../paper-dialog/paper-dialog.html">
+	<link rel="import" href="../../paper-input/paper-input.html">
+	<link rel="import" href="../../paper-styles/paper-styles.html">
+
+	<link rel="import" href="../isw-dialog.html">
+	<link rel="import" href="../isw-dialog-remote.html">
+
+	<style>
+		body {
+			font-family: 'Roboto', 'Noto', sans-serif;
+			line-height: 1.5;
+			background-color: #FFFFFF;
+		}
+
+		#drawer {
+			background-color: #DDDDDD;
+			height: 100%;
+		}
+
+		app-toolbar {
+			color: #FFFFFF;
+			background: #00508C;
+		}
+	</style>
+</head>
+<body>
+	<dom-module id="demo-element-dialog">
+		<template>
+			<isw-dialog id="dialog" name="myTestDialog" data="{{_data}}" modal>
+				<h2>Test Dialog</h2>
+				<p>Text from remote: [[_data.text]]</p>
+				<div class="buttons">
+					<paper-button dialog-dismiss>Cancel</paper-button>
+					<paper-button dialog-confirm>Accept</paper-button>
+				</div>
+			</isw-dialog>
+		</template>
+		<script>
+			HTMLImports.whenReady( function() {
+				class DemoElementDialog extends Polymer.Element {
+					static get is() {
+						return 'demo-element-dialog';
+					}
+
+					static get properties() {
+						return {
+							_data: {
+								type: Object,
+								notify: true
+							}
+						};
+					}
+				}
+
+				window.customElements.define( DemoElementDialog.is, DemoElementDialog );
+			} );
+		</script>
+	</dom-module>
+
+	<dom-module id="demo-element-view">
+		<template>
+			<style>
+				:host {
+					display: block;
+					padding: 32px;
+				}
+
+				paper-button {
+					color: #FFFFFF;
+					background: #00508C;
+				}
+			</style>
+
+			<h3>Dialog Remote Control</h3>
+			<p>See console for events the remote received.</p>
+
+			<paper-input label="Text send to the dialog" value="{{_data.text}}"></paper-input><br>
+			<paper-button on-tap="openIsw" raised>Open isw-dialog</paper-button>
+			<paper-button on-tap="openPaper" raised>Open paper-dialog</paper-button>
+
+			<paper-dialog id="paperDialog" modal>
+				<h2>Test Dialog</h2>
+				<p>Text from remote: [[_data.text]]</p>
+				<div class="buttons">
+					<paper-button dialog-dismiss>Cancel</paper-button>
+					<paper-button dialog-confirm>Accept</paper-button>
+				</div>
+			</paper-dialog>
+
+			<isw-dialog-remote
+					id="remote"
+					dialog="myTestDialog"
+					data="[[_data]]"
+					on-iron-overlay-canceled="_canceled"
+					on-iron-overlay-closed="_closed"
+					on-iron-overlay-opened="_opened"></isw-dialog-remote>
+		</template>
+
+		<script>
+			HTMLImports.whenReady( function() {
+				class DemoElementView extends Polymer.Element {
+					static get is() {
+						return 'demo-element-view';
+					}
+
+					static get properties() {
+						return {
+							_data: {
+								type: Object,
+								value: {
+									text: 'Some text.'
+								},
+								notify: true
+							}
+						};
+					}
+
+					openPaper() {
+						this.$.paperDialog.open();
+					}
+
+					openIsw() {
+						this.$.remote.open();
+					}
+
+					_canceled( event ) {
+						console.log( event );
+					}
+
+					_closed( event ) {
+						console.log( event );
+					}
+
+					_opened( event ) {
+						console.log( event );
+					}
+				}
+				window.customElements.define( DemoElementView.is, DemoElementView );
+			} );
+		</script>
+	</dom-module>
+
+	<demo-element-dialog></demo-element-dialog>
+	<app-drawer-layout fullbleed>
+		<app-drawer slot="drawer">
+			<div id="drawer"></div>
+		</app-drawer>
+		<app-header-layout fixed condenses>
+			<app-header slot="header">
+				<app-toolbar>isw-dialog demo</app-toolbar>
+			</app-header>
+			<demo-element-view></demo-element-view>
+		</app-header-layout>
+	</app-drawer-layout>
+</body>
+</html>

client/bower_components/isw-dialog/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>isw-dialog</title>
+
+    <script src="../webcomponentsjs/webcomponents-loader.js"></script>
+
+    <link rel="import" href="../iron-component-page/iron-component-page.html">
+  </head>
+  <body>
+    <iron-component-page src="isw-dialog.html"></iron-component-page>
+  </body>
+</html>