Menu-plugin #1419

Closed dezhidki closed 2 years ago

In GitLab by @vivanauk on Jun 20, 2019, 12:09

Halutaan plugin, jolla saa luotua pudotusvalikkoja dokumentteihin, esim. kuten Ohj2:ssa:

kuvakaappaus

Tuota voisi lähetä lähestymään niin, että miettisi miltä näyttää YAML, jolla esim tuo Ohj2 menurakenne kuvataan.

Jättääkö niin, että itse linkit kuvataan suoraan MD:llä:

- text: [Demot](demot)

jne, jolloin tekijän pitäisi osata laittaa niihin myös tarvittaessa kuvia yms.

Ja saako tuon samaan tyyliin kuin TimTablessa että jos jossakin on vain text-attribuutti, niin riittää kirjoittaa pelkkä sisältö ilman attribuuti nimeä jotta menun esitys olisi mahdollisimman kompakti.

tuo on minusta niin helppo tehdä että se kannattaa tehdä ihan itse niin saa juuri sellaisen kun haluaa.

Esteettömyyttä varten siihen pitää saada opitio jossa ei ole tuollaisia hover juttuja, koska ne eivät toimi kunnolla lukulaitteilla.

In GitLab by @vesal on Jun 20, 2019, 12:20

Kyllä ohjeet kohttuuulisen ajantsalla pitäisi olla kun Tipi ja TimCan niiden pohjalta tekivät tuon. Tämä on niin sisällä TIMissä että en tekisi tuolle omaa konttia enkä palvelinta, vaan tekisin kuten mmcq2, qst yms suoraan TIMin reitteihin. Helpottaa tekemistä huomattavasti ja tämä ei sinällään (toistaiseksi) tarvitse edes (välttämättä paljoa) TS-puolen koodia kun voi tuottaa aika pitkälle saman koodin HTML:kksi mitä mulla on noissa nykymenuissa.

Ehtii tehdä heinäkuussa. Mutta aloito tosiaan sillä että tänne speksaa sen miltä esim tuo mun Ohj2 näyttäisi YAMLina. Siitä on helpompi lähteä miettimään mitä pitää tehdä. Mutta siihen pitää varautua että voi olla joku käyttäjäkohtainen esteettömyysasetus, jolla tuon saa toimimaan toisella tavalla (ei hovereita). Jotakin muitkin TIMin juttuja voi joutua sitten laittamaan tuon asetuksen mukaisesti.

In GitLab by @vivanauk on Jun 24, 2019, 11:20

Mutta siihen pitää varautua että voi olla joku käyttäjäkohtainen esteettömyysasetus, jolla tuon saa toimimaan toisella tavalla (ei hovereita).

Onko mitään syytä olla laittamatta oletuksena klikkauksella avaus muuten? Hover voi olla siinä päällä asetuksena, eli jos dokun laatija ei halua hoveria tai kyseessä on kosketusnäyttö niin aina voi avata painamalla.

In GitLab by @vesal on Jun 24, 2019, 11:22

En näe erityistä syytä sille. Pitäisi kokeilla ääniselaimella mikä tapa siellä toimii hyvin, koska niissä on ollut nyt ongelmia nykyisin menun kanssa.

Muuten commitoin kohta importData-pluginin ja siitä voi matkia mitä joutuu tekemään kun tekee pluginin osaksi TIMiä.

Vesa

In GitLab by @vivanauk on Jun 24, 2019, 11:33

Muita tarvittavia asetuksia varmaan ei tule kovin paljoa kun muotoiluthan tulevat markdownilla.

Menun leveys, jolloin saa tasakokoisia menupainikkeita. Ehkä myös menuitemeille (pudotusvalikosta aukevat kohdat).
Menun aukeamissuunta; oletuksena auto, mutta voi halutessaan asettaa ylös, alas, vasen tai oikea.
Pudotusvalikon merkin (esim. ohj2:ssa se kolmio) asettaminen.
Muuta, mitä?

In GitLab by @vivanauk on Jun 24, 2019, 11:36

Halutaanko tämä muuten niin, että jokainen erillinen pudotusvalikko on oma plugininsa (inline-plugineilla?), vai kattaako yksi plugin koko menupalkin (eli onko ylhäällä kuvassa yksi plugin vai kahdeksan)?

Erillisillä saisi muokattua monipuolisempia valikoita ja ehkä laitettua niitä esim. taulukkoon, mutta yhdistetty olisi helpompi ja nopeampi käyttää. Periaatteessa voi tehdä molemmat versiot tietysti.

