|
1
|
|
|
(function( $ ) { |
|
2
|
|
|
'use strict'; |
|
3
|
|
|
|
|
4
|
|
|
$(function() { |
|
5
|
|
|
$('#add-image').click(function(e) { |
|
6
|
|
|
e.preventDefault(); |
|
7
|
|
|
|
|
8
|
|
|
var custom_uploader = wp.media({ |
|
|
|
|
|
|
9
|
|
|
title: 'Select Image to Upload', |
|
10
|
|
|
library: { |
|
11
|
|
|
type: 'image' // limits the frame to show only images |
|
12
|
|
|
}, |
|
13
|
|
|
button: { |
|
14
|
|
|
text: 'Upload Image', |
|
15
|
|
|
}, |
|
16
|
|
|
selection: { |
|
17
|
|
|
length: '10' |
|
18
|
|
|
}, |
|
19
|
|
|
multiple: true // Set this to true to allow multiple files to be selected |
|
20
|
|
|
}) |
|
21
|
|
|
.on('select', function() { |
|
22
|
|
|
var attachment = custom_uploader.state().get('selection').first().toJSON(); |
|
23
|
|
|
$('#images-container').append('<div class="image sortable" style="background-image: url(' + attachment.url + ');">' + |
|
24
|
|
|
'<div class="delete-image">' + |
|
25
|
|
|
'<span class="dashicons dashicons-trash"></span>' + |
|
26
|
|
|
'</div>' + |
|
27
|
|
|
'</div>'); |
|
28
|
|
|
|
|
29
|
|
|
}).open(); |
|
30
|
|
|
|
|
31
|
|
|
console.log(custom_uploader); |
|
|
|
|
|
|
32
|
|
|
|
|
33
|
|
|
}); |
|
34
|
|
|
}); |
|
35
|
|
|
|
|
36
|
|
|
// save changes |
|
37
|
|
|
$(function() { |
|
38
|
|
|
$('#btn-save').click(function() { |
|
39
|
|
|
|
|
40
|
|
|
var number_of_images = 0; |
|
41
|
|
|
var urls = ''; // each image urls appended with ';' |
|
42
|
|
|
|
|
43
|
|
|
// go through all 'sortable' images and get their image urls |
|
44
|
|
|
$('.sortable').each(function() { |
|
45
|
|
|
var url = $(this).css('background-image').replace(/(?:^url\(["']?|["']?\)$)/g, ""); |
|
46
|
|
|
urls += url + ';'; |
|
47
|
|
|
number_of_images++; |
|
48
|
|
|
}); |
|
49
|
|
|
|
|
50
|
|
|
// create two input fields for storing options in options.php |
|
51
|
|
|
$('#images-container').append('<input type="hidden" id="mss_settings[image_urls]" name="mss_settings[image_urls]" value="' + urls + '"/>' + |
|
52
|
|
|
'<input type="hidden" id="mss_settings[images_number]" name="mss_settings[images_number]" value="' + number_of_images + '"/>'); |
|
53
|
|
|
|
|
54
|
|
|
// submit the form |
|
55
|
|
|
$('#settings_form').submit(); |
|
56
|
|
|
|
|
57
|
|
|
}); |
|
58
|
|
|
}); |
|
59
|
|
|
|
|
60
|
|
|
// make the 'add-image' block un-sortable |
|
61
|
|
|
$(function() { |
|
62
|
|
|
$('#images-container').sortable(); |
|
63
|
|
|
$('#images-container').sortable({ |
|
64
|
|
|
cancel: ".disable-sort-item" |
|
65
|
|
|
}); |
|
66
|
|
|
}); |
|
67
|
|
|
|
|
68
|
|
|
// delete-image functionality |
|
69
|
|
|
$(function() { |
|
70
|
|
|
$('.delete-image').click( function() { |
|
71
|
|
|
$(this).parent().remove(); |
|
72
|
|
|
}); |
|
73
|
|
|
}); |
|
74
|
|
|
|
|
75
|
|
|
})( jQuery ); |
|
76
|
|
|
|
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.