Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[SUCE-226] suttaplex list vert menu bugs #87

Merged
merged 9 commits into from Oct 16, 2017
Merged

[SUCE-226] suttaplex list vert menu bugs #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
100731a
no wrap at expand action
gradam Oct 16, 2017
f8ed2da
no wrap
gradam Oct 16, 2017
3a0b832
2-4
gradam Oct 16, 2017
4eab318
6
gradam Oct 16, 2017
bd557d5
ALl bugs fixed (i think)
gradam Oct 16, 2017
9d794d8
Missing semicolon and parameter
gradam Oct 16, 2017
26a3251
PR changes
gradam Oct 16, 2017
219c4fc
Merge branch 'development' into SUCE-226-suttaplex-list-vert-menu-bugs
gradam Oct 16, 2017
d42cb92
Merge branch 'development' into SUCE-226-suttaplex-list-vert-menu-bugs
TrebuhD Oct 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
79 changes: 59 additions & 20 deletions client/elements/menus/more-par-menu.html
View file
Open in desktop
Expand Up @@ -25,6 +25,15 @@
cursor: pointer;
background-color: var(--paper-grey-200);
}

.table-element {
white-space: nowrap;
}

.table-element[disabled] {
--iron-icon-fill-color: var(--paper-grey-200);
color: var(--paper-grey-200);
}
</style>

<iron-ajax id="parallels_ajax"
Expand All @@ -34,18 +43,19 @@
loading="{{ loadingParallels }}"
last-response="{{ parallels }}"></iron-ajax>

<paper-item on-tap="_copyLink" class="button-text" title="[[itemLink]]">
<paper-item class="table-element button-text" on-tap="_copyLink" title="[[itemLink]]">
<iron-icon icon="link"></iron-icon>
Copy link
</paper-item>
<paper-item on-tap="_copyContent" class="button-text" disabled="{{loadingParallels}}">
<paper-item class="table-element button-text" on-tap="_copyContent" disabled="{{ areParallelsAvailable }}">
<iron-icon icon="content-copy"></iron-icon>
Copy table
</paper-item>
<paper-item on-tap="_copyCite" class="button-text" disabled="{{loadingParallels}}">
<paper-item class="table-element button-text" on-tap="_copyCite" disabled="{{ areParallelsAvailable }}">
<iron-icon icon="editor:format-quote"></iron-icon>
Cite
</paper-item>

</template>

<script>
Expand Down Expand Up @@ -76,20 +86,37 @@
},
loadingParallels: {
type: Boolean,
value: true
},
areParallelsAvailable: {
type: Boolean,
value: false,
computed: "_setAreParallelsAvaiable(loadingParallels)"
}
}
}

_notifyCopy(message, success) {
this.dispatchEvent(new CustomEvent('par-menu-copied', {
detail: {message: message, success: success},
bubbles: true,
composed: true
}))
}

// copy the parallels-table in html-string
_copyContent() {
const copyTextarea = this._computeCopyTable();
this._copyToClipboard(copyTextarea);
try {
const copyTextarea = this._computeCopyTable();
this._copyToClipboard(copyTextarea);
this._notifyCopy('Parallels table copied!', true);
} catch (err) {
this._notifyCopy('Error!', false);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should print error to console using console.error()

console.error(err);
}
}

_gotParallels() {
const copyTextarea = this._computeCopyTable();
this._copyToClipboard(copyTextarea);
_setAreParallelsAvaiable(loadingParallels) {
return loadingParallels || (Object.keys(this.parallels).length === 0 && typeof this.parallels === 'object')
}

_computeLink() {
Expand All @@ -100,13 +127,25 @@

// Copy the link to the suttaplex page
_copyLink() {
this._copyToClipboard(this.itemLink);
try {
this._copyToClipboard(this.itemLink);
this._notifyCopy('Link copied!', true);
} catch (err) {
this._notifyCopy('Error!', false);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

print error

console.error(err);
}
}

// copy cite-information about parallels and bibliography.
_copyCite() {
const copyTextarea = this._computeCiteData(this.inputData, this.parallelsArray);
this._copyToClipboard(copyTextarea);
try {
const copyTextarea = this._computeCiteData(this.inputData, this.parallelsArray);
this._copyToClipboard(copyTextarea);
this._notifyCopy('Cite copied!', true);
} catch (err) {
this._notifyCopy('Error!', false);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto

console.error(err);
}
}

// copies inputtext to the clipboard by creating and selecting a dummy element.
Expand All @@ -127,11 +166,11 @@
}

_computeIconForType(type) {
if (type === 'parallels') return 'swap-horiz';
if (type === 'retells') return 'cached';
if (type === 'mentions') return 'editor:format-quote';
return '';
}
if (type === 'parallels') return 'swap-horiz';
if (type === 'retells') return 'cached';
if (type === 'mentions') return 'editor:format-quote';
return '';
}