In GitLab by @vesal on Jun 24, 2019, 11:36

Muuta, mitä?

Agilena: toteuttaa nyt olemassa oelvia käyttötapauksia ja lisää uusia kun tarve tulee eteen.

Mutta kuvakkeet menuihin voi varmaan tulla josskain vaiheessa toiveeksi (tuleeko se jo nykymäärityksillä jos laittaa siihen MD-imageja).

In GitLab by @vesal on Jun 24, 2019, 11:38

Halutaanko tämä muuten niin, että jokainen erillinen pudotusvalikko on oma plugininsa (inline-plugineilla?), vai kattaako yksi plugin koko menupalkin (eli onko ylhäällä kuvassa yksi plugin vai kahdeksan)?

Käyttäjälle helpopmpi jos koko homma kuvataan yhdessä. Haittahan siitä ei ole jos on myös mahdollisuus tehdä se inlinenä vaikkapa keskell tekstiä ja kopota sitenkin.

Mutta alunperin ajattelin että lähdetään siitä yhdestä menusta.

Erillisillä saisi muokattua monipuolisempia valikoita ja ehkä laitettua niitä esim. taulukkoon, mutta yhdistetty olisi helpompi ja nopeampi käyttää. Periaatteessa voi tehdä molemmat versiot tietysti.

Aloitetaan sillä yhdellä, mutta kannattaa pitää mielessä että se erillisten versio on mahdollista tehdä. Hienot ideat ovat hienoja, mutta onko käyttäjiä hyödyntämään niitä?

In GitLab by @vivanauk on Jun 27, 2019, 14:27

Esim. menu jossa ensin kaksi suoralinkkiä ja sitten kaksi valikkoa, ensin simppelillä muotoilulla ja sitten lisäasetuksilla (eli sama logiikka kuin timTablessa):

hoverOpen: true
width: 15em
separatorString: "|"
- [linkki 1](linkki1)
- text: [linkki 2](linkki2)
  width: 18em
- Otsikko 1
  - [linkki 3](linkki3)
  - [linkki 4](linkki4)
- text: Otsikko 2
  width: 20em
  dropDownString: **show**
  - text: [linkki 5](linkki5)
  - text: [linkki 6](linkki6)

Mikä näyttäisi suunnilleen tältä (valikoita itseään ja leveyksiä lukuunottamatta):

linkki 1 | linkki 2 | Otsikko 1 ▼ | Otsikko 2 show

In GitLab by @vesal on Jun 27, 2019, 21:21

Voikos olla syvempi menu?

In GitLab by @vesal on Jun 27, 2019, 21:22

Joo, ja siten ehkä jakavia väliviivoja voisi olla jos tulee pitkä menu. Tai oikeastaan mitä vaan otsikoita. Mutta ne varmaan tulee kun ei laita linkkiä?

In GitLab by @vesal on Jun 29, 2019, 24:09

Uudella menullahan saa sitten tuon:

https://tim.jyu.fi/teacher/users/vesal/koe/lomakkeet/tablefromurl

Valitse demokerta tehtyä alasvetona? Homma perustuu URLeihin, niin tuon varmaan saa noihin otsikoihi suoraan.

In GitLab by @vivanauk on Jul 1, 2019, 14:00

Uudella menullahan saa sitten tuon:

https://tim.jyu.fi/teacher/users/vesal/koe/lomakkeet/tablefromurl

Valitse demokerta tehtyä alasvetona? Homma perustuu URLeihin, niin tuon varmaan saa noihin otsikoihi suoraan.

Joo, tuon pystyisi tekemään vaihtoehtoisesti joko leveyssuunnassa rivinä linkkejä (menu-pluginin syntaksissa siis ei syvyyttä) tai pystysuunnassa pudotusvalikosta aukevana listana.

Voikos olla syvempi menu?

Eipä kai mikään estäkään tekemästä sitä. Halutaanko että on mahdollisuus tehdä miten syviä tahansa vai riittäisikö lisätä yksi taso lisää?

In GitLab by @vesal on Jul 1, 2019, 14:24

Tuottaakos tuo tasojem määrä ongelmia rekursiolla. Nyt esim Editorissa rupeaa olemaan ihan liikaa tavaraa samalla tasolla ja siinä tasoja tarvittaisiin selkeästi enemmän. Eli aina on se riski että tasot lopuvat. JSON/YAMLhan ei aseta mitään rajoitetta tasojen määrälle.

In GitLab by @vivanauk on Jul 1, 2019, 15:01

