804 lines
19 KiB
JavaScript
804 lines
19 KiB
JavaScript
var initReact;
|
||
|
||
initReact = function ($html, data = {}) {
|
||
var a, date, r, time;
|
||
time = new Date().getTime();
|
||
|
||
r = function (c, x) {
|
||
var i, j, len, ref, results;
|
||
ref = $html[0].querySelectorAll(c);
|
||
results = [];
|
||
|
||
for (j = 0, len = ref.length; j < len; j++) {
|
||
i = ref[j];
|
||
results.push(ReactDOM.render(x, i));
|
||
}
|
||
|
||
return results;
|
||
};
|
||
|
||
r('.r_portfolio_list', React.createElement(PortfolioList, {
|
||
data: data.portfolio_list
|
||
}));
|
||
r('.r_news_list', React.createElement(NewsAnnotationList, {
|
||
data: data.news_annotation
|
||
}));
|
||
r('.r_service_list', React.createElement(ServiceList, {
|
||
data: data.service_list
|
||
}));
|
||
r('.r_service_icons', React.createElement(ServiceIconsList, {
|
||
data: data.service_icons
|
||
})); // SERVICES
|
||
// MONEY
|
||
|
||
r('.r_money_dash.new', React.createElement(MoneyDash, {
|
||
type: "new"
|
||
}));
|
||
|
||
for (date in data.money_data) {
|
||
a = data.money_data[date];
|
||
|
||
if (a.minus != null) {
|
||
r('.r_money_minus[data-date="' + date + '"]', React.createElement(MoneyList, {
|
||
type: "minus",
|
||
data: a.minus
|
||
}));
|
||
}
|
||
|
||
if (a.plus != null) {
|
||
r('.r_money_plus[data-date="' + date + '"]', React.createElement(MoneyList, {
|
||
type: "plus",
|
||
data: a.plus
|
||
}));
|
||
}
|
||
|
||
if (a.transfer != null) {
|
||
r('.r_money_transfer[data-date="' + date + '"]', React.createElement(MoneyList, {
|
||
type: "transfer",
|
||
data: a.transfer
|
||
}));
|
||
}
|
||
}
|
||
|
||
return console.log('React Render', new Date().getTime() - time);
|
||
};
|
||
|
||
var NewsAnnotationList;
|
||
NewsAnnotationList = class NewsAnnotationList extends React.Component {
|
||
constructor(props) {
|
||
var data, i, j, len, ref;
|
||
super(props);
|
||
data = [];
|
||
ref = this.props.data;
|
||
|
||
for (j = 0, len = ref.length; j < len; j++) {
|
||
i = ref[j];
|
||
i.text = i.annotation;
|
||
i.ratio = '2-3';
|
||
i.column = 'c-25';
|
||
data.push(i);
|
||
}
|
||
|
||
this.state = {
|
||
data: data
|
||
};
|
||
}
|
||
|
||
render() {
|
||
var i;
|
||
|
||
if (this.state.data.length > 0) {
|
||
return React.createElement("div", null, React.createElement(Title, {
|
||
title: "НОВОСТИ",
|
||
more: "/news/",
|
||
more_text: "Смотреть все новости"
|
||
}), React.createElement("div", {
|
||
className: "dashes"
|
||
}, function () {
|
||
var j, len, ref, results;
|
||
ref = this.state.data;
|
||
results = [];
|
||
|
||
for (j = 0, len = ref.length; j < len; j++) {
|
||
i = ref[j];
|
||
results.push(React.createElement(NewsAnnotationDash, {
|
||
data: i
|
||
}));
|
||
}
|
||
|
||
return results;
|
||
}.call(this)));
|
||
} else {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
};
|
||
var PortfolioList;
|
||
PortfolioList = class PortfolioList extends React.Component {
|
||
constructor(props) {
|
||
var data, i, j, len, ref;
|
||
super(props);
|
||
data = [];
|
||
ref = this.props.data;
|
||
|
||
for (j = 0, len = ref.length; j < len; j++) {
|
||
i = ref[j];
|
||
i.text = i.annotation;
|
||
i.ratio = '2-3'; //i.height = 'medium'
|
||
|
||
i.column = 'c-1-3';
|
||
data.push(i);
|
||
}
|
||
|
||
this.state = {
|
||
data: data
|
||
};
|
||
}
|
||
|
||
render() {
|
||
var i;
|
||
|
||
if (this.state.data.length > 0) {
|
||
return React.createElement("div", null, React.createElement(Title, {
|
||
title: "ПОРТФОЛИО",
|
||
more: "/portfolio/",
|
||
more_text: "Смотреть все работы"
|
||
}), React.createElement("div", {
|
||
className: "dashes"
|
||
}, function () {
|
||
var j, len, ref, results;
|
||
ref = this.state.data;
|
||
results = [];
|
||
|
||
for (j = 0, len = ref.length; j < len; j++) {
|
||
i = ref[j];
|
||
results.push(React.createElement(PortfolioDash, {
|
||
data: i
|
||
}));
|
||
}
|
||
|
||
return results;
|
||
}.call(this)));
|
||
} else {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
};
|
||
var ServiceIconsList;
|
||
ServiceIconsList = class ServiceIconsList extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
data: props.data
|
||
};
|
||
}
|
||
|
||
render() {
|
||
var i, selected, url1, url2;
|
||
url1 = H.parse();
|
||
|
||
if (this.state.data.length > 0) {
|
||
return React.createElement("div", {
|
||
class: "apps"
|
||
}, function () {
|
||
var j, len, ref, results;
|
||
ref = this.state.data;
|
||
results = [];
|
||
|
||
for (j = 0, len = ref.length; j < len; j++) {
|
||
i = ref[j];
|
||
url2 = H.parse(i.link);
|
||
selected = url1[0] === url2[0] ? ' selected' : '';
|
||
results.push(React.createElement("a", {
|
||
className: "app" + selected,
|
||
href: i.link,
|
||
style: {
|
||
backgroundImage: 'url(' + i.icon + ')'
|
||
},
|
||
title: i.title
|
||
}));
|
||
}
|
||
|
||
return results;
|
||
}.call(this));
|
||
} else {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
};
|
||
var ServiceList;
|
||
ServiceList = class ServiceList extends React.Component {
|
||
constructor(props) {
|
||
var data, i, j, len, ref;
|
||
super(props);
|
||
data = [];
|
||
ref = this.props.data;
|
||
|
||
for (j = 0, len = ref.length; j < len; j++) {
|
||
i = ref[j];
|
||
i.text = i.annotation;
|
||
i.ratio = '2-3'; //i.height = 'small'
|
||
|
||
i.column = 'c-20';
|
||
data.push(i);
|
||
}
|
||
|
||
this.state = {
|
||
data: data
|
||
};
|
||
}
|
||
|
||
render() {
|
||
var i;
|
||
|
||
if (this.state.data.length > 0) {
|
||
return React.createElement("div", null, React.createElement(Title, {
|
||
title: "WEB-СЕРВИСЫ",
|
||
more: "/services/",
|
||
more_text: "Смотреть все проекты"
|
||
}), React.createElement("div", {
|
||
className: "dashes"
|
||
}, function () {
|
||
var j, len, ref, results;
|
||
ref = this.state.data;
|
||
results = [];
|
||
|
||
for (j = 0, len = ref.length; j < len; j++) {
|
||
i = ref[j];
|
||
results.push(React.createElement(PortfolioDash, {
|
||
data: i
|
||
}));
|
||
}
|
||
|
||
return results;
|
||
}.call(this)));
|
||
} else {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
};
|
||
var NewsAnnotationDash;
|
||
NewsAnnotationDash = class NewsAnnotationDash extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
}
|
||
|
||
render() {
|
||
return React.createElement(Dash, {
|
||
data: this.props.data
|
||
});
|
||
}
|
||
|
||
};
|
||
var PortfolioDash;
|
||
PortfolioDash = class PortfolioDash extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
}
|
||
|
||
render() {
|
||
return React.createElement(Dash, {
|
||
data: this.props.data
|
||
});
|
||
}
|
||
|
||
};
|
||
var BackgroundFocus;
|
||
BackgroundFocus = class BackgroundFocus extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
visible: props.visible != null ? props.visible : props.visible = false
|
||
};
|
||
}
|
||
|
||
componentWillReceiveProps(props) {
|
||
var visible;
|
||
return this.setState(({
|
||
visible
|
||
} = props));
|
||
}
|
||
|
||
render() {
|
||
return React.createElement("div", {
|
||
className: ["background_focus", this.state.visible ? 'show' : ''].join(" "),
|
||
onClick: this.props.onClick
|
||
});
|
||
}
|
||
|
||
};
|
||
var SelectSearch;
|
||
SelectSearch = class SelectSearch extends React.Component {
|
||
constructor(props) {
|
||
var canCreateNew, i, j, len, placeholder, ref, selected;
|
||
super(props);
|
||
({
|
||
placeholder,
|
||
canCreateNew
|
||
} = props);
|
||
selected = null;
|
||
this.data = props.data;
|
||
|
||
if (props.id != null) {
|
||
ref = this.data;
|
||
|
||
for (j = 0, len = ref.length; j < len; j++) {
|
||
i = ref[j];
|
||
|
||
if (i.id === props.id) {
|
||
selected = i;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
canCreateNew = props.canCreateNew != null ? props.canCreateNew : props.canCreateNew = false;
|
||
this.state = {
|
||
selected,
|
||
placeholder,
|
||
canCreateNew,
|
||
search: false,
|
||
selectedIndex: 0,
|
||
itemCount: 0
|
||
};
|
||
this.cancel = this.cancel.bind(this);
|
||
this.search = this.search.bind(this);
|
||
this.onKey = this.onKey.bind(this);
|
||
this.renderItem = this.renderItem.bind(this);
|
||
this.input = null;
|
||
}
|
||
|
||
cancel() {
|
||
this.setState({
|
||
search: false,
|
||
selected: null
|
||
});
|
||
|
||
if (this.input) {
|
||
return this.input.value = '';
|
||
}
|
||
}
|
||
|
||
getSelected() {
|
||
return this.state.selected;
|
||
}
|
||
|
||
search(e) {
|
||
var val;
|
||
|
||
if (e != null) {
|
||
switch (e.key) {
|
||
case "ArrowUp":
|
||
case "ArrowDown":
|
||
return false;
|
||
}
|
||
}
|
||
|
||
val = this.input.value;
|
||
|
||
if (val === '') {
|
||
val = false;
|
||
}
|
||
|
||
return this.setState({
|
||
search: val,
|
||
selectedIndex: 0
|
||
});
|
||
}
|
||
|
||
setValue(selected) {
|
||
if (selected.id === '-') {
|
||
selected = null;
|
||
return this.cancel();
|
||
} else {
|
||
return this.setState({
|
||
search: false,
|
||
selected
|
||
});
|
||
}
|
||
}
|
||
|
||
getNewItem() {
|
||
return {
|
||
id: 'new',
|
||
showTitle: 'Создать «' + this.state.search + '»',
|
||
title: this.state.search
|
||
};
|
||
}
|
||
|
||
onKey(e) {
|
||
switch (e.key) {
|
||
case "Escape":
|
||
return this.cancel();
|
||
|
||
case "Enter":
|
||
//this.setValue( this.getNewItem() )
|
||
return this.setValue(this.items[this.state.selectedIndex]);
|
||
|
||
case "ArrowUp":
|
||
e.preventDefault();
|
||
this.setState({
|
||
selectedIndex: Math.max(0, this.state.selectedIndex - 1)
|
||
});
|
||
return false;
|
||
|
||
case "ArrowDown":
|
||
e.preventDefault();
|
||
this.setState({
|
||
selectedIndex: Math.min(this.itemCount - 1, this.state.selectedIndex + 1)
|
||
});
|
||
return false;
|
||
}
|
||
}
|
||
|
||
renderItem(x, index = 0) {
|
||
var classes, res;
|
||
index = parseInt(index);
|
||
res = null;
|
||
|
||
if (x.title.toLowerCase().indexOf(this.state.search.toLowerCase()) > -1) {
|
||
classes = ["search_select_li", index === this.state.selectedIndex ? "selected" : ""].join(" ");
|
||
res = React.createElement("div", {
|
||
className: classes,
|
||
onClick: this.setValue.bind(this, x)
|
||
}, x.showTitle ? x.showTitle : x.title);
|
||
}
|
||
|
||
return res;
|
||
}
|
||
|
||
render() {
|
||
var c, canCreateNew, data, i, item, items, selected, x;
|
||
({
|
||
selected,
|
||
canCreateNew
|
||
} = this.state);
|
||
items = [];
|
||
this.items = [];
|
||
|
||
if (this.state.search) {
|
||
data = this.data;
|
||
|
||
if (typeof data === 'function') {
|
||
data = data();
|
||
}
|
||
|
||
if (Array.isArray(data)) {
|
||
for (i in data) {
|
||
x = data[i];
|
||
item = this.renderItem(x, this.items.length);
|
||
|
||
if (item) {
|
||
this.items.push(x);
|
||
items.push(item);
|
||
}
|
||
}
|
||
}
|
||
|
||
if (canCreateNew) {
|
||
c = this.getNewItem();
|
||
this.items.push(c);
|
||
items.push(this.renderItem(c, items.length));
|
||
}
|
||
|
||
this.itemCount = items.length;
|
||
} //if items.length == 0
|
||
// items.push this.renderItem({id:'-',title:'«'+this.state.search+'» Не найдено'} )
|
||
|
||
|
||
return React.createElement("div", {
|
||
className: ["select_search", this.state.search ? "focus" : ""].join(" "),
|
||
onKeyDown: this.onKey
|
||
}, React.createElement(BackgroundFocus, {
|
||
visible: this.state.search !== false,
|
||
onClick: this.cancel
|
||
}), React.createElement("div", {
|
||
className: "select_search_content"
|
||
}, selected != null ? React.createElement("div", null, selected.title, React.createElement("button", {
|
||
type: "button",
|
||
onClick: this.cancel
|
||
}, "x")) : React.createElement("input", {
|
||
onKeyUp: this.search,
|
||
ref: i => {
|
||
return this.input = i;
|
||
},
|
||
placeholder: this.state.placeholder
|
||
}), this.state.search ? React.createElement("div", {
|
||
className: ["select_search_elements"].join(" ")
|
||
}, items, items.length === 0 || canCreateNew && items.length === 1 ? React.createElement("div", {
|
||
class: "not_found"
|
||
}, 'Не найдено «' + this.state.search + '»') : null) : null));
|
||
}
|
||
|
||
};
|
||
var Title;
|
||
Title = class Title extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
}
|
||
|
||
render() {
|
||
var a, more_title, ref;
|
||
a = null;
|
||
|
||
if (this.props.more != null && this.props.more !== '') {
|
||
more_title = (ref = this.props.more_text) != null ? ref : "Смотреть всё";
|
||
a = React.createElement("a", {
|
||
href: this.props.more,
|
||
class: "more"
|
||
}, more_title);
|
||
}
|
||
|
||
return React.createElement("div", {
|
||
className: "h"
|
||
}, this.props.title, a);
|
||
}
|
||
|
||
};
|
||
var Dash;
|
||
Dash = class Dash extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
data: props.data
|
||
};
|
||
}
|
||
|
||
render() {
|
||
var column, data, link, ref;
|
||
data = this.state.data;
|
||
link = data.link;
|
||
column = (ref = data.column) != null ? ref : '';
|
||
return React.createElement("div", {
|
||
className: "dash " + column
|
||
}, React.createElement("div", {
|
||
className: "block white"
|
||
}, React.createElement(DashImage, {
|
||
image: data.image,
|
||
ratio: data.ratio,
|
||
height: data.height,
|
||
link: link
|
||
}), React.createElement("div", {
|
||
className: "body"
|
||
}, React.createElement("div", {
|
||
className: "cont"
|
||
}, React.createElement("div", {
|
||
className: "t"
|
||
}, React.createElement(DashTitle, {
|
||
title: data.title,
|
||
link: link
|
||
}), data.text != null && data.text !== '' ? React.createElement(DashText, {
|
||
text: data.text
|
||
}) : void 0)))));
|
||
}
|
||
|
||
};
|
||
var DashImage;
|
||
DashImage = class DashImage extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
}
|
||
|
||
render() {
|
||
var className, link, style;
|
||
className = ["img", this.props.ratio != null ? "pb-" + this.props.ratio : void 0, this.props.height != null ? " " + this.props.height : void 0].join(" ");
|
||
style = {
|
||
backgroundImage: 'url(' + this.props.image + ')'
|
||
};
|
||
link = this.props.link;
|
||
|
||
if (this.props.image != null) {
|
||
if (link != null) {
|
||
return React.createElement("a", {
|
||
href: link,
|
||
className: className,
|
||
style: style
|
||
});
|
||
} else {
|
||
return React.createElement("div", {
|
||
className: className,
|
||
style: style
|
||
});
|
||
}
|
||
} else {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
};
|
||
var DashText;
|
||
DashText = class DashText extends React.Component {
|
||
render() {
|
||
var x;
|
||
x = {
|
||
__html: this.props.text
|
||
};
|
||
return React.createElement("div", {
|
||
className: "sub_color mt-10",
|
||
dangerouslySetInnerHTML: x
|
||
});
|
||
}
|
||
|
||
};
|
||
var DashTitle;
|
||
DashTitle = class DashTitle extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
}
|
||
|
||
render() {
|
||
var link, title;
|
||
title = this.props.title;
|
||
link = this.props.link;
|
||
|
||
if (link) {
|
||
title = React.createElement("a", {
|
||
href: link
|
||
}, title);
|
||
}
|
||
|
||
return React.createElement("div", {
|
||
className: "h1 mb0"
|
||
}, title);
|
||
}
|
||
|
||
};
|
||
var MoneyDash;
|
||
MoneyDash = class MoneyDash extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
type: props.type != null ? props.type : props.type = 'new',
|
||
data: props.data != null ? props.data : props.data = {}
|
||
};
|
||
}
|
||
|
||
render() {
|
||
var data, type;
|
||
type = this.state.type;
|
||
data = this.state.data;
|
||
return React.createElement("div", {
|
||
className: ["money_dash", type].join(" ")
|
||
}, type === 'new' ? React.createElement(MoneyFastForm, null) : React.createElement("div", null, React.createElement("div", {
|
||
className: "title"
|
||
}, React.createElement("div", {
|
||
className: "cat"
|
||
}, "\u0417\u0430\u0440\u043F\u043B\u0430\u0442\u0430"), React.createElement("div", {
|
||
className: "value"
|
||
}, "120000")), React.createElement("div", {
|
||
className: "info"
|
||
}, React.createElement("div", {
|
||
className: "subcat"
|
||
}, "IT-\u043E\u0442\u0434\u0435\u043B"), React.createElement("div", {
|
||
className: "comment"
|
||
}, "\u041A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u0439"))));
|
||
}
|
||
|
||
};
|
||
var MoneyFastForm;
|
||
MoneyFastForm = class MoneyFastForm extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
expand: false,
|
||
values: {}
|
||
};
|
||
this.cat = null;
|
||
this.value = null;
|
||
this.comment = null;
|
||
this.checkExpand = this.checkExpand.bind(this);
|
||
this.setValue = this.setValue.bind(this);
|
||
this.cancel = this.cancel.bind(this);
|
||
}
|
||
|
||
setValue(e) {
|
||
var t, v;
|
||
t = e.target;
|
||
v = this.state.values;
|
||
v[t.getAttribute('name')] = t.value;
|
||
this.setState({
|
||
values: v
|
||
});
|
||
return this.checkExpand();
|
||
}
|
||
|
||
checkExpand() {
|
||
var c, expand, isCat, isComment, isValue; //isCat = (this.cat == document.activeElement || (c = this.state.values.cat)? && c!='')
|
||
|
||
isCat = false;
|
||
isValue = this.value === document.activeElement || (c = this.state.values.value) != null && c !== '';
|
||
isComment = this.comment === document.activeElement || (c = this.state.values.comment) != null && c !== '';
|
||
expand = isCat || isValue || isComment;
|
||
console.log(isCat, isValue, isComment);
|
||
return this.setState({
|
||
expand
|
||
});
|
||
}
|
||
|
||
cancel() {
|
||
this.cat.cancel();
|
||
this.value.value = '';
|
||
this.comment.value = '';
|
||
return this.setState({
|
||
expand: false,
|
||
values: {}
|
||
}, this.checkExpand);
|
||
}
|
||
|
||
render() {
|
||
return React.createElement("form", {
|
||
onSubmit: this.submit
|
||
}, React.createElement("div", {
|
||
className: "inputs"
|
||
}, React.createElement(SelectSearch, {
|
||
ref: i => {
|
||
return this.cat = i;
|
||
},
|
||
data: H.getData.bind(null, 'money_categories'),
|
||
placeholder: "Категория",
|
||
canCreateNew: true
|
||
}), React.createElement("input", {
|
||
ref: i => {
|
||
return this.value = i;
|
||
},
|
||
name: "value",
|
||
className: "input_value",
|
||
placeholder: "1000.00",
|
||
onKeyUp: this.setValue,
|
||
onFocus: this.checkExpand,
|
||
onBlur: this.checkExpand
|
||
}), React.createElement("input", {
|
||
ref: i => {
|
||
return this.comment = i;
|
||
},
|
||
name: "comment",
|
||
className: "input_comment",
|
||
placeholder: "\u041A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u0439",
|
||
onKeyUp: this.setValue,
|
||
onFocus: this.checkExpand,
|
||
onBlur: this.checkExpand
|
||
})), this.state.expand ? React.createElement("div", {
|
||
className: "buttons"
|
||
}, React.createElement("button", {
|
||
type: "submit",
|
||
className: ""
|
||
}, "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C"), React.createElement("button", {
|
||
type: "button",
|
||
className: "",
|
||
onClick: this.cancel
|
||
}, "\u041E\u0442\u043C\u0435\u043D\u0430")) : null);
|
||
}
|
||
|
||
};
|
||
var MoneyList;
|
||
MoneyList = class MoneyList extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
data: props.data != null ? props.data : props.data = [],
|
||
type: props.type != null ? props.type : props.type = 'minus'
|
||
};
|
||
}
|
||
|
||
render() {
|
||
var dashes, i, type;
|
||
type = this.state.type;
|
||
dashes = [];
|
||
|
||
for (i in this.state.data) {
|
||
dashes.push(React.createElement(MoneyDash, {
|
||
type: type,
|
||
data: i
|
||
}));
|
||
}
|
||
|
||
return dashes;
|
||
}
|
||
|
||
};
|
||
//# sourceMappingURL=react.js.map
|