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 =
// XXX
//page.DOMPage('/', '/', store)
page.Page('/', '/', store)
//page.Page('/', '/', store)
page.pWikiPageElement('/', '/', store)
pwiki.store.update('@local', {

View File

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

View File

@ -54,12 +54,18 @@ module.__HANDLE_NAVIGATE =
var BasePage =
module.BasePage =
object.Constructor('BasePage', {
// NOTE: this can be inherited...
//store: undefined,
// root page used to clone new instances via the .clone(..) method...
//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...
//
// XXX PATH_VARS should these be here???
@ -470,7 +476,11 @@ object.Constructor('BasePage', {
update: function(...data){
return Object.assign(this, ...data) },
// XXX should this take an options/dict argument????
__init__: function(path, referrer, store){
if(referrer && typeof(referrer) != 'string'){
store = referrer
referrer = undefined }
// NOTE: this will allow inheriting .store from the prototype
if(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
// in something like <span wikiwords=yes> .. </span> and only
// 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(){},
'quote-wikiword': function(){},
@ -1095,23 +1107,61 @@ object.Constructor('Page', BasePage, {
//---------------------------------------------------------------------
// XXX do we actually need this???
var DOMPage =
module.DOMPage =
object.Constructor('DOMPage', Page, {
var wikiword = require('./dom/wikiword')
var pWikiPageElement =
module.pWikiPageElement =
object.Constructor('pWikiPageElement', Page, {
__page_constructor__: Page,
dom: undefined,
plugins: {
// XXX
wikiword: undefined,
domFilters: {
// XXX see Page.filters.wikiword for notes...
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...
//
// XXX might be a good idea to move this up to Page and trigger when
// done updating...
onLoad: types.event.Event('onLoad'),
__pWikiLoadedDOMEvent: new Event('pwikiloaded'),
onLoad: types.event.Event('onLoad', function(){
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...
require(['./browser', './pwiki/dom/wikiword'], function(pwiki, wikiword){
require(['./browser'], function(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')
// handle location.hash (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)
})
// handle location.hash/history (both directions)
window.addEventListener('hashchange', function(evt){
evt.preventDefault()
if(_debounceHashChange){
return }
var [path, hash] = location.hash.slice(1).split('#')
path = path.trim() == '' ?
'/'
: 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...
// ...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
})
// XXX when loaded us <elem>.scrollIntoView() to get to hash...
// ...would also be nice to keep hash within location.hash...
})
// show current page...
pwiki.path = location.hash.slice(1)