Tuottaakos tuo tasojem määrä ongelmia rekursiolla. Nyt esim Editorissa rupeaa olemaan ihan liikaa tavaraa samalla tasolla ja siinä tasoja tarvittaisiin selkeästi enemmän. Eli aina on se riski että tasot lopuvat. JSON/YAMLhan ei aseta mitään rajoitetta tasojen määrälle.

Kai lähinnä se, millä logiikalla syvä valikko saadaan näytettyä selkeästi (varsinkin mobiilissa) eli mihin uudet valikot aukeavat, mahtuvatko ne näytölle, miten paljon ne menevät päällekkäin ja miten niiden välillä navigoidaan mielekkäästi.

Esim. itse muistelen joissain syvissä valikoissa on ollut sitä, että kun tasoilla navigoidaan hiirellä, niin siirtyessä uudelle tasolle valikko meneekin kiinni tai lipsahtaa alemmalle tasolle herkästi. Voi siis tulla tapauksia joissa näytöstä ja valikosta riippuen johonkin valintaan ei pääse käsiksi (jos avautuvuuden logiikka ole riittävän älykästä).

In GitLab by @vesal on Jul 1, 2019, 15:26

Pitääkö tuo nyt vaan tulkita että sitten se menun käyttäjä on vastuussa jos tekee liian syvän. Toki aina hienompaa jos sitä voi tukea jo komponentin puolelta. Mutta voiko siinä muuta kuin avata aina seuraavan tason himpun sisennettynä. Ja sisennys on suuniteltu niin, että ainakin pari tasoa toimii mobiilillakin ja jos syvenee, niin joka sisennys pienenee tai joutuu rullaamaan sivuttain.

Vai toimisiko se niin, että aina lasvedosta avattu menu aukeaa samaan kohtaan ja siinä on erikseen paluupainike jolla pääsee edelliselle tasolle (ja kertoo tason otsikon ja numeron yläpalkissa). ELi menu periaatteessa ääretön, mutta käyttöliittymässä tavallaan vain yksi taso nykyisestä lisää. Tai sitten tuo kohta, jossa tasot "loppuvat" olisi menun attribuuttina.

Sitten voisiko jopa ajatella että menussa itsessään olisi (optiona) pieni etsi, jolla se avaisi valmiiksi ehtoon tärppääviä vaihtoehtoja. Niin että jos rupeaa käyttämään "etsi", niin on ykistaoinen menu, joka hakee ne lehtisolmut, joihin hakusana täsmää. Ja jotenkin se siinä näyttäisi sen polun mistä kunkin kohdan olisi löytänyt.

Unohtuiko muuten meiltä suunnitelmista title, eli että menuihin voisi laittaa myös selityksi (vrt editorin plugin yms valikkojen menut)? Jos on etsi, niin se voisi ehkä etsiä myös titleistä?

In GitLab by @vivanauk on Jul 2, 2019, 13:19

created merge request !34 to address this issue

In GitLab by @vivanauk on Jul 2, 2019, 14:39

Otin mallia qst-pluginista (kun ohjeet ja malli pali-plugin ovat omaan konttiinsa menevien pluginien tekemiselle) ja yritin tehdä minimaalisen pluginin näin aluksi. Pääsin siihen asti että kun pluginin laittaa dokumenttiin, siinä näkyy Method Not Allowed The method is not allowed for the requested URL., mutta ei tule virhettä konsoliin.

In GitLab by @vesal on Jul 2, 2019, 14:49

ImportData plugin ois varmaan kaikkein helpoin matkittavaski, koska se on aika yksinkertainen ja tehty tuollaiseksi sisäiseksi pluginiksi Mikan uusilla tavoilla. qst on vielä aika pitkälle mun tempuilla tehty ja siitä puuttuu silloin aika paljon tarkistuksiak, joista on hyötyö YAMLin kirjoittajalle kun valittaa väärin kirjoitetuista ja vääristä tyypeistä.

containerLink.py: "importData": {"host": "http://" + "localhost" + f":{current_app.config['QST_PLUGIN_PORT']}/importData/"}, importData.py importData.ts

