私人用途晌该，沒有發(fā)布到任何專題，偶然看到的那幾位朋友直接忽略就可以了
[新增] dialog組件
dialog-alert
- 自適應(yīng)布局
- 動(dòng)畫效果
- 參數(shù)容錯(cuò)機(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樣式
// 測試一個(gè)字符串參數(shù)
new dialog('your text here');
[新增] view組件
新參數(shù) autoHideToolBar
默認(rèn)值 true
實(shí)例化view的時(shí)候使用autoHideToolBar參數(shù)控制工具欄的自動(dòng)隱藏功能開關(guān)
//關(guān)閉自動(dòng)隱藏工具欄功能
var editorView = new view({
autoHideToolBar: false
});
[新增] dialog組件
dialog-alert 新參數(shù) autoClose
默認(rèn)值 false
打開新的dialog時(shí)設(shè)置autoClose為true或者一個(gè)延時(shí)，可以讓這個(gè)dialog自動(dòng)關(guān)閉
autoClose的值為true時(shí)纳猪，默認(rèn)延時(shí)為3000ms
// 打開自動(dòng)關(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í)參數(shù)
[新增] dialog組件
dialog-alert 參數(shù)info 更寬松的規(guī)則
之前為了可以支持多行內(nèi)容氧卧，info的值需要寫成這樣：
new dialog({
info:['dialog','Hello','123']
});
但是大部分時(shí)間可能僅僅是需要一行內(nèi)容的顯示，那么就需要傳遞一個(gè)只有單個(gè)元素的數(shù)組
new dialog({
info:['dialog']
});
本次改進(jìn)后氏堤，可以直接傳遞字符串或者數(shù)字作為主體內(nèi)容
new dialog('dialog');
new dialog(123456);
[新增] dialog組件
dialog-alert 自動(dòng)關(guān)閉的動(dòng)畫計(jì)時(shí)效果
打開自動(dòng)關(guān)閉功能后沙绝，標(biāo)題部分會(huì)自動(dòng)展現(xiàn)一個(gè)進(jìn)度條表示剩余進(jìn)度
這個(gè)進(jìn)度條是真實(shí)的，根據(jù)你設(shè)置的延時(shí)控制速度
[改進(jìn)] dialog組件
info 參數(shù)問題
在 “dialog-alert 參數(shù)info 更寬松的規(guī)則” 中鼠锈，介紹了一次使 info 參數(shù)更自由的設(shè)計(jì)
之前的情況：
// 下面這兩種方式都是可以的
new dialog('dialog');
new dialog(123456);
// 下面的方式會(huì)發(fā)生錯(cuò)誤
new dialog({
info: 'onlineEditor'
})
上面的情況在嵌套使用 dialog 時(shí)候尤其嚴(yán)重闪檬，但是現(xiàn)在經(jīng)過改進(jìn)可以正常使用了，無論哪種方式
[新增] dialog組件
dialog-confirm
通過 type: 'confirm' 調(diào)用购笆，同時(shí)至少要傳遞一個(gè)按鈕標(biāo)題和對應(yīng)的回調(diào)函數(shù)
其它設(shè)置屬性和 type: 'alert' 相同谬以，支持不同種類的 info 參數(shù)，以及自動(dòng)關(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: '給你三個(gè)選項(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文件最后還是會(huì)被編譯為一個(gè) style.css 文件并被引入到主頁
經(jīng)過這些處理后，alert 和 confirm 類型對應(yīng)的 SCSS 文件每個(gè)僅需30+行即可(并不代表最后編譯出的CSS也是30多行)娃循，精簡的同時(shí)也保證了全局設(shè)置的方便
[改進(jìn)] 文字分割算法
優(yōu)化log輸出炕檩，方便測試
使用console的分組輸出，格式更明了
從此以后新的組件調(diào)試都會(huì)使用這樣的形式
[新增] toast組件
彈出自動(dòng)消失的氣泡提示
調(diào)用方法：
new toast('Hello');
即可顯示一個(gè)自動(dòng)消失的氣泡
可選參數(shù)：
- info 顯示的主體內(nèi)容 string
- position 位置 string | 'top' 'bottom'
- closeDelay 關(guān)閉延時(shí) number
示例：
new toast({
position:'top',
info: 'helloWorld'
});
效果：
你如果愿意的話可以同時(shí)在屏幕上實(shí)例化多個(gè)toast，它們是互相獨(dú)立的
[改進(jìn)] 文字分割算法調(diào)用
writeReplaceCheckLimit
解決在writeReplaceCheckLimit類型的按鈕按下時(shí)笛质，觸發(fā)的斷句檢查算法由于傳值為空導(dǎo)致的錯(cuò)誤
[新增] 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ù)可以接收一個(gè)參數(shù)，其值為用戶提交的內(nèi)容
[改進(jìn)] modal組件
modal.scss
修改了輸入型modal的尺寸設(shè)置妇押，盡量減少手機(jī)上彈出鍵盤遮擋的情況
[改進(jìn)] fastclick.js
調(diào)試優(yōu)化
修改了fastclick.js庫跷究，解決了在PC調(diào)試時(shí)dialog-input的輸入框無法獲得焦點(diǎn)的問題
接下來要做什么
目前能想到的問題主要是文件讀取和保存的邏輯，計(jì)劃重寫local-data.js和loader.js敲霍，重新設(shè)計(jì)文件載入時(shí)的傳參規(guī)則和保存文件的邏輯俊马。
