React Bootstrap 3.3.4
Posted: Sat Apr 11, 2015 3:15 pm
Code: Select all
; ******************************
; Plugins
; ******************************
Macro InitPlugins(IsInitialized=#True) ; internal functions
CompilerIf IsInitialized
!"undefined"==typeof window.SpiderPlugins&&(window.SpiderPlugins={extensions:{},paths:{},names:[]})
CompilerElse
!window.SpiderPlugins={extensions:{},paths:{},names:[]};
CompilerEndIf
EndMacro
Procedure DeclarePluginResource(Resource.s)
InitPlugins()
!,window.SpiderPlugins.names.push(v_resource)
EndProcedure
Procedure DeclarePlugin(Plugin.s, Path.s, IsUsed=#True)
InitPlugins()
!,window.SpiderPlugins.paths[v_plugin]=v_path
!,v_isused && window.SpiderPlugins.names.push(v_plugin);
EndProcedure
Procedure UsePlugins(*FunctionUsingPlugins, EnforceDefine=#False)
!var cfg=$.extend({ enforceDefine: v_enforcedefine, paths: window.SpiderPlugins.paths }, window.SpiderPlugins.extensions);
!requirejs.config(cfg);
!require(window.SpiderPlugins.names, p_functionusingplugins);
InitPlugins(#False)
EndProcedure
Procedure DeclareHeaderCSS(css.s)
!$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', v_css) );
EndProcedure
CompilerIf #PB_Compiler_IsMainFile
; *************************
; EXAMPLE - REACT plugin
; *************************
Procedure InitReact(React, JSXTransformer, ReactBootstrap)
!React = v_react;
!JSXTransformer = v_jsxtransformer;
!ReactBootstrap = v_reactbootstrap;
!$.extend(window,v_reactbootstrap);// fix component namespaces: ReactBootstrap.Grid => window.Grid
EndProcedure
Procedure RenderReactComponent(CodeJSX.s, Target.s="document.body")
Protected jsx.s="React.render( "+CodeJSX+", "+Target+" );"
!JSXTransformer.exec(v_jsx);
EndProcedure
Procedure CreateReactBootstrap(React, JSXTransformer, ReactBootstrap)
InitReact(React, JSXTransformer, ReactBootstrap)
Global Title.s="Menu"
RenderReactComponent("<Grid fluid>"+
#LF$+"<PageHeader><OverlayTrigger placement='bottom' overlay={<Tooltip bsStyle='success'><strong>A new basic</strong> for web development.</Tooltip>}>"+
#LF$+"<span>Spiderbasic <small>Web Application</small></span>"+
#LF$+"</OverlayTrigger></PageHeader>"+
#LF$+"<Col md={2}>"+
#LF$+" <ListGroup>"+
#LF$+" <ListGroupItem href='#link1' disabled>Info</ListGroupItem>"+
#LF$+" <ListGroupItem href='#link1'>…</ListGroupItem>"+
#LF$+" <ListGroupItem href='#link1'>…</ListGroupItem>"+
#LF$+" <ListGroupItem href='#link1' header={<span><Glyphicon glyph='play-circle' /> Projects</span>}>Some code samples<Badge pullRight >20</Badge></ListGroupItem>"+
#LF$+" <ListGroupItem href='#link1' header={<span><Glyphicon glyph='book'/> Documents</span>}>Some tutorials<Badge pullRight >42</Badge></ListGroupItem>"+
#LF$+" </ListGroup>"+
#LF$+" <ProgressBar now={60} active label='%(percent)s%' />"+
#LF$+" <Label bsStyle='success'>ReactJS</Label> <Label bsStyle='warning'>Bootstrap</Label> "+
#LF$+" <p><TabbedArea defaultActiveKey={2}>"+
#LF$+" <TabPane eventKey={1} tab='Reviews'><p><Well bsSize='small'>Some comments …!</Well></p></TabPane>"+
#LF$+" <TabPane eventKey={2} tab='Stats'>"+
#LF$+" <Table hover condensed >"+
#LF$+" <thead>"+
#LF$+" <tr><th>#</th><th>File</th><th>Downloads</th></tr>"+
#LF$+" </thead>"+
#LF$+" <tbody>"+
#LF$+" <tr><td>1</td><td>Gadgets</td><td>110</td></tr>"+
#LF$+" <tr><td>2</td><td>Games</td><td>57<Glyphicon glyph='arrow-down' style={{color: 'red'}} /></td></tr>"+
#LF$+" <tr><td>3</td><td>3D</td><td>200<Glyphicon glyph='arrow-up' style={{color:'green'}} /></td></tr>"+
#LF$+" </tbody>"+
#LF$+" </Table>"+
#LF$+" </TabPane>"+
#LF$+" </TabbedArea></p>"+
#LF$+"</Col>"+
#LF$+"<Col md={10}>"+
#LF$+" <Panel header={v_title} bsStyle='primary'>"+
#LF$+" <ButtonGroup bsSize='large'>"+
#LF$+" <Button>Home</Button>"+
#LF$+" <Button>Showcase</Button>"+
#LF$+" <Button>About</Button>"+
#LF$+" <Button bsStyle='danger' >Exit</Button>"+
#LF$+" </ButtonGroup>"+
#LF$+" </Panel>"+
#LF$+" <Jumbotron>"+
#LF$+" <h1>Hello, world!</h1>"+
#LF$+" <p>This is a demo using Bootstrap 3.3.4 and ReactJS 0.13</p>"+
#LF$+" <p><OverlayTrigger trigger='click' placement='top' overlay={<Popover title='More Info'><strong>Coming soon!</strong> Description here.</Popover>}>"+
#LF$+" <Button bsStyle='primary'>Learn more</Button>"+
#LF$+" </OverlayTrigger></p>"+
#LF$+" </Jumbotron>"+
#LF$+"</Col>"+
#LF$+"</Grid>"); // #LF$ are mandatory
EndProcedure
DeclareHeaderCSS("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css");
DeclareHeaderCSS("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.min.css"); //bootstrap default theme can be removed, replaced or customized
DeclarePlugin("react","//cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react")
DeclarePlugin("JSXTransformer","//cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer")
DeclarePlugin("react-bootstrap","//rawgit.com/react-bootstrap/react-bootstrap-bower/master/react-bootstrap.min")
UsePlugins(@CreateReactBootstrap())
CompilerEndIf