mirror of
https://github.com/flynx/pWiki.git
synced 2025-10-29 10:00:08 +00:00
cleanup + refactoring....
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
883e6994c3
commit
0525efc018
@ -768,16 +768,18 @@ var Outline = {
|
||||
|
||||
|
||||
get header(){
|
||||
return this.dom.querySelector('.header') },
|
||||
return this.dom?.querySelector('.header') },
|
||||
get outline(){
|
||||
return this.dom.querySelector('.outline') },
|
||||
return this.dom?.querySelector('.outline') },
|
||||
get toolbar(){
|
||||
return this.dom.querySelector('.toolbar') },
|
||||
return this.dom?.querySelector('.toolbar') },
|
||||
|
||||
get code(){
|
||||
return this.dom.querySelector('.code')?.value },
|
||||
return this.dom?.querySelector('.code')?.value },
|
||||
set code(value){
|
||||
var c = this.dom.querySelector('.code')
|
||||
if(value == null){
|
||||
return }
|
||||
var c = this.dom?.querySelector('.code')
|
||||
if(c){
|
||||
c.value = value } },
|
||||
|
||||
@ -2138,59 +2140,21 @@ var Outline = {
|
||||
//---------------------------------------------------------------------
|
||||
// Custom element...
|
||||
|
||||
|
||||
window.customElements.define('outline-editor',
|
||||
window.OutlineEditor =
|
||||
Object.assign(
|
||||
function(){
|
||||
var obj = Reflect.construct(HTMLElement, [...arguments], OutlineEditor)
|
||||
|
||||
obj.editor = {
|
||||
__proto__: Outline,
|
||||
|
||||
get code(){
|
||||
return obj.hasAttribute('value') ?
|
||||
obj.getAttribute('value')
|
||||
: (obj.children.length == 1
|
||||
&& obj.children[0].nodeName == 'TEXTAREA') ?
|
||||
obj.children[0].value
|
||||
: obj.innerHTML },
|
||||
set code(value){
|
||||
// XXX this can break in conjunction with .attributeChangedCallback(..)
|
||||
if(obj.hasAttribute('value')){
|
||||
obj.setAttribute('value', value)
|
||||
} else if(obj.children.length == 1
|
||||
&& obj.children[0].nodeName == 'TEXTAREA'){
|
||||
obj.children[0].value = value
|
||||
} else {
|
||||
obj.innerHTML = value } },
|
||||
}
|
||||
|
||||
return obj },
|
||||
{
|
||||
// constructor stuff...
|
||||
observedAttributes: [
|
||||
'value',
|
||||
],
|
||||
|
||||
// instance stuff...
|
||||
prototype: {
|
||||
__proto__: HTMLElement.prototype,
|
||||
|
||||
get value(){
|
||||
return this.getAttribute('value') },
|
||||
set value(value){
|
||||
this.setAttribute('value', value) },
|
||||
|
||||
connectedCallback: function(){
|
||||
var that = this
|
||||
var shadow = this.attachShadow({mode: 'open'})
|
||||
var shadow = obj.attachShadow({mode: 'open'})
|
||||
|
||||
var style = document.createElement('link');
|
||||
style.setAttribute('rel', 'stylesheet');
|
||||
style.setAttribute('href', 'editor.css');
|
||||
|
||||
// XXX it is not rational to have this...
|
||||
var editor = document.createElement('div')
|
||||
var editor = obj.dom = document.createElement('div')
|
||||
editor.classList.add('editor')
|
||||
|
||||
var header = document.createElement('div')
|
||||
@ -2203,27 +2167,85 @@ window.OutlineEditor =
|
||||
//var toolbar = document.createElement('div')
|
||||
//toolbar.classList.add('toolbar')
|
||||
|
||||
// load the data...
|
||||
setTimeout(function(){
|
||||
that.editor.setup(editor) }, 0)
|
||||
|
||||
editor.append(
|
||||
style,
|
||||
header,
|
||||
outline)
|
||||
shadow.append(editor) },
|
||||
disconnectedCallback: function(){
|
||||
},
|
||||
adoptedCallback: function(){
|
||||
},
|
||||
attributeChangedCallback: function(name, oldvalue, newvalue){
|
||||
shadow.append(editor)
|
||||
|
||||
obj.setup(editor)
|
||||
|
||||
return obj },
|
||||
// constructor stuff...
|
||||
{
|
||||
observedAttributes: [
|
||||
'value',
|
||||
],
|
||||
|
||||
prototype: Object.assign(
|
||||
{
|
||||
__proto__: HTMLElement.prototype,
|
||||
|
||||
// XXX HACK these are copies from Outline, use
|
||||
// object.mixin(...) instead...
|
||||
get header(){
|
||||
return this.dom?.querySelector('.header') },
|
||||
set header(val){},
|
||||
get outline(){
|
||||
return this.dom?.querySelector('.outline') },
|
||||
set outline(val){},
|
||||
get toolbar(){
|
||||
return this.dom?.querySelector('.toolbar') },
|
||||
set toolbar(val){},
|
||||
|
||||
// XXX these are generic...
|
||||
encode: function(text){
|
||||
var span = document.createElement('span')
|
||||
span.innerText = text
|
||||
return span.innerHTML },
|
||||
decode: function(text){
|
||||
var span = document.createElement('span')
|
||||
span.innerHTML = text
|
||||
return span.innerText },
|
||||
|
||||
get code(){
|
||||
return this.hasAttribute('value') ?
|
||||
this.getAttribute('value')
|
||||
: this.decode(this.innerHTML) },
|
||||
set code(value){
|
||||
if(value == null){
|
||||
return }
|
||||
// XXX this can break in conjunction with .attributeChangedCallback(..)
|
||||
if(this.hasAttribute('value')){
|
||||
this.setAttribute('value', value)
|
||||
} else {
|
||||
this.innerHTML = this.encode(value) } },
|
||||
|
||||
// XXX do we need this???
|
||||
// ...rename .code -> .value ???
|
||||
get value(){
|
||||
return this.code },
|
||||
set value(value){
|
||||
this.code = value },
|
||||
|
||||
connectedCallback: function(){
|
||||
var that = this
|
||||
// load the data...
|
||||
setTimeout(function(){
|
||||
that.load(that.code) }, 0) },
|
||||
|
||||
attributeChangedCallback(name, before, after){
|
||||
if(name == 'value'){
|
||||
console.log('---', newvalue)
|
||||
//oldvalue != newvalue
|
||||
// && this.editor.load(newvalue)
|
||||
if(before != after){
|
||||
// XXX
|
||||
console.log('---', before, '->', after)
|
||||
}
|
||||
return }
|
||||
},
|
||||
|
||||
},
|
||||
// XXX this will fail due to all the getters/setters -- use object.mixin(..)...
|
||||
Outline),
|
||||
}))
|
||||
|
||||
|
||||
|
||||
@ -56,6 +56,16 @@ var setup = function(){
|
||||
- side margins are a bit too large (account for toolbat to the right)
|
||||
-
|
||||
- ## ToDo:
|
||||
- editor as a custom element / web component
|
||||
- DONE data interface:
|
||||
collapsed:: true
|
||||
- the "natural" way to pass data is to use the same mechanism as `<textarea>` the problem is that we can't extend `HTMLTextAreaElement` as it can not have shadow dom (reject?)
|
||||
- adding an explicit textarea element is an odd requirement (reject?)
|
||||
- seems that the least bad way to go is to use the `value` attribute
|
||||
- DONE API: directly mixin Outline?
|
||||
- events
|
||||
- test nesting...
|
||||
-
|
||||
- selection / multiple node selection (via shift+motion)
|
||||
- copy/paste nodes/trees
|
||||
- numbered lists: add counters to a depth of 6-7...
|
||||
@ -80,7 +90,6 @@ var setup = function(){
|
||||
- FF: figure out a way to draw expand/collapse bullets without the use of CSS' `:has(..)`
|
||||
- table inline editing a-la code editing -- click cell and edit directly...
|
||||
- a way to make a block monospace (???)
|
||||
- editor as a custom element...
|
||||
- Nerd fonts (option???)
|
||||
- smooth scrolling
|
||||
- _...this is more complicated than adding `behavior: "smooth"` to `.scrollIntoView(..)` as scrolling animation will get interrupted by next user input..._
|
||||
@ -361,6 +370,9 @@ var setup = function(){
|
||||
<button onclick="editor.dom.classList.toggle('show-click-zones')">show/hide click zones</button>
|
||||
<button onclick="editor.dom.classList.toggle('block-offsets')">show/hide block offsets</button>
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
<h1>Outline editor as web component</h1>
|
||||
@ -388,6 +400,7 @@ var setup = function(){
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!-- vim:set ts=4 sw=4 : -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user