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

Go to a project
Toggle navigation
Toggle navigation pinning
Dan Brown
83c653fc 1 parent 8d72883d

Got react image manager working

Inline Side-by-side
Showing 10 changed files with 177 additions and 226 deletions
...@@ -6,6 +6,7 @@ Homestead.yaml ...@@ -6,6 +6,7 @@ Homestead.yaml
6 .idea 6 .idea
7 /public/plugins 7 /public/plugins
8 /public/css 8 /public/css
9 -/public/js/all* 9 +/public/js
10 +/public/uploads
10 /public/bower 11 /public/bower
11 /storage/images 12 /storage/images
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -71,7 +71,7 @@ class ImageController extends Controller ...@@ -71,7 +71,7 @@ class ImageController extends Controller
71 */ 71 */
72 public function getAll($page = 0) 72 public function getAll($page = 0)
73 { 73 {
74 - $pageSize = 13; 74 + $pageSize = 25;
75 $images = DB::table('images')->orderBy('created_at', 'desc') 75 $images = DB::table('images')->orderBy('created_at', 'desc')
76 ->skip($page*$pageSize)->take($pageSize)->get(); 76 ->skip($page*$pageSize)->take($pageSize)->get();
77 foreach($images as $image) { 77 foreach($images as $image) {
...@@ -95,9 +95,9 @@ class ImageController extends Controller ...@@ -95,9 +95,9 @@ class ImageController extends Controller
95 public function getThumbnail($image, $width = 220, $height = 220) 95 public function getThumbnail($image, $width = 220, $height = 220)
96 { 96 {
97 $explodedPath = explode('/', $image->url); 97 $explodedPath = explode('/', $image->url);
98 - array_splice($explodedPath, 3, 0, ['thumbs-' . $width . '-' . $height]); 98 + array_splice($explodedPath, 4, 0, ['thumbs-' . $width . '-' . $height]);
99 $thumbPath = implode('/', $explodedPath); 99 $thumbPath = implode('/', $explodedPath);
100 - $thumbFilePath = storage_path() . $thumbPath; 100 + $thumbFilePath = public_path() . $thumbPath;
101 101
102 // Return the thumbnail url path if already exists 102 // Return the thumbnail url path if already exists
103 if(file_exists($thumbFilePath)) { 103 if(file_exists($thumbFilePath)) {
...@@ -105,7 +105,7 @@ class ImageController extends Controller ...@@ -105,7 +105,7 @@ class ImageController extends Controller
105 } 105 }
106 106
107 // Otherwise create the thumbnail 107 // Otherwise create the thumbnail
108 - $thumb = ImageTool::make(storage_path() . $image->url); 108 + $thumb = ImageTool::make(public_path() . $image->url);
109 $thumb->fit($width, $height); 109 $thumb->fit($width, $height);
110 110
111 // Create thumbnail folder if it does not exist 111 // Create thumbnail folder if it does not exist
...@@ -127,17 +127,18 @@ class ImageController extends Controller ...@@ -127,17 +127,18 @@ class ImageController extends Controller
127 { 127 {
128 $imageUpload = $request->file('file'); 128 $imageUpload = $request->file('file');
129 $name = str_replace(' ', '-', $imageUpload->getClientOriginalName()); 129 $name = str_replace(' ', '-', $imageUpload->getClientOriginalName());
130 - $imagePath = '/images/' . Date('Y-m-M') . '/'; 130 + $storageName = substr(sha1(time()), 0, 10) . '-' . $name;
131 - $storagePath = storage_path(). $imagePath; 131 + $imagePath = '/uploads/images/'.Date('Y-m-M').'/';
132 - $fullPath = $storagePath . $name; 132 + $storagePath = public_path(). $imagePath;
133 + $fullPath = $storagePath . $storageName;
133 while(file_exists($fullPath)) { 134 while(file_exists($fullPath)) {
134 - $name = substr(sha1(rand()), 0, 3) . $name; 135 + $storageName = substr(sha1(rand()), 0, 3) . $storageName;
135 - $fullPath = $storagePath . $name; 136 + $fullPath = $storagePath . $storageName;
136 } 137 }
137 - $imageUpload->move($storagePath, $name); 138 + $imageUpload->move($storagePath, $storageName);
138 // Create and save image object 139 // Create and save image object
139 $this->image->name = $name; 140 $this->image->name = $name;
140 - $this->image->url = $imagePath . $name; 141 + $this->image->url = $imagePath . $storageName;
141 $this->image->created_by = Auth::user()->id; 142 $this->image->created_by = Auth::user()->id;
142 $this->image->updated_by = Auth::user()->id; 143 $this->image->updated_by = Auth::user()->id;
143 $this->image->save(); 144 $this->image->save();
......
...@@ -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'); 16 + mix.babel('image-manager.js', 'public/js/image-manager.js');
17 }); 17 });
......
1 -
2 -// Dropzone config
3 -Dropzone.options.imageUploadDropzone = {
4 - uploadMultiple: false,
5 - previewsContainer: '.image-manager-display .uploads',
6 - init: function() {
7 - this.on('success', function(event, image) {
8 - $('.image-manager-display .uploads').empty();
9 - var newImage = $('<img />').attr('data-image-id', image.id);
10 - newImage.attr('title', image.name).attr('src', image.thumbnail);
11 - newImage.data('imageData', image);
12 - $('.image-manager-display .uploads').after(newImage);
13 - });
14 - }
15 -};
16 -
17 -(function() {
18 -
19 - var isInit = false;
20 - var elem;
21 - var overlay;
22 - var display;
23 - var imageIndexUrl = '/images/all';
24 - var pageIndex = 0;
25 - var hasMore = true;
26 - var isGettingImages = true;
27 -
28 - var ImageManager = {};
29 - var action = false;
30 -
31 - ImageManager.show = function(selector, callback) {
32 - if(isInit) {
33 - showWindow();
34 - } else {
35 - this.init(selector)
36 - showWindow();
37 - }
38 -
39 - action = (typeof callback !== 'undefined') ? callback : false;
40 - };
41 -
42 - ImageManager.init = function(selector) {
43 - elem = $(selector);
44 - overlay = elem.closest('.overlay');
45 - display = elem.find('.image-manager-display').first();
46 - var uploads = display.find('.uploads');
47 - var images = display.find('images');
48 - var loadMore = display.find('.load-more');
49 - // Get recent images and show
50 - $.getJSON(imageIndexUrl, showImages);
51 - function showImages(data) {
52 - var images = data.images;
53 - hasMore = data.hasMore;
54 - pageIndex++;
55 - isGettingImages = false;
56 - for(var i = 0; i < images.length; i++) {
57 - var image = images[i];
58 - var newImage = $('<img />').attr('data-image-id', image.id);
59 - newImage.attr('title', image.name).attr('src', image.thumbnail);
60 - loadMore.before(newImage);
61 - newImage.data('imageData', image);
62 - }
63 - if(hasMore) loadMore.show();
64 - }
65 -
66 - loadMore.click(function() {
67 - loadMore.hide();
68 - if(isGettingImages === false) {
69 - isGettingImages = true;
70 - $.getJSON(imageIndexUrl + '/' + pageIndex, showImages);
71 - }
72 - });
73 -
74 - // Image grabbing on scroll
75 - display.on('scroll', function() {
76 - var displayBottom = display.scrollTop() + display.height();
77 - var elemTop = loadMore.offset().top;
78 - if(elemTop < displayBottom && hasMore && isGettingImages === false) {
79 - isGettingImages = true;
80 - loadMore.hide();
81 - $.getJSON(imageIndexUrl + '/' + pageIndex, showImages);
82 - }
83 - });
84 -
85 - elem.on('dblclick', '.image-manager-display img', function() {
86 - var imageElem = $(this);
87 - var imageData = imageElem.data('imageData');
88 - closeWindow();
89 - if(action) {
90 - action(imageData);
91 - }
92 - });
93 -
94 - elem.find('button[data-action="close"]').click(function() {
95 - closeWindow();
96 - });
97 -
98 - // Set up dropzone
99 - elem.find('.image-manager-dropzone').first().dropzone({
100 - uploadMultiple: false
101 - });
102 -
103 - isInit = true;
104 - };
105 -
106 - function showWindow() {
107 - overlay.closest('body').css('overflow', 'hidden');
108 - overlay.show();
109 - }
110 -
111 - function closeWindow() {
112 - overlay.hide();
113 - overlay.closest('body').css('overflow', 'auto');
114 - }
115 -
116 - window.ImageManager = ImageManager;
117 -})();
...\ No newline at end of file ...\ No newline at end of file
1 1
2 -class ImageList extends React.Component { 2 +(function() {
3 +
4 +
5 + class ImageManager extends React.Component {
3 6
4 constructor(props) { 7 constructor(props) {
5 super(props); 8 super(props);
...@@ -10,13 +13,50 @@ class ImageList extends React.Component { ...@@ -10,13 +13,50 @@ class ImageList extends React.Component {
10 }; 13 };
11 } 14 }
12 15
16 + show(callback) {
17 + $(React.findDOMNode(this)).show();
18 + this.callback = callback;
19 + }
20 +
21 + hide() {
22 + $(React.findDOMNode(this)).hide();
23 + }
24 +
25 + selectImage(image) {
26 + if(this.callback) {
27 + this.callback(image);
28 + }
29 + this.hide();
30 + }
31 +
13 componentDidMount() { 32 componentDidMount() {
33 + var _this = this;
34 + // Set initial images
14 $.getJSON('/images/all', data => { 35 $.getJSON('/images/all', data => {
15 this.setState({ 36 this.setState({
16 images: data.images, 37 images: data.images,
17 hasMore: data.hasMore 38 hasMore: data.hasMore
18 }); 39 });
19 }); 40 });
41 + // Create dropzone
42 + this.dropZone = new Dropzone(React.findDOMNode(this.refs.dropZone), {
43 + url: '/upload/image',
44 + init: function() {
45 + var dz = this;
46 + this.on("sending", function(file, xhr, data) {
47 + data.append("_token", document.querySelector('meta[name=token]').getAttribute('content'));
48 + });
49 + this.on("success", function(file, data) {
50 + _this.state.images.unshift(data);
51 + _this.setState({
52 + images: _this.state.images
53 + });
54 + //$(file.previewElement).fadeOut(400, function() {
55 + // dz.removeFile(file);
56 + //})
57 + });
58 + }
59 + });
20 } 60 }
21 61
22 loadMore() { 62 loadMore() {
...@@ -30,34 +70,71 @@ class ImageList extends React.Component { ...@@ -30,34 +70,71 @@ class ImageList extends React.Component {
30 } 70 }
31 71
32 render() { 72 render() {
33 - var images = this.state.images.map(function(image) { 73 + var loadMore = this.loadMore.bind(this);
74 + var selectImage = this.selectImage.bind(this);
34 return ( 75 return (
35 - <div key={image.id}> 76 + <div className="overlay">
36 - <img src={image.thumbnail}/> 77 + <div id="image-manager">
78 + <div className="image-manager-content">
79 + <div className="dropzone-container" ref="dropZone">
80 + <div className="dz-message">Drop files or click here to upload</div>
81 + </div>
82 + <ImageList data={this.state.images} loadMore={loadMore} selectImage={selectImage} hasMore={this.state.hasMore}/>
83 + </div>
84 + <div className="image-manager-sidebar">
85 + <h2>Images</h2>
86 + </div>
87 + </div>
37 </div> 88 </div>
38 ); 89 );
90 + }
91 +
92 + }
93 + window.ImageManager = new ImageManager();
94 +
95 + class ImageList extends React.Component {
96 +
97 + render() {
98 + var selectImage = this.props.selectImage;
99 + var images = this.props.data.map(function(image) {
100 + return (
101 + <Image key={image.id} image={image} selectImage={selectImage} />
102 + );
39 }); 103 });
40 return ( 104 return (
41 - <div className="image-list"> 105 + <div className="image-manager-list clearfix">
42 {images} 106 {images}
43 - <div className="load-more" onClick={this.loadMore}>Load More</div> 107 + { this.props.hasMore ? <div className="load-more" onClick={this.props.loadMore}>Load More</div> : null }
44 </div> 108 </div>
45 ); 109 );
46 } 110 }
47 111
48 -} 112 + }
113 +
114 + class Image extends React.Component {
115 +
116 + setImage() {
117 + this.props.selectImage(this.props.image);
118 + }
49 119
50 -class ImageManager extends React.Component {
51 render() { 120 render() {
121 + var setImage = this.setImage.bind(this);
52 return ( 122 return (
53 - <div id="image-manager"> 123 + <div>
54 - <ImageList/> 124 + <img onDoubleClick={setImage} src={this.props.image.thumbnail}/>
55 </div> 125 </div>
56 ); 126 );
57 } 127 }
58 -}
59 128
60 -React.render( 129 + }
130 +
131 + if(document.getElementById('image-manager-container')) {
132 + window.ImageManager = React.render(
61 <ImageManager />, 133 <ImageManager />,
62 - document.getElementById('container')
63 -);
...\ No newline at end of file ...\ No newline at end of file
134 + document.getElementById('image-manager-container')
135 + );
136 + }
137 +
138 +})();
139 +
140 +
......
...@@ -9,46 +9,29 @@ ...@@ -9,46 +9,29 @@
9 border-radius: 4px; 9 border-radius: 4px;
10 box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3); 10 box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
11 overflow: hidden; 11 overflow: hidden;
12 - .image-list img { 12 + .image-manager-list img {
13 border-radius: 0; 13 border-radius: 0;
14 float: left; 14 float: left;
15 margin: 1px; 15 margin: 1px;
16 cursor: pointer; 16 cursor: pointer;
17 } 17 }
18 + position: fixed;
19 + top: 0;
20 + bottom: 0;
21 + left: 0;
22 + z-index: 999;
23 + display: flex;
18 } 24 }
19 -#image-manager .dropzone { 25 +#image-manager .dropzone-container {
20 - display: table; 26 + height: 100px;
21 - position: absolute; 27 + position: relative;
22 - top: 10px;
23 - left: 300px;
24 - width: 480px;
25 - height: 60px;
26 - border: 4px dashed $primary;
27 - text-align: center;
28 - z-index: 900;
29 - .dz-message {
30 - display: table-cell;
31 - vertical-align: middle;
32 - color: $primary;
33 - font-size: 1.2em;
34 - }
35 - * {
36 - pointer-events: none;
37 - }
38 -}
39 -.image-manager-display-wrap {
40 - height: 100%;
41 - padding-top: 87px;
42 - position: absolute;
43 - top: 0;width: 100%;
44 } 28 }
45 -.image-manager-display { 29 +
46 - height: 100%; 30 +#container {
47 - width: 100%; 31 + height: 90vh;
48 - text-align: left;
49 - overflow-y: scroll;
50 } 32 }
51 33
34 +
52 #image-manager .load-more { 35 #image-manager .load-more {
53 width: 150px; 36 width: 150px;
54 height: 150px; 37 height: 150px;
...@@ -62,32 +45,54 @@ ...@@ -62,32 +45,54 @@
62 font-size: 20px; 45 font-size: 20px;
63 cursor: pointer; 46 cursor: pointer;
64 } 47 }
65 -.image-manager-title { 48 +
66 - font-size: 2em; 49 +.image-manager-sidebar {
67 - text-align: left; 50 + width: 300px;
68 - margin: 0 $-m; 51 + height: 100%;
69 - padding: $-xl $-m; 52 + margin-left: 1px;
70 - color: #666; 53 + padding: 0 $-l;
71 - border-bottom: 1px solid #DDD; 54 + border-left: 1px solid #DDD;
72 } 55 }
73 56
74 -.image-manager-dropzone { 57 +.image-manager-list {
75 - background-color: lighten($primary, 40%); 58 + overflow-y: scroll;
76 - height: 25%; 59 + flex: 1;
77 - text-align: center;
78 - font-size: 2em;
79 - line-height: 2em;
80 - padding-top: $-xl*1.2;
81 - color: #666;
82 - border-top: 2px solid $primary;
83 } 60 }
84 61
62 +.image-manager-content {
63 + display: flex;
64 + flex-direction: column;
65 + height: 100%;
66 + flex: 1;
67 +}
68 +
69 +
70 +
71 +
85 // Dropzone 72 // Dropzone
86 /* 73 /*
87 * The MIT License 74 * The MIT License
88 * Copyright (c) 2012 Matias Meno <m@tias.me> 75 * Copyright (c) 2012 Matias Meno <m@tias.me>
89 */ 76 */
90 - 77 +.dz-message {
78 + font-size: 1.6em;
79 + font-style: italic;
80 + color: #aaa;
81 + text-align: center;
82 + line-height: 90px;
83 + cursor: pointer;
84 + transition: all ease-in-out 120ms;
85 + position: absolute;
86 + top: 0;
87 + left: 50%;
88 + max-width: 400px;
89 + width: 400px;
90 + margin-left: -200px;
91 +}
92 +.dz-drag-hover .dz-message {
93 + background-color: rgb(16, 126, 210);
94 + color: #EEE;
95 +}
91 @keyframes passing-through { 96 @keyframes passing-through {
92 0% { 97 0% {
93 opacity: 0; 98 opacity: 0;
...@@ -128,30 +133,13 @@ ...@@ -128,30 +133,13 @@
128 .dropzone, .dropzone * { 133 .dropzone, .dropzone * {
129 box-sizing: border-box; } 134 box-sizing: border-box; }
130 135
131 -.dropzone { 136 +
132 - background: white;
133 - padding: 20px 20px; }
134 -.dropzone.dz-clickable {
135 - cursor: pointer; }
136 -.dropzone.dz-clickable * {
137 - cursor: default; }
138 -.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
139 - cursor: pointer; }
140 -.dropzone.dz-started .dz-message {
141 - display: none; }
142 -.dropzone.dz-drag-hover {
143 - border-style: solid; }
144 -.dropzone.dz-drag-hover .dz-message {
145 - opacity: 0.5; }
146 -.dropzone .dz-message {
147 - text-align: center;
148 - margin: 2em 0; }
149 .dz-preview { 137 .dz-preview {
150 position: relative; 138 position: relative;
151 display: inline-block; 139 display: inline-block;
152 vertical-align: top; 140 vertical-align: top;
153 - margin: 16px; 141 + margin: 12px;
154 - min-height: 100px; } 142 + min-height: 80px; }
155 .dz-preview:hover { 143 .dz-preview:hover {
156 z-index: 1000; } 144 z-index: 1000; }
157 .dz-preview:hover .dz-details { 145 .dz-preview:hover .dz-details {
...@@ -186,16 +174,16 @@ ...@@ -186,16 +174,16 @@
186 top: 0; 174 top: 0;
187 left: 0; 175 left: 0;
188 opacity: 0; 176 opacity: 0;
189 - font-size: 13px; 177 + font-size: 10px;
190 min-width: 100%; 178 min-width: 100%;
191 max-width: 100%; 179 max-width: 100%;
192 - padding: 2em 1em; 180 + padding: 6px 3px;
193 text-align: center; 181 text-align: center;
194 color: rgba(0, 0, 0, 0.9); 182 color: rgba(0, 0, 0, 0.9);
195 line-height: 150%; } 183 line-height: 150%; }
196 .dz-preview .dz-details .dz-size { 184 .dz-preview .dz-details .dz-size {
197 - margin-bottom: 1em; 185 + margin-bottom: 0.5em;
198 - font-size: 16px; } 186 + font-size: 12px; }
199 .dz-preview .dz-details .dz-filename { 187 .dz-preview .dz-details .dz-filename {
200 white-space: nowrap; } 188 white-space: nowrap; }
201 .dz-preview .dz-details .dz-filename:hover span { 189 .dz-preview .dz-details .dz-filename:hover span {
...@@ -221,8 +209,8 @@ ...@@ -221,8 +209,8 @@
221 .dz-preview .dz-image { 209 .dz-preview .dz-image {
222 border-radius: 4px; 210 border-radius: 4px;
223 overflow: hidden; 211 overflow: hidden;
224 - width: 120px; 212 + width: 80px;
225 - height: 120px; 213 + height: 80px;
226 position: relative; 214 position: relative;
227 display: block; 215 display: block;
228 z-index: 10; } 216 z-index: 10; }
......
...@@ -182,7 +182,7 @@ ul.menu { ...@@ -182,7 +182,7 @@ ul.menu {
182 .overlay { 182 .overlay {
183 background-color: rgba(0, 0, 0, 0.2); 183 background-color: rgba(0, 0, 0, 0.2);
184 position: fixed; 184 position: fixed;
185 - display: block; 185 + display: none;
186 z-index: 95536; 186 z-index: 95536;
187 width: 100%; 187 width: 100%;
188 height: 100%; 188 height: 100%;
...@@ -355,7 +355,8 @@ body.dragging, body.dragging * { ...@@ -355,7 +355,8 @@ body.dragging, body.dragging * {
355 width: 100%; 355 width: 100%;
356 height: 100%; 356 height: 100%;
357 z-index: -1; 357 z-index: -1;
358 - .overlay { 358 + &:after{
359 + content: '';
359 position: absolute; 360 position: absolute;
360 top: 0; 361 top: 0;
361 left: 0; 362 left: 0;
...@@ -363,6 +364,7 @@ body.dragging, body.dragging * { ...@@ -363,6 +364,7 @@ body.dragging, body.dragging * {
363 height: 100%; 364 height: 100%;
364 z-index: -1; 365 z-index: -1;
365 background-color: rgba(0,0,0,0.7); 366 background-color: rgba(0,0,0,0.7);
367 + display: block;
366 } 368 }
367 } 369 }
368 370
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
3 <head> 3 <head>
4 <title>BookStack</title> 4 <title>BookStack</title>
5 <meta name="viewport" content="width=device-width"> 5 <meta name="viewport" content="width=device-width">
6 + <meta name="token" content="{{ csrf_token() }}">
6 <link rel="stylesheet" href="/css/app.css"> 7 <link rel="stylesheet" href="/css/app.css">
7 <link href='//fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,300italic,100,300' rel='stylesheet' type='text/css'> 8 <link href='//fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,300italic,100,300' rel='stylesheet' type='text/css'>
8 {{--<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">--}} 9 {{--<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">--}}
...@@ -10,6 +11,7 @@ ...@@ -10,6 +11,7 @@
10 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
11 <script src="/bower/bootstrap/dist/js/bootstrap.js"></script> 12 <script src="/bower/bootstrap/dist/js/bootstrap.js"></script>
12 <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>
13 <script src="https://fb.me/react-0.13.3.js"></script> 15 <script src="https://fb.me/react-0.13.3.js"></script>
14 <script> 16 <script>
15 $.fn.smoothScrollTo = function() { 17 $.fn.smoothScrollTo = function() {
...@@ -63,7 +65,5 @@ ...@@ -63,7 +65,5 @@
63 </section> 65 </section>
64 66
65 @yield('bottom') 67 @yield('bottom')
66 -
67 - <script src="/js/all.js"></script>
68 </body> 68 </body>
69 </html> 69 </html>
......
...@@ -2,8 +2,6 @@ ...@@ -2,8 +2,6 @@
2 2
3 @section('head') 3 @section('head')
4 <script src="/bower/tinymce-dist/tinymce.jquery.min.js"></script> 4 <script src="/bower/tinymce-dist/tinymce.jquery.min.js"></script>
5 - <script src="/bower/dropzone/dist/min/dropzone.min.js"></script>
6 - <script src="/js/image-manager.js"></script>
7 @stop 5 @stop
8 6
9 @section('content') 7 @section('content')
...@@ -16,5 +14,6 @@ ...@@ -16,5 +14,6 @@
16 @stop 14 @stop
17 15
18 @section('bottom') 16 @section('bottom')
19 - @include('pages/image-manager') 17 + <div id="image-manager-container"></div>
18 + <script src="/js/image-manager.js"></script>
20 @stop 19 @stop
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
41 toolbar: "undo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image link | fontsizeselect fullscreen", 41 toolbar: "undo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image link | fontsizeselect fullscreen",
42 content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}", 42 content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}",
43 file_browser_callback: function(field_name, url, type, win) { 43 file_browser_callback: function(field_name, url, type, win) {
44 - ImageManager.show('#image-manager', function(image) { 44 + ImageManager.show(function(image) {
45 win.document.getElementById(field_name).value = image.url; 45 win.document.getElementById(field_name).value = image.url;
46 if ("createEvent" in document) { 46 if ("createEvent" in document) {
47 var evt = document.createEvent("HTMLEvents"); 47 var evt = document.createEvent("HTMLEvents");
......