Menuhan on sikäli helpopmpi ettei sieltä kutsuta (kai, mistäs sen vielä tietää vaikka jostakin kutsuttaisiinkin :-) answer reittiä, joten tuolla ImportDataInputSchema( ei ole niin väliä. Simohan pitäisi siellä olla töissä, niin voinee jotakin sanoa noista schemoista. Eli tuo asnwer reitti vie suuren osan importin koodista eli kun sen unohtaa, niin lyhenee aika paljon.

TableForm on toinen noin tehty joka ei ole omassa kontissaan.

In GitLab by @sijualle on Jul 2, 2019, 15:51

Nuo tableFormin schemat ovat suoraan palin scheman vastaavia mutta karsittuja, siellä on nyt esim TableFormStateSchema ehkä turha. Mika teki jonkun blueprint-pohjan tuota varten. Koitin nopeasti kopsata tableFormin toiseksi pluginiksi ja tuli sama "Method Not Allowed The method is not allowed for the requested URL", joka hävisi kun heitti tuonne tim.py:hyn rivin

app.register_blueprint(tempplugin_plugin)

In GitLab by @vivanauk on Jul 2, 2019, 16:03

ImportData plugin ois varmaan kaikkein helpoin matkittavaski

qst on vielä aika pitkälle mun tempuilla tehty ja siitä puuttuu silloin aika paljon tarkistuksiak,

Method Not Allowed The method is not allowed for the requested URL", joka hävisi kun heitti tuonne tim.py:hyn rivin

app.register_blueprint(tempplugin_plugin)

Olin siis lisännyt blueprintin app.register_blueprint(timMenu_plugin) ja ei näyttäisi olevan kirjoitusvirhettäkään nimessä, joten ei liene sama syy nyt. Tietysti kun laajemman pluginin pohjalta karsin ronskisti juttuja, niin ei ihmekään jos jokin mättää aluksi. Pitää huomenna katsoa tuon ImportDatan pohjalta.

Vähän harmittava virheilmoitus kyllä kun ei kerro mistä johtuu missään.

In GitLab by @vesal on Jul 2, 2019, 16:05

Aika hyvin siis näkee kaiken tarpeellisen kun laittaa

 Shift-Ctrl-F ja ImportData

Näyttää 7:ssä tiedostossa olevan tuohon liittyvää...

   main.ts           (markAsUsed)
   cointainerLink.py (pluginin esittely)
   plugin.py         (NO_ANSWERBROWSER_PLUGINS)
   stylesheet.css    (tyylit)
   tim.py            (blueprint)
   importData.py     - varsinainen palvelinkoodi
   importData.ts     - selainkoodi

3 muuta mitä haku löytyy on joko kommentteja, kännettyä css:ää tai js:ää

In GitLab by @vesal on Jul 3, 2019, 14:11

Voisi kokeilla myös sellaista optiota

  topmenu: true

jolla menun saisi niin, että se näkyy sivun yläreunassa, mutta kun scrollaa dokumenttia alaspäin, niin se piiloutuu, mutta jos scrolla pari riviä ylöspäin, se ilmestyy näkyviin. Olen jossakin nähnyt tällaisen toteutuksen. Jos scrolla tarpeeksi alkuun, niin se näkyy omalla paikallaan, eli jos oma paikka on alempana kuin sivun yläreuna, niin se tottelee sitä.

Loogisia ongelmia voisi tulla jos on monta topmenua. Ihannetilanteessa (ei 1. prioriteetti, oletuksena voi olla että niiden toimintaa ei taata jos on enemmän kuin yksi) ne "pinoutuisivat", eli piiloutuva kun mennään dokumentissa alaspäin, mutta yksikerrallaan ilmestyvät ja pysyvät kimpassa kunnes mennään jokin menun "kotipaikan" ohi, jolloin se jää sillep aikalleen kun mennään ylöspäin. Onko tälle (monelle topmenulle) järkevää käyttötapausta, se onkin toinen juttu.

Mutta sillä tavalla voi olla järkevä käyttötapaus että ne ovat peräkkäin. Mullakin on Ohj-kurseilla peräkkäin kurssilaisten menu ja sen alla ohjaajien menu. Ja itse tarvitsen usein sitä ohaajien menua, jolloin sen ilmestyminen näyttöä hieman siirtämällä olisi kiva juttu.

In GitLab by @vivanauk on Jul 5, 2019, 14:58

Missä yamlin muunnos menuksi tehdään, palvelimella vai selaimen puolella? Teknisesti ottaenhan tässä ei tehdä muuta kuin esitetä linkkejä sisältävä lista kauniimmassa muodossa, mihin ei tarvitse palvelinta välttämättä (kuten aiemmin taisi olla puhetta). Mieluiten muuttaisin valikkorakenteen sisältävän yamlin (miten syvä tahansa) ensin sellaisenaan json-taulukkorakenteeksi, joka sitten oloidaan rekursiivisesti TypeScriptin puolella, mutta schemat ym. monimutkaistavat tätä välissä.

Näkisin, että tässä pitää muodostaa lista menuItem-olioista, joilla on ainakin markup-tekstisisältö, lista sen sisältämistä alemman tason menuItemeistä (eli siitä aukeava syvempi valikko, jos sitä on) sekä boolean joka kertoo, näytetäänkö syvempää valikkoa.

Oliko muuten jokin taikasana millä markup-merkkijonon saa näytettyä tyyleineen kaikkineen html-templaten sisällä, vai pitääkö tämä tehdä aiemmalla tasolla?

In GitLab by @vivanauk on Jul 5, 2019, 15:04

Voisi kokeilla myös sellaista optiota
  topmenu: true

Lisäsin mahdollisista optioista alkuun listan.

In GitLab by @vesal on Jul 5, 2019, 16:32

Tuossa varmaan rekusriokooste on se tapa miten tuo esitetään. Karkeasti sykstaksi kokeilematta idea

menu = menuitem[]

menuitem = menu | lehtisolmu

Ja YAML muuttuu aina siihen koodiin tullessa JSONiksi. Jonka voi siis viedä sellaisenaan sinne .ts koodille jos haluaa ja siellä tehdä tuon rekursion. Toisaalta jos menu tuotetaan Python-puolella valmiiksi HTML:ksi, niin heikkotehoisilla mobiileilla ei menee aikaa sen tekemiseen. Toisaalta jso selaien tekee sen, niin palvelin kuormittuu vähemmän. Molemmissa on etunsa.

In GitLab by @vesal on Jul 5, 2019, 17:05

Jos menu sattuu näytön alalaitaan, niin osaisikohan se aueta ylöspäin?

In GitLab by @vivanauk on Jul 5, 2019, 17:24

Ja YAML muuttuu aina siihen koodiin tullessa JSONiksi. Jonka voi siis viedä sellaisenaan sinne .ts koodille jos haluaa ja siellä tehdä tuon rekursion.

Tarkoitin siis sitä kun aiemmin ainakin komponenteissa sai jättää sisällön määrittelemättä ja heittää vain json-parsitun dictionaryn eteenpäin, mutta nuo schemat/modelit vaativat(?) nyt määritellyn rakenteen näissä. Mutta tosiaan tuo rekursio syntaksi on varmaan se mitä hainkin.

In GitLab by @vivanauk on Jul 8, 2019, 15:47

Saako käyttää muuten bootstrapin dropdownia? Se näyttäisi aikalailla samalle kuin ohj1-menu, tosin en tiedä vielä miten hyvin se soveltuu syvempiin listoihin (luulisin että niitä saa laittaa sisäkkäin kyllä).

Tuossa ei tule markupina siis nuo tekstit tosin, kun vielä en löytänyt miten se tehdään. Taustalla myös purukumia turhan paljon, kun schema/model ja auto_attribs ovat vähän hakusessa.

menuwip

In GitLab by @vesal on Jul 8, 2019, 16:03

Jos bootstappia on muuteknkin käytety ja se tuo jotakine tua (esim paremmian automaattinen skaalaus mobiileille/esteettömyys). Mutta jos sen kanssa joutuu kauan temuamaan, niin johan se Ohj1 nykyinenkin menu joska ei käyttänyt mitää, toimi välttävästi.

MarkDown olisi aika tärkeä että saisi kuvia ja matematiikkaa jos tarvitsee. Tosin Pandochan ajetaan siihen YAMliin ja sen tilalle tulee HTML:ää, joten jos html:ään saa kirjoittaa kaikkea noitya (matikka siis tulee kuvina), niin se voi tulla sieltä kautta.

Ongelmai mullakin on schemojen yms kanssa, noilel tarviisi saada kunnollienn ohje miten käytetään. Ootko kysynyt onko Simo yhtään paremmin kärryillä niistä. Textfieldistä ja TableFormista voi myös matkia jonkin verran noita Schema yms juttuja).

