121 lines
3.5 KiB
JavaScript
121 lines
3.5 KiB
JavaScript
const ce = React.createElement;
|
|
const nbsp = '\u00a0';
|
|
|
|
// -- Functions -- //
|
|
|
|
function loadScript(url, fnLoad, fnError) {
|
|
const script = document.createElement("script");
|
|
script.src = url;
|
|
script.onload = fnLoad;
|
|
script.onerror = fnError;
|
|
document.body.appendChild(script);
|
|
}
|
|
|
|
function loadStyle(url, fnLoad, fnError) {
|
|
const style = document.createElement("link");
|
|
style.rel = "stylesheet";
|
|
style.href = url;
|
|
style.onload = fnLoad;
|
|
style.onerror = fnError;
|
|
document.body.appendChild(style);
|
|
}
|
|
|
|
// -- Bootstrap -- //
|
|
|
|
var MainMenuItem = React.createClass({
|
|
render: function(){
|
|
var liActive = {};
|
|
var aText = this.props.title;
|
|
|
|
if (this.props.active) {
|
|
liActive = {className: 'active'};
|
|
aText = [ce('span', {className: 'glyphicon glyphicon-menu-right'}), ' ', this.props.title];
|
|
}
|
|
|
|
return(
|
|
ce('li', liActive, ce('a', {href: this.props.href}, aText))
|
|
)
|
|
}
|
|
});
|
|
|
|
var Navbar = React.createClass({
|
|
render: function(){return(
|
|
ce('nav', {className: 'navbar navbar-default navbar-fixed-top'},
|
|
ce('div', {className: 'container'},
|
|
ce('div', {className: 'navbar-header'},
|
|
ce('button', {
|
|
type: 'button',
|
|
className: 'navbar-toggle collapsed',
|
|
'data-toggle': 'collapse',
|
|
'data-target': '#bs-example-navbar-collapse-1',
|
|
'aria-expanded': 'false'
|
|
},
|
|
ce('span', {className: 'icon-bar'}),
|
|
ce('span', {className: 'icon-bar'}),
|
|
ce('span', {className: 'icon-bar'})
|
|
),
|
|
ce('a', {className: 'navbar-brand', href: '#'}, ce('b', null, 'ASys'), '://')
|
|
),
|
|
ce('div', {className: 'collapse navbar-collapse', id: 'bs-example-navbar-collapse-1'},
|
|
ce('ul', {className: 'nav navbar-nav'}, this.props.items)
|
|
)
|
|
)
|
|
)
|
|
)}
|
|
});
|
|
|
|
var Panel = React.createClass({
|
|
render: function(){
|
|
var colored = 'default';
|
|
if (this.props.colored) {
|
|
colored = this.props.colored;
|
|
}
|
|
|
|
var elements = [ce('div', {className: 'panel-body'}, this.props.children)];
|
|
if (this.props.title) {
|
|
elements.unshift(ce('div', {className: 'panel-heading'}, this.props.title));
|
|
}
|
|
|
|
return(
|
|
ce('div', {className: 'panel panel-'+colored}, elements)
|
|
)
|
|
}
|
|
});
|
|
|
|
var Button = React.createClass({
|
|
render: function(){
|
|
var colored = 'default';
|
|
var btnSize = '';
|
|
|
|
if (this.props.colored) {
|
|
colored = this.props.colored;
|
|
}
|
|
if (this.props.btnSize) {
|
|
btnSize = 'btn-'+this.props.btnSize;
|
|
}
|
|
|
|
return (
|
|
ce('button', {className: 'btn btn-'+colored+' '+btnSize,
|
|
onClick: this.props.onClick},
|
|
this.props.children)
|
|
)
|
|
}
|
|
});
|
|
|
|
var Checkbox = React.createClass({
|
|
render: function(){
|
|
return (ce('div', {className: 'checkbox '+this.props.className},
|
|
ce('input', {type: 'checkbox', id: this.props.id, defaultChecked: false}),
|
|
ce('label', {htmlFor: this.props.id}, this.props.children)
|
|
))
|
|
}
|
|
});
|
|
|
|
// -- Разное -- //
|
|
|
|
var ContentModule = React.createClass({
|
|
render:function(){return(
|
|
ce(Panel, null, 'no module content')
|
|
)}
|
|
});
|