差異處

這裏顯示兩個版本的差異處。

--- dokuwiki:dev:plugin:popup [2020/03/21 19:40]
ghsrobert 建立
+++ dokuwiki:dev:plugin:popup [2020/04/01 01:25] (目前版本)
ghsrobert [實做] 繼續研究
@@ 行 1: / 行 1: @@
-====== Popup plugin ======
+====== 開發 DokuWiki popup plugin ======
-實在受夠 DW 欠缺一個真正的 popup plugin 了！
+緣起：{{page>..:..:syntax:popup#自助&footer}}
-用 HTML 做，也不難啊！（但看來至少一定要有 JS）☞ [[https://www.w3schools.com/howto/howto_js_popup.asp|How To Create Popups]]
+===== 目標 =====
-然後，透過 [[doku>plugin:inlinejs]]，把範例 HTML + CSS + JS 放到任何一個 DW 頁面上，也能順利呈現啊！
+  - 簡單的輸入語法
+  - popup 內使用一般 DW markup 而非 HTML
+  - 從 ''getElementById'' 變為 ''getElementByClassName''？
-那麼，就試試把它做成 plugin？
+===== 參考 =====
+  * 開發 DW plugin 一般要點：
+    * [[doku>devel:plugins]]
+    * [[doku>devel:plugin_file_structure]]
+    * [[doku>devel:plugin_programming_tips]]
+      * pseudo-plugin
+===== 實做 =====
+/^20200321^/ 準備開始。
+----
+/^20200322^/ 把最基本的 CSS + JS 做成 pseudo-plugin，++++搭配類似像這裡面的 HTML 標記碼（而非 DokuWiki 自身語法）|<code html><html><div class="popup" onclick="myFunction()">Click me!
+  <span class="popuptext" id="myPopup">Popup text...</span>
+</div>
+</html></code>++++
+→ 最粗略的 v0.1 [[https://github.com/GJRobert/dokuwiki-plugin-popup/releases/tag/v0.1|Release Original basic method, working · GJRobert/dokuwiki-plugin-popup]]
+然後開始實做 syntax：拿 [[doku>plugin:ruby]] 的 syntax.php 來改，目前想先用 ''[按鈕]^^泡泡內容^^'' 這樣的語法。
+----
+/^20200323^/ [[https://github.com/GJRobert/dokuwiki-plugin-popup/commit/5cd1c31d15b6cef09c349f4c3e37a61b0562c728|這個 commit 初步成功]]，但有多個要修改的問題，而且目前想用的語法似乎會和連結語法 ''%%[[...]]%%'' 衝突，可能需要改。
+++++插曲：一次自動新增多個 GitHub issue|
+找到 [[https://github.com/Ricky54326/Github-Auto-Issue-Creator|Ricky54326/Github-Auto-Issue-Creator: An automatic issue creator for Github, written in Python. It'll go through your entire git repo, look for any lines that start with TODO: and add them as issues to your repo.]]
+下載來用，卻看到 <code python>
+Traceback (most recent call last):
+  File "./autoissue.py", line 207, in <module>
+    main()
+  File "./autoissue.py", line 170, in main
+    from github import createIssues
+  File "/Volumes/SD/tmp/Github-Auto-Issue-Creator-master/github.py", line 1, in <module>
+    import requests
+ImportError: No module named requests
+</code>少了 Python ''requests'' 模組，變成還得再想辦法安裝
+執行了 ''$ which -a python python2 python2.7 python3 python3.6''(([[https://stackoverflow.com/questions/33175827/what-version-of-python-is-on-my-mac|macos - What version of Python is on my Mac? - Stack Overflow]]))，發現我有：<code>
+/usr/bin/python
+/usr/bin/python2.7
+/usr/local/bin/python3
+</code>3 份 Python
+[[https://stackoverflow.com/questions/54484536/installing-requests-python-library-on-macos/54484665|這裡]]有人建議不要在 macOS 隨附的 Python 中安裝 requests 模組，而且 macOS 的 Python 2.7.10 很誇張，沒有 pip，也沒有 easty_install ∴我決定改用 Python 3↓<code bash>
+$ pip3 install requests
+</code>
+但接下來 Python 3 執行那個腳本，卻又語法錯誤 :(
+<code python>
+$ python3 ./autoissue.py -i -p /Volumes/SD/Dropbox/projects/dokuwiki-plugin-popup/ -s 'FIXME'
+  File "./autoissue.py", line 37
+    except IOError as (eno, strerror):
+                      ^
+SyntaxError: invalid syntax
+</code>
+所幸有 Python3 的腳本：[[https://github.com/Ricky54326/Github-Auto-Issue-Creator/tree/python3|Ricky54326/Github-Auto-Issue-Creator at python3]]
+→ 執行了卻找不到任何 issue :(
+↑放棄上面的腳本，結果透過 Zapier，順利把記錄在 Google Spreadsheet 上的 issue，自動加到 GitHub 去了。還是要靠專業的來啊！🆗🔚
+++++
+----
+/23 晚上，改成了 ''%%[^按鈕文字^]^^泡泡內容^^%%''
+然後又改用 ''%%[^按鈕文字^](^泡泡內容^)%%''，暫時可能會先用這個，再來可能要先處理別的問題了 ☞ [[https://github.com/GJRobert/dokuwiki-plugin-popup/issues|Issues · GJRobert/dokuwiki-plugin-popup]]，我可能要想辦法做個表把這些 issue 排個優先順序
+----
+/^20200324^/ 來研究 [[doku>plugin:folded]] 的 /syntax，並參考 [[doku>devel:syntax_plugins]]
+  * 看來 ''getType()'' 應該用 ''formatting'' 或 ''container'' 的
+----
+/^20200325^/
+  * 先把按鈕的 div 改為 span 試試 → inline ✅（GitHub 自動把 [[https://github.com/GJRobert/dokuwiki-plugin-popup/issues/5|Issue #5]] close 掉了！真神奇 :o）
+  * 如果變 inline 的話，就一定需要適當的 style 來顯示 button 了
+    * 突然想到，以前 TiddlyWiki 的 popup，可以設成只需 hover、不需 click ∴這次我可能也可以考慮是否要調整成不一樣的行為；樣式方面，如果只要 hover 的話，可能不一定要做成有陰影的按鈕
+    * → 開了一個 branch「ohhover」來修改。但是隨即發現，不是叫 ''onhover''，而是 ''oumouseover'' 糗 XD(([[https://stackoverflow.com/questions/15486376/javascript-function-onhover-in-div|JavaScript function onhover in <div> - Stack Overflow]]))\\ → 好了，總之弄出來了。
+----
+/^20200330^/
+  * 昨天承 3/24，試著開始修改 ''getType()'' 等，想解決容納其他 DW 語法的問題，但參考發現要改的甚多 ∴暫時改到一半，留在 master branch 裡 ☞ [[https://github.com/GJRobert/dokuwiki-plugin-popup/issues/3#issuecomment-605675832|#3 1 hour ago]]
+  * 語法不好啃，改改 style 總行了吧？→ 開 styles branch 並試做基本樣式，再 merge 到另兩個 branch = close 掉 [[https://github.com/GJRobert/dokuwiki-plugin-popup/issues/9|#9 Proper style for button]]
+----
+/^20200331^/
+  * 再找找看其他可資參考的 plugin：
+    * abbr 似乎不是我要的 ∵它產生的也是 HTML <abbr> tag，裡面應該是裝不了 DW 語法
+    * DW 內建 footnote 功能其實挺不錯的，要是可以擴充就好了\\ ↑嗚 QQ 好幾支 core script 要看喔，主要在 /inc/parser 裡的樣子，handler、lexer、parser、renderer、xhtml 等 .php 可能都有 """@@"""
+    * autotooltip？← 應該不行，它的 getType() 也是 ''substition''
+{{tag>未完成}}