onlineEditor | 更新日志 2017年1月

私人用途，沒有發(fā)布到任何專題，偶然看到的那幾位朋友直接忽略就可以了

[新增] dialog組件

dialog-alert
  • 自適應(yīng)布局
  • 動畫效果
  • 參數(shù)容錯機(jī)制(默認(rèn)參數(shù)與重要參數(shù)缺失提示)
  • 多行內(nèi)容輸出
  • 可選樣式

可選樣式包括：danger | warning | info | primary | success

  • 相比原來的多模板類的原型設(shè)計(jì)，dialog的模板方法使用返回對象的方式更干凈簡單
  • 極限高度限制

警示：Congratulations on the success of calling this plugin, but you forgot the necessary content!
沒有傳遞內(nèi)容主體

[追加] SCSS顏色

onlineEditor/css/var/_color.scss

新增單獨(dú)的bootstrap顏色設(shè)置

$globalColorBsDanger: #d75452;
$globalColorBsWarning: #eeac57;
$globalColorBsInfo: #3ab0d3;
$globalColorBsPrimary: #377bb5;
$globalColorBsSuccess: #5fb760;

新增btn-default類，為淡灰色背景深色文字顏色

[新增] dialog組件

dialog-alert

單字符串參數(shù)API，無需其他參數(shù)，默認(rèn)為alert類型，primary樣式

// 測試一個字符串參數(shù)
new dialog('your text here');

[新增] view組件

新參數(shù) autoHideToolBar

默認(rèn)值 true

實(shí)例化view的時候使用autoHideToolBar參數(shù)控制工具欄的自動隱藏功能開關(guān)

//關(guān)閉自動隱藏工具欄功能
var editorView = new view({
    autoHideToolBar: false
});

[新增] dialog組件

dialog-alert 新參數(shù) autoClose

默認(rèn)值 false

打開新的dialog時設(shè)置autoClose為true或者一個延時，可以讓這個dialog自動關(guān)閉

autoClose的值為true時，默認(rèn)延時為3000ms

// 打開自動關(guān)閉功能
new dialog({
    info:['hi'],
    autoClose: true
});
// 下面的寫法和上面相比是等效的
new dialog({
    info:['hi'],
    autoClose: 3000
});

警示：You have set the wrong delay closing parameters,Modal boxes will not be automatically closed!
沒有設(shè)置合法的延時參數(shù)

[新增] dialog組件

dialog-alert 參數(shù)info 更寬松的規(guī)則

之前為了可以支持多行內(nèi)容，info的值需要寫成這樣：

new dialog({
    info:['dialog','Hello','123']
});

但是大部分時間可能僅僅是需要一行內(nèi)容的顯示，那么就需要傳遞一個只有單個元素的數(shù)組

new dialog({
    info:['dialog']
});

本次改進(jìn)后，可以直接傳遞字符串或者數(shù)字作為主體內(nèi)容

new dialog('dialog');
new dialog(123456);

[新增] dialog組件

dialog-alert 自動關(guān)閉的動畫計(jì)時效果

打開自動關(guān)閉功能后，標(biāo)題部分會自動展現(xiàn)一個進(jìn)度條表示剩余進(jìn)度

這個進(jìn)度條是真實(shí)的，根據(jù)你設(shè)置的延時控制速度

[改進(jìn)] dialog組件

info 參數(shù)問題

在 “dialog-alert 參數(shù)info 更寬松的規(guī)則” 中，介紹了一次使 info 參數(shù)更自由的設(shè)計(jì)

之前的情況：

// 下面這兩種方式都是可以的
new dialog('dialog');
new dialog(123456);

// 下面的方式會發(fā)生錯誤
new  dialog({
    info: 'onlineEditor'
})

上面的情況在嵌套使用 dialog 時候尤其嚴(yán)重，但是現(xiàn)在經(jīng)過改進(jìn)可以正常使用了，無論哪種方式

[新增] dialog組件

dialog-confirm

通過 type: 'confirm' 調(diào)用，同時至少要傳遞一個按鈕標(biāo)題和對應(yīng)的回調(diào)函數(shù)
其它設(shè)置屬性和 type: 'alert' 相同，支持不同種類的 info 參數(shù)，以及自動關(guān)閉

confirm 類型的 dialog 可以和 alert 類型的互相嵌套調(diào)用

示例：

new dialog({
    type: 'confirm',
    info: 'OnlineEditor',
    action: [
        {
            title: 'btn1',
            fn: function () {
                console.log(1);
            }
        },{
            title: 'btn2',
            fn: function () {
                console.log(2);
            }
        }
    ]
});

嵌套示例：

new dialog({
    type: 'confirm',
    style: 'warning',
    info: '給你三個選項(xiàng)',
    action: [
        {
            title:'一句話',
            fn:function(){
                new dialog({
                    style: 'info',
                    autoClose: true,
                    info: 'helloWorld'
                });
            }
        },{
            title:'《玉階怨》',
            fn:function(){
                new dialog({
                    type: 'confirm',
                    autoClose: 12345,
                    info: ['玉階生白露，','夜久侵羅襪。','卻下水晶簾，','玲瓏望秋月。'],
                    action: [
                        {
                            title: '不好',
                            fn: function () {
                                new dialog({
                                    style: 'danger',
                                    autoClose: true,
                                    info: '再接再厲'
                                })
                            }
                        },{
                            title: '好詩!',
                            fn: function () {
                                new dialog({
                                    style: 'success',
                                    autoClose: true,
                                    info: 'thank you'
                                })
                            }
                        }
                    ]
                });
            }
        },{
            title:'ignore',
            fn:function(){
                new dialog({
                    autoClose: 1000,
                    info: '正在關(guān)閉...'
                })
            }
        }
    ]
});
演示(灰度)

[改進(jìn)] dialog組件

SCSS 抽象模塊化

dialog 組件所需要的 SCSS 文件拆分為

  • _dialog.scss
  • _dialog-public.scss
  • _dialog-alert.scss
  • _dialog-confirm.scss

_dialog.scss 為主要文件，_dialog-public.scss 內(nèi)包含組件共用設(shè)置參數(shù)以及通用CSS部件

所有的SCSS文件最后還是會被編譯為一個 style.css 文件并被引入到主頁

經(jīng)過這些處理后，alert 和 confirm 類型對應(yīng)的 SCSS 文件每個僅需30+行即可(并不代表最后編譯出的CSS也是30多行)，精簡的同時也保證了全局設(shè)置的方便

[改進(jìn)] 文字分割算法

優(yōu)化log輸出，方便測試

使用console的分組輸出，格式更明了

從此以后新的組件調(diào)試都會使用這樣的形式

[新增] toast組件

彈出自動消失的氣泡提示

調(diào)用方法：

new toast('Hello');

即可顯示一個自動消失的氣泡

可選參數(shù)：

  • info 顯示的主體內(nèi)容 string
  • position 位置 string | 'top' 'bottom'
  • closeDelay 關(guān)閉延時 number

示例：

new toast({
    position:'top',
    info: 'helloWorld'
});

效果：

position:'bottom'
position:'top'

你如果愿意的話可以同時在屏幕上實(shí)例化多個toast，它們是互相獨(dú)立的

[改進(jìn)] 文字分割算法調(diào)用

writeReplaceCheckLimit

解決在writeReplaceCheckLimit類型的按鈕按下時，觸發(fā)的斷句檢查算法由于傳值為空導(dǎo)致的錯誤

[新增] dialog組件

dialog-input

輸入框形式的dialog

調(diào)用方式：

new dialog({
    type:'input',
    title:'請輸入你的名字',
    info:'輸入名字進(jìn)行下一步',
    val:'李楊',
    fn0:function () {
        new toast('取消了')
    },
    fn1:function (val) {
        new toast('你輸入的是：'+val)
    }
})

同樣可以和其它類型的dialog互相調(diào)用，因?yàn)樵谠O(shè)計(jì)之中它們之間是方法共享數(shù)據(jù)獨(dú)立的

參數(shù)：

  • type = 'input'
  • title 顯示的標(biāo)題
  • info 輸入框的placeholder
  • val 默認(rèn)值
  • fn0 點(diǎn)擊"取消"后觸發(fā)的事件
  • fn1 點(diǎn)擊"確定"后觸發(fā)的事件

fn1對應(yīng)的函數(shù)可以接收一個參數(shù)，其值為用戶提交的內(nèi)容

調(diào)用演示

[改進(jìn)] modal組件

modal.scss

修改了輸入型modal的尺寸設(shè)置，盡量減少手機(jī)上彈出鍵盤遮擋的情況

[改進(jìn)] fastclick.js

調(diào)試優(yōu)化

修改了fastclick.js庫，解決了在PC調(diào)試時dialog-input的輸入框無法獲得焦點(diǎn)的問題

接下來要做什么

目前能想到的問題主要是文件讀取和保存的邏輯，計(jì)劃重寫local-data.js和loader.js，重新設(shè)計(jì)文件載入時的傳參規(guī)則和保存文件的邏輯。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容