Skip to content

Instantly share code, notes, and snippets.

@avakhov

avakhov/index.html.diff

Last active August 29, 2015 14:11
Show Gist options
  • Save avakhov/a491f8d5eac0cbb74f91 to your computer and use it in GitHub Desktop.
Save avakhov/a491f8d5eac0cbb74f91 to your computer and use it in GitHub Desktop.
Download ZIP
Diff
Raw
index.html.diff
diff --git a/index.html b/index.html
index fa2c39f..efdddcd 100644
--- a/index.html
+++ b/index.html
@@ -2,10 +2,16 @@
<html>
<head>
<meta charset="UTF-8">
- <title>Генератор вкусных рецептов</title>
+ <title>Генератор вкусных рецептов - 2</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'>
<script src='http://fb.me/react-0.12.1.js'></script>
<script src='http://fb.me/JSXTransformer-0.12.0.js'></script>
+ <script src='https://code.jquery.com/jquery-1.11.1.min.js'></script>
+ <script src='https://code.jquery.com/ui/1.11.2/jquery-ui.min.js'></script>
+ <script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js'></script>
+ <script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js'></script>
+ <style>.list-group-item { cursor: move; }</style>
</head>
<body>
@@ -25,20 +31,67 @@
this.props.removeItem(this.props.item.id);
},
render: function() {
- return <li className="list-group-item">
+ return <li className="list-group-item" id={"item-" + this.props.item.id}>
{this.props.index + 1}. {this.props.item.text}
<div className="pull-right"><a href="#" onClick={this.handleClick}>X</a></div>
</li>;
}
});
+ var Sortable = React.createClass({
+ componentDidMount: function() { this.componentDidUpdate(); },
+ componentWillUnmount: function() { this.componentWillUpdate(); },
+
+ componentWillUpdate: function() {
+ $(this.getDOMNode()).sortable("destroy");
+ },
+
+ componentDidUpdate: function() {
+ var me = this;
+
+ var stop = function() {
+ var items = [];
+
+ // Формируем массив пересортированных элементов
+ _($(me.getDOMNode()).sortable("toArray")).each(function(item_id) {
+ var id = parseInt(item_id.replace(/^item-/, ""))
+ var nextItem = _(me.props.items).find(function(item) {
+ return item.id == id;
+ });
+ items.push(nextItem);
+ });
+
+ // Вызываем cancel, чтобы элементы местами поменял React.js
+ $(me.getDOMNode()).sortable("cancel");
+
+ // Вызываем колбек
+ me.props.onReorder(items);
+ };
+
+ // Подключаем jQuery UI Sortable
+ $(this.getDOMNode()).sortable({stop: stop});
+ },
+
+ render: function() {
+ var me = this;
+ var items = _(this.props.items).map(this.props.renderItem);
+ return <div>{items}</div>;
+ }
+ });
+
var List = React.createClass({
render: function() {
var me = this;
- var createItem = function(item, index) {
+ var renderItem = function(item, index) {
return <Item item={item} index={index} removeItem={me.props.removeItem} />;
};
- return <ul className="list-group">{this.props.items.map(createItem)}</ul>;
+ return <ul className="list-group">
+ <Sortable
+ renderItem={renderItem}
+ items={this.props.items}
+ onReorder={this.props.onReorder}
+ />
+ </ul>;
}
});
@@ -69,10 +122,13 @@
var newItems = this.state.items.filter(pred);
this.setState({items: newItems});
},
+ onReorder: function(items) {
+ this.setState({items: items});
+ },
render: function() {
var bonAppetit = <div><b>Приятного аппетита!</b></div>;
return <div>
- <List items={this.state.items} removeItem={this.removeItem} />
+ <List items={this.state.items} removeItem={this.removeItem} onReorder={this.onReorder} />
<div className="pull-right"><a href="#" onClick={this.addItem}>Добавить шаг</a></div>
{this.state.items.length >= 2 ? bonAppetit : null}
</div>;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment