Move "setTexture" function to "closet"

resources/assets/src/js/__tests__/user.test.js

@@ -12,6 +12,7 @@ describe('tests for "closet" module', () => {
     const fetch = jest.fn()
       .mockReturnValueOnce(Promise.resolve({ type: 'skin', hash: 1 }))
       .mockReturnValueOnce(Promise.resolve({ type: 'cape', hash: 2 }))
+      .mockReturnValueOnce(Promise.resolve({ type: 'skin', hash: 3 }))
       .mockReturnValueOnce(Promise.reject());
     const trans = jest.fn(key => key);
     const url = jest.fn(path => path);
@@ -55,6 +56,9 @@ describe('tests for "closet" module', () => {
       <div id="next" tid="2">
         <div class="item-body"></div>
       </div>
+      <div tid="3">
+        <div class="item-body"></div>
+      </div>
     `;
 
     await $('#next > .item-body').click();
@@ -65,6 +69,15 @@ describe('tests for "closet" module', () => {
     });
     expect($('#next').hasClass('item-selected')).toBe(true);
     expect(MSP.changeCape).toBeCalledWith('textures/2');
+    expect($('#textures-indicator').text()).toBe('general.cape');
+
+    await $('[tid="3"] > .item-body').click();
+    expect(fetch).toBeCalledWith({
+      type: 'POST',
+      url: 'skinlib/info/3',
+      dataType: 'json'
+    });
+    expect(MSP.changeSkin).toBeCalledWith('textures/3');
     expect($('#textures-indicator').text()).toBe('general.skin & general.cape');
 
     await $('#next > .item-body').click();
@@ -400,6 +413,60 @@ describe('tests for "closet" module', () => {
     });
     expect($.fn.jqPaginator).toBeCalled();
   });
+
+  it('set texture', async () => {
+    const fetch = jest.fn()
+      .mockReturnValueOnce(Promise.resolve({ errno: 0, msg: 'success' }))
+      .mockReturnValueOnce(Promise.resolve({ errno: 1, msg: 'warning' }))
+      .mockReturnValueOnce(Promise.reject());
+    const url = jest.fn(path => path);
+    const toastr = {
+      success: jest.fn(),
+      warning: jest.fn(),
+      info: jest.fn()
+    };
+    const swal = jest.fn();
+    const modal = jest.fn();
+    const showAjaxError = jest.fn();
+    window.fetch = fetch;
+    window.url = url;
+    window.toastr = toastr;
+    window.swal = swal;
+    $.fn.modal = modal;
+    window.showAjaxError = showAjaxError;
+
+    document.body.innerHTML = `
+      <input name="player" id="1" />
+      <div id="textures-indicator"></div>
+    `;
+    const setTexture = require(modulePath).setTexture;
+
+    await setTexture();
+    expect(toastr.info).toBeCalledWith('user.emptySelectedPlayer');
+
+    $('input').prop('checked', true);
+    await setTexture();
+    expect(toastr.info).toBeCalledWith('user.emptySelectedTexture');
+
+    $('#textures-indicator').data('skin', 1);
+    $('#textures-indicator').data('cape', 2);
+    await setTexture();
+    expect(fetch).toBeCalledWith({
+      type: 'POST',
+      url: 'user/player/set',
+      dataType: 'json',
+      data: { 'pid': '1', 'tid[skin]': 1, 'tid[cape]': 2 }
+    });
+    expect(swal).toBeCalledWith({ type: 'success', html: 'success' });
+    expect(modal).toBeCalledWith('hide');
+
+    await setTexture();
+    expect(toastr.warning).toBeCalledWith('warning');
+    expect(modal.mock.calls.length).toBe(1);
+
+    await setTexture();
+    expect(showAjaxError).toBeCalled();
+  });
 });
 
 describe('tests for "player" module', () => {
@@ -720,59 +787,6 @@ describe('tests for "player" module', () => {
     await addNewPlayer();
     expect(showAjaxError).toBeCalled();
   });
-
-  it('set texture', async () => {
-    const fetch = jest.fn()
-      .mockReturnValueOnce(Promise.resolve({ errno: 0, msg: 'success' }))
-      .mockReturnValueOnce(Promise.resolve({ errno: 1, msg: 'warning' }))
-      .mockReturnValueOnce(Promise.reject());
-    const url = jest.fn(path => path);
-    const toastr = {
-      success: jest.fn(),
-      warning: jest.fn(),
-      info: jest.fn()
-    };
-    const swal = jest.fn();
-    const modal = jest.fn();
-    const showAjaxError = jest.fn();
-    window.fetch = fetch;
-    window.url = url;
-    window.toastr = toastr;
-    window.swal = swal;
-    $.fn.modal = modal;
-    window.selectedTextures = {};
-    window.showAjaxError = showAjaxError;
-
-    document.body.innerHTML = `
-      <input name="player" id="1" />
-    `;
-    const setTexture = require(modulePath).setTexture;
-
-    setTexture();
-    expect(toastr.info).toBeCalledWith('user.emptySelectedPlayer');
-
-    $('input').prop('checked', true);
-    setTexture();
-    expect(toastr.info).toBeCalledWith('user.emptySelectedTexture');
-
-    window.selectedTextures = { skin: 1, cape: 2 };
-    await setTexture();
-    expect(fetch).toBeCalledWith({
-      type: 'POST',
-      url: 'user/player/set',
-      dataType: 'json',
-      data: { 'pid': '1', 'tid[skin]': 1, 'tid[cape]': 2 }
-    });
-    expect(swal).toBeCalledWith({ type: 'success', html: 'success' });
-    expect(modal).toBeCalledWith('hide');
-
-    await setTexture();
-    expect(toastr.warning).toBeCalledWith('warning');
-    expect(modal.mock.calls.length).toBe(1);
-
-    await setTexture();
-    expect(showAjaxError).toBeCalled();
-  });
 });
 
 describe('tests for "profile" module', () => {

resources/assets/src/js/user/closet.js

@@ -2,13 +2,12 @@
 
 'use strict';
 
-var selectedTextures = [];
-
 $(document).ready(initCloset);
 
 $('body').on('click', '.item-body', async function () {
     $('.item-selected').parent().removeClass('item-selected');
     let $item = $(this).parent();
+    const $indicator = $('#textures-indicator');
 
     $item.addClass('item-selected');
 
@@ -23,16 +22,14 @@ $('body').on('click', '.item-body', async function () {
 
         if (type == 'cape') {
             MSP.changeCape(url(`textures/${hash}`));
-            selectedTextures['cape'] = tid;
+            $indicator.data('cape', tid);
         } else {
             MSP.changeSkin(url(`textures/${hash}`));
-            selectedTextures['skin'] = tid;
+            $indicator.data('skin', tid);
         }
 
-        let skin = selectedTextures['skin'],
+        const skin = $indicator.data('skin');
-            cape = selectedTextures['cape'];
+        const cape = $indicator.data('cape');
-
-        let $indicator = $('#textures-indicator');
 
         if (skin !== undefined && cape !== undefined) {
             $indicator.text(`${trans('general.skin')} & ${trans('general.cape')}`);
@@ -299,6 +296,45 @@ async function setAsAvatar(tid) {
     }
 }
 
+async function setTexture() {
+    const $indicator = $('#textures-indicator');
+    let pid = 0,
+        skin = $indicator.data('skin'),
+        cape = $indicator.data('cape');
+
+    $('input[name="player"]').each(function(){
+        if (this.checked) pid = this.id;
+    });
+
+    if (! pid) {
+        toastr.info(trans('user.emptySelectedPlayer'));
+    } else if (skin == undefined && cape == undefined) {
+        toastr.info(trans('user.emptySelectedTexture'));
+    } else {
+        try {
+            const { errno, msg } = await fetch({
+                type: 'POST',
+                url: url('user/player/set'),
+                dataType: 'json',
+                data: {
+                    'pid': pid,
+                    'tid[skin]': skin,
+                    'tid[cape]': cape
+                }
+            });
+
+            if (errno == 0) {
+                swal({ type: 'success', html: msg });
+                $('#modal-use-as').modal('hide');
+            } else {
+                toastr.warning(msg);
+            }
+        } catch (error) {
+            showAjaxError(error);
+        }
+    }
+}
+
 if (typeof require !== 'undefined' && typeof module !== 'undefined') {
     module.exports = {
         setAsAvatar,
@@ -308,5 +344,6 @@ if (typeof require !== 'undefined' && typeof module !== 'undefined') {
         renameClosetItem,
         removeFromCloset,
         initCloset,
+        setTexture,
     };
 }

resources/assets/src/js/user/player.js

@@ -1,4 +1,4 @@
-/* global MSP, defaultSkin, selectedTextures */
+/* global MSP, defaultSkin */
 
 'use strict';
 
@@ -204,47 +204,8 @@ async function addNewPlayer() {
     }
 }
 
-async function setTexture() {
-    let pid = 0,
-        skin = selectedTextures['skin'],
-        cape = selectedTextures['cape'];
-
-    $('input[name="player"]').each(function(){
-        if (this.checked) pid = this.id;
-    });
-
-    if (! pid) {
-        toastr.info(trans('user.emptySelectedPlayer'));
-    } else if (skin == undefined && cape == undefined) {
-        toastr.info(trans('user.emptySelectedTexture'));
-    } else {
-        try {
-            const { errno, msg } = await fetch({
-                type: 'POST',
-                url: url('user/player/set'),
-                dataType: 'json',
-                data: {
-                    'pid': pid,
-                    'tid[skin]': skin,
-                    'tid[cape]': cape
-                }
-            });
-
-            if (errno == 0) {
-                swal({ type: 'success', html: msg });
-                $('#modal-use-as').modal('hide');
-            } else {
-                toastr.warning(msg);
-            }
-        } catch (error) {
-            showAjaxError(error);
-        }
-    }
-}
-
 if (typeof require !== 'undefined' && typeof module !== 'undefined') {
     module.exports = {
-        setTexture,
         addNewPlayer,
         clearTexture,
         deletePlayer,