diff --git a/src/public/stylesheets/share.css b/src/public/stylesheets/share.css index fcca8edb2..65d0e1b6f 100644 --- a/src/public/stylesheets/share.css +++ b/src/public/stylesheets/share.css @@ -72,6 +72,47 @@ iframe.pdf-view { cursor: pointer; } +#child-links.grid ul { + list-style-type: none; + display: flex; + flex-wrap: wrap; + padding: 0; +} + +#child-links.grid ul li { + width: 180px; + height: 140px; + padding: 10px; +} + +#child-links.grid ul li a { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + border: 1px solid #ddd; + border-radius: 5px; + justify-content: center; + align-content: center; + text-align: center; + font-size: large; +} + +#child-links.grid ul li a:hover { + background: #eee; +} + +#child-links.list ul { + list-style-type: none; + display: inline-flex; + flex-wrap: wrap; + padding: 0; +} + +#child-links.list ul li { + margin-right: 20px; +} + #menuButton::after { position: relative; top: -2px; diff --git a/src/services/date_notes.js b/src/services/date_notes.js index a7eee8356..254032e1b 100644 --- a/src/services/date_notes.js +++ b/src/services/date_notes.js @@ -54,7 +54,7 @@ function getYearNote(dateStr, rootNote) { rootNote = getRootCalendarNote(); } - const yearStr = dateStr.substr(0, 4); + const yearStr = dateStr.trim().substr(0, 4); let yearNote = attributeService.getNoteWithLabel(YEAR_LABEL, yearStr); @@ -138,6 +138,8 @@ function getDateNoteTitle(rootNote, dayNumber, dateObj) { /** @returns {Note} */ function getDateNote(dateStr) { + dateStr = dateStr.trim().substr(0, 10); + let dateNote = attributeService.getNoteWithLabel(DATE_LABEL, dateStr); if (dateNote) { diff --git a/src/share/content_renderer.js b/src/share/content_renderer.js index 5ebe643b1..8985a7e21 100644 --- a/src/share/content_renderer.js +++ b/src/share/content_renderer.js @@ -1,43 +1,18 @@ const {JSDOM} = require("jsdom"); -const NO_CONTENT = '

This note has no content.

'; const shaca = require("./shaca/shaca"); -function getChildrenList(note) { - if (note.hasChildren()) { - const document = new JSDOM().window.document; - - const ulEl = document.createElement("ul"); - - for (const childNote of note.getChildNotes()) { - const li = document.createElement("li"); - const link = document.createElement("a"); - link.appendChild(document.createTextNode(childNote.title)); - link.setAttribute("href", childNote.noteId); - - li.appendChild(link); - ulEl.appendChild(li); - } - - return '

Child notes:

' + ulEl.outerHTML; - } - else { - return ''; - } -} - function getContent(note) { let content = note.getContent(); + let header = ''; + let isEmpty = false; if (note.type === 'text') { const document = new JSDOM(content || "").window.document; - const isEmpty = document.body.textContent.trim().length === 0 + isEmpty = document.body.textContent.trim().length === 0 && document.querySelectorAll("img").length === 0; - if (isEmpty) { - content = NO_CONTENT; - } - else { + if (!isEmpty) { for (const linkEl of document.querySelectorAll("a")) { const href = linkEl.getAttribute("href"); @@ -49,6 +24,7 @@ function getContent(note) { if (linkedNote) { linkEl.setAttribute("href", linkedNote.shareId); + linkEl.classList.add("type-" + linkedNote.type); } else { linkEl.removeAttribute("href"); @@ -57,28 +33,39 @@ function getContent(note) { } content = document.body.innerHTML; - + if (content.includes(``)) { - content += ``; - content += ``; - content += ``; - content += ``; + header += ` + + + +`; } } } else if (note.type === 'code') { if (!content?.trim()) { - content = NO_CONTENT; + isEmpty = true; } else { - content = `` - content += `` - content += `` + const document = new JSDOM().window.document; + + const preEl = document.createElement('pre'); + preEl.appendChild(document.createTextNode(content)); + + content = preEl.outerHTML; } } else if (note.type === 'mermaid') { - content = `
${content}
Chart source
${content}
` - } + content = ` +
${content}
+
+
+ Chart source + 
${content}
+
` + header += ``; + } else if (note.type === 'image') { content = ``; } @@ -90,13 +77,18 @@ function getContent(note) { content = ``; } } + else if (note.type === 'book') { + isEmpty = true; + } else { content = '

This note type cannot be displayed.

'; } - var child = getChildrenList(note); - content += child === '' ? '' : `
${child}`; - return content; + return { + header, + content, + isEmpty + }; } module.exports = { diff --git a/src/share/routes.js b/src/share/routes.js index ee0a4ce9c..985e32737 100644 --- a/src/share/routes.js +++ b/src/share/routes.js @@ -29,13 +29,15 @@ function register(router) { const note = shaca.aliasToNote[shareId] || shaca.notes[shareId]; if (note) { - const content = contentRenderer.getContent(note); + const {header, content, isEmpty} = contentRenderer.getContent(note); const subRoot = getSharedSubTreeRoot(note); res.render("share/page", { note, + header, content, + isEmpty, subRoot }); } @@ -78,7 +80,7 @@ function register(router) { res.send(note.getContent()); }); - + router.get('/share/api/notes/:noteId/view', (req, res, next) => { const {noteId} = req.params; const note = shaca.getNote(noteId); diff --git a/src/views/share/page.ejs b/src/views/share/page.ejs index afdf8e243..87e869bb8 100644 --- a/src/views/share/page.ejs +++ b/src/views/share/page.ejs @@ -4,49 +4,73 @@ <% if (!note.hasLabel("shareOmitDefaultCss")) { %> - - + + <% } %> <% if (note.type === 'text' || note.type === 'book') { %> - + <% } %> <% for (const cssRelation of note.getRelations("shareCss")) { %> - + <% } %> + <%- header %> <%= note.title %> -
-
-
- <% if (note.parents[0].noteId !== 'share' && note.parents.length != 0) { %> -
- + menuButton.addEventListener('click', () => layout.classList.toggle('navMenu')); + }()); + diff --git a/src/views/share/tree_item.ejs b/src/views/share/tree_item.ejs index 011a25ed3..12dc9f11a 100644 --- a/src/views/share/tree_item.ejs +++ b/src/views/share/tree_item.ejs @@ -2,7 +2,7 @@ <% if (activeNote.noteId === note.noteId) { %> <%= note.title %> <% } else { %> - <%= note.title %> + <%= note.title %> <% } %>