2222 * THE SOFTWARE.
2323 */
2424
25+ // global instance
2526let croppie
2627
2728/**
28- * Initialization of preview image.
29- *
29+ * Initialization of croppie and preview image.
3030 */
31- function initCustomIcon ( ) {
31+ window . addEventListener ( "DOMContentLoaded" , ( ) => {
3232 let preview = document . getElementById ( "custom-icon-name" ) . getAttribute ( "value" ) ;
3333 let url ;
3434 if ( preview == null || preview === "" ) {
@@ -53,89 +53,100 @@ function initCustomIcon() {
5353 } catch ( e ) {
5454 // NOP
5555 }
56- }
56+
57+ return false ;
58+ } ) ;
5759
5860/**
5961 * Set an icon for cropping / preview.
60- *
61- * @param {string } url The icon url.
6262 */
63- function setCustomIcon ( url ) {
64- // load icon image
65- croppie . bind ( {
66- url : url ,
67- zoom : 1
68- } ) ;
63+ Behaviour . specify ( "[id^=\"custom-icon-preview-\"]" , "CustomIconPreviewSelection" , 0 , element => {
64+ element . onclick = ( ) => {
65+ let url = element . src ;
6966
70- // reset the name in the upload input element
71- document . getElementById ( "custom-icon-upload" ) . value = "" ;
67+ // load icon image
68+ croppie . bind ( {
69+ url : url ,
70+ zoom : 1
71+ } ) ;
7272
73- // set the file name - in case you don't crop / upload the image again it will simply be re-used that way
74- let paths = url . split ( "/" ) ;
75- let icon = paths [ paths . length - 1 ] ;
73+ // reset the name in the upload input element
74+ document . getElementById ( "custom-icon-upload" ) . value = "" ;
7675
77- let iconName = document . getElementById ( "custom-icon-name" )
78- iconName . setAttribute ( "value" , icon ) ;
79- iconName . dispatchEvent ( new Event ( "input" ) ) ;
80- }
76+ // set the file name - in case you don't crop / upload the image again it will simply be re-used that way
77+ let paths = url . split ( "/" ) ;
78+ let icon = paths [ paths . length - 1 ] ;
79+
80+ let iconName = document . getElementById ( "custom-icon-name" )
81+ iconName . setAttribute ( "value" , icon ) ;
82+ iconName . dispatchEvent ( new Event ( "input" ) ) ;
83+
84+ return false ;
85+ }
86+ } ) ;
8187
8288
8389/**
8490 * Set a file for cropping / preview.
85- *
86- * @param {Blob } file The file input.
8791 */
88- function setCustomIconFile ( file ) {
89- // read file input
90- let reader = new FileReader ( ) ;
91- reader . onload = function ( ev ) {
92- croppie . bind ( {
93- url : ev . target . result ,
94- zoom : 1
95- } ) ;
92+ Behaviour . specify ( "[id^=\"custom-icon-upload\"]" , "CustomIconPreview" , 0 , element => {
93+ element . onchange = ( ) => {
94+ // read file input
95+ let reader = new FileReader ( ) ;
96+ reader . onload = event => {
97+ croppie . bind ( {
98+ url : event . target . result ,
99+ zoom : 1
100+ } ) ;
101+ }
102+ let file = element . files [ 0 ] ;
103+ reader . readAsDataURL ( file ) ;
104+
105+ return false ;
96106 }
97- reader . readAsDataURL ( file ) ;
98- }
107+ } ) ;
99108
100109/**
101110 * Upload the cropped icon.
102- *
103- * @param {string } jobURL - The current job url.
104- * @param {string } successMessage - The success message.
105- * @param {string } errorMessage - The error message.
106111 */
107- function doUploadCustomIcon ( jobURL , successMessage , errorMessage ) {
108- // get the icon blob
109- croppie . result ( "blob" ) . then ( blob => {
110- let formData = new FormData ( ) ;
111- formData . append ( "file" , blob ) ;
112- return formData ;
113- } ) . then ( formData => {
114- // upload the icon
115- fetch ( rootURL + "/" + jobURL + "descriptorByName/jenkins.plugins.foldericon.CustomFolderIcon/uploadIcon" , {
116- method : "post" ,
117- headers : crumb . wrap ( { } ) ,
118- body : formData
119- } ) . then ( rsp => {
120- rsp . text ( ) . then ( text => {
121- let cropper = document . getElementById ( "custom-icon-cropper" )
122- if ( rsp . ok ) {
123- let iconName = document . getElementById ( "custom-icon-name" )
124- iconName . setAttribute ( "value" , text ) ;
125- iconName . dispatchEvent ( new Event ( "input" ) ) ;
126- hoverNotification ( successMessage + " " + text , cropper ) ;
127- } else {
128- let error = text . substring ( text . lastIndexOf ( "<title>" ) + 7 , text . lastIndexOf ( "</title>" ) )
129- hoverNotification ( errorMessage + " " + error , cropper ) ;
130- }
112+ Behaviour . specify ( "[id^=\"custom-icon-upload-apply\"]" , "CustomIconUpload" , 0 , element => {
113+ element . onclick = ( ) => {
114+ // get the icon blob
115+ croppie . result ( "blob" ) . then ( blob => {
116+ let formData = new FormData ( ) ;
117+ formData . append ( "file" , blob ) ;
118+ return formData ;
119+ } ) . then ( formData => {
120+ // upload the icon
121+ let jobUrl = window . location . href . substring ( 0 , window . location . href . lastIndexOf ( '/' ) ) ;
122+
123+ fetch ( jobUrl + "/descriptorByName/jenkins.plugins.foldericon.CustomFolderIcon/uploadIcon" , {
124+ method : "post" ,
125+ headers : crumb . wrap ( { } ) ,
126+ body : formData
127+ } ) . then ( response => {
128+ response . text ( ) . then ( text => {
129+ let cropper = document . getElementById ( "custom-icon-cropper" )
130+ if ( response . ok ) {
131+ let iconName = document . getElementById ( "custom-icon-name" )
132+ iconName . setAttribute ( "value" , text ) ;
133+ iconName . dispatchEvent ( new Event ( "input" ) ) ;
134+ hoverNotification ( "Image uploaded as " + text , cropper ) ;
135+ } else {
136+ let error = text . substring ( text . lastIndexOf ( "<title>" ) + 7 , text . lastIndexOf ( "</title>" ) )
137+ hoverNotification ( "Image uploaded failed: " + error , cropper ) ;
138+ }
139+ } ) . catch ( error => {
140+ console . error ( error ) ;
141+ } ) ;
131142 } ) . catch ( error => {
132143 console . error ( error ) ;
133144 } ) ;
134- } ) . catch ( error => {
135- console . error ( error ) ;
136- } ) ;
137- }
138- ) . catch ( error => {
139- console . error ( error ) ;
140- } ) ;
141- }
145+ }
146+ ) . catch ( error => {
147+ console . error ( error ) ;
148+ } ) ;
149+
150+ return false ;
151+ }
152+ } ) ;
0 commit comments