reworked loading, history and dom filters (not final)...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2022-08-10 11:42:31 +03:00
parent 96b2a23421
commit e0f9b7eaa2
4 changed files with 86 additions and 59 deletions

View File

@ -36,7 +36,8 @@ var pwiki =
module.pwiki = module.pwiki =
// XXX // XXX
//page.DOMPage('/', '/', store) //page.DOMPage('/', '/', store)
page.Page('/', '/', store) //page.Page('/', '/', store)
page.pWikiPageElement('/', '/', store)
pwiki.store.update('@local', { pwiki.store.update('@local', {

View File

@ -72,11 +72,11 @@ function*(root, skip_empty=true){
// a // a
// [wikiwords=no] // [wikiwords=no]
// //
var wikiword = var wikiWordText =
module.wikiword = module.wikiWordText =
function(root){ function(elem){
var tmp = document.createElement('div') var tmp = document.createElement('div')
iterText(pwiki.dom) iterText(elem)
.forEach(function(text){ .forEach(function(text){
// skip stuff... // skip stuff...
if(text.parentNode.nodeName == 'a' if(text.parentNode.nodeName == 'a'

View File

@ -54,12 +54,18 @@ module.__HANDLE_NAVIGATE =
var BasePage = var BasePage =
module.BasePage = module.BasePage =
object.Constructor('BasePage', { object.Constructor('BasePage', {
// NOTE: this can be inherited...
//store: undefined,
// root page used to clone new instances via the .clone(..) method... // root page used to clone new instances via the .clone(..) method...
//root: undefined, //root: undefined,
// NOTE: this can be inherited...
//store: undefined,
//__store: undefined,
get store(){
return this.__store
?? (this.root ?? {}).__store },
set store(value){
this.__store = value },
// Path variables... // Path variables...
// //
// XXX PATH_VARS should these be here??? // XXX PATH_VARS should these be here???
@ -470,7 +476,11 @@ object.Constructor('BasePage', {
update: function(...data){ update: function(...data){
return Object.assign(this, ...data) }, return Object.assign(this, ...data) },
// XXX should this take an options/dict argument????
__init__: function(path, referrer, store){ __init__: function(path, referrer, store){
if(referrer && typeof(referrer) != 'string'){
store = referrer
referrer = undefined }
// NOTE: this will allow inheriting .store from the prototype // NOTE: this will allow inheriting .store from the prototype
if(store){ if(store){
this.store = store } this.store = store }
@ -551,6 +561,8 @@ object.Constructor('Page', BasePage, {
// XXX one way to do this in a stable manner is to wrap the source // XXX one way to do this in a stable manner is to wrap the source
// in something like <span wikiwords=yes> .. </span> and only // in something like <span wikiwords=yes> .. </span> and only
// process those removing the wrapper in dom... // process those removing the wrapper in dom...
// ...not sure how to handle -wikiword filter calls -- now
// this is entirely handled by the parser without calling this...
wikiword: function(){}, wikiword: function(){},
'quote-wikiword': function(){}, 'quote-wikiword': function(){},
@ -1095,23 +1107,61 @@ object.Constructor('Page', BasePage, {
//--------------------------------------------------------------------- //---------------------------------------------------------------------
// XXX do we actually need this??? var wikiword = require('./dom/wikiword')
var DOMPage =
module.DOMPage = var pWikiPageElement =
object.Constructor('DOMPage', Page, { module.pWikiPageElement =
object.Constructor('pWikiPageElement', Page, {
__page_constructor__: Page,
dom: undefined, dom: undefined,
plugins: { domFilters: {
// XXX // XXX see Page.filters.wikiword for notes...
wikiword: undefined, wikiword: wikiword.wikiWordText,
}, },
get title(){
return this.dom.getAttribute('title')
|| (this.dom.querySelector('h1') || {}).innerText
|| this.path },
// XXX this is not persistent, is this what we want???
set title(value){
this.dom.setAttribute('title', value) },
// events... // events...
// //
// XXX might be a good idea to move this up to Page and trigger when __pWikiLoadedDOMEvent: new Event('pwikiloaded'),
// done updating... onLoad: types.event.Event('onLoad', function(){
onLoad: types.event.Event('onLoad'), this.dom.dispatchEvent(this.__pWikiLoadedDOMEvent) }),
refresh: async function(){
var dom = this.dom
dom.innerHTML = await this.text
for(var filter of Object.values(this.domFilters)){
filter
&& filter.call(this, dom) }
this.onLoad()
return this },
// NOTE: cloning this will return .__page_constructor__ and not
// .constructor instances...
clone: function(){
// NOTE: we only get full clones here specifically to copy all
// the relevant data...
var page = object.parentCall(pWikiPageElement.prototype.clone, this, ...arguments)
// mutate the constructor...
this.__page_constructor__
&& (page.__proto__ = this.__page_constructor__.prototype)
return page },
__init__: function(dom, ...args){
if(dom instanceof Element){
this.dom = dom
} else {
args.unshift(dom) }
return object.parentCall(pWikiPageElement.prototype.__init__, this, ...args) },
}) })

View File

@ -88,58 +88,34 @@ document.pwikiloaded = new Event('pwikiloaded')
// start loading pWiki... // start loading pWiki...
require(['./browser', './pwiki/dom/wikiword'], function(pwiki, wikiword){ require(['./browser'], function(pwiki){
pwiki = window.pwiki = pwiki.pwiki pwiki = window.pwiki = pwiki.pwiki
wikiword = window.wikiword = wikiword.wikiword
// XXX for some reason this sets to undefined...
var iterText = window.iterText = wikiword.iterText
// XXX make a pWikiDom page to manage this...
pwiki.dom = document.querySelector('#pWiki') pwiki.dom = document.querySelector('#pWiki')
// handle location.hash (both directions) // handle location.hash/history (both directions)
var _debounceHashChange = false
pwiki.onNavigate(async function(){
// update location.hash without retriggering...
_debounceHashChange = true
location.hash = this.path
setTimeout(function(){
_debounceHashChange = false }, 0)
// render...
pwiki.dom.innerHTML = await this.text
// pwiki page loaded event...
// XXX do we need to use a MutationObserver here to trigger this
// after the above is done loading???
// (see: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
pwiki.dom.dispatchEvent(document.pwikiloaded)
// wikiwords
// XXX this should be controllable from the page...
wikiword(pwiki.dom)
})
window.addEventListener('hashchange', function(evt){ window.addEventListener('hashchange', function(evt){
evt.preventDefault() evt.preventDefault()
if(_debounceHashChange){
return }
var [path, hash] = location.hash.slice(1).split('#') var [path, hash] = location.hash.slice(1).split('#')
path = path.trim() == '' ? path = path.trim() == '' ?
'/' '/'
: path : path
pwiki.path = path pwiki.path = path })
pwiki
.onNavigate(function(){
// NOTE: we do not need to directly update location.hash here as
// that will push an extra history item...
history.replaceState({path: pwiki.path}, pwiki.title, '#'+pwiki.path)
// NOTE: we are intentionally not awaiting for this -- this
// separates the navigate and load events...
pwiki.refresh() })
.onLoad(function(evt){
// handle title...
document.querySelector('title').innerHTML = this.title
// XXX when loaded us <elem>.scrollIntoView() to get to hash... // XXX when loaded us <elem>.scrollIntoView() to get to hash...
// ...would also be nice to keep hash within location.hash... // ...would also be nice to keep hash within location.hash...
}) })
// XXX use a pwiki.onLoad event...
pwiki.dom.addEventListener('pwikiloaded', function(evt){
console.log('pWiki loaded')
// XXX scroll
})
// show current page... // show current page...
pwiki.path = location.hash.slice(1) pwiki.path = location.hash.slice(1)