// icons to be used instead of iron icons in the base html-string copy function
_computeIcon(parallel) {
Expand All @@ -156,9 +195,9 @@
let size = this.parallels[section].length;
let first = true;
let tr = '';
for(let parallel of this.parallels[section]){
for (let parallel of this.parallels[section]) {
tr = ' <tr>\n';
if(first) {
if (first) {
tr += ` <td rowspan=${size}>${section}</td>\n`;
first = false;
}
Expand All @@ -167,7 +206,7 @@
tr += ` <td>${parallel.to.original_title}</td>\n`;
tbody += `${tr} </tr>\n`;
}

body += `${tbody}</tbody>\n`;
}
body += '</table>\n</body>\n</html>';
Expand Down
91 changes: 76 additions & 15 deletions client/elements/suttaplex/sc-suttaplex.html
View file
Open in desktop
Expand Up @@ -11,6 +11,8 @@
<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="/bower_components/paper-badge/paper-badge.html">
<link rel="import" href="/bower_components/paper-badge/paper-badge.html">
<link rel="import" href="/bower_components/paper-toast/paper-toast.html">


<link rel="import" href="/img/sc-svg-icons.html">
<link rel="import" href="/elements/addons/sc-sutta-note.html">
Expand Down Expand Up @@ -183,6 +185,36 @@
margin: 0;
}

.toast {
--paper-toast-color: white;
text-align: center;
font-size: 20px;
margin-left: calc(50vw - 150px);
}

.success-toast {
--paper-toast-background-color: green;
}

.error-toast {
--paper-toast-background-color: red;
}

@media screen and (max-width: 596px) {
.right-elements {
display: flex;
flex-flow: column;
}

#copy_menu {
order: 1;
}

#parallels_toggle {
order: 0;
}
}

</style>

<paper-card class="suttaplex" id="[[item.uid]]">
Expand Down Expand Up @@ -238,23 +270,23 @@ <h3 class="suttaplex-heading">[[_computeMainHeading(item)]]</h3>
</div>
</div>

<div>
<div class="right-elements">
<template is="dom-if" if="[[parallelsOpened]]">
<paper-menu-button horizontal-align="right" role="group" aria-haspopup="true" vertical-align="top"
aria-disabled="false">
<paper-icon-button class="more-info" slot="dropdown-trigger" icon="icons:more-vert" role="button"
tabindex="0" aria-disabled="false"></paper-icon-button>
<div slot="dropdown-content"></div>
<paper-listbox slot="dropdown-content" tabindex="0" role="listbox">
<more-par-menu tabindex="0" item="[[item]]"></more-par-menu>
</paper-listbox>
</paper-menu-button>
<paper-menu-button id="copy_menu" horizontal-align="right" role="group" aria-haspopup="true"
vertical-align="top" aria-disabled="false">
<paper-icon-button class="more-info" slot="dropdown-trigger" icon="icons:more-vert" role="button"
tabindex="0" aria-disabled="false"></paper-icon-button>
<div slot="dropdown-content"></div>
<paper-listbox slot="dropdown-content" tabindex="0" role="listbox">
<more-par-menu tabindex="0" item="[[item]]" ></more-par-menu>
</paper-listbox>
</paper-menu-button>
</template>

<paper-icon-button id="parallels-toggle" class="toggle-button" icon="[[toggleIcon]]"
<paper-icon-button id="parallels_toggle" class="toggle-button" icon="[[toggleIcon]]"
on-tap="_toggleParallelsOpened">
</paper-icon-button>
<paper-badge for="parallels-toggle" label="[[item.parallel_count]]" class="paper-badge"
<paper-badge for="parallels_toggle" label="[[item.parallel_count]]" class="paper-badge"
title="Number of parallels"></paper-badge>
</div>
</div>
Expand All @@ -266,6 +298,8 @@ <h3 class="suttaplex-heading">[[_computeMainHeading(item)]]</h3>
</template>

</paper-card>
<paper-toast id="success_toast" class="toast success-toast" text="[[toastMessage]]" duration=3000></paper-toast>
<paper-toast id="error_toast" class="toast error-toast" text="[[toastMessage]]" duration=3000></paper-toast>
</template>

<script>
Expand All @@ -282,7 +316,8 @@ <h3 class="suttaplex-heading">[[_computeMainHeading(item)]]</h3>
},
parallelsOpened: {
type: Boolean,
value: false
value: false,
observer: '_parallelsOpenedChanged'
},
opened: {
type: Boolean,
Expand All @@ -303,19 +338,45 @@ <h3 class="suttaplex-heading">[[_computeMainHeading(item)]]</h3>
},
level: String,
// The suttaplex item
item: Object
item: Object,
toastMessage: {
type: String
}
}
}

ready() {
super.ready();
this.addEventListener('par-menu-copied', (e) => {
this.toastMessage = e.detail.message;
const success = e.detail.success;
if (success) {
this.$.success_toast.open();
} else {
this.$.error_toast.open();
}
copy_menu.opened = false; // Close dropdown after the copy action.
})
}

_changeItemZIndex(e) {
let node = this.parentNode;
if(node.style === undefined){
return;
}
if (e.type.endsWith('open')) {
node.style['z-index'] = 100;
} else {
} else if (node.style['z-index'] == 100 && this.parallelsOpened === false) {
node.style['z-index'] = null;
}
}

_parallelsOpenedChanged(e) {
const type = e ? 'open' : 'close';
const event_mock = { type: type };
this._changeItemZIndex(event_mock);
}

// general function to hide or display various elements.
_computeHide(checkText) {
return (!checkText) ? 'hide-element' : '';
Expand Down