Зуев Егор / 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 90 additions and 183 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 + images: [],
9 - this.state = { 10 + hasMore: false,
10 - images: [], 11 + page: 0,
11 - hasMore: false, 12 + cClickTime: 0
12 - page: 0 13 + },
13 - };
14 - }
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');
23 - $(React.findDOMNode(this)).hide();
24 - }
25 -
26 - selectImage(image) {
27 - if(this.callback) {
28 - this.callback(image);
29 - }
30 - this.hide();
31 - }
32 -
33 - componentDidMount() {
34 - var _this = this;
35 - // Set initial images
36 - $.getJSON('/images/all', data => {
37 - this.setState({
38 - images: data.images,
39 - hasMore: data.hasMore
40 - });
41 - });
42 // Create dropzone 21 // Create dropzone
43 - this.dropZone = new Dropzone(React.findDOMNode(this.refs.dropZone), { 22 + this.setupDropZone();
44 - url: '/upload/image', 23 + },
45 - init: function() { 24 +
46 - var dz = this; 25 + methods: {
47 - this.on("sending", function(file, xhr, data) { 26 + fetchData: function() {
48 - data.append("_token", document.querySelector('meta[name=token]').getAttribute('content')); 27 + var _this = this;
49 - }); 28 + $.getJSON('/images/all/' + _this.page, function(data) {
50 - this.on("success", function(file, data) { 29 + _this.images = _this.images.concat(data.images);
51 - _this.state.images.unshift(data); 30 + _this.hasMore = data.hasMore;
52 - _this.setState({ 31 + _this.page++;
53 - images: _this.state.images 32 + });
33 + },
34 +
35 + setupDropZone: function() {
36 + var _this = this;
37 + var dropZone = new Dropzone(_this.$$.dropZone, {
38 + url: '/upload/image',
39 + init: function() {
40 + var dz = this;
41 + this.on("sending", function(file, xhr, data) {
42 + data.append("_token", document.querySelector('meta[name=token]').getAttribute('content'));
54 }); 43 });
55 - //$(file.previewElement).fadeOut(400, function() { 44 + this.on("success", function(file, data) {
56 - // dz.removeFile(file); 45 + _this.images.unshift(data);
57 - //}) 46 + $(file.previewElement).fadeOut(400, function() {
58 - }); 47 + dz.removeFile(file);
59 - } 48 + });
60 - }); 49 + });
61 - } 50 + }
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 }); 51 });
70 - }); 52 + },
71 - } 53 +
72 - 54 + imageClick: function(image) {
73 - overlayClick(e) { 55 + var dblClickTime = 380;
74 - if(e.target.className === 'overlay') { 56 + var cTime = (new Date()).getTime();
75 - this.hide(); 57 + var timeDiff = cTime - this.cClickTime;
76 - } 58 + if(this.cClickTime !== 0 && timeDiff < dblClickTime) {
77 - } 59 + // DoubleClick
78 - 60 + if(this.callback) {
79 - render() { 61 + this.callback(image);
80 - var loadMore = this.loadMore.bind(this); 62 + }
81 - var selectImage = this.selectImage.bind(this); 63 + this.hide();
82 - var overlayClick = this.overlayClick.bind(this); 64 + } else {
83 - var hide = this.hide.bind(this); 65 + // Single Click
84 - return ( 66 + }
85 - <div className="overlay" onClick={overlayClick}> 67 + this.cClickTime = cTime;
86 - <div id="image-manager"> 68 + },
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 - });
113 - return (
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 -
123 - class Image extends React.Component {
124 69
125 - constructor(){ 70 + show: function(callback) {
126 - super(); 71 + this.callback = callback;
127 - this._dblClickTime = 350; 72 + this.$$.overlay.style.display = 'block';
128 - this._cClickTime = 0; 73 + },
129 - }
130 74
131 - setImage() { 75 + hide: function() {
132 - this.props.selectImage(this.props.image); 76 + this.$$.overlay.style.display = 'none';
133 - }
134 -
135 - imageClick() {
136 - var cTime = (new Date()).getTime();
137 - var timeDiff = cTime - this._cClickTime;
138 - console.log(timeDiff);
139 - if(this._cClickTime !== 0 && timeDiff < this._dblClickTime) {
140 - // DoubleClick
141 - this.setImage();
142 - } else {
143 - // Single Click
144 } 77 }
145 - this._cClickTime = cTime;
146 - }
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 -
159 - class ImageInfoPage extends React.Component {
160 -
161 - render() {
162 78
163 } 79 }
164 80
165 - } 81 + });
166 -
167 - if(document.getElementById('image-manager-container')) {
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>
......