index.js

国内开发的javascript框架应用。龙博javascript。

                .setLeft(4)
                .setTop(155)
                .setWidth(91)
                .setHeight(385)
            );

            host.paneDemo.append((new linb.UI.Stacks)
                .host(host,"stack")
                .setItems([{"id":"files", "caption":"$app.caption.upload_short"}, {"id":"demos", "caption":"$app.caption.demos_short"}])
                .setValue("demos")
            );

            host.stack.append((new linb.UI.IconList)
                .host(host,"ilDemo")
                .setDock("fill")
                .setSelMode("none")
                .setItemWidth(50)
                .setItemHeight(38)
                .onItemSelected("_ildemo_onitemselected")
            , 'demos');

            host.stack.append((new linb.UI.IconList)
                .host(host,"ilPhoto")
                .setDock("fill")
                .setSelMode("none")
                .setItemWidth(50)
                .setItemHeight(38)
                .onItemSelected("_ilphoto_onitemselected")
            , 'files');

            append((new linb.UI.Button)
                .host(host,"btnUpload")
                .setLeft(7)
                .setTop(70)
                .setWidth(85)
                .setHeight(28)
                .setCaption("$app.caption.upload")
                .setVAlign("middle")
                .onClick("_btnupload_click")
            );

            append((new linb.UI.Button)
                .host(host,"btnSave")
                .setDomId("btnSave")
                .setLeft(7)
                .setTop(116)
                .setWidth(85)
                .setHeight(28)
                .setCaption("$app.caption.save")
                .setVAlign("middle")
                .onClick("_btnsave_click")
            );

            append((new linb.UI.ComboInput)
                .host(host,"iBGC")
                .setDomId("iBGC")
                .setLeft(4)
                .setTop(40)
                .setWidth(91)
                .setType("colorpicker")
                .afterUIValueSet("_btnbgc_onclick")
            );

            return children;
            // ]]code created by jsLinb UI Builder
        },
        _onRender:function(){
            linb.CSS.includeLink(linb.getPath('css','main.css','default/'));

            linb('imgBig').setSelectable(false);
            SPA.tabsCmds.fireItemClickEvent('basic');

            var rand=SPA.ilDemo.getItems()[parseInt(Math.random()*6)];
            SPA.ilDemo.fireItemClickEvent(rand.id);
            SPA.iBGC.setValue(linb('body').css('backgroundColor'));
        },
        _tb_onitemseltected:function(profile,item){
            linb('imgBig').onClick(null).attr({width:null,height:null});
            SPA.hideResizer();
            SPA.hideFrm();
            SPA.hideCrop();
            SPA.hideIcon();
            SPA.hideText();
            switch(SPA.curView=item.id){
                case 'resize':
                    SPA.showResizer();
                    break;
                case 'crop':
                    SPA.showCrop();
                    break;
                case 'text':
                    SPA.showText();
                    var hash=_.copy(SPA.paras);
                    hash.action='get_font_list';
                    SPA.request1(hash, function(rsp){
                        var items=[],f=function(o){return '<img src='+o.path+' alt='+o.caption+'>';}
                        _.each(rsp.data,function(o,i){
                            var path=CONF.basePath + 'font/' + o.preview;
                            items.push({id:i, _obj:o, caption:i, path:path, renderer:f});
                        });

                        //
                        SPA.divFont.getRoot().onMouseover(SPA._divfont_mover).onMouseout(SPA._divfont_mout);

                        SPA.$fontFamilies=items;
                        SPA.$fontFamily=items[0].caption;
                        SPA.AddText.getSubNode('INPUT').css('fontFamily',SPA.$fontFamily);
                        SPA.divFont.setHtml('<img style="border:solid 1px #ccc;cursor:pointer;" src='+items[0].path+' alt='+items[0].caption + '/>');
                    });

                    break;
                case 'frm':
                    if(!SPA.ilFrm){
                        SPA.ilFrm=new linb.UI.IconList({selMode:"none",position:'relative',width:'auto',height:'auto',itemWidth:16,itemHeight:16});
                        SPA.ilFrm.onItemSelected(function(profile,item){
                            if(profile.boxing().getStatus(item.id)=='loaded'){
                                SPA.showFrm(item.image);
                                SPA.$frmId=item.id;
                            }else
                                delete SPA.$frmId;
                        });
                        profile.boxing().append(SPA.ilFrm,'frm');
                        var hash=_.copy(SPA.paras);
                        hash.action='get_modern_list';
                        SPA.request1(hash, function(rsp){
                            var items=[];
                            _.each(rsp.data,function(o,i){
                                var path=CONF.basePath + 'template/modern/' + o.filename;
                                items.push({id:i, _obj:o, image: path, transTips:true, tips:'<img border=0 height=300 src='+path+'>'});
                            });
                            SPA.ilFrm.setItems(items);
                        });
                    }
                    break;
                case 'frm2':
                    if(!SPA.ilFrm2){
                        SPA.ilFrm2=new linb.UI.IconList({selMode:"none",position:'relative',width:'auto',height:'auto',itemWidth:16,itemHeight:16});
                        SPA.ilFrm2.onItemSelected(function(profile,item){
                            if(profile.boxing().getStatus(item.id)=='loaded'){
                                SPA.showIcon(item.image);
                                SPA.$iconId=item.id;
                            }else
                                delete SPA.$iconId;
                        });
                        profile.boxing().append(SPA.ilFrm2,'frm2');
                        var hash=_.copy(SPA.paras);
                        hash.action='get_avatar_list';
                        SPA.request1(hash, function(rsp){
                            var items=[];
                            _.each(rsp.data,function(o,i){
                                var path=CONF.basePath + 'template/avatar/' + o.filename;
                                items.push({id:i, _obj:o, image: path,transTips:true, tips:'<img border=0 height=100 src='+path+'>'});
                            });
                            SPA.ilFrm2.setItems(items);
                        });
                    }
                    break;
            }
        },
        _linklangen_onclick:function (profile, e) {
            linb.setLang('en');
            linb.Cookies.set('lang','en');
        },
        _linklangcn_onclick:function (profile, e) {
            linb.setLang('cn');
            linb.Cookies.set('lang','cn');
        },
        _onready:function () {
            SPA=this;

            var getPhotos=function(ses){
                SPA.request1({action:'listphotos',sessionname:ses},function(rsp){
                    if(rsp.data.length>0)
                        SPA.stack.setValue('files',true);
                    SPA.ilPhoto.setItems(rsp.data);
                });
            };

            //get session
            var ses=linb.Cookies.get('csession');
            if(!ses)
                SPA.request1({action:'getsession'},function(rsp){
                    linb.Cookies.set('csession', SPA.paras.sessionname=rsp.data);
                    getPhotos(SPA.paras.sessionname);
                });
            else
                getPhotos(SPA.paras.sessionname=ses);

            //set com factory profile
            linb.ComFactory.setProfile(CONF.ComFactoryProfile).prepareComs(_.toArr(CONF.ComFactoryProfile,true));

            //set demos first
            var path=CONF.basePath+CONF.workingPath+'demos/';
            var items=[{id:'1',big:path+'1.jpg',image:path+"1s.jpg"},{id:'2',big:path+'2.jpg',image:path+"2s.jpg"},{id:'3',big:path+'3.jpg',image:path+"3s.jpg"},{id:'4',big:path+'4.jpg',image:path+"4s.jpg"},{id:'5',big:path+'/5.jpg',image:path+"5s.jpg"},{id:'6',big:path+'6.jpg',image:path+"6s.jpg"},{id:'7',big:path+'7.jpg',image:path+"7s.jpg"}];
            SPA.ilDemo.setItems(items);

            //bottom info
            SPA.paneBottom.setHtml(linb.wrapRes('app.info'));

            //font size
            var fontItems=[];
            _.arr.each([6,8,10,12,14,16,18,24,32,48],function(o){
                fontItems.push({id:''+o,caption:'<div style="font-size:'+o+'px">'+o+'px</div>'});
            });
            SPA.ciFontSize.setItems(fontItems);

        },

        _iniSome:function(){
            SPA.hideFrm();
           // SPA.tabsCmds.fireItemClickEvent('basice',true);
        },
        _il_onitemseletcted:function(profile, item, src){
            var il=profile.boxing();
            SPA.paras = _.copy(item._obj);
            SPA.imgBig.setSrc(SPA.getPath(SPA.paras));

            SPA._iniSome();
        },
        _ildemo_onitemselected:function (profile, item, src) {
            if(SPA.$curID!=item.id){
                SPA.$curID=item.id;
                SPA.vInfo.setHtml(linb.wrapRes('$app.caption.demos') + ' : ' + item.id+'.jpg');

                SPA.imgBig.setSrc(item.big);
                _.merge(SPA.paras,{
                    origin : "demos",
                    tag : "",
                    filename : item.id,
                    fileext :'jpg'

                },'all');

                SPA._iniSome();
            }
        },
        _ilphoto_onitemselected:function (profile, item, src) {
            if(SPA.$curID!=item.id){
                SPA.$curID=item.id;
                SPA.vInfo.setHtml(linb.wrapRes('$app.caption.upload') + ' : ' + item.id+'.'+item.ext);

                SPA.imgBig.setSrc(item.big);
                _.merge(SPA.paras,{
                    origin : "upload",
                    tag : "",
                    filename : item.id,
                    fileext :item.ext
                },'all');

                SPA._iniSome();
            }
        },

        _imgbig_beforeload:function (profile) {
            _.resetRun('$changCon',function(){
                SPA.vInfo2.setHtml('<image src="img/loading.gif"/>');
                _.resetRun('$imgvisible',function(){SPA.imgBig.setDisplay('none')});
            });
        },
        _imgbig_afterload:function (profile, path, width, height) {
            _.resetRun('$changCon',function(){
                SPA.vInfo2.setHtml(linb.wrapRes('app.caption.width') + ' <span class="val-size">'+width + '</span><span style="width:10px;"></span>' + linb.wrapRes('app.caption.height') + ' <span class="val-size">' + height+'</span>');
            });
            _.resetRun('$imgvisible',function(){SPA.imgBig.setDisplay('')});
            SPA.$width=width;
            SPA.$height=height;
        },
        _imgbig_onerror:function (profile) {
            SPA.vInfo2.setHtml('<image src="img/error.gif"/>'+linb.wrapRes('app.imageErr'));
        },
        _btnbgc_onclick:function (profile, o, value) {
            linb.doc.query('html').css('backgroundColor',value);
        },
        _btnbgfrm_onclick:function (profile, o, value) {
            if(SPA.frm && SPA.$frmId){
                SPA.frm.css('background',value);
                SPA.$frmBg=value.slice(1);
            }
        },

        showResizer:function(){
            var resizer;
            if(!(resizer=SPA.resizer)){
                resizer=SPA.resizer=linb.create('div').css({zIndex:1001,position:'absolute'});
                resizer.addResizer({
                    forceVisible : true,
                    minHeight : 50,
                    minWidth : 50,
                    maxWidth : 800,
                    maxHeight : 800,
                    handlerSize : 8
                },function(profile,target){
                    var size=profile.proxy.cssSize();
                    target.cssSize(size);
                    linb('imgBig').attr('width',size.width).attr('height',size.height);

                });
                linb('panePic').append(resizer);
            }
            resizer.cssPos(linb('imgBig').offset(null,linb('panePic'))).cssSize(linb('imgBig').cssSize());
        },
        hideResizer:function(){
            if(SPA.resizer) SPA.resizer.hide();
        },
        showIcon:function(url){
            var icon;
            if(!(icon=SPA.icon)){
                icon=SPA.icon=linb.create('div').css({zIndex:1001,left:0,top:0,width:'100px',height:'100px',position:'absolute',border:'solid 1px #00ff00'});
                icon.append(linb.create('img'));
                icon.addResizer({
                    forceVisible : true,
                    forceMovable : true,
                    minHeight : 10,
                    minWidth : 10,
                    maxWidth : 800,
                    maxHeight : 800,
                    handlerSize : 6
                },function(profile,target,size,pos){
                    profile.box.onUpdate(profile,target,size,pos);
                    icon.first().cssSize(target.cssSize());
                });
                linb('panePic').append(icon);
            }
            icon.first().css({width:'auto',height:'auto'}).attr('src',url)
            icon.cssRegion({left:0,top:0,width:icon.first().attr('width'),height:icon.first().attr('height')});
            if(linb.browser.ie6)
                icon.first().fixPng('scale');
        },
        hideIcon:function(){
            delete SPA.$iconId;
            if(SPA.icon) SPA.icon.hide();
        },
        showFrm:function(url){
            var frm;
            if(!(frm=SPA.frm)){
                var img1,img2;
                frm=SPA.frm=linb.create('div').css({cursor:'move',zIndex:1001,left:0,top:0,position:'relative',overflow:'hidden'});
                frm.append(img1=linb.create('img'));
                frm.append(img2=linb.create('img'));
                linb('panePic').append(frm);

                img1.css({position:'absolute',left:0,top:0,zIndex:1});
                img2.css({position:'absolute',left:0,top:0,zIndex:2});

                frm._left=frm._top=0;
                frm.onMousedown(function(p,e,s){
                    linb([this]).startDrag(e,{
                        dragType:'none'
                    })
                }).onDrag(function(p,e,s){
                    var pro=linb.DragDrop.getProfile();
                    img1.left(frm.$left+pro.offset.x)
                        .top(frm.$top+pro.offset.y);
                }).onDragstop(function(p,e,s){
                    frm.$left=img1.left();
                    frm.$top=img1.top();
                });
                SPA.imgBig.setDisplay('none');
            }

            //reset position
            frm.$left=frm.$top=0;
            frm.first().cssPos({left:0,top:0});

            //set background image size
            frm.last().cssSize({width:'auto',height:'auto'}).attr('src',url);
            var size={width:frm.last().attr('width'),height:frm.last().attr('height')};
            if(linb.browser.ie6)
                frm.last().fixPng('scale');

            frm.first().attr('src',linb('imgBig').attr('src'));

            //background
            var value=SPA.iBGFrm.getUIValue();
            SPA.frm.css('background',value);
            SPA.$frmBg=value.slice(1);
            frm.cssSize(size).cssPos({left:0,top:0});

            //hide the original one
            _.resetRun('$imgvisible',function(){SPA.imgBig.setDisplay('none')});