Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-24 23:59:47 +02:00
Code Releases Activity

WIP document TOC for widescreen displays

Browse source
This commit is contained in:
Harvey Kandola 2017-12-12 16:21:05 +00:00
parent 4cf8c34ebd
commit e158c9f0f8
6 changed files with 115 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

78
gui/app/components/document/document-toc.js
View file

@ -29,6 +29,7 @@ export default Component.extend(NotifierMixin, {
emptyState: computed('pages', function () {
return this.get('pages.length') === 0;
}),
isDesktop: true,
didReceiveAttrs() {
this._super(...arguments);
@ -43,21 +44,45 @@ export default Component.extend(NotifierMixin, {
didInsertElement() {
this._super(...arguments);
this.setSize();
this.eventBus.subscribe('documentPageAdded', this, 'onDocumentPageAdded');
this.eventBus.subscribe('resized', this, 'onResize');
},
willDestroyElement() {
this._super(...arguments);
this.eventBus.unsubscribe('documentPageAdded');
this.eventBus.unsubscribe('resized');
},
onDocumentPageAdded(pageId) {
this.send('onEntryClick', pageId);
this.setSize();
},
// Controls what user can do with the toc (left sidebar).
// Identifies the target pages.
onResize() {
this.setSize();
},
setSize() {
this.set('isDesktop', $(window).width() >= 1800);
let h = $(window).height() - $("#nav-bar").height() - 140;
$("#doc-toc").css('max-height', h);
let i = $("#doc-view").offset();
if (is.not.undefined(i)) {
let l = i.left - 100;
if (l > 350) l = 350;
$("#doc-toc").width(l);
}
},
// Controls what user can do with the toc (left sidebar)
// Identifies the target pages
setState(pageId) {
this.set('currentPageId', pageId);
@ -74,7 +99,7 @@ export default Component.extend(NotifierMixin, {
},
actions: {
// Page up - above pages shunt down.
// Page up -- above pages shunt down
pageUp() {
if (this.get('state.upDisabled')) {
return;
@ -93,7 +118,7 @@ export default Component.extend(NotifierMixin, {
}
},
// Move down -- pages below shift up.
// Move down -- pages below shift up
pageDown() {
if (this.get('state.downDisabled')) {
return;
@ -112,7 +137,7 @@ export default Component.extend(NotifierMixin, {
}
},
// Indent - changes a page from H2 to H3, etc.
// Indent -- changes a page from H2 to H3, etc.
pageIndent() {
if (this.get('state.indentDisabled')) {
return;
@ -131,7 +156,7 @@ export default Component.extend(NotifierMixin, {
}
},
// Outdent - changes a page from H3 to H2, etc.
// Outdent -- changes a page from H3 to H2, etc.
pageOutdent() {
if (this.get('state.outdentDisabled')) {
return;
@ -156,3 +181,44 @@ export default Component.extend(NotifierMixin, {
}
}
});
/*
Specs
-----
1. Must max max height to prevent off screen problems
2. Must be usable on mobile and desktop
3. Must be sticky and always visible (at least desktop)
4. Must set width or leave to grid system
Solution
--------
1. max-height calc on insert/repaint
1. overflow: scroll
2. on mobile/sm/md/lg we can put in little box to side of doc meta
and then set to fixed height based on screen size
2. on xl we can put into sidebar
3. sticky on xl desktop is fine as sidebar uses fixed position
and content has max-height with overflow
3. sticky on col/sm/md/lg is not available
Notes
-----
We could go with container-fluid and use full width of screen.
This would work on all devices and take more space on
$(window).width() needs to be 1800 or more for sticky sidebar...
$("#nav-bar").height()
$(window).height() - $("#nav-bar").height() - 100
Two choices:
if width >= 1800 then sidebar sticky outside container
if widht < 1800 then switch to container-fluid?
...but what about height?
...put next to doc--meta
*/