index.html

<script src="//apps.asenax.com/documenter/documenter.js"></script>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<header body-class="show-menu theme-light documenter-admin">
  <a href="../" icon-button documenter-icon-arrow-left></a>
  <div title>📄 Documenter</div>
  <div class="space"></div>
  <input placeholder="Search...">
  <button icon-button documenter-icon-fullscreen onclick="document.fullscreenElement == null ? document.documentElement.requestFullscreen() : document.exitFullscreen()"></button>

  <button icon-button documenter-icon-contrast onclick="document.body.classList.toggle('theme-dark');document.body.classList.toggle('theme-light')"></button>
  <input type="checkbox" switch="🦉" onchange="document.body.classList.remove('theme-dark');document.body.classList.add('theme-light');if(this.checked){ document.body.classList.remove('theme-light');document.body.classList.add('theme-dark'); }" style="font-size:1.42em;">
  <a hover href="#">Api</a>
  <a button href="#">App</a>
  <a href="#logout" icon-button="" documenter-icon-power style="color:#F44" title="Oturumu Kapat"></a>
  <div panel="bottom-right">
    <button icon-button documenter-icon-more></button>
    <panel style="width:200px">
      Merhaba Burası Bir Panel
      <input type="checkbox" switch="🦉" onchange="document.body.classList.remove('theme-dark');document.body.classList.add('theme-light');if(this.checked){ document.body.classList.remove('theme-light');document.body.classList.add('theme-dark'); }">
    </panel>
  </div>
</header>


# 💻 Usage

```html
&lt;script src="//hasandelibas.github.io/documenter/documenter.js">&lt;/script>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<header body-class="show-menu theme-light">
  <a href="../" icon-button documenter-icon-arrow-left></a>
  <div title>📄 Documenter</div>
  <div class="space"></div>
  <input placeholder="Search...">
  <a href="#">Api</a>
  <a href="#">App</a>
  <button icon-button documenter-icon-more></button>
</header>
```

```html
&lt;!--               disable-style              -->
&lt;script src="//apps.asenax.com/documenter/documenter.js?disable-style=true">&lt;/script>
&lt;!--               disable-html               -->
&lt;script src="//apps.asenax.com/documenter/documenter.js?disable-html=true">&lt;/script>
```


# 📄 Documenter
A light document application

+ Mobile Support
+ One File
+ Header Bar
+ Code View with hljs
* **development** : https://apps.asenax.com/documenter/
* **relase** : https://hasandelibas.github.io/documenter/

# ✅ Task
+ #documenter-tab-0 
+ documenter.message multiple
+ [back-button] inner html svg
+ .tab-system  
+ .enable-error-messages
+ .hide-header
+ .show-header
+ .hide-opener
+ .show-opener
+ Mobile container padding fix
+ Pre Code fix
+ left Menu click fix
+ Make pre code 14px
+ light theme input problem

# 🔨 Options
We can change options in header tag with **body-class** attribute
## hide-menu
* hide-menu
* show-menu
```html
<header body-class="hide-menu">
```

## hide-header
* hide-header
* show-header
```html
<header body-class="hide-header">
```

## bottom-header
* bottom-header
* top-header
```html
<header body-class="bottom-header">
```
<button onclick="document.body.classList.remove('top-header');document.body.classList.add('bottom-header');">bottom-header</button>
<button onclick="document.body.classList.remove('bottom-header');document.body.classList.add('top-header');">top-header</button>

## theme-dark
* theme-light
* theme-dark
<button onclick="document.body.classList.remove('theme-light');document.body.classList.add('theme-dark');">theme-dark</button>
<button onclick="document.body.classList.remove('theme-dark');document.body.classList.add('theme-light');">theme-light</button>
```html
<header body-class="theme-dark">
```


## theme-round
* theme-round <span style="opacity:.4">make inputs and buttos round</span>
<button onclick="document.body.classList.toggle('theme-round');">theme-round</button>
```html
<header body-class="theme-dark">
```

## tab-system
* link-system    (default)
* tab-system
```html
<header body-class="tab-system">
```
<button onclick="document.body.classList.add('tab-system');document.querySelector('menu a').click()">.tab-system</button>


## disable-error
* enable-error   (default)
* disable-error
```html
<header body-class="disable-error">
```
<button onclick="no_name_function()">Example</button>


## hide-opener
* show-opener  (default)
* hide-opener
```html
<header body-class="hide-opener">
```

## documenter-admin
```html
<header body-class="documenter-admin">
```


# HTML Elements

## icons
Example:
```html
<span documenter-icon-arrow-left></span>
```

https://fonts.google.com/icons

<div id="documenter-icon"></div>
<script>
  documenter.on("ready",function(){
    let data = Object.keys( documenter.icons ).map((key)=> ({text: documenter.icons[key].split("<svg").join('<svg fill="currentColor" style="width:1.5em;height:1.5em" '), code:'documenter-icon-'+key }))
    document.querySelector("#documenter-icon").appendChild( documenter.table(data) )
  })  
</script>

## dropdown
<dropdown name="flag" value="tr" placeholder="Dil Seçiniz" style="min-width:200px;" tabindex="1">
  <div value="tr"> <img src="https://flagcdn.com/w80/tr.png" style="aspect-ratio:3/2"> Turkish </div>
  <div value="en"> <img src="https://flagcdn.com/w80/gb.png" style="aspect-ratio:3/2"> English </div>
  <div value="de"> <img src="https://flagcdn.com/w80/de.png" style="aspect-ratio:3/2"> German </div>
  <div value="fr"> <img src="https://flagcdn.com/w80/fr.png" style="aspect-ratio:3/2"> French </div>
  <div value="it"> <img src="https://flagcdn.com/w80/it.png" style="aspect-ratio:3/2"> Italian </div>
  <div value="es"> <img src="https://flagcdn.com/w80/es.png" style="aspect-ratio:3/2"> Spanish </div>
  <div value="pt"> <img src="https://flagcdn.com/w80/pt.png" style="aspect-ratio:3/2"> Portuguese </div>
  <div value="zh"> <img src="https://flagcdn.com/w80/cn.png" style="aspect-ratio:3/2"> Mandarin Chinese </div>
  <div value="ja"> <img src="https://flagcdn.com/w80/jp.png" style="aspect-ratio:3/2"> Japanese </div>
  <div value="ru"> <img src="https://flagcdn.com/w80/ru.png" style="aspect-ratio:3/2"> Russian </div>
  <div value="ar"> <img src="https://flagcdn.com/w80/ae.png" style="aspect-ratio:3/2"> Arabic </div>
</dropdown>

```
<dropdown name="flag" value="tr" placeholder="Dil Seçiniz" style="min-width:200px;">
  <div value="tr"> <img src="https://flagcdn.com/w80/tr.png" style="aspect-ratio:3/2"> Turkish </div>
  <div value="en"> <img src="https://flagcdn.com/w80/gb.png" style="aspect-ratio:3/2"> English </div>
  <div value="de"> <img src="https://flagcdn.com/w80/de.png" style="aspect-ratio:3/2"> German </div>
  <div value="fr"> <img src="https://flagcdn.com/w80/fr.png" style="aspect-ratio:3/2"> French </div>
  <div value="it"> <img src="https://flagcdn.com/w80/it.png" style="aspect-ratio:3/2"> Italian </div>
  <div value="es"> <img src="https://flagcdn.com/w80/es.png" style="aspect-ratio:3/2"> Spanish </div>
  <div value="pt"> <img src="https://flagcdn.com/w80/pt.png" style="aspect-ratio:3/2"> Portuguese </div>
  <div value="zh"> <img src="https://flagcdn.com/w80/cn.png" style="aspect-ratio:3/2"> Mandarin Chinese </div>
  <div value="ja"> <img src="https://flagcdn.com/w80/jp.png" style="aspect-ratio:3/2"> Japanese </div>
  <div value="ru"> <img src="https://flagcdn.com/w80/ru.png" style="aspect-ratio:3/2"> Russian </div>
  <div value="ar"> <img src="https://flagcdn.com/w80/ae.png" style="aspect-ratio:3/2"> Arabic </div>
</dropdown>
```


## dropdown multiple
<dropdown multiple name="flag" value="tr,en" placeholder="Dil Seçiniz" style="min-width:200px;" tabindex="1">
  <div value="tr"> <img src="https://flagcdn.com/w80/tr.png" style="aspect-ratio:3/2"> Turkish </div>
  <div value="en"> <img src="https://flagcdn.com/w80/gb.png" style="aspect-ratio:3/2"> English </div>
  <div value="de"> <img src="https://flagcdn.com/w80/de.png" style="aspect-ratio:3/2"> German </div>
  <div value="fr"> <img src="https://flagcdn.com/w80/fr.png" style="aspect-ratio:3/2"> French </div>
  <div value="it"> <img src="https://flagcdn.com/w80/it.png" style="aspect-ratio:3/2"> Italian </div>
  <div value="es"> <img src="https://flagcdn.com/w80/es.png" style="aspect-ratio:3/2"> Spanish </div>
  <div value="pt"> <img src="https://flagcdn.com/w80/pt.png" style="aspect-ratio:3/2"> Portuguese </div>
  <div value="zh"> <img src="https://flagcdn.com/w80/cn.png" style="aspect-ratio:3/2"> Mandarin Chinese </div>
  <div value="ja"> <img src="https://flagcdn.com/w80/jp.png" style="aspect-ratio:3/2"> Japanese </div>
  <div value="ru"> <img src="https://flagcdn.com/w80/ru.png" style="aspect-ratio:3/2"> Russian </div>
  <div value="ar"> <img src="https://flagcdn.com/w80/ae.png" style="aspect-ratio:3/2"> Arabic </div>
</dropdown>

```
<dropdown multiple name="flag" value="tr,en" placeholder="Dil Seçiniz" style="min-width:200px;">
  <div value="tr"> <img src="https://flagcdn.com/w80/tr.png" style="aspect-ratio:3/2"> Turkish </div>
  <div value="en"> <img src="https://flagcdn.com/w80/gb.png" style="aspect-ratio:3/2"> English </div>
  <div value="de"> <img src="https://flagcdn.com/w80/de.png" style="aspect-ratio:3/2"> German </div>
  <div value="fr"> <img src="https://flagcdn.com/w80/fr.png" style="aspect-ratio:3/2"> French </div>
  <div value="it"> <img src="https://flagcdn.com/w80/it.png" style="aspect-ratio:3/2"> Italian </div>
  <div value="es"> <img src="https://flagcdn.com/w80/es.png" style="aspect-ratio:3/2"> Spanish </div>
  <div value="pt"> <img src="https://flagcdn.com/w80/pt.png" style="aspect-ratio:3/2"> Portuguese </div>
  <div value="zh"> <img src="https://flagcdn.com/w80/cn.png" style="aspect-ratio:3/2"> Mandarin Chinese </div>
  <div value="ja"> <img src="https://flagcdn.com/w80/jp.png" style="aspect-ratio:3/2"> Japanese </div>
  <div value="ru"> <img src="https://flagcdn.com/w80/ru.png" style="aspect-ratio:3/2"> Russian </div>
  <div value="ar"> <img src="https://flagcdn.com/w80/ae.png" style="aspect-ratio:3/2"> Arabic </div>
</dropdown>
```

## panel
<div panel="bottom-left">
  <button icon-button="" documenter-icon-more></button>
  <panel style="width:200px;">
    This is an example panel.
    Dark Theme: <button icon-button documenter-icon-contrast onclick="document.body.classList.toggle('theme-dark');document.body.classList.toggle('theme-light')"></button>
  </panel>
</div>

<div panel="bottom-left">
  <button>bottom-left</button>
  <panel style="width:200px;">
    This is an example panel.
  </panel>
</div>
<div panel="bottom-right">
  <button>bottom-right</button>
  <panel style="width:200px;">
    This is an example panel.
  </panel>
</div>
<div panel="top-left">
  <button>top-left</button>
  <panel style="width:200px;">
    This is an example panel.
  </panel>
</div>
<div panel="top-right">
  <button>top-right</button>
  <panel style="width:200px;">
    This is an example panel.
  </panel>
</div>
```
<div panel="bottom-left">
  <button icon-button="" documenter-icon-more=""></button>
  <panel style="width:200px;">
    This is an example panel.
    Dark Theme: <button icon-button documenter-icon-contrast onclick="document.body.classList.toggle('theme-dark');document.body.classList.toggle('theme-light')"></button>
  </panel>
</div>
```

## [tooltip]

[tooltip-right] : <div button documenter-icon-more="" tooltip-right="[tooltip-right]"></div> 
```html
<div button documenter-icon-more="" tooltip-right="[tooltip-right]"></div> 
```

[tooltip-bottom] : <div button documenter-icon-more="" tooltip-bottom="[tooltip-bottom]"></div> 

```html
<div button documenter-icon-more="" tooltip-bottom="[tooltip-bottom]"></div> 
```

[tooltip-left] : <div button documenter-icon-more="" tooltip-left="[tooltip-left]"></div> 
```html
<div button documenter-icon-more="" tooltip-left="[tooltip-left]"></div> 
```

[tooltip-top] : <div button documenter-icon-more="" tooltip-top="[tooltip-top]"></div> 

```html
<div button documenter-icon-more="" tooltip-top="[tooltip-top]"></div> 
```


## [mobile-style]

```html
&lt;div mobile-style="margin-top:20px;" desktop-style="padding:4em;" hover-style="color:red;"> Example &lt;div>
```


## [desktop-style]

```html
&lt;div mobile-style="margin-top:20px;" desktop-style="padding:4em;" hover-style="color:red;"> Example &lt;div>
```


## [hover-style]

```html
&lt;div mobile-style="margin-top:20px;" desktop-style="padding:4em;" hover-style="color:red;"> Example &lt;div>
```


## .hover 

<div padding hover>.hover</div>
<div padding light>.light</div>

```
<div hover>.hover</div>
<div light>.light</div>

<div class="hover">.hover</div>
<div class="light">.light</div>
```

## input

checkbox: <input type="checkbox"> 
```html
<input type="checkbox"> 
```
switch: <input type="checkbox" switch="🦉"> 
```html
<input type="checkbox" switch="🦉">
```


# ⚙️ documenter

## .loading(number|null) 

<button onclick="documenter.loading()"> documenter.loading() </button>
<button onclick="documenter.loading(10)"> documenter.loading(10) </button>
<button onclick="documenter.loading(50)"> documenter.loading(50) </button>
<button onclick="documenter.loading(80)"> documenter.loading(80) </button>

```
documenter.loading()
documenter.loading(10)
documenter.loading(50)
```

## .success()
<button onclick="documenter.loading(100)"> documenter.loading(100) </button>
<button onclick="documenter.success()"> documenter.success() </button>

```
documenter.loading(100)
documenter.success()
```

## .load(url, config)
Like fetch 
<button onclick="documenter.load('world_map.pdf').then(e=>e.blob()).then(console.log)"> documenter.load('world_map.pdf') </button>
```
documenter.load("url").then(e=>e.text())
documenter.load("url").then(e=>e.json())
documenter.load("url").then(e=>e.blob())
documenter.load("url",{method:'GET',data:{name:'John'}}).then(e=>e.json())
```

```
documenter.load("documenter.js").then(e=>e.text()).then( console.log )
documenter.load("https://www.getmidas.com/wp-json/midas-api/v1/midas_table_data",{method:"POST"}).then(e=>e.json()).then( console.log )
documenter.load("world_map.pdf").then(e=>e.blob()).then(function(text){
  document.download(text,"file.pdf")
})
```

## .post(url, data: FormData | Object | string)
```
documenter.post("url",{name:'John'}).then(e=>e.text())
```

## .submit(HTMLFormElement)
```
documenter.submit(HTMLFormElement)
```


## .download(string|blob,filename)
```
documenter.download("Hello World","test.txt")
```

## .info(string) : HTMLDivElement

<button onclick="documenter.info('Hello World!')"> documenter.info("Hello World!") </button>
<button onclick="documenter.info('Hello!')"> documenter.info("Hello!") </button>


## .message(string) : HTMLDivElement

<button onclick="documenter.message('Hello World!')"> documenter.message("Hello World!") </button>

```
documenter.message("Hello World!")
```

## .modal(text) : HTMLDivElement

<button onclick="documenter.modal('Title &lt;br&gt; This is modal text.')">documenter.modal('Title &lt;br&gt; This is modal text.')</button>

```js
documenter.modal("Title &lt;br&gt; This is modal text."")
```




## .readText() : Promise(e:String)
Select file and read as text.
<button onclick="documenter.readText().then(text=>console.log(text))"> documenter.readText().then(text=>console.log(text)) </button>
```js
documenter.readText().then(text=>console.log(text))
```

## .readImage() : Promise(e:String)
Select file and read as text.
<img id="read-image" src="" style="max-width: 100%;">
<button onclick="documenter.readImage().then(src=>$('#read-image').src=src)"> documenter.readImage().then(src=>$('#read-image').src=src) </button>
```js
documenter.readImage().then(src=>$('#read-image').src=src)
```

## .table( object ) : HTMLTableElement
<div id="table"></div>
<script>
  documenter.on("ready",function(){
    let table = documenter.table([
      {name:"John",surname:"Doe",age:26},
      {name:"Mary",surname:"Doe",age:25}
    ])
    document.querySelector("#table").appendChild(table)
  })
</script>

<div id="table-props"></div>
<script>
  documenter.on("ready",function(){
    let table = documenter.table({name:"John",surname:"Doe",age:26})
    document.querySelector("#table-props").appendChild(table)
  })
</script>


Create table object 
```js
let table = documenter.table([
  {name:"John",surname:"Doe",age:26},
  {name:"Mary",surname:"Doe",age:25}
])
main.appendChild(table)
```

## .render(html) : HTMLDivElement
```js
documenter.render("<div>Hello World!</div>")
```


## .on(event,selector,function)

```
documenter.on("click","pre",function(e){
  console.log(this.innerText);
  console.log("Event:",e)
})
```


## .on(event,function)

```
documenter.on("ready",function(e){
  console.log("I am ready");
})
```
<script>
  documenter.on("ready",function(e){
    console.log("I am ready");
  })
</script>




## .csv.parse(data:string)
```
documenter.csv.parse(string) 
```

```
documenter.readText().then(e=>{
  main.appendChild(documenter.table( documenter.csv.parse(e)  ))  
})
```


## .select(selector|Element|Element[]) 
jQuery like selector
```js
documenter.select("td").parent("table")
documenter.select(el).attr("style","color:red")
documenter.select("tr").list()
documenter.select("table").find("th").map(e=>console.log(e))
```

## .TextInput(element,{language:""})
<div style='outline: var(--front) solid 2px;' id="TextInput">TextInput</div>

Convert element like input element with contenteditable
* single line
* no style
<script>
  documenter.on("ready",function(){
    documenter.TextInput(document.querySelector("#TextInput"))    
  })
</script>
```js
documenter.TextInput(el) // only text
```

## .TextArea(element, config={})
<div style='outline: var(--front) solid 2px;' id="TextArea">TextArea</div>

Convert element like with contenteditable
* allowedElements default is all elements
* allowedAttributes is default all
* allowedProperties is default all
* language is default ""
<script>
  documenter.on("ready",function(){
    documenter.TextArea(document.querySelector("#TextArea"),{
      allowedElements  : ["br","div","span","img","b","i","u","ul","li","ol","strike","sup","sub"] ,
      allowedAttributes: ["style","src","alt"],
      allowedProperties: ["font-weight","text-decoration","color"],
      language          : "en"
    })
  })