In GitLab by @vesal on Jul 8, 2019, 16:13

Niin ja tuoko boorstarp vähemmällä sen mahdolisuduen että menu menee piiloon kun rullaa alaspäin ja tulee esiin kun menee ylöspäin? ELi sen hyödyt ja rasitteet kannattaa miettiä.

In GitLab by @sijualle on Jul 8, 2019, 16:13

onko Simo yhtään paremmin kärryillä niistä

En oikeastaan, Mika teki nuo pohjat pitkälti valmiiksi tuohon tableFormiin ja muihin projektin plugineihin

In GitLab by @vivanauk on Jul 8, 2019, 17:18

Jos bootstappia on muuteknkin käytety ja se tuo jotakine tua (esim paremmian automaattinen skaalaus mobiileille/esteettömyys). Mutta jos sen kanssa joutuu kauan temuamaan,

Pitää seuraavaksi testata toimivatko syvemmät valikot sillä, mutta isoin ongelmahan on nyt ne linkit. Tietysti sellaisella saisi toimimaan jo nyt missä annetaan linkit atribuutteina tyyliin link ja linkText mitkä sitten vain sijoitetaan html-templatessa, mutta vapaa markdown olisi tietysti parempi.

Niin ja tuoko boorstarp vähemmällä sen mahdolisuduen että menu menee piiloon kun rullaa alaspäin ja tulee esiin kun menee ylöspäin? ELi sen hyödyt ja rasitteet kannattaa miettiä.

