Skip to content

Commit 8106ff3

Browse files
weaverryantgalopin
weaverryan
authored and
tgalopin
committed
Using Typescript & Centralizing Builds
1 parent 243b8fd commit 8106ff3

File tree

8 files changed

+61
-172
lines changed

8 files changed

+61
-172
lines changed

‎Resources/assets/.babelrc

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎Resources/assets/dist/controller.js

Lines changed: 58 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -1,133 +1,61 @@
1-
/*
2-
* This file is part of the Symfony package.
3-
*
4-
* (c) Fabien Potencier <[email protected]>
5-
*
6-
* For the full copyright and license information, please view the LICENSE
7-
* file that was distributed with this source code.
8-
*/
9-
'use strict';
10-
11-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
12-
13-
Object.defineProperty(exports, "__esModule", {
14-
value: true
15-
});
16-
exports["default"] = void 0;
17-
18-
var _stimulus = require("@hotwired/stimulus");
19-
20-
var _cropperjs = _interopRequireDefault(require("cropperjs"));
21-
22-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
23-
24-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
25-
26-
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
27-
28-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
29-
30-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
31-
32-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
33-
34-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
35-
36-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
37-
38-
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
39-
40-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
41-
42-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
43-
44-
var _default = /*#__PURE__*/function (_Controller) {
45-
_inherits(_default, _Controller);
46-
47-
var _super = _createSuper(_default);
48-
49-
function _default() {
50-
_classCallCheck(this, _default);
51-
52-
return _super.apply(this, arguments);
53-
}
54-
55-
_createClass(_default, [{
56-
key: "connect",
57-
value: function connect() {
58-
var _this = this;
59-
60-
// Create image view
61-
var img = document.createElement('img');
62-
img.classList.add('cropperjs-image');
63-
img.src = this.element.getAttribute('data-public-url');
64-
var parent = this.element.parentNode;
65-
parent.appendChild(img); // Build the cropper
66-
67-
var options = {
68-
viewMode: parseInt(this.element.getAttribute('data-view-mode')),
69-
dragMode: this.element.getAttribute('data-drag-mode'),
70-
responsive: this.element.hasAttribute('data-responsive'),
71-
restore: this.element.hasAttribute('data-restore'),
72-
checkCrossOrigin: this.element.hasAttribute('data-check-cross-origin'),
73-
checkOrientation: this.element.hasAttribute('data-check-orientation'),
74-
modal: this.element.hasAttribute('data-modal'),
75-
guides: this.element.hasAttribute('data-guides'),
76-
center: this.element.hasAttribute('data-center'),
77-
highlight: this.element.hasAttribute('data-highlight'),
78-
background: this.element.hasAttribute('data-background'),
79-
autoCrop: this.element.hasAttribute('data-auto-crop'),
80-
autoCropArea: parseFloat(this.element.getAttribute('data-auto-crop-area')),
81-
movable: this.element.hasAttribute('data-movable'),
82-
rotatable: this.element.hasAttribute('data-rotatable'),
83-
scalable: this.element.hasAttribute('data-scalable'),
84-
zoomable: this.element.hasAttribute('data-zoomable'),
85-
zoomOnTouch: this.element.hasAttribute('data-zoom-on-touch'),
86-
zoomOnWheel: this.element.hasAttribute('data-zoom-on-wheel'),
87-
wheelZoomRatio: parseFloat(this.element.getAttribute('data-wheel-zoom-ratio')),
88-
cropBoxMovable: this.element.hasAttribute('data-crop-box-movable'),
89-
cropBoxResizable: this.element.hasAttribute('data-crop-box-resizable'),
90-
toggleDragModeOnDblclick: this.element.hasAttribute('data-toggle-drag-mode-on-dblclick'),
91-
minContainerWidth: parseInt(this.element.getAttribute('data-min-container-width')),
92-
minContainerHeight: parseInt(this.element.getAttribute('data-min-container-height')),
93-
minCanvasWidth: parseInt(this.element.getAttribute('data-min-canvas-width')),
94-
minCanvasHeight: parseInt(this.element.getAttribute('data-min-canvas-height')),
95-
minCropBoxWidth: parseInt(this.element.getAttribute('data-min-crop-box-width')),
96-
minCropBoxHeight: parseInt(this.element.getAttribute('data-min-crop-box-height'))
97-
};
98-
99-
if (this.element.getAttribute('data-aspect-ratio')) {
100-
options.aspectRatio = parseFloat(this.element.getAttribute('data-aspect-ratio'));
101-
}
102-
103-
if (this.element.getAttribute('data-initial-aspect-ratio')) {
104-
options.initialAspectRatio = parseFloat(this.element.getAttribute('data-initial-aspect-ratio'));
105-
}
106-
107-
var cropper = new _cropperjs["default"](img, options);
108-
img.addEventListener('crop', function (event) {
109-
_this.element.value = JSON.stringify(event.detail);
110-
});
111-
112-
this._dispatchEvent('cropperjs:connect', {
113-
cropper: cropper,
114-
options: options,
115-
img: img
116-
});
1+
import { Controller } from '@hotwired/stimulus';
2+
import Cropper from 'cropperjs';
3+
4+
class controller extends Controller {
5+
connect() {
6+
const img = document.createElement('img');
7+
img.classList.add('cropperjs-image');
8+
img.src = this.element.getAttribute('data-public-url');
9+
const parent = this.element.parentNode;
10+
parent.appendChild(img);
11+
const options = {
12+
viewMode: parseInt(this.element.getAttribute('data-view-mode')),
13+
dragMode: this.element.getAttribute('data-drag-mode'),
14+
responsive: this.element.hasAttribute('data-responsive'),
15+
restore: this.element.hasAttribute('data-restore'),
16+
checkCrossOrigin: this.element.hasAttribute('data-check-cross-origin'),
17+
checkOrientation: this.element.hasAttribute('data-check-orientation'),
18+
modal: this.element.hasAttribute('data-modal'),
19+
guides: this.element.hasAttribute('data-guides'),
20+
center: this.element.hasAttribute('data-center'),
21+
highlight: this.element.hasAttribute('data-highlight'),
22+
background: this.element.hasAttribute('data-background'),
23+
autoCrop: this.element.hasAttribute('data-auto-crop'),
24+
autoCropArea: parseFloat(this.element.getAttribute('data-auto-crop-area')),
25+
movable: this.element.hasAttribute('data-movable'),
26+
rotatable: this.element.hasAttribute('data-rotatable'),
27+
scalable: this.element.hasAttribute('data-scalable'),
28+
zoomable: this.element.hasAttribute('data-zoomable'),
29+
zoomOnTouch: this.element.hasAttribute('data-zoom-on-touch'),
30+
zoomOnWheel: this.element.hasAttribute('data-zoom-on-wheel'),
31+
wheelZoomRatio: parseFloat(this.element.getAttribute('data-wheel-zoom-ratio')),
32+
cropBoxMovable: this.element.hasAttribute('data-crop-box-movable'),
33+
cropBoxResizable: this.element.hasAttribute('data-crop-box-resizable'),
34+
toggleDragModeOnDblclick: this.element.hasAttribute('data-toggle-drag-mode-on-dblclick'),
35+
minContainerWidth: parseInt(this.element.getAttribute('data-min-container-width')),
36+
minContainerHeight: parseInt(this.element.getAttribute('data-min-container-height')),
37+
minCanvasWidth: parseInt(this.element.getAttribute('data-min-canvas-width')),
38+
minCanvasHeight: parseInt(this.element.getAttribute('data-min-canvas-height')),
39+
minCropBoxWidth: parseInt(this.element.getAttribute('data-min-crop-box-width')),
40+
minCropBoxHeight: parseInt(this.element.getAttribute('data-min-crop-box-height')),
41+
};
42+
if (this.element.getAttribute('data-aspect-ratio')) {
43+
options.aspectRatio = parseFloat(this.element.getAttribute('data-aspect-ratio'));
44+
}
45+
if (this.element.getAttribute('data-initial-aspect-ratio')) {
46+
options.initialAspectRatio = parseFloat(this.element.getAttribute('data-initial-aspect-ratio'));
47+
}
48+
const cropper = new Cropper(img, options);
49+
img.addEventListener('crop', (event) => {
50+
this.element.value = JSON.stringify(event.detail);
51+
});
52+
this._dispatchEvent('cropperjs:connect', { cropper, options, img });
11753
}
118-
}, {
119-
key: "_dispatchEvent",
120-
value: function _dispatchEvent(name) {
121-
var payload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
122-
var canBubble = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
123-
var cancelable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
124-
var userEvent = document.createEvent('CustomEvent');
125-
userEvent.initCustomEvent(name, canBubble, cancelable, payload);
126-
this.element.dispatchEvent(userEvent);
54+
_dispatchEvent(name, payload = null, canBubble = false, cancelable = false) {
55+
const userEvent = document.createEvent('CustomEvent');
56+
userEvent.initCustomEvent(name, canBubble, cancelable, payload);
57+
this.element.dispatchEvent(userEvent);
12758
}
128-
}]);
129-
130-
return _default;
131-
}(_stimulus.Controller);
59+
}
13260

133-
exports["default"] = _default;
61+
export { controller as default };

‎Resources/assets/jest.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('../../../../jest.config.js');

‎Resources/assets/package.json

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -17,29 +17,12 @@
1717
}
1818
}
1919
},
20-
"scripts": {
21-
"build": "babel src -d dist",
22-
"test": "babel src -d dist && jest",
23-
"lint": "eslint src test"
24-
},
2520
"peerDependencies": {
2621
"cropperjs": "^1.5.9",
2722
"@hotwired/stimulus": "^3.0.0"
2823
},
2924
"devDependencies": {
30-
"@babel/cli": "^7.12.1",
31-
"@babel/core": "^7.12.3",
32-
"@babel/plugin-proposal-class-properties": "^7.12.1",
33-
"@babel/preset-env": "^7.12.7",
34-
"@symfony/stimulus-testing": "^1.1.0",
3525
"cropperjs": "^1.5.9",
3626
"@hotwired/stimulus": "^3.0.0"
37-
},
38-
"jest": {
39-
"testRegex": "test/.*\\.test.js",
40-
"setupFilesAfterEnv": [
41-
"./test/setup.js"
42-
],
43-
"testURL": "https://symfony.com"
4427
}
4528
}

‎Resources/assets/postcss.config.js

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎Resources/assets/src/controller.js renamed to ‎Resources/assets/src/controller.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default class extends Controller {
2323
parent.appendChild(img);
2424

2525
// Build the cropper
26-
let options = {
26+
const options = {
2727
viewMode: parseInt(this.element.getAttribute('data-view-mode')),
2828
dragMode: this.element.getAttribute('data-drag-mode'),
2929
responsive: this.element.hasAttribute('data-responsive'),

‎Resources/assets/test/controller.test.js renamed to ‎Resources/assets/test/controller.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
import { Application, Controller } from '@hotwired/stimulus';
1313
import { getByTestId, waitFor } from '@testing-library/dom';
1414
import { clearDOM, mountDOM } from '@symfony/stimulus-testing';
15-
import CropperjsController from '../dist/controller';
15+
import CropperjsController from '../src/controller';
1616

1717
// Controller used to check the actual controller was properly booted
1818
class CheckController extends Controller {

‎Resources/assets/test/setup.js

Lines changed: 0 additions & 12 deletions
This file was deleted.

0 commit comments

Comments
 (0)