</script>
```js
documenter.TextArea(el, {
  allowedElements  : ["br","div","span","img","b","i","u","ul","li","ol","strike","sup","sub"],
  allowedAttributes: ["style","src","alt"],
  allowedProperties: ["font-weight","text-decoration","color"],
  language         : "en",
}) // only font-weight and color
```


## .TextEditor(textarea, config={})
<textarea style='outline: var(--color) solid 2px;' id="TextEditor"><h1>Hello World</h1><p>This is an example for&nbsp;<b>documenter.TextEditor()</b>&nbsp;function.</p></textarea>


Convert textarea element to TextEditor
<script>
  documenter.on("ready",function(){
    let textEditor = documenter.TextEditor(document.querySelector("#TextEditor"),{
      toolbar           : ["formatBlock","bold","italic","underline","strikeThrough","justifyLeft","justifyCenter","justifyRight","justifyFull","insertUnorderedList","insertOrderedList","space"],
      head              : "<style> html{font-family:system-ui;background:white;} </style>", // default ""
      allowedAttributes : ["style","src","alt"], // default all
      allowedProperties : ["text-align","font-weight","color"], // default all
      language          : "en",  // default ""
    })
    window.textEditor = textEditor

    let listen=document.createElement("button")
    listen.innerText = "Listen"
    listen.onclick = function(){
      let recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
      recognition.language = "tr"
      recognition.interimResults = true;
      let last = document.createElement("span")
      textEditor.body.appendChild(last)
      recognition.onresult = (e)=>{
        last.innerText = e.results[0][0].transcript;
      }
      recognition.start()
    }
    textEditor.toolbar.appendChild( listen )

  })
</script>

```js
let textEditor = documenter.TextEditor(document.querySelector("textarea"),{
  toolbar           : ["formatBlock","bold","italic","underline","strikeThrough","justifyLeft","justifyCenter","justifyRight","justifyFull","insertUnorderedList","insertOrderedList","space"],
  head              : "<style> html{font-family:system-ui;background:white;} </style>", // default ""
  allowedAttributes : ["style","src","alt"],                // for all make null
  allowedProperties : ["text-align","font-weight","color"], // for all make null
  language          : "en",                                 // default "en"
})
```

**Global TextEditor options**
```js
documenter.TextEditor.head              = "<style>body{}</style>"
documenter.TextEditor.toolbar           = ["formatBlock","bold","italic","underline","strikeThrough","justifyLeft","justifyCenter","justifyRight","justifyFull","insertUnorderedList","insertOrderedList","space"]
documenter.TextEditor.allowedProperties = ["font-weight","font-style"]
documenter.TextEditor.allowedAttributes = ["style","src","alt"]
documenter.TextEditor.language          = "en"
```

**Custom Toolbar Item ** with ``texteditor.toolbar``
```js
let listen=document.createElement("button")
listen.innerText = "Listen"
listen.onclick = function(){
  let recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
  recognition.language = "tr"
  recognition.interimResults = true;
  let last = document.createElement("span")
  textEditor.body.appendChild(last)
  recognition.onresult = (e)=>{
    last.innerText = e.results[0][0].transcript;
  }
  recognition.start()
}
textEditor.toolbar.appendChild( listen )
```

**Get Value**
```js
textEditor.value // set or get
```


## .lss( css_code )

```js
documenter.lss("
@mobile{
  body{
    background:#000;
    *{
      color:#222;
    }
    h2{
      color:#333;
    }
  }
}
")
```



## svg to base64image

<div flex-x gap>
  <textarea input-svg space>
    <svg hide-on-desktop="" onclick="document.querySelector('#dropmenu').classList.toggle('active') " xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"></path></svg>
  </textarea>
  <button button-svg2base64>Convert</button>
</div>
<script>
  function svg2base64(svg){
    return  "background: url(data:image/svg+xml;base64,"+window.btoa(svg) + ")";
  }

  documenter.on("ready",function(){
    $("[button-svg2base64]").onclick = function(){
      $("[base64-image] code").innerHTML = svg2base64( $("[input-svg]").value )
    }
  }) 
</script>

<div base64-image>
```css

```
</div>