Eikös se ole pitkälti css:stä kiinni? Ainakin sellaisen joka seuraa koko dokumentissa kun rullaa alaspäin saa laittamalla position: sticky. Ja tyyliähän voi vaihtaa eri ehtojen mukaan, joten varmaan saa katoamaan kun on rullattu ruudun mitan verran tms.

In GitLab by @vesal on Jul 8, 2019, 20:10

Eikös se ole pitkälti css:stä kiinni? Ainakin sellaisen joka seuraa koko dokumentissa kun rullaa alaspäin saa laittamalla position: sticky. Ja tyyliähän voi vaihtaa eri ehtojen mukaan, joten varmaan saa katoamaan kun on rullattu ruudun mitan verran tms.

Eikös tuo bootstart lähinnä ole css-kokoelma. Ajattelin että jos siellä olisi valmiina tuollainen. Mulla iankaan sticky ei vaikuttanut mitään jos laitoin courecmenu-bar tyyliin sen. Ja se ei olisi pari ruudullista vaan sen verran että se tavalla rullaa näytöstä pois. Ja sitten oli kuinka alhaalla takaisin niin se tavallaan "odottaa" siinä muutaman rivin päässä. Eli käytännössä löytyy aian helposti.

In GitLab by @vivanauk on Jul 8, 2019, 22:18

Mulla iankaan sticky ei vaikuttanut mitään jos laitoin courecmenu-bar tyyliin sen.

Elementti jolle sticky laitetaan liukuu näemmä vain sisältämänsä parent-elementin sisällä, joten varmaan jumittaa paragraph-divin sisään eikä menekään koko dokumentin alueelle.

Täällä oli sellainen, missä sama efekti on tehty position: fixed + skrollausehtoa käyttäen, joten sopinee pienin muutoksin tähän tapaukseen paremmin kuin sticky.

In GitLab by @vesal on Jul 8, 2019, 22:55

Tuolla on vähän sinnepäin, mutta ei ihan:

https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

Tuossakin on se vika että menu ei mene piiloon sitten kun vielä himppu on rullattu.

http://blog.dynamicdrive.com/beautiful-examples-of-css-javascript-sticky-menus/

Tuolla on just sellainen mitä tarkoitin:

https://www.brit.co/

paitsi että tuossa menu on ylimpänä ja meillä pitäisi sen yläpuolella olla vielä tavaraa joka näkyy vain jos on rullattu ihan ylös.

In GitLab by @vesal on Jul 8, 2019, 23:46

Tuossa omatekemä himen huonoilla efekteillä, mutta jos idean saisi tuosta:

https://tim.jyu.fi/view/kurssit/tie/kielet/HTML/sticky

In GitLab by @vivanauk on Jul 9, 2019, 14:18

Bootstrapista on näemmä pudotettu sisempien valikkojen tuki pois, syyksi sanottiin:

Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0.

In GitLab by @vesal on Jul 9, 2019, 14:22

No sehän ratkaisee aika paljon tästä :-)

Tekee oman ja sittenv oi miettiä mikä on sisempien menujen esitystapa.

In GitLab by @vivanauk on Jul 9, 2019, 14:48

Sain markdownin toimimaan, esim.:

separator: "|"
openingSymbol: " &#9661;"
menu:
 - Kissaeläimet
    - [Leijonat](http://192.168.99.100)
    - [**Kotikissat**](http://192.168.99.10)
    - [Pantterit](http://192.168.99.100)
    - [Jaguaarit](http://192.168.99.100)
    - *Sapelihammastiikerit*
 - Koiraeläimet
    - [Koirat](http://192.168.99.100)
    - [Sudet](http://192.168.99.100)
 - '[Näätäeläimet](http://192.168.99.100)'
 - '*Pussieläimet*'

muuntuu tähän muotoon palvelimella:

['<p>Kissaeläimet - <a href="http://192.168.99.100">Leijonat</a> - <a href="http://192.168.99.100"><strong>Kotikissat</strong></a> - <a href="http://192.168.99.100">Pantterit</a> - <a href="http://192.168.99.100">Jaguaarit</a> - <em>Sapelihammastiikerit</em></p>', 
'<p>Koiraeläimet - <a href="http://192.168.99.100">Koirat</a> - <a href="http://192.168.99.100">Sudet</a></p>', 
'<p><a href="http://192.168.99.100">Näätäeläimet</a></p>', 
'<p><em>Pussieläimet</em></p>']

Ongelma tuossa on siis, että se ei tunnista listasta kuin ensimmäisen ulottuvuuden eli valikon linkit menevät kaikki yhteen pötköön ikään kuin ei olisi rivinvaihtoja / sisennyksiä. Selaimen puolella on purkkaviritys joka parsii siihen puuttuvan syvyyden, mutta alavalikoiden kanssa tulee ongelma vastaan.

Vähän harmillisesti myös se vaatii hipsut otsakkeisiin, esim. '*Pussieläimet*', tai ruinaa YAML is malformed, minkä muistelisin tulleen vastaan muissakin plugineissa.

In GitLab by @vivanauk on Jul 9, 2019, 14:55

Se siis toimii nykymuodossaan jo, ei vain ole alavalikoita. separator (oletuksena non-breaking space) ja openingSymbol (oletuksena alaspäin osoittava kolmio) pystyy itse asettamaan myös.

Tekee oman ja sittenv oi miettiä mikä on sisempien menujen esitystapa.

Sikäli harmi ettei valmis toiminut, olisi mobiili ym. käytettävyys tullut mukana ilmaiseksi.

Mille välilehdelle menu-pluginin template kuuluu muuten editorissa? Plugins on ainakin aika täynnä, menee toiselle riville Palin kanssa.

In GitLab by @vesal on Jul 9, 2019, 15:04

Editorissa joko Plugins/Others tai Insert/Menu (tuleeko useita Menu-esiemrkkejä?) Masterissa (=tuotanto) on aika paljon vähemmän noita Plugins välilehden kohtia kuin oli projektien jälkeen. Vielä voisi periaattessa ImageX ja Image yhdistää. Videokin on aika lyhyt menu nyt. Vielä jos editorin menuissa olisi väliviivat, voisi loogisemmin jakaa.

In GitLab by @vivanauk on Jul 9, 2019, 15:07

tuleeko useita Menu-esiemrkkejä?

Tekisin kaksi varmaan, toinen yksinkertaistettu ja toinen mikä näyttää kaikki atribuutit/ominaisuudet.

In GitLab by @vesal on Jul 9, 2019, 15:26

Joku tuollainen:

type: shell
path: user
menu:
 - submenu: 'Kissaeläimet'
   menu:
      - '[Leijonat](http://192.168.99.100)'
      - '[**Kotikissat**](http://192.168.99.10)'
      - '[Pantterit](http://192.168.99.100)'
      - '[Jaguaarit](http://192.168.99.100)'
      - '*Sapelihammastiikerit*'

 - submenu: Koiraeläimet
   menu:
    - '[Koirat](http://192.168.99.100)'
    - '[Sudet](http://192.168.99.100)'
 - '[Näätäeläimet](http://192.168.99.100)'
 - '*Pussieläimet*'

näyttäisi antavan järkevää JSONia tuolla kun kokeilee:

https://www.json2yaml.com/convert-yaml-to-json

In GitLab by @vesal on Jul 9, 2019, 16:09

Jos tuosta kokonaan haluaisi hukata JSOn struktuurin, niin seuraava antaisi menun yhtenämerkkijonona:

separator: "|"
openingSymbol: " &#9661;"
menu|!!:
 - Kissaeläimet
    - [Leijonat](http://192.168.99.100)
    - [**Kotikissat**](http://192.168.99.10)
    - [Pantterit](http://192.168.99.100)
    - [Jaguaarit](http://192.168.99.100)
    - *Sapelihammastiikerit*
 - Koiraeläimet
    - [Koirat](http://192.168.99.100)
    - [Sudet](http://192.168.99.100)
 - '[Näätäeläimet](http://192.168.99.100)'
 - '*Pussieläimet*'
!!

ja silloin sisennykset eivät olisi hukassa. Mutta riittääkö tuo kaikkeen käyttöön? Vai tekisikö tuosta option että menu voi olla merkkijono tai se voi olla olio, jolloin pitää antaa noille kentille nimiä. Jos tuonne joskus esim haluaa lisätä toimintoja niin, että on tukku globaaleja TIMin funktioita, joita voisi menusta kutsua (login, logout, add comment, search, jne...). Silloin menun on varmaan oltava enemmän tai vähemmän strukturoitu olio joss voi sanoa

menu:

text: Log out command: logout
text: Search command: search

In GitLab by @vivanauk on Jul 9, 2019, 18:34

Jos tuosta kokonaan haluaisi hukata JSOn struktuurin, niin seuraava antaisi menun yhtenämerkkijonona

Mutta riittääkö tuo kaikkeen käyttöön? Vai tekisikö tuosta option että menu voi olla merkkijono tai se voi olla olio, jolloin pitää antaa noille kentille nimiä.

Jos sisennystasot, rivinvaihdot ja mahdolliset erikoisfunktiot saa yksiselitteisesti irti tuosta, niin silloin voisi kyllä hyvinkin monenlaista tehdä.

Se voisi jonkin verran yhdenmukaistaa syntaksiakin, kun nythän esim. valikottomiin otsikkoihin on pakko laittaa hipsut jos haluaa muotoiluja kun taas valikollisissa otsikossa hipsut aiheuttavat aina virheilmoituksen.

In GitLab by @vivanauk on Jul 9, 2019, 18:34

Ajatuksenahan oli siis, että syntaksi olisi yksinkertaisimmillaan sama kuin luetteloissa, esim.

 - Kissaeläimet
    - [Leijonat](http://192.168.99.100)
    - [**Kotikissat**](http://192.168.99.100)
         - Angorat
         - Maatiaskissat
             - Miuku
             - Kissi
    - [Pantterit](http://192.168.99.100)
         - Vaaleanpunainen pantteri
    - [Jaguaarit](http://192.168.99.100)
    - *Sapelihammastiikerit*

Kissaeläimet
- Leijonat
- Kotikissat
  - Angorat
  - Maatiaskissat
    - Miuku
    - Kissi
- Pantterit
  - Vaaleanpunainen pantteri
- Jaguaarit
- Sapelihammastiikerit

In GitLab by @vesal on Jul 9, 2019, 18:59

Jos tuossa sallit vain yksirivisiä juttuja, niin kai nuo sisennystasot silloin saa tuosta aika helposti. Ongelma tietysti jos on sekasisennystä tyyliim:

         - Angorat
         - Maatiaskissat
             - Miuku
            - Kissi

niin Kissi ei nouse Maatiasikissan tasolle ja mille tasolle se pitäisi tuossa käsitellä? Entä missä sanottaisiin mahdolliset titlet? Eli pitäisin edelleen tuon kaverina mahdollisuutta ilmaista se oikealla JSONilla (eli käyttäjä kirjoittaa joko YAMLia tai JSONia, mollemthan kelpaavat TIMille), Tosin Titlen tuohon saa kai vielä tuossakin: [Jaguaarit](http://192.168.99.100){title="Voi purra"}

Paitsi että jos tuo päästetään Dumbolle, niin se taitaa noita sisennyksiä tulkita listoina ja vaihtaa niiden tilalle sitten <ul><li>..juttuja? Vai onko se jopa hyvä?

In GitLab by @vivanauk on Jul 10, 2019, 14:26

Ongelma tietysti jos on sekasisennystä tyyliim:
         - Angorat
         - Maatiaskissat
             - Miuku
            - Kissi
niin Kissi ei nouse Maatiasikissan tasolle ja mille tasolle se pitäisi tuossa käsitellä?

Laitoin menemään samalla säännöllä kuin luetteloissa eli 0-1 välilyöntiä = 1. taso, 2-3 välilyöntiä = 2. taso jne.

In GitLab by @vesal on Jul 10, 2019, 14:32

Onhan tuossa sentään se, että jos preview toimii, niin näkee melko ehti mitä on tulossa joten siinä näkee jos on väärään kohti laittanut.

In GitLab by @vivanauk on Jul 10, 2019, 14:47

Onhan tuossa sentään se, että jos preview toimii, niin näkee melko ehti mitä on tulossa joten siinä näkee jos on väärään kohti laittanut.

Paitsi aukeavat valikot leikkaantuvat pois preview ikkunasta. Mutta sehän on kyllä menossa uusiksi kokonaan, joten voinee laittaa valikoihin tyylin jolla menee aina muiden ylle ainakin preview-näkymässä.

TIM-JYU / TIM

Menu-plugin #1419