' +
72 | '
';
75 | var a_preview_tpl = '' +
76 | '' + openerp._t('Attachment(s)') + '
' +
73 | '' +
74 | '%name%
' +
78 | '';
79 | var div_preview_tpl = '';
82 |
83 | var $main_div = $('#' + main_div_id);
84 |
85 | if (attachments.length === 0) {
86 | $main_div.remove();
87 | return result;
88 | }
89 |
90 | if ($main_div.length === 0) {
91 | $('.oe_form_sheetbg, .o_form_sheet_bg').append(main_div);
92 | $main_div = $('#' + main_div_id);
93 | }
94 |
95 | $preview_container = $main_div.find('.container-preview');
96 | $preview_container.html('');
97 |
98 | attachments.forEach(function (attachment) {
99 | var img = '/attachment_preview/static/img/raw.svg';
100 | var img_box = '';
101 |
102 | if (image_regex.test(attachment.name) === true) {
103 | img = attachment.url.replace('saveas', 'image');
104 | img_box = 'data-touchtouch="' + img + '"';
105 | } else if (doc_regex.test(attachment.name) === true) {
106 | img = '/attachment_preview/static/img/doc.svg';
107 | } else if (xls_regex.test(attachment.name) === true) {
108 | img = '/attachment_preview/static/img/xls.svg';
109 | } else if (pdf_regex.test(attachment.name) === true) {
110 | img = '/attachment_preview/static/img/pdf.svg';
111 | } else if (ppt_regex.test(attachment.name) === true) {
112 | img = '/attachment_preview/static/img/ppt.svg';
113 | }
114 |
115 | div_preview = div_preview_tpl
116 | .replace('%id%', attachment.id)
117 | .replace('%download%', attachment.url)
118 | .replace('%img%', img)
119 | .replace('%name%', attachment.name)
120 | .replace('%img-box%', img_box)
121 | ;
122 |
123 | $preview_container.append(div_preview);
124 |
125 | if (pdf_regex.test(attachment.name) === true) {
126 | internal.pdfConverter(attachment.url, function (data_url) {
127 | var a_preview = a_preview_tpl
128 | .replace('%download%', attachment.url)
129 | .replace('%img%', data_url)
130 | .replace('%name%', attachment.name)
131 | .replace('%img-box%', 'data-touchtouch="' + data_url + '"')
132 | ;
133 | $preview_container.find('#attachment-preview-item-' + attachment.id).append(a_preview);
134 | //console.log(data_url);
135 | }, function () {
136 | $preview_container.find('#attachment-preview-item-' + attachment.id).find('a').eq(0).remove();
137 | $preview_container.find('[data-touchtouch]').touchTouch();
138 | });
139 | }
140 | });
141 |
142 | $('#galleryOverlay').remove();
143 | $preview_container.find('[data-touchtouch]').touchTouch();
144 |
145 | return result;
146 | }
147 | });
148 | }
149 |
--------------------------------------------------------------------------------
/static/vendor/touchtouch/arrows.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leblanc-simon/odoo-attachment-preview/58f95eeef1ffd5bb26983bf28a79876dfcf5f305/static/vendor/touchtouch/arrows.png
--------------------------------------------------------------------------------
/static/vendor/touchtouch/preloader.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leblanc-simon/odoo-attachment-preview/58f95eeef1ffd5bb26983bf28a79876dfcf5f305/static/vendor/touchtouch/preloader.gif
--------------------------------------------------------------------------------
/static/vendor/touchtouch/touchTouch.css:
--------------------------------------------------------------------------------
1 | /* The gallery overlay */
2 |
3 | #galleryOverlay{
4 | width:100%;
5 | height:100%;
6 | position:fixed;
7 | top:0;
8 | left:0;
9 | opacity:0;
10 | z-index:100000;
11 | background-color:#222;
12 | background-color:rgba(0,0,0,0.8);
13 | overflow:hidden;
14 | display:none;
15 |
16 | -moz-transition:opacity 1s ease;
17 | -webkit-transition:opacity 1s ease;
18 | transition:opacity 1s ease;
19 | }
20 |
21 | /* This class will trigger the animation */
22 |
23 | #galleryOverlay.visible{
24 | opacity:1;
25 | }
26 |
27 | #gallerySlider{
28 | height:100%;
29 |
30 | left:0;
31 | top:0;
32 |
33 | width:100%;
34 | white-space: nowrap;
35 | position:absolute;
36 |
37 | -moz-transition:left 0.4s ease;
38 | -webkit-transition:left 0.4s ease;
39 | transition:left 0.4s ease;
40 | }
41 |
42 | #gallerySlider .placeholder{
43 | background: url("preloader.gif") no-repeat center center;
44 | height: 100%;
45 | line-height: 1px;
46 | text-align: center;
47 | width:100%;
48 | display:inline-block;
49 | }
50 |
51 | /* The before element moves the
52 | * image halfway from the top */
53 |
54 | #gallerySlider .placeholder:before{
55 | content: "";
56 | display: inline-block;
57 | height: 50%;
58 | width: 1px;
59 | margin-right:-1px;
60 | }
61 |
62 | #gallerySlider .placeholder img{
63 | display: inline-block;
64 | max-height: 100%;
65 | max-width: 100%;
66 | vertical-align: middle;
67 | }
68 |
69 | #gallerySlider.rightSpring{
70 | -moz-animation: rightSpring 0.3s;
71 | -webkit-animation: rightSpring 0.3s;
72 | }
73 |
74 | #gallerySlider.leftSpring{
75 | -moz-animation: leftSpring 0.3s;
76 | -webkit-animation: leftSpring 0.3s;
77 | }
78 |
79 | /* Firefox Keyframe Animations */
80 |
81 | @-moz-keyframes rightSpring{
82 | 0%{ margin-left:0px;}
83 | 50%{ margin-left:-30px;}
84 | 100%{ margin-left:0px;}
85 | }
86 |
87 | @-moz-keyframes leftSpring{
88 | 0%{ margin-left:0px;}
89 | 50%{ margin-left:30px;}
90 | 100%{ margin-left:0px;}
91 | }
92 |
93 | /* Safari and Chrome Keyframe Animations */
94 |
95 | @-webkit-keyframes rightSpring{
96 | 0%{ margin-left:0px;}
97 | 50%{ margin-left:-30px;}
98 | 100%{ margin-left:0px;}
99 | }
100 |
101 | @-webkit-keyframes leftSpring{
102 | 0%{ margin-left:0px;}
103 | 50%{ margin-left:30px;}
104 | 100%{ margin-left:0px;}
105 | }
106 |
107 | /* Arrows */
108 |
109 | #prevArrow,#nextArrow{
110 | border:none;
111 | text-decoration:none;
112 | background:url('arrows.png') no-repeat;
113 | opacity:0.5;
114 | cursor:pointer;
115 | position:absolute;
116 | width:43px;
117 | height:58px;
118 |
119 | top:50%;
120 | margin-top:-29px;
121 |
122 | -moz-transition:opacity 0.2s ease;
123 | -webkit-transition:opacity 0.2s ease;
124 | transition:opacity 0.2s ease;
125 | }
126 |
127 | #prevArrow:hover, #nextArrow:hover{
128 | opacity:1;
129 | }
130 |
131 | #prevArrow{
132 | background-position:left top;
133 | left:40px;
134 | }
135 |
136 | #nextArrow{
137 | background-position:right top;
138 | right:40px;
139 | }
140 |
--------------------------------------------------------------------------------
/static/vendor/touchtouch/touchTouch.jquery.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @name jQuery touchTouch plugin
3 | * @author Martin Angelov
4 | * @version 1.0
5 | * @url http://tutorialzine.com/2012/04/mobile-touch-gallery/
6 | * @license MIT License
7 | */
8 |
9 |
10 | (function(){
11 |
12 |
13 | /* Creating the plugin */
14 |
15 | $.fn.touchTouch = function(){
16 | var overlay = $(''),
17 | slider = $('
'),
18 | prevArrow = $(''),
19 | nextArrow = $(''),
20 | overlayVisible = false;
21 |
22 | var placeholders = $([]),
23 | index = 0,
24 | allitems = this,
25 | items = allitems;
26 |
27 | // Appending the markup to the page
28 | overlay.hide().appendTo('body');
29 | slider.appendTo(overlay);
30 |
31 | // Creating a placeholder for each image
32 | items.each(function(){
33 |
34 | placeholders = placeholders.add($('
'));
35 | });
36 |
37 | // Hide the gallery if the background is touched / clicked
38 | slider.append(placeholders).on('click',function(e){
39 |
40 | if(!$(e.target).is('img')){
41 | hideOverlay();
42 | }
43 | });
44 |
45 | // Listen for touch events on the body and check if they
46 | // originated in #gallerySlider img - the images in the slider.
47 | $('body').on('touchstart', '#gallerySlider img', function(e){
48 |
49 | var touch = e.originalEvent,
50 | startX = touch.changedTouches[0].pageX;
51 |
52 | slider.on('touchmove',function(e){
53 |
54 | e.preventDefault();
55 |
56 | touch = e.originalEvent.touches[0] ||
57 | e.originalEvent.changedTouches[0];
58 |
59 | if(touch.pageX - startX > 10){
60 |
61 | slider.off('touchmove');
62 | showPrevious();
63 | }
64 |
65 | else if (touch.pageX - startX < -10){
66 |
67 | slider.off('touchmove');
68 | showNext();
69 | }
70 | });
71 |
72 | // Return false to prevent image
73 | // highlighting on Android
74 | return false;
75 |
76 | }).on('touchend',function(){
77 |
78 | slider.off('touchmove');
79 |
80 | });
81 |
82 | // Listening for clicks on the thumbnails
83 | items.off('click');
84 | items.on('click', function(e){
85 |
86 | e.preventDefault();
87 |
88 | var $this = $(this),
89 | galleryName,
90 | selectorType,
91 | $closestGallery = $this.parent().closest('[data-gallery]');
92 |
93 | // Find gallery name and change items object to only have
94 | // that gallery
95 |
96 | //If gallery name given to each item
97 | if ($this.attr('data-gallery')) {
98 |
99 | galleryName = $this.attr('data-gallery');
100 | selectorType = 'item';
101 |
102 | //If gallery name given to some ancestor
103 | } else if ($closestGallery.length) {
104 |
105 | galleryName = $closestGallery.attr('data-gallery');
106 | selectorType = 'ancestor';
107 |
108 | }
109 |
110 | //These statements kept seperate in case elements have data-gallery on both
111 | //items and ancestor. Ancestor will always win because of above statments.
112 | if (galleryName && selectorType == 'item') {
113 |
114 | items = $('[data-gallery='+galleryName+']');
115 |
116 | } else if (galleryName && selectorType == 'ancestor') {
117 |
118 | //Filter to check if item has an ancestory with data-gallery attribute
119 | items = items.filter(function(){
120 |
121 | return $(this).parent().closest('[data-gallery]').length;
122 |
123 | });
124 |
125 | }
126 |
127 | // Find the position of this image
128 | // in the collection
129 | index = items.index(this);
130 | showOverlay(index);
131 | showImage(index);
132 |
133 | // Preload the next image
134 | preload(index+1);
135 |
136 | // Preload the previous
137 | preload(index-1);
138 |
139 | });
140 |
141 | // If the browser does not have support
142 | // for touch, display the arrows
143 | if ( !("ontouchstart" in window) ){
144 | overlay.append(prevArrow).append(nextArrow);
145 |
146 | prevArrow.click(function(e){
147 | e.preventDefault();
148 | showPrevious();
149 | });
150 |
151 | nextArrow.click(function(e){
152 | e.preventDefault();
153 | showNext();
154 | });
155 | }
156 |
157 | // Listen for arrow keys
158 | $(window).bind('keydown', function(e){
159 |
160 | if (e.keyCode == 37) {
161 | showPrevious();
162 | }
163 |
164 | else if (e.keyCode==39) {
165 | showNext();
166 | }
167 |
168 | else if (e.keyCode==27) { //esc
169 | hideOverlay();
170 | }
171 |
172 | });
173 |
174 |
175 | /* Private functions */
176 |
177 |
178 | function showOverlay(index){
179 | // If the overlay is already shown, exit
180 | if (overlayVisible){
181 | return false;
182 | }
183 |
184 | // Show the overlay
185 | overlay.show();
186 |
187 | setTimeout(function(){
188 | // Trigger the opacity CSS transition
189 | overlay.addClass('visible');
190 | }, 100);
191 |
192 | // Move the slider to the correct image
193 | offsetSlider(index);
194 |
195 | // Raise the visible flag
196 | overlayVisible = true;
197 | }
198 |
199 | function hideOverlay(){
200 |
201 | // If the overlay is not shown, exit
202 | if(!overlayVisible){
203 | return false;
204 | }
205 |
206 | // Hide the overlay
207 | overlay.hide().removeClass('visible');
208 | overlayVisible = false;
209 |
210 | //Clear preloaded items
211 | $('.placeholder').empty();
212 |
213 | //Reset possibly filtered items
214 | items = allitems;
215 | }
216 |
217 | function offsetSlider(index){
218 |
219 | // This will trigger a smooth css transition
220 | slider.css('left',(-index*100)+'%');
221 | }
222 |
223 | // Preload an image by its index in the items array
224 | function preload(index){
225 |
226 | setTimeout(function(){
227 | showImage(index);
228 | }, 1000);
229 | }
230 |
231 | // Show image in the slider
232 | function showImage(index){
233 |
234 | // If the index is outside the bonds of the array
235 | if(index < 0 || index >= items.length){
236 | return false;
237 | }
238 |
239 | // Call the load function with the href attribute of the item
240 | loadImage(items.eq(index).attr('data-touchtouch'), function(){
241 | placeholders.eq(index).html(this);
242 | });
243 | }
244 |
245 | // Load the image and execute a callback function.
246 | // Returns a jQuery object
247 |
248 | function loadImage(src, callback){
249 |
250 | var img = $('![]()
').on('load', function(){
251 | callback.call(img);
252 | });
253 |
254 | img.attr('src',src);
255 | }
256 |
257 | function showNext(){
258 |
259 | // If this is not the last image
260 | if(index+1 < items.length){
261 | index++;
262 | offsetSlider(index);
263 | preload(index+1);
264 | }
265 |
266 | else{
267 | // Trigger the spring animation
268 | slider.addClass('rightSpring');
269 | setTimeout(function(){
270 | slider.removeClass('rightSpring');
271 | },500);
272 | }
273 | }
274 |
275 | function showPrevious(){
276 |
277 | // If this is not the first image
278 | if(index>0){
279 | index--;
280 | offsetSlider(index);
281 | preload(index-1);
282 | }
283 |
284 | else{
285 | // Trigger the spring animation
286 | slider.addClass('leftSpring');
287 | setTimeout(function(){
288 | slider.removeClass('leftSpring');
289 | },500);
290 | }
291 | }
292 | };
293 |
294 | })(jQuery);
295 |
--------------------------------------------------------------------------------
/views/attachment_preview.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------