Зуев Егор / wiki.dev

Go to a project
Toggle navigation
Toggle navigation pinning
Dan Brown
6e4764cd 1 parent b269b3bb

Got basics working using vue.js

Inline Side-by-side
Showing 7 changed files with 70 additions and 163 deletions
...@@ -13,5 +13,5 @@ var elixir = require('laravel-elixir'); ...@@ -13,5 +13,5 @@ var elixir = require('laravel-elixir');
13 13
14 elixir(function(mix) { 14 elixir(function(mix) {
15 mix.sass('styles.scss'); 15 mix.sass('styles.scss');
16 - mix.babel('image-manager.js', 'public/js/image-manager.js'); 16 + mix.scripts('image-manager.js', 'public/js/image-manager.js');
17 }); 17 });
......
1 1
2 (function() { 2 (function() {
3 3
4 + var ImageManager = new Vue({
4 5
5 - class ImageManager extends React.Component { 6 + el: '#image-manager',
6 7
7 - constructor(props) { 8 + data: {
8 - super(props);
9 - this.state = {
10 images: [], 9 images: [],
11 hasMore: false, 10 hasMore: false,
12 - page: 0 11 + page: 0,
13 - }; 12 + cClickTime: 0
14 - } 13 + },
15 14
16 - show(callback) { 15 + created: function() {
17 - $(React.findDOMNode(this)).show(); 16 + // Get initial images
18 - this.callback = callback; 17 + this.fetchData(this.page);
19 - } 18 + },
20 19
21 - hide() { 20 + ready: function() {
22 - console.log('test'); 21 + // Create dropzone
23 - $(React.findDOMNode(this)).hide(); 22 + this.setupDropZone();
24 - } 23 + },
25 -
26 - selectImage(image) {
27 - if(this.callback) {
28 - this.callback(image);
29 - }
30 - this.hide();
31 - }
32 24
33 - componentDidMount() { 25 + methods: {
26 + fetchData: function() {
34 var _this = this; 27 var _this = this;
35 - // Set initial images 28 + $.getJSON('/images/all/' + _this.page, function(data) {
36 - $.getJSON('/images/all', data => { 29 + _this.images = _this.images.concat(data.images);
37 - this.setState({ 30 + _this.hasMore = data.hasMore;
38 - images: data.images, 31 + _this.page++;
39 - hasMore: data.hasMore
40 }); 32 });
41 - }); 33 + },
42 - // Create dropzone 34 +
43 - this.dropZone = new Dropzone(React.findDOMNode(this.refs.dropZone), { 35 + setupDropZone: function() {
36 + var _this = this;
37 + var dropZone = new Dropzone(_this.$$.dropZone, {
44 url: '/upload/image', 38 url: '/upload/image',
45 init: function() { 39 init: function() {
46 var dz = this; 40 var dz = this;
...@@ -48,129 +42,45 @@ ...@@ -48,129 +42,45 @@
48 data.append("_token", document.querySelector('meta[name=token]').getAttribute('content')); 42 data.append("_token", document.querySelector('meta[name=token]').getAttribute('content'));
49 }); 43 });
50 this.on("success", function(file, data) { 44 this.on("success", function(file, data) {
51 - _this.state.images.unshift(data); 45 + _this.images.unshift(data);
52 - _this.setState({ 46 + $(file.previewElement).fadeOut(400, function() {
53 - images: _this.state.images 47 + dz.removeFile(file);
54 - });
55 - //$(file.previewElement).fadeOut(400, function() {
56 - // dz.removeFile(file);
57 - //})
58 - });
59 - }
60 - });
61 - }
62 -
63 - loadMore() {
64 - this.state.page++;
65 - $.getJSON('/images/all/' + this.state.page, data => {
66 - this.setState({
67 - images: this.state.images.concat(data.images),
68 - hasMore: data.hasMore
69 }); 48 });
70 }); 49 });
71 } 50 }
72 -
73 - overlayClick(e) {
74 - if(e.target.className === 'overlay') {
75 - this.hide();
76 - }
77 - }
78 -
79 - render() {
80 - var loadMore = this.loadMore.bind(this);
81 - var selectImage = this.selectImage.bind(this);
82 - var overlayClick = this.overlayClick.bind(this);
83 - var hide = this.hide.bind(this);
84 - return (
85 - <div className="overlay" onClick={overlayClick}>
86 - <div id="image-manager">
87 - <div className="image-manager-content">
88 - <div className="dropzone-container" ref="dropZone">
89 - <div className="dz-message">Drop files or click here to upload</div>
90 - </div>
91 - <ImageList data={this.state.images} loadMore={loadMore} selectImage={selectImage} hasMore={this.state.hasMore}/>
92 - </div>
93 - <div className="image-manager-sidebar">
94 - <button className="neg button image-manager-close" onClick={hide}>x</button>
95 - <h2>Images</h2>
96 - </div>
97 - </div>
98 - </div>
99 - );
100 - }
101 -
102 - }
103 -
104 - class ImageList extends React.Component {
105 -
106 - render() {
107 - var selectImage = this.props.selectImage;
108 - var images = this.props.data.map(function(image) {
109 - return (
110 - <Image key={image.id} image={image} selectImage={selectImage} />
111 - );
112 }); 51 });
113 - return ( 52 + },
114 - <div className="image-manager-list clearfix">
115 - {images}
116 - { this.props.hasMore ? <div className="load-more" onClick={this.props.loadMore}>Load More</div> : null }
117 - </div>
118 - );
119 - }
120 -
121 - }
122 53
123 - class Image extends React.Component { 54 + imageClick: function(image) {
124 - 55 + var dblClickTime = 380;
125 - constructor(){
126 - super();
127 - this._dblClickTime = 350;
128 - this._cClickTime = 0;
129 - }
130 -
131 - setImage() {
132 - this.props.selectImage(this.props.image);
133 - }
134 -
135 - imageClick() {
136 var cTime = (new Date()).getTime(); 56 var cTime = (new Date()).getTime();
137 - var timeDiff = cTime - this._cClickTime; 57 + var timeDiff = cTime - this.cClickTime;
138 - console.log(timeDiff); 58 + if(this.cClickTime !== 0 && timeDiff < dblClickTime) {
139 - if(this._cClickTime !== 0 && timeDiff < this._dblClickTime) {
140 // DoubleClick 59 // DoubleClick
141 - this.setImage(); 60 + if(this.callback) {
61 + this.callback(image);
62 + }
63 + this.hide();
142 } else { 64 } else {
143 // Single Click 65 // Single Click
144 } 66 }
145 - this._cClickTime = cTime; 67 + this.cClickTime = cTime;
146 - } 68 + },
147 -
148 - render() {
149 - var imageClick = this.imageClick.bind(this);
150 - return (
151 - <div>
152 - <img onClick={imageClick} src={this.props.image.thumbnail}/>
153 - </div>
154 - );
155 - }
156 -
157 - }
158 69
159 - class ImageInfoPage extends React.Component { 70 + show: function(callback) {
160 - 71 + this.callback = callback;
161 - render() { 72 + this.$$.overlay.style.display = 'block';
73 + },
162 74
75 + hide: function() {
76 + this.$$.overlay.style.display = 'none';
163 } 77 }
164 78
165 } 79 }
166 80
167 - if(document.getElementById('image-manager-container')) { 81 + });
168 - window.ImageManager = React.render(
169 - <ImageManager />,
170 - document.getElementById('image-manager-container')
171 - );
172 - }
173 82
174 -})(); 83 + window.ImageManager = ImageManager;
175 84
176 85
86 +})();
...\ No newline at end of file ...\ No newline at end of file
......
1 -#image-manager { 1 +.image-manager-body {
2 background-color: rgb(37, 37, 37); 2 background-color: rgb(37, 37, 37);
3 max-width: 90%; 3 max-width: 90%;
4 max-height: 90%; 4 max-height: 90%;
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
12 <script src="/bower/bootstrap/dist/js/bootstrap.js"></script> 12 <script src="/bower/bootstrap/dist/js/bootstrap.js"></script>
13 <script src="/bower/jquery-sortable/source/js/jquery-sortable.js"></script> 13 <script src="/bower/jquery-sortable/source/js/jquery-sortable.js"></script>
14 <script src="/bower/dropzone/dist/min/dropzone.min.js"></script> 14 <script src="/bower/dropzone/dist/min/dropzone.min.js"></script>
15 - <script src="https://fb.me/react-0.13.3.js"></script> 15 + <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.10/vue.min.js"></script>
16 <script> 16 <script>
17 $.fn.smoothScrollTo = function() { 17 $.fn.smoothScrollTo = function() {
18 if(this.length === 0) return; 18 if(this.length === 0) return;
......
...@@ -6,9 +6,10 @@ ...@@ -6,9 +6,10 @@
6 6
7 7
8 @section('bottom') 8 @section('bottom')
9 + @include('pages/image-manager')
9 <div id="image-manager-container"></div> 10 <div id="image-manager-container"></div>
10 <script src="/js/image-manager.js"></script> 11 <script src="/js/image-manager.js"></script>
11 <script> 12 <script>
12 - window.ImageManager.show(); 13 + //window.ImageManager.show();
13 </script> 14 </script>
14 @stop 15 @stop
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
14 @stop 14 @stop
15 15
16 @section('bottom') 16 @section('bottom')
17 + @include('pages/image-manager')
17 <div id="image-manager-container"></div> 18 <div id="image-manager-container"></div>
18 <script src="/js/image-manager.js"></script> 19 <script src="/js/image-manager.js"></script>
19 @stop 20 @stop
...\ No newline at end of file ...\ No newline at end of file
......
1 -<section class="overlay" style="display:none;"> 1 +
2 -{{--<section class="overlay">--}} 2 +<div id="image-manager">
3 - <div id="image-manager"> 3 + <div class="overlay" v-el="overlay" style="display:none;">
4 - <div class="image-manager-left"> 4 + <div class="image-manager-body">
5 - <div class="image-manager-header"> 5 + <div class="image-manager-content">
6 - <button type="button" class="button neg float right" data-action="close">Close</button> 6 + <div class="dropzone-container" v-el="dropZone">
7 - <div class="image-manager-title">Image Library</div> 7 + <div class="dz-message">Drop files or click here to upload</div>
8 </div> 8 </div>
9 - <div class="image-manager-display-wrap"> 9 + <div class="image-manager-list">
10 - <div class="image-manager-display"> 10 + <div v-repeat="image: images">
11 - <div class="uploads"></div> 11 + <img v-attr="src: image.thumbnail" v-on="click: imageClick(image)" alt="@{{image.name}}">
12 - <div class="images">
13 - <div class="load-more">Load More</div>
14 </div> 12 </div>
13 + <div class="load-more" v-show="hasMore" v-on="click: fetchData">Load More</div>
15 </div> 14 </div>
16 </div> 15 </div>
17 - <form action="/upload/image" 16 + <div class="image-manager-sidebar">
18 - class="dropzone" 17 + <button class="neg button image-manager-close">x</button>
19 - id="image-upload-dropzone"> 18 + <h2>Images</h2>
20 - {!! csrf_field() !!} 19 + </div>
21 - </form>
22 </div> 20 </div>
23 - {{--<div class="sidebar">--}}
24 -
25 - {{--</div>--}}
26 </div> 21 </div>
27 -</section>
...\ No newline at end of file ...\ No newline at end of file
22 +</div>
......