# Libraries

import json, pypandoc
from urllib.request import urlopen
from urllib.parse import urlencode

# Connecting via API with the pad !!!!!!!!!!!!!!! <----------
# To enable the connection you need to have acces to the API key of the pad instance, it is usually inside the pad server in the link: /opt/etherpad/APIKEY.txt 

with open("/opt/etherpad/APIKEY.txt") as f:
    api_key = f.read().strip()

# Afterward you need to declare the API you want to access !!!!!!!!!! <--------

api_url = "https://hub.xpub.nl/soupboat/pad/api/1.2.15/"

# wrap in a convenient function (APICALL) 
def ep (api_fn, api_url, api_key, **data):
    data['apikey'] = api_key
    return json.load(urlopen(f"{api_url}{api_fn}", data=urlencode(data).encode()))

# Here you declare what's the padID of your glossary !!!!!!!!!!!!!! <---------
glossary = ep("getText", api_url, api_key, padID="example_glossary")

text = glossary["data"]["text"]


# Defining a dictionary of properties  

properties = [
	{
		'title':'action',
		'symbol':'A',
        'color': 'green'
	},
	{
		'title':'situation',
		'symbol':'S',
		'color': 'aqua'
	},
	{
		'title':'logic',
		'symbol':'L',
		'color': 'orange'
	},
]

# Writing a legend using the properties

legend = ''

i = 0

for title, symbol, color in properties:
    title = properties[i]['title']
    legend += f'''<button id="{title}" class="btn {title}-s" onclick="filterSelection('{title}')">{title}</button>\n'''
    i += 1
    

# Adding property symbols in front of each word generating a Java script code:

script = ''

i = 0 

for title, symbol, color in properties:
    title = properties[i]['title']
    symbol = properties[i]['symbol']
    script += (f"""const {title} = document.getElementsByClassName("{title}");
    for (let i = 0; i < {title}.length; i++)"""'{\n' 
               f"""{title}[i].innerHTML += "<span class='symbol {title}-s'>{symbol}</span>";""" 
    '\n}\n\n')
    i += 1

# Generating a css style using properties values:

style = ''

i = 0 

for title, symbol, color in properties:
    title = properties[i]['title']
    color = properties[i]['color']
    style += f'''.{title}-s''' + '{' + f'''color:{color};''''}'
    i += 1
    
# Writing the glossary website 
# Note that here you are using the previous variables **style**, **legend**, and **script**
   
body = f'''<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css"> 
        <title>Attempt to Glossary</title>
    </head>
        <style> {style} </style>
    <body id="glo_body">

    <div class="head">
        <h1> Glossary for a Diffractive Publishing Practice </h1>
        <a href="rss.xml">
            <p>follow what is new (rss)</p>
        </a>
    </div>
    <hr>
    <div class="description">
        <p>This glossary project is an ongoing and ever-transforming experiment that introduces a diffractive methodology inside the publishing practice. It is seen as a mutable and living publication result of collective workshops where participants are invited to think and converse around its words and annotations. During the workshop, diffraction performs a conscious interconnection of practices beyond reflection. The current state of the glossary gathers different annotations on each word instead of a closed definition for each one.</p> 
        <p>Concretly, the glossary as a publication uses questions as triggers and it aims to weave as a conversation the multiple{description}of the current practice, with other vocabularies that come from critical theory, new materialism and others. The final intention is not just to envision our future as publishers but to help to initiate conversations with others.</p>
    </div>
    <hr>
    <div class="question">
        <div id="sptContainer"></div>
    </div>
    <hr>
    <div id="legend" class="legend"> 
        <button class="btn active" onclick="filterSelection('all')">properties</button> {legend}
    </div>
    <hr>
    <div class="words">
        {words} 
    </div>
    </body>
        <script>
            {script}
        </script>
        <script src="main.js"></script>
    </html>'''

# Writing the `index.html` file 

```
website = open('index.html','w')

website.write(body)
website.close()
