Fix & Update

修复上一版本的所有可见 Bug，并支持前台更换模型。还新增了切换夜间模式、开启时间小贴士等新的功能等你尝试。
Dreamer-Paul · Dec 30, 2018 · 6015bee · 6015bee
1 parent eaf4cb5
commit 6015bee
Show file tree

Hide file tree

Showing 5 changed files with 213 additions and 101 deletions.
diff --git a/Plugin.php b/Plugin.php
@@ -4,7 +4,7 @@
  *
  * @package Pio
  * @author Dreamer-Paul
- * @version 2.0
+ * @version 2.1
  * @link https://paugram.com
  */
 
@@ -39,7 +39,7 @@ function paul_update($name, $version){
 
             echo "</div>";
         }
-        paul_update("Pio", "2.0");
+        paul_update("Pio", "2.1");
 
         // 读取模型文件夹
         $models = array();
@@ -51,7 +51,7 @@ function paul_update($name, $version){
         };
 
         // 自定义模型选择
-        $choose_models = new Typecho_Widget_Helper_Form_Element_Select('choose_models', $models, 'pio', _t('选择模型'), _t('选择插件 Models 目录下的模型，每个模型为一个文件夹，并确定配置文件名为 <a>model.json</a>'));
+        $choose_models = new Typecho_Widget_Helper_Form_Element_Checkbox('choose_models', $models, 'pio', _t('选择模型'), _t('选择插件 Models 目录下的模型，每个模型为一个文件夹，并确定配置文件名为 <a>model.json</a>'));
         $form -> addInput($choose_models);
 
         // 自定义定位
@@ -74,6 +74,10 @@ function paul_update($name, $version){
         $custom_model = new Typecho_Widget_Helper_Form_Element_Text('custom_model', NULL, NULL, _t('自定义配置文件地址'), _t('在这里填入一个模型 JSON 配置文件地址，可供使用外链模型，不填则使用插件目录下的模型'));
         $form -> addInput($custom_model);
 
+        // 夜间模式函数
+        $night = new Typecho_Widget_Helper_Form_Element_Text('night', NULL, NULL, _t('夜间模式函数'), _t('如果你的主题支持夜间模式，请在这里填写主题对应的 JS 函数'));
+        $form -> addInput($night);
+
         // 展现模式
         $custom_mode = new Typecho_Widget_Helper_Form_Element_Radio('custom_mode',
             array(
@@ -93,12 +97,21 @@ function paul_update($name, $version){
             '0', _t('浏览体验'), _t('是否在手机版上隐藏看板娘'));
         $form -> addInput($hidden);
 
+        // 是否开启时间小贴士
+        $tips = new Typecho_Widget_Helper_Form_Element_Radio('tips',
+            array(
+              '0' => _t('关闭'),
+              '1' => _t('开启'),
+            ),
+            '0', _t('时间小贴士'), _t('是否开启时间小贴士，在没有访问来源的情况下展示，将覆盖入站提示'));
+        $form -> addInput($tips);
+
         // 自定义文字配置
-        $talk_content = new Typecho_Widget_Helper_Form_Element_Textarea('talk_content', NULL, '{}', _t('自定义提示内容'), _t('在这里填入你的自定义看板娘提示内容，如想保持默认，需要填写 "{}" 否则会导致插件无法运行'));
-        $form -> addInput($talk_content);
+        $dialog = new Typecho_Widget_Helper_Form_Element_Textarea('dialog', NULL, NULL, _t('自定义提示内容'), _t('在这里填入你的自定义看板娘提示内容，如想保持默认，需要填写 "{}" 否则会导致插件无法运行'));
+        $form -> addInput($dialog);
 
         // 自定义选择器配置
-        $selector = new Typecho_Widget_Helper_Form_Element_Textarea('selector', NULL, '{}', _t('自定义内容选择器'), _t('在这里填入部分功能所用到的自定义选择器，如不想启用此类功能，需要填写 "{}" 否则会导致插件无法运行'));
+        $selector = new Typecho_Widget_Helper_Form_Element_Textarea('selector', NULL, NULL, _t('自定义内容选择器'), _t('在这里填入部分功能所用到的自定义选择器，如不想启用此类功能，需要填写 "{}" 否则会导致插件无法运行'));
         $form -> addInput($selector);
     }
 
@@ -107,62 +120,110 @@ public static function personalConfig(Typecho_Widget_Helper_Form $form){}
 
     /* 插件实现方法 */
     public static function header(){
-        echo "<link href='" . Helper::options() -> pluginUrl . "/Pio/static/pio.css' rel='stylesheet' type='text/css'/>\n";
-        $pos = Typecho_Widget::widget('Widget_Options') -> Plugin('Pio') -> position;
-        echo "<style>.pio-container{ $pos: 0 }</style>";
+        echo("<link href='" . Helper::options() -> pluginUrl . "/Pio/static/pio.css' rel='stylesheet' type='text/css'/>\n");
     }
     public static function footer(){
         // 生成画布
         function getCanvas(){
             $height = Typecho_Widget::widget('Widget_Options') -> Plugin('Pio') -> custom_height;
-            $width = Typecho_Widget::widget('Widget_Options') -> Plugin('Pio') -> custom_width;
+            $width  = Typecho_Widget::widget('Widget_Options') -> Plugin('Pio') -> custom_width;
+
+            return '<canvas id="pio" width="' . (!$width ? 280 : $width) . '" height="' . (!$height ? 250: $height) . '"></canvas>';
+        }
+
+        // 生成配置
+        function getConfig(){
+            $plugin = Typecho_Widget::widget('Widget_Options') -> Plugin('Pio');
+
+            $mode = $plugin -> custom_mode;
+            $hidden = $plugin -> hidden == 1 ? true : false;
+            $tips = $plugin -> tips == 1 ? true : false;
+            $content = $plugin -> dialog ? json_decode($plugin -> dialog, true) : "{}";
+            $selector = $plugin -> selector ? json_decode($plugin -> selector, true) : "{}";
+
+            if($plugin -> custom_model){
+                $model = array($plugin -> custom_model);
+            }
+            else if($plugin -> choose_models){
+                $model = $plugin -> choose_models;
+
+                if(is_array($model)){
+                    foreach($model as &$item){
+                        $item = Helper::options() -> pluginUrl . "/Pio/models/" . $item . "/model.json";
+                    }
+                }
+                else{
+                    $model = array(Helper::options() -> pluginUrl . "/Pio/models/" . $model . "/model.json");
+                }
+            }
+            else{
+                $model = array(Helper::options() -> pluginUrl . "/Pio/models/pio/model.json");
+            }
 
-            if(!$width){ $width = 280; }
-            if(!$height){ $height = 250; }
+            if($plugin -> night){
+                $night = $plugin -> night;
+            }
+            else{
+                $night = false;
+            }
 
-            return "<canvas id='pio' width='".$width."' height='".$height."'></canvas>";
+            return str_replace(
+                array("{mode}", "{hidden}", "{content}", "{selector}", "{model}", "{night}"),
+                array("mode:'" . $mode . "'", "hidden:" . $hidden, "content:" . $content, "selector:" . $selector, "model:" . $model, "night:" . $night),
+                "{mode},{hidden},{content},{selector},{model},{night}"
+            );
         }
 
         // 生成载入器
         function getLoader(){
-            $config = array();
-            $plug = Typecho_Widget::widget('Widget_Options') -> Plugin('Pio');
+            $plugin = Typecho_Widget::widget('Widget_Options') -> Plugin('Pio');
+
+            $config = array(
+                "mode" => $plugin -> custom_mode,
+                "hidden" => $plugin -> hidden == 1 ? true : false,
+                "content" => $plugin -> dialog ? json_decode($plugin -> dialog, true) : "{}",
+                "selector" => $plugin -> selector ? json_decode($plugin -> selector, true) : "{}"
+            );
 
-            if($plug -> custom_model){
-                $model = $plug -> custom_model;
+            if($plugin -> custom_model){
+                $model = array($plugin -> custom_model);
             }
-            else if($plug -> choose_models){
-                $model = Helper::options() -> pluginUrl . "/Pio/models/" . $plug -> choose_models . "/model.json";
+            else if($plugin -> choose_models){
+                $model = $plugin -> choose_models;
+
+                if(is_array($model)){
+                    foreach($model as &$item){
+                        $item = Helper::options() -> pluginUrl . "/Pio/models/" . $item . "/model.json";
+                    }
+                }
+                else{
+                    $model = array(Helper::options() -> pluginUrl . "/Pio/models/" . $model . "/model.json");
+                }
             }
             else{
-                $model = Helper::options() -> pluginUrl . "/Pio/models/pio/model.json";
+                $model = array(Helper::options() -> pluginUrl . "/Pio/models/pio/model.json");
             }
 
-            $config["mode"] = $plug -> custom_mode;
-            $config["hidden"] = $plug -> hidden == 1 ? true : false;
+            if($plugin -> night){
+                $config["night"] = $plugin -> night;
+            }
+
+            if($plugin -> tips){
+                $config["tips"] = true;
+            }
 
-            $config["model"] = array();
-            $config["model"][0] = $model;
-            $config["content"] = json_decode($plug -> talk_content, true);
-            $config["selector"] = json_decode($plug -> selector, true);
+            $config["model"] = $model;
 
-            return '<script>var pio = new poster_girl(' . json_encode($config, JSON_UNESCAPED_SLASHES) . ');</script>';
+            return '<script>var pio = new Paul_Girl(' . json_encode($config, JSON_UNESCAPED_SLASHES) . ');</script>';
         }
 
         $canvas = getCanvas();
         $loader = getLoader();
+        $position = Typecho_Widget::widget('Widget_Options') -> Plugin('Pio') -> position == "left" ? " left" : " right";
 
-        echo <<< Pio
-    <div class="pio-container">
-        <div class="action-menu">
-            <span class="home"></span>
-            <span class="skin"></span>
-            <span class="info"></span>
-            <span class="close"></span>
-        </div>
-        $canvas
-    </div>
-Pio;
+        echo str_replace(array("{position}", "{canvas}"), array($position, $canvas),
+            '<div class="pio-container{position}"><div class="pio-action"></div>{canvas}</div>'
+        );
 
         echo "<script src='" . Helper::options() -> pluginUrl . "/Pio/static/l2d.js'></script>" . "\n";
         echo "<script src='" . Helper::options() -> pluginUrl . "/Pio/static/pio.js'></script>" . "\n";

diff --git a/README.md b/README.md
@@ -5,12 +5,12 @@
 
 ## 使用方法
 1. Star 本项目
-2. Clone 本项目
+2. 从这里 [下载](https://github.com/Dreamer-Paul/Pio/archive/master.zip) 本插件
 3. 将插件文件夹重命名为 `Pio`
 4. 上传本插件，并放置在 `usr/plugins/` 目录下
-5. 登录你的 Typecho 后台，并进行安装即可食用~
+5. 登录你的 Typecho 后台，选择启用插件即可食用~
 6. 如果你有自己的模型，可以将模型放在 `models` 目录下，并在插件设置里选择（需要确认模型的配置文件名称是否为 `model.json`）。或是在插件设置填写一个绝对链接
-7. 保罗自己搭建了一个模型资源收集站点 - [梦象](https://mx.paugram.com)，你可以在这里下载到更多的模型，如果你有能力的话欢迎为我提供更多资源~
+7. 保罗自己搭建了一个模型资源收集站点 - [梦象](https://mx-model.ga)，你可以在这里下载到更多的模型，如果你有能力的话欢迎为我提供更多资源~
 
 ## 项目故事
 详见我的博文：[给你的博客增加动态看板娘](https://paugram.com/coding/add-poster-girl-with-plugin.html)

diff --git a/static/l2d.js b/static/l2d.js
diff --git a/static/pio.css b/static/pio.css
@@ -2,7 +2,7 @@
 
 # Pio Plugin
 # By: Dreamer-Paul
-# Last Update: 2018.10.12
+# Last Update: 2018.12.30
 
 一个支持换模型的 Live2D 插件，供 Typecho 使用。
 
@@ -11,25 +11,26 @@
 ---- */
 
 .pio-container{
-    left: 0;
     bottom: 0;
     z-index: 52;
     position: fixed;
     user-select: none;
 }
+.pio-container.left{ left: 0 }
+.pio-container.right{ right: 0 }
 .pio-container.active{ cursor: move }
 .pio-container.static{ pointer-events: none }
 
-.pio-container .action-menu{
+.pio-container .pio-action{
     top: 3em;
     right: 0;
     opacity: 0;
     position: absolute;
     transition: opacity .3s;
 }
-.pio-container:hover .action-menu{ opacity: 1 }
+.pio-container:hover .pio-action{ opacity: 1 }
 
-.pio-container .action-menu span{
+.pio-action span{
     color: #fff;
     width: 1.5em;
     height: 1.5em;
@@ -41,19 +42,22 @@
     border: 1px solid #666;
     background: #fff center/70% no-repeat;
 }
-.pio-container .action-menu .home{
+.pio-action .pio-home{
     background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTg5My43IDUwNS45SDEyOS4zYy0xMyAwLTI0LjgtNy45LTI5LjgtMTkuOS01LTEyLTIuMi0yNS45IDctMzUuMmwzMDctMzA3YzI2LjEtMjYuMSA2MC45LTQwLjUgOTgtNDAuNXM3MS45IDE0LjQgOTggNDAuNWwzMDcgMzA3YzkuMiA5LjIgMTIgMjMuMSA3IDM1LjItNSAxMi4xLTE2LjcgMTkuOS0yOS44IDE5Ljl6TTY3My4yIDkxOS45aC0zMS41Yy0xNy44IDAtMzIuMy0xNC40LTMyLjMtMzIuM3YtNzcuNGMwLTIzLjEtMTguOC00Mi4xLTQxLjktNDIuNC0yMi4zIDAuMy00MS4xIDE5LjMtNDEuMSA0Mi40djc3LjRjMCAxNy44LTE0LjQgMzIuMy0zMi4zIDMyLjNIMzQ5LjhjLTcwLjkgMC0xMjguNy02My43LTEyOC43LTE0MS45VjU4MS45YzAtMTcuOCAxNC40LTMyLjMgMzIuMy0zMi4zaDUxNi4yYzE3LjggMCAzMi4zIDE0LjQgMzIuMyAzMi4zVjc3OGMtMC4xIDc4LjMtNTcuOCAxNDEuOS0xMjguNyAxNDEuOXoiPjwvcGF0aD48L3N2Zz4=);
 }
-.pio-container .action-menu .close{
+.pio-action .pio-close{
     background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE1NS4yNTIgOTQzLjgyNWMtMTkuMjEzIDAtMzguNDI5LTcuMzMyLTUzLjA4OS0yMS45ODgtMjkuMzE3LTI5LjMyMS0yOS4zMTctNzYuODU1IDAtMTA2LjE3NWw3MTMuNDk0LTcxMy40OTRjMjkuMzE3LTI5LjMyMSA3Ni44NTMtMjkuMzIxIDEwNi4xNzUgMCAyOS4zMTcgMjkuMzE3IDI5LjMxNyA3Ni44NTUgMCAxMDYuMTc1bC03MTMuNDk0IDcxMy40OTRjLTE0LjY2IDE0LjY2LTMzLjg3NCAyMS45ODgtNTMuMDg5IDIxLjk4OHoiIGZpbGw9IiI+PC9wYXRoPjxwYXRoIGQ9Ik04NjguNzQ5IDk0My44MjRjLTE5LjIxMyAwLTM4LjQyOC03LjMzMi01My4wODktMjEuOTg4bC03MTMuNDk0LTcxMy40OTNjLTI5LjMxNy0yOS4zMTctMjkuMzE3LTc2Ljg1NyAwLTEwNi4xNzUgMjkuMzE2LTI5LjMxNyA3Ni44NTUtMjkuMzIxIDEwNi4xNzQgMGw3MTMuNDk0IDcxMy40OTJjMjkuMzE3IDI5LjMyMSAyOS4zMTcgNzYuODU1IDAgMTA2LjE3NS0xNC42NTcgMTQuNjYxLTMzLjg3MSAyMS45OTMtNTMuMDg3IDIxLjk5M3oiIGZpbGw9IiI+PC9wYXRoPjwvc3ZnPg==);
 }
-.pio-container .action-menu .skin{
+.pio-action .pio-skin{
     background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTk2NS45MTEgMzEwLjUzMWwtMTc0LjQtMTc0LjM5OGMtMTMuMDIyLTEzLjAyMS0zMC45MzMtMTkuNjQ5LTQ5LjM4MS0xOC4yMjgtMS43NC0wLjE1LTMuNDIyLTAuMjI0LTUuMDctMC4yMjRsLTkyLjkxNCAwLTYuNTE3IDMuNjI1Yy0zNC40MjEgMTkuMTQ2LTc4LjM0MSAyOS42ODktMTIzLjY2OCAyOS42ODktNDUuMzI4IDAtODkuMjQ2LTEwLjU0My0xMjMuNjY3LTI5LjY4OWwtNi41MTgtMy42MjVMMjkwLjg2IDExNy42ODFjLTIzLjY5MSAwLTQ0Ljk4NiAxMi45MjQtNTUuOTk1IDMzLjQ1MUw2Mi40NzcgMzIzLjUyMWMtMTEuOSAxMS44OTktMTguNDU0IDI3LjcyLTE4LjQ1NCA0NC41NDggMCAxNi44MjkgNi41NTQgMzIuNjQ5IDE4LjQ1MyA0NC41NDlsMTI1Ljk1MyAxMjUuOTU1YzEwLjU0IDEwLjUzOCAyNC4xNTcgMTYuODc4IDM4LjgyNiAxOC4xODFsMCAzMDQuMzk5YzAgMzUuMDczIDI4LjUzMyA2My42MDYgNjMuNjA0IDYzLjYwNmw0NDYuMTk5IDBjMzUuMDc0IDAgNjMuNjA3LTI4LjUzMyA2My42MDctNjMuNjA2bC0wLjAwMS0zMTcuMzQ1YzE0Ljg0NC0xLjIxMSAyOC42MzktNy41NzcgMzkuMjg4LTE4LjIyNEw5NjUuOTEgMzk5LjYyOEM5OTAuNDc1IDM3NS4wNjQgOTkwLjQ3NSAzMzUuMDk1IDk2NS45MTEgMzEwLjUzMXoiPjwvcGF0aD48L3N2Zz4=);
 }
-.pio-container .action-menu .info{
+.pio-action .pio-info{
     background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTY4Mi45IDgyNS45SDI2Ny44Yy0yMS44IDAtMzkuNS0xNy43LTM5LjUtMzkuNXMxNy43LTM5LjUgMzkuNS0zOS41aDQxNS4xYzIxLjggMCAzOS41IDE3LjcgMzkuNSAzOS41cy0xNy43IDM5LjUtMzkuNSAzOS41ek04NjQuNyAxMDAuNGMtMTguNSAzLjctMzEuMyAyMC45LTMxLjMgMzkuN3Y2NDUuOGMwIDQ4LTM4LjkgODctODcgODdIMjE5LjNjLTE2LjQgMC0yOS42LTEzLjMtMjkuNi0yOS42VjczMi43YzAtMTYuMSAxMy4xLTI5LjIgMjkuMi0yOS4yaDM3NS45Yzg4LjEgMCAxNTkuNS03MS40IDE1OS41LTE1OS41VjE4NS41YzAtNjYuMi01My43LTExOS45LTExOS45LTExOS45aC00MDRjLTY2LjIgMC0xMTkuOSA1My43LTExOS45IDExOS45djY1Ny44YzAgNjAgNDguNyAxMDguNyAxMDguNyAxMDguN2g1MjcuMWM5MS43IDAgMTY2LjEtNzQuMyAxNjYuMS0xNjYuMVYxMzkuMWMwLjEtMjQuNi0yMi4yLTQzLjktNDcuNy0zOC43eiI+PC9wYXRoPjwvc3ZnPg==);
 }
-.pio-container .dialog{
+.pio-action .pio-night{
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUxMiAyMDkuNDAzMjQxYy0yMDEuNzMxNTE0IDAtMzc0LjAwOTIwNiAxMjUuNDc2NzgzLTQ0My44MDg5MjIgMzAyLjU5Njc1OSA2OS43OTg2OTIgMTc3LjExOTk3NyAyNDIuMDc3NDA4IDMwMi41OTY3NTkgNDQzLjgwODkyMiAzMDIuNTk2NzU5IDIwMS45MzMxMDUgMCAzNzQuMDEwMjI5LTEyNS40NzY3ODMgNDQzLjgwODkyMi0zMDIuNTk2NzU5Qzg4Ni4wMDkyMDYgMzM0Ljg4MDAyMyA3MTMuOTMzMTA1IDIwOS40MDMyNDEgNTEyIDIwOS40MDMyNDF6TTUxMiA3MTMuNzMxNTE0Yy0xMTEuMzU1MTU3IDAtMjAxLjczMTUxNC05MC4zNzUzMzQtMjAxLjczMTUxNC0yMDEuNzMxNTE0czkwLjM3NTMzNC0yMDEuNzMxNTE0IDIwMS43MzE1MTQtMjAxLjczMTUxNCAyMDEuNzMxNTE0IDkwLjM3NTMzNCAyMDEuNzMxNTE0IDIwMS43MzE1MTRTNjIzLjM1NTE1NyA3MTMuNzMxNTE0IDUxMiA3MTMuNzMxNTE0ek01MTIgMzkwLjk2MTI5NmMtNjYuNzcyNzc2IDAtMTIxLjAzODcwNCA1NC4yNjU5MjgtMTIxLjAzODcwNCAxMjEuMDM4NzA0czU0LjI2NTkyOCAxMjEuMDM4NzA0IDEyMS4wMzg3MDQgMTIxLjAzODcwNCAxMjEuMDM4NzA0LTU0LjI2NTkyOCAxMjEuMDM4NzA0LTEyMS4wMzg3MDRTNTc4Ljc3Mjc3NiAzOTAuOTYxMjk2IDUxMiAzOTAuOTYxMjk2eiI+PC9wYXRoPjwvc3ZnPg==);
+}
+.pio-container .pio-dialog{
     top: -2em;
     left: 1em;
     right: 1em;
@@ -69,7 +73,7 @@
     border: 1px solid #eee;
     transition: opacity .3s, visibility .3s;
 }
-.pio-container .dialog.active{
+.pio-container .pio-dialog.active{
     opacity: 1;
     visibility: visible;
 }
@@ -79,5 +83,5 @@
 @media screen and (max-width: 768px){
     #pio{ width: 8em }
     .pio-container{ pointer-events: none }
-    .pio-container.hidden, .pio-container .action-menu, .pio-container .dialog{ display: none }
+    .pio-container.hidden, .pio-action, .pio-dialog{ display: none }
 }