Skip to content

Commit

Permalink
refactored with add more button
Browse files Browse the repository at this point in the history
  • Loading branch information
@MarcoColiaAtFiftyDeg
MarcoColiaAtFiftyDeg committed Jun 5, 2023
1 parent 8fbc4ed commit 4aee4ce
Show file tree
Hide file tree
Showing 6 changed files with 130 additions and 77 deletions.
2 changes: 1 addition & 1 deletion js/dist/forum.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion js/dist/forum.js.map
View file

Large diffs are not rendered by default.

133 changes: 74 additions & 59 deletions js/src/forum/components/GlossaryPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,84 +3,99 @@ import Page from 'flarum/components/Page';
import IndexPage from 'flarum/components/IndexPage';
import listItems from 'flarum/common/helpers/listItems';

/* global m */
/* global $ */
/* global m */

export default class GlossaryPage extends Page {
constructor() {
super();
this.displayCount = 10;
}

oncreate(vnode) {
super.oncreate(vnode);
app.setTitle(app.translator.trans('flarum-ext-keywords.forum.pagetitle'));
app.setTitleCount(0);
}

loadMore() {
this.displayCount += 10;
}

view() {
const mappings = JSON.parse(app.forum.attribute('AdDef'));
console.log(mappings);

// Funzione ricerca live
$(document).ready(function () {
$('#filter').keyup(function () {
// Ricerca dal campo di testo
var filter = $(this).val(),
count = 0;

// Lopp nella lista ordinata ol e li
$('ol li').each(function () {
// Nascondi i risultati che non servono più
if ($(this).text().search(new RegExp(filter, 'i')) < 0) {
$(this).fadeOut();
window.addEventListener('DOMContentLoaded', () => {
const filterInput = document.getElementById('filter');
filterInput.addEventListener('keyup', () => {
const filter = filterInput.value;
let count = 0;

// Alrimenti mostra tutto il contenuto della pagina
document.querySelectorAll('.defContainer').forEach((def) => {
if (def.textContent.search(new RegExp(filter, 'i')) < 0) {
def.style.display = 'none';
} else {
$(this).show();
def.style.display = 'block';
count++;
}
});
});
});

return m('.IndexPage', [
IndexPage.prototype.hero(),
m(
'.container',
m('.sideNavContainer', [
m('nav.IndexPage-nav.sideNav', m('ul', listItems(IndexPage.prototype.sidebarItems().toArray()))),
m('.IndexPage-results.sideNavOffset',
m('h1', { className: 'glostitle' }, app.translator.trans('flarum-ext-keywords.forum.pagetitle')),
m('div', { className: 'rowgl' }, [
m(
'div',
{ className: 'columngl' },
m('div', { className: 'leftdiv' },
m('h3', { className: 'tagline' }, app.translator.trans('flarum-ext-keywords.forum.tagline')))
),
m('div',
{ className: 'columngl' },
m(
'div',
{ className: 'rightdiv' },
m('form', { className: 'searchform cf' }, [
m('input', {
id: 'filter',
type: 'text',
placeholder: app.translator.trans('flarum-ext-keywords.forum.searchtext'),
}),
])
)
),
]),
m('div',
{ className: 'containDef' },
m(
'ol',
{ id: 'myUL', className: 'rectangle-list' },
Object.keys(mappings)
return (
<div className="IndexPage">
{IndexPage.prototype.hero()}
<div className="container">
<div className="sideNavContainer">
<nav className="IndexPage-nav sideNav">
<ul>{listItems(IndexPage.prototype.sidebarItems().toArray())}</ul>
</nav>
<div className="IndexPage-results sideNavOffset">
<h1 className="glostitle">{app.translator.trans('flarum-ext-keywords.forum.pagetitle')}</h1>
<div className="rowgl">
<div className="columngl">
<div className="leftdiv">
<h3 className="tagline">{app.translator.trans('flarum-ext-keywords.forum.tagline')}</h3>
</div>
</div>
<div className="columngl">
<div className="rightdiv">
<form className="searchform cf">
<input
id="filter"
type="text"
placeholder={app.translator.trans('flarum-ext-keywords.forum.searchtext')}
/>
</form>
</div>
</div>
</div>
<div className="containDef">
{Object.keys(mappings)
.sort()
.map((key) => m('li', { className: 'lista' }, key + ' - ' + mappings[key]))
)
)
),
])
),
]);
.slice(0, this.displayCount)
.map((key) => (
<div className="defContainer">
<div className="defTitle">
<strong>{app.translator.trans('flarum-ext-keywords.forum.term')}</strong>: {key}
</div>
<div className="defDesc">
<strong>{app.translator.trans('flarum-ext-keywords.forum.definition')}</strong>: {mappings[key]}
</div>
</div>
))}
</div>
<div className="loadMoreContainer">
{Object.keys(mappings).length > this.displayCount && (
<button onclick={() => this.loadMore()} className="Button loadMoreDefButton">
{app.translator.trans('flarum-ext-keywords.forum.loadMore')}
</button>
)}
</div>
</div>
</div>
</div>
</div>
);
}
}
33 changes: 17 additions & 16 deletions js/src/forum/replaceKeywords.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,25 @@ import app from 'flarum/app';
export default function () {
const post = this.attrs.post;

// Read the form input as JSON
const mappings = JSON.parse(app.forum.attribute('AdDef'));
if (post) {
const mappings = JSON.parse(app.forum.attribute('AdDef'));

if (Object.keys(mappings).length === 0) {
return;
}
if (Object.keys(mappings).length === 0) {
return;
}

const parseOnce = app.forum.attribute('ParseOnce') === true;
const regexFlags = parseOnce ? 'i' : 'gi';
const regex = new RegExp('\\b(' + Object.keys(mappings).join('|') + ')\\b(?![^<]*>|[^<>]*</[^p])', regexFlags);
const parseOnce = app.forum.attribute('ParseOnce') === true;
const regexFlags = parseOnce ? 'i' : 'gi';
const regex = new RegExp('\\b(' + Object.keys(mappings).join('|') + ')\\b(?![^<]*>|[^<>]*</[^p])', regexFlags);

this.attrs.post.data.attributes.contentHtml = post.contentHtml().replace(regex, (match) => {
const tooltip = mappings[match.toLowerCase()];
this.attrs.post.data.attributes.contentHtml = post.contentHtml().replace(regex, (match) => {
const tooltip = mappings[match.toLowerCase()];

if (tooltip) {
return `<span class="definition" data-tooltip="${tooltip}">${match}</span>`;
} else {
return match;
}
});
if (tooltip) {
return `<span class="definition" data-tooltip="${tooltip}">${match}</span>`;
} else {
return match;
}
});
}
}
34 changes: 34 additions & 0 deletions resources/less/forum.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -340,3 +340,37 @@ ol ol {
width: 100%!important;
}
}

.containDef {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 1rem;
}

.defContainer {
border-top: 2px solid #ff8100 ;
padding: 1rem;
border-radius: 5px;
color: @primary-color;
flex: 0 0 250px;
transition: transform 0.3s;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.defContainer:hover {
transform: scale(1.1); /* Enlarge the container on hover */
}

.loadMoreContainer {
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
}

.loadMoreDefButton {

}
3 changes: 3 additions & 0 deletions resources/locale/en.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ flarum-ext-keywords:
pagetitle: Glossary Page
tagline: Do you want to know more about the terms used on this site? See the Glossary to find out more
searchtext: Type to search through glossary...
term: Term
definition: Definition
loadMore: Load More
admin:
word: Word
removedef: Delete definition
Expand Down

0 comments on commit 4aee4ce

Please sign in to comment.