operation-utils

operation-utils

operation-utils module is a basic module for operation needs .

Because of usage of dom operation , this module could be used normally .

---

Modules

1 TopMessage

Use Pattern :

    TopMessage(<options>).pushMessage(messageString , <typeName>) 

TopMessage would offer light message prompt from top ,
which contains info 、success、error and warning topics .

At the same time , you could define personal options to reset 
the style of each component and running time .

You could use like these : 

How to use

    import { TopMessage } from "operation-fun" ;
    let tm = TopMessage({ 
        closeTime : 1500 , 
        messageIcon : { style : {} } ,
        messageConstructor : { style : {} }
    }) ;
    tm.pushMessage("info" , "info") ;
    tm.pushMessage("success" , "success") ;
    tm.pushMessage("error" , "error") ;
    tm.pushMessage("warning" , "warning") ;

---

2 RightMessage

Use Pattern :

    RightMessage(<options>).pushMessage(title , message , <link> , <target>) ;

RightMessage could offer you some notice from right way .

How to use

    import { RightMessage } from "operation-utils" ;
    let rm = RightMessage({
        autoClose : true ,
        closeTime : 3000 ,
        titleContainer : { style : {} } ,
        itemContainer : { style : {} }
    }) ;
    rm.pushMessage("Topic" , "Please notice your message from this way." , "//www.baidu.com" , "_blank") ;

---

3 ScrollIds

Use Pattern

    ScrollIds(<option>).setScrollMessage(domIdSelector , list)

ScrollIds module would offer a vertical scolling infos .
Through setting option , you could reset style 、 running time and 
icon render function .

If you want to clear scroll container , you could use clearScroll 
function to do it .

How To Use

    import { RightMessage } from "operation-utils" ;
    let sl = ScrollIds({
        scrollTime : 2000 ,
        renderIcon : function(){} ,
        height : "30px" ,
        width : "150px" ,
        mainContainer : { style }
    }) ;
    let list = [{text : "message one"} , {text : "message two"}] ;
    sl.setScrollMessage("my-scroll" , list) ;
    setTimeout(() => {
        sl.clearScroll("my-scroll") ;
    } , 30000) ;

---

4 Toast

Use Pattern

    Toast(<option>).pushMessage(message) ;

Toast module offer a light message notice . 
Through option , you could set closeTime and wether to show backgroud .

But remeber , you could only push one message in 4000 ms .

How To Use

    import { Toast } from "operation-utils" ;
    let ts = Toast({
        closeTime : 3000 ,
        showBackground : true ,
        backgroundContainer : { style : {} } ,
        contentContainer : { style : {} }
    }) ;
    ts.pushMessage("网络错误") ;

---

5 BottomBanner

Use Pattern

    BottomBanner(<option>)setBottomBanner(<setting>) ;

BottomBanner would offer you a bottom banner transfor .
You could use options.defaultActive to control the default controller ,
and this option could only be main or sub .

But remeber , i assumed that you would only has one bttom banner 
in one page .

How To Use

    import { BottomBanner } from "operation-utils" ;
    let bb = BottomBanner({
        mainLink : "" , // main img link 
        subLink : "" ,	// sub controller link
        defaultActive : "main"
    }) ;
    bb.setBottomBanner({
        jumpLink : "//www.baidu.com" ,
        jumpTarge : "_blank"
    }) ;

---

6 Banner (plan)

LINCESE

MIT