1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173 | 1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
| (function ()
{
'use strict';
angular
.module('app.e-commerce')
.controller('ProductController', ProductController);
/** @ngInject */
function ProductController($document, $state, Product)
{
var vm = this;
// Data
vm.taToolbar = [
['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre', 'quote', 'bold', 'italics', 'underline', 'strikeThrough', 'ul', 'ol', 'redo', 'undo', 'clear'],
['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'indent', 'outdent', 'html', 'insertImage', 'insertLink', 'insertVideo', 'wordcount', 'charcount']
];
vm.product = Product.data;
vm.categoriesSelectFilter = '';
vm.ngFlowOptions = {
// You can configure the ngFlow from here
/*target : 'api/media/image',
chunkSize : 15 * 1024 * 1024,
maxChunkRetries : 1,
simultaneousUploads : 1,
testChunks : false,
progressCallbacksInterval: 1000*/
};
vm.ngFlow = {
// ng-flow will be injected into here through its directive
flow: {}
};
vm.dropping = false;
// Methods
vm.gotoProducts = gotoProducts;
vm.onCategoriesSelectorOpen = onCategoriesSelectorOpen;
vm.onCategoriesSelectorClose = onCategoriesSelectorClose;
vm.fileAdded = fileAdded;
vm.upload = upload;
vm.fileSuccess = fileSuccess;
//////////
init();
/**
* Initialize
*/
function init()
{
// Select the correct product from the data.
// This is an unnecessary step for a real world app
// because normally, you would request the product
// with its id and you would get only one product.
// For demo purposes, we are grabbing the entire
// json file which have more than one product details
// and then hand picking the requested product from
// it.
var id = $state.params.id;
for ( var i = 0; i < vm.product.length; i++ )
{
if ( vm.product[i].id === parseInt(id) )
{
vm.product = vm.product[i];
break;
}
}
// END - Select the correct product from the data
}
/**
* Go to products page
*/
function gotoProducts()
{
$state.go('app.e-commerce.products');
}
/**
* On categories selector open
*/
function onCategoriesSelectorOpen()
{
// The md-select directive eats keydown events for some quick select
// logic. Since we have a search input here, we don't need that logic.
$document.find('md-select-header input[type="search"]').on('keydown', function (e)
{
e.stopPropagation();
});
}
/**
* On categories selector close
*/
function onCategoriesSelectorClose()
{
// Clear the filter
vm.categoriesSelectFilter = '';
// Unbind the input event
$document.find('md-select-header input[type="search"]').unbind('keydown');
}
/**
* File added callback
* Triggers when files added to the uploader
*
* @param file
*/
function fileAdded(file)
{
// Prepare the temp file data for media list
var uploadingFile = {
id : file.uniqueIdentifier,
file: file,
type: 'uploading'
};
// Append it to the media list
vm.product.images.unshift(uploadingFile);
}
/**
* Upload
* Automatically triggers when files added to the uploader
*/
function upload()
{
// Set headers
vm.ngFlow.flow.opts.headers = {
'X-Requested-With': 'XMLHttpRequest',
//'X-XSRF-TOKEN' : $cookies.get('XSRF-TOKEN')
};
vm.ngFlow.flow.upload();
}
/**
* File upload success callback
* Triggers when single upload completed
*
* @param file
* @param message
*/
function fileSuccess(file, message)
{
// Iterate through the media list, find the one we
// are added as a temp and replace its data
// Normally you would parse the message and extract
// the uploaded file data from it
angular.forEach(vm.product.images, function (media, index)
{
if ( media.id === file.uniqueIdentifier )
{
// Normally you would update the media item
// from database but we are cheating here!
var fileReader = new FileReader();
fileReader.readAsDataURL(media.file.file);
fileReader.onload = function (event)
{
media.url = event.target.result;
};
// Update the image type so the overlay can go away
media.type = 'image';
}
});
}
}
})(); |