diff --git a/README.md b/README.md
index 581ca9d..687e8b7 100644
--- a/README.md
+++ b/README.md
@@ -1,16 +1,17 @@
-Photowall Image Editor
-======================
+# Photowall Image Editor
+
Image editor for the Photowall web project
# Working with image-editor integrated in photowall site
-A suggested workflow is replacing `src/js/legacy/legacyVendor/image-editor.js` in photowall project with a symlink to
-`dist/image-editor.js` in this project. That way you can have `gulp watch` running to build on change in this project
+
+A suggested workflow is replacing `src/js/legacy/vendor-js/generated-image-editor.js` in photowall project with a symlink to
+`dist/generated-image-editor.js` in this project. That way you can have `gulp watch` running to build on change in this project
which will trigger `npm run watch` (webpack) in photowall project.
-Symlink should be removed and new copy of `dist/image-editor.js` copied to photowall project when work
+Symlink should be removed and new copy of `dist/generated-image-editor.js` copied to photowall project when work
is done however to not force all team members to have same file structure for projects.
# Linting
+
Linting can be run manually with
`npm run lint`
-
diff --git a/dist/image-editor.js b/dist/generated-image-editor.js
similarity index 88%
rename from dist/image-editor.js
rename to dist/generated-image-editor.js
index 9f1dfd2..593b126 100644
--- a/dist/image-editor.js
+++ b/dist/generated-image-editor.js
@@ -2,116 +2,6 @@
'use strict';
/* globals fabric */
-/**
- * Handles 3d image of canvas products.
- * @param {canvas} canvas
- */
-function ThreeDHandler(canvas) {
- var _overlay = new fabric.Group();
- var _image;
-
- function init() {
- _overlay
- .set({
- visible: false,
- left: 0
- })
- .addWithUpdate(new fabric.Rect({
- // Width is made bigger as this works better with resizing the editor
- width: canvas.width * 2,
- height: canvas.height,
- top: 0,
- left: 0,
- fill: canvas.backgroundColor,
- }));
-
- canvas.add(_overlay);
- }
-
- init();
-
- /**
- * Disables the 3d image by removing visibility
- * @return {ThreeDHandler}
- */
- this.disable = function () {
- _overlay.setVisible(false).canvas.resize();
- return this;
- };
-
- /**
- * Enables the 3d image by setting the width and visibility of the overlay and moving elements which
- * needs to be visible to the front.
- * @return {ThreeDHandler}
- */
- this.enable = function () {
- _overlay
- .set({
- width: canvas.width,
- visible: true
- }).bringToFront();
-
- canvas.getButtonMenu().bringToFront();
- canvas.renderAll();
- return this;
- };
-
- /**
- * Checks if 3d mode is enabled/visible.
- * @returns {boolean}
- */
- this.isEnabled = function () {
- return _overlay.visible;
- };
-
- /**
- * Refreshes the image. This is mostly done upon resize of the window
- */
- this.refreshImage = function() {
- _overlay.set({
- width: canvas.width,
- });
-
- this.applyImage();
- };
-
- /**
- * (Re)adds the new/existing image with new configuration to the overlay.
- * @param {img}
- */
- this.applyImage = function(img) {
- img = img || _image;
-
- _overlay
- .remove(_image)
- .add(_image = canvas.getResizedImage(img));
- };
-
- /**
- * Sets the image and enables 3d mode.
- * @param {img}
- * @return {ThreeDHandler}
- */
- this.setImage = function (img) {
- img.set({
- // Image should be about 20px lower than the center (because of the buttons)
- top: 20,
- originX: 'center',
- originY: 'center',
- });
-
- this.applyImage(img);
- return this.enable();
- };
-
-}
-
-module.exports = ThreeDHandler;
-
-},{}],2:[function(require,module,exports){
-'use strict';
-/* globals fabric */
-
/**
* ApertureHandler takes care of the bars around the image to show what area has been/will be cropped.
* @param {canvas} canvas
@@ -209,7 +99,7 @@ function ApertureHandler(canvas) {
module.exports = ApertureHandler;
-},{}],3:[function(require,module,exports){
+},{}],2:[function(require,module,exports){
'use strict';
var TextButton = require('./TextButton');
@@ -362,7 +252,7 @@ function ButtonMenu(canvas, settings) {
module.exports = ButtonMenu;
-},{"./TextButton":14}],4:[function(require,module,exports){
+},{"./TextButton":13}],3:[function(require,module,exports){
'use strict';
/* globals $, fabric */
@@ -372,10 +262,10 @@ var ApertureHandler = require('./ApertureHandler');
var ButtonMenu = require('./ButtonMenu');
var DragbarHandler = require('./DragbarHandler');
var Viewport = require('./Viewport');
-var ThreeDHandler = require('./3dHandler');
var MirrorHandler = require('./MirrorHandler');
var ImageDataHandler = require('./ImageDataHandler');
+// eslint-disable-next-line no-unused-vars
var $document = $(document);
/**
@@ -391,11 +281,11 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
// Allow touch scrolling on touch-devices larger than mobile screen sizes.
allowTouchScrolling: !util.isMobile(),
stateful: false,
- backgroundColor: '#ededed',
+ backgroundColor: '#ffffff',
preserveObjectStacking: true,
selection: false,
width: dimensions.width,
- height: dimensions.height
+ height: dimensions.height,
});
},
@@ -405,15 +295,13 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
return;
}
+ // hello
+
this.setHeight(args.height);
this.setWidth(args.width);
this.getButtonMenu().render();
- if (this.get3dHandler().isEnabled()) {
- this.get3dHandler().refreshImage();
- } else {
- this.refreshImage(this.getResizedImage(this.getImage()));
- this.getViewport().reset();
- }
+ this.refreshImage(this.getResizedImage(this.getImage()));
+ this.getViewport().reset();
this.sendToBack(this.getImage());
this.getImage().center();
this.getDragbars().resetPosition();
@@ -434,33 +322,6 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
return this;
},
- get3dHandler: function () {
- return this.__3dHandler ||
- (this.__3dHandler = new ThreeDHandler(this));
- },
-
- /**
- * @return {String}
- */
- get3dUrl: function () {
- var imageData = this.getImageData().getData();
- var params = [
- 'h=400',
- 'canvas[edge]=' + imageData.edge,
- 'crop[w]=' + imageData.width,
- 'crop[h]=' + imageData.height,
- 'crop[x]=' + imageData.x,
- 'crop[y]=' + imageData.y,
- 'no-cache=1',
- ];
-
- if (imageData.mirrored) {
- params.push('mirror=1');
- }
-
- return this.getImage().__url.replace(/\?h=\d+$/, '?') + params.join('&');
- },
-
getApertures: function () {
return this.__aperturehandler ||
(this.__aperturehandler = new ApertureHandler(this));
@@ -518,17 +379,6 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
return this.__buttonMenu;
},
- /**
- * Reloads the 3D view, if it is present
- * @return {Canvas}
- */
- refresh3dView: function () {
- if (this.get3dHandler().isEnabled()) {
- this.toggle3D(true);
- }
- return this;
- },
-
/**
* @return {Canvas}
*/
@@ -562,8 +412,6 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
},
getResizedImage: function(img) {
- // Calculate maxHeight and maxWidth of the 3d image
- // and scale the image accoring to those values
var maxHeight = this.getHeight() - 100;
var maxWidth = this.getWidth() - 100;
@@ -572,32 +420,11 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
return img;
},
-
- toggle3D: function (showAs3d) {
-
- this.getButtonMenu().setButtonActive('toggle3d', showAs3d);
-
- if (!showAs3d) {
- return this.get3dHandler().disable();
- }
-
- $document.trigger('PIE:image-start-load');
-
- fabric.Image.fromURL(encodeURI(this.get3dUrl()), function (img) {
- if (!img._element) {
- $document.trigger('PIE:image-error-load');
- return;
- }
-
- this.get3dHandler().setImage(img);
- $document.trigger('PIE:image-end-load');
- }.bind(this));
- },
});
module.exports = Canvas;
-},{"./3dHandler":1,"./ApertureHandler":2,"./ButtonMenu":3,"./DragbarHandler":6,"./ImageDataHandler":10,"./MirrorHandler":12,"./Viewport":15,"./config":16,"./util":25}],5:[function(require,module,exports){
+},{"./ApertureHandler":1,"./ButtonMenu":2,"./DragbarHandler":5,"./ImageDataHandler":9,"./MirrorHandler":11,"./Viewport":14,"./config":15,"./util":24}],4:[function(require,module,exports){
'use strict';
/* globals $, fabric */
@@ -748,7 +575,7 @@ var DragHandle = function (handler) {
module.exports = DragHandle;
-},{"./config":16,"./util":25}],6:[function(require,module,exports){
+},{"./config":15,"./util":24}],5:[function(require,module,exports){
'use strict';
/* globals $, fabric */
@@ -835,34 +662,42 @@ function DragbarHandler(canvas) {
this.init = function () {
this.clear();
var typeIsWallpaper = canvas.__type === 'wallpaper';
+ var image = canvas.getImage();
- _dragbars.x = new fabric.Rect($.extend({}, config.dragBar, {
- axis: 'x',
- width: canvas.getImage().width * canvas.getImage().scaleY,
- height: config.dragBar.size,
- lockMovementY: true,
- // Movement should also be disabled when the user is on wallpaper (repeating paterns)
- lockMovementX: typeIsWallpaper,
- selectable: true,
- hoverCursor: typeIsWallpaper ? 'pointer' : 'ew-resize',
- moveCursor: typeIsWallpaper ? 'pointer' : 'ew-resize',
- }))
+ _dragbars.x = new fabric.Rect(
+ $.extend({}, config.dragBar, {
+ axis: 'x',
+ width: image.width * image.scaleY,
+ height: config.dragBar.size,
+ lockMovementY: true,
+ // Movement should also be disabled when the user is on wallpaper (repeating paterns)
+ lockMovementX: typeIsWallpaper,
+ selectable: true,
+ hoverCursor: typeIsWallpaper ? 'pointer' : 'ew-resize',
+ moveCursor: typeIsWallpaper ? 'pointer' : 'ew-resize',
+ })
+ )
.addTo(canvas)
- .centerH().set({ top: canvas.height - 30 }).setCoords();
+ .centerH()
+ .set({ top: image.height + 10 })
+ .setCoords();
- _dragbars.y = new fabric.Rect($.extend({}, config.dragBar, {
- axis: 'y',
- width: config.dragBar.size,
- height: canvas.getImage().height * canvas.getImage().scaleY,
- lockMovementX: true,
- // Movement should also be disabled when the user is on wallpaper (repeating paterns)
- lockMovementY: typeIsWallpaper,
- selectable: true,
- hoverCursor: typeIsWallpaper ? 'pointer': 'ns-resize',
- moveCursor: typeIsWallpaper ? 'pointer': 'ns-resize',
- }))
+ _dragbars.y = new fabric.Rect(
+ $.extend({}, config.dragBar, {
+ axis: 'y',
+ width: config.dragBar.size,
+ height: image.height * image.scaleY,
+ lockMovementX: true,
+ // Movement should also be disabled when the user is on wallpaper (repeating paterns)
+ lockMovementY: typeIsWallpaper,
+ selectable: true,
+ hoverCursor: typeIsWallpaper ? 'pointer' : 'ns-resize',
+ moveCursor: typeIsWallpaper ? 'pointer' : 'ns-resize',
+ })
+ )
.addTo(canvas)
- .set({ left: canvas.width - 30 }).setCoords();
+ .set({ left: canvas.width - 30 })
+ .setCoords();
canvas.getImage().on('moving', this.sync);
@@ -881,7 +716,7 @@ function DragbarHandler(canvas) {
module.exports = DragbarHandler;
-},{"./DragHandle":5,"./config":16}],7:[function(require,module,exports){
+},{"./DragHandle":4,"./config":15}],6:[function(require,module,exports){
'use strict';
/* globals $ */
var util = require('./util');
@@ -958,7 +793,7 @@ function Draggable(img, boundingRect) {
module.exports = Draggable;
-},{"./util":25}],8:[function(require,module,exports){
+},{"./util":24}],7:[function(require,module,exports){
'use strict';
/* globals fabric */
@@ -1109,7 +944,7 @@ function FrameHandler(viewport) {
module.exports = FrameHandler;
-},{"./config":16}],9:[function(require,module,exports){
+},{"./config":15}],8:[function(require,module,exports){
'use strict';
/* globals fabric */
@@ -1190,7 +1025,7 @@ function GoreHandler(viewport) {
module.exports = GoreHandler;
-},{}],10:[function(require,module,exports){
+},{}],9:[function(require,module,exports){
'use strict';
/* globals $ */
@@ -1268,7 +1103,7 @@ function ImageDataHandler(img) {
module.exports = ImageDataHandler;
-},{}],11:[function(require,module,exports){
+},{}],10:[function(require,module,exports){
'use strict';
/* globals $, fabric */
@@ -1286,8 +1121,6 @@ function ImageEditor(canvasId, args) {
canvasFrameSize: 2, //cm
// Default texts on the buttons
texts: {
- showThreeD: '3d',
- hideThreeD: 'Flat',
showMurals: 'Show Murals Panel',
hideMurals: 'Hide Murals Panel',
showRulers: 'Show Ruler',
@@ -1322,10 +1155,6 @@ function ImageEditor(canvasId, args) {
// It might be better that this resides somewhere else, either in Canvas or
// during the initialization of the image editor.
if (_canvas.__type === 'canvas') {
- _canvas.getButtonMenu()
- .addItem('toggle3d', [_settings.texts.showThreeD, _settings.texts.hideThreeD], function () {
- _canvas.toggle3D(this.isActive());
- });
_canvas.set({
__canvasFrameType: _settings.canvasFrameType,
__canvasFrameSize: _settings.canvasFrameSize,
@@ -1403,6 +1232,8 @@ function ImageEditor(canvasId, args) {
_canvas.getApertures().setTransparent(false);
}
+ _canvas.getDragbars().resetPosition();
+
return this;
};
@@ -1472,7 +1303,7 @@ function ImageEditor(canvasId, args) {
module.exports = ImageEditor;
-},{"./Canvas":4,"./util":25}],12:[function(require,module,exports){
+},{"./Canvas":3,"./util":24}],11:[function(require,module,exports){
'use strict';
function MirrorHandler(img) {
@@ -1500,7 +1331,7 @@ function MirrorHandler(img) {
module.exports = MirrorHandler;
-},{}],13:[function(require,module,exports){
+},{}],12:[function(require,module,exports){
'use strict';
/* globals fabric */
@@ -1637,7 +1468,7 @@ function RulerHandler(viewport) {
module.exports = RulerHandler;
-},{"./TextButton":14,"./config":16,"./util":25}],14:[function(require,module,exports){
+},{"./TextButton":13,"./config":15,"./util":24}],13:[function(require,module,exports){
'use strict';
/* globals $, fabric */
@@ -1765,7 +1596,7 @@ TextButton.prototype.constructor = TextButton;
module.exports = TextButton;
-},{"./config":16}],15:[function(require,module,exports){
+},{"./config":15}],14:[function(require,module,exports){
'use strict';
/* globals $, fabric */
@@ -1779,7 +1610,23 @@ function Viewport(canvas) {
var _borderWidth = 2;
var _data = null;
var _rect;
+ var _baseImageScale = null; // Store the original image scale to avoid cumulative scaling
var self = this;
+ var viewportMargins = {
+ vertical: 200,
+ horizontal: 90,
+ };
+
+ /**
+ * Calculate available canvas dimensions after margins
+ * @return {Object} { width, height }
+ */
+ function getAvailableCanvasDimensions() {
+ return {
+ width: canvas.width - viewportMargins.horizontal,
+ height: canvas.height - viewportMargins.vertical,
+ };
+ }
/**
* Render the diagonal lines from viewport to edge of the canvas
@@ -1911,7 +1758,44 @@ function Viewport(canvas) {
return this;
}
- _data = util.calcCrop(canvas.getImage(), width, height, units);
+ var image = canvas.getImage();
+
+ // Store the base image scale on first call
+ if (_baseImageScale === null) {
+ _baseImageScale = {
+ x: image.scaleX,
+ y: image.scaleY,
+ };
+ }
+
+ // Reset image to base scale before calculating
+ image.scaleX = _baseImageScale.x;
+ image.scaleY = _baseImageScale.y;
+ image.setCoords();
+
+ // First, calculate viewport with base image scale
+ _data = util.calcCrop(image, width, height, units);
+
+ // Now calculate if we can scale up the image to better fill the canvas
+ var availableDimensions = getAvailableCanvasDimensions();
+
+ // Calculate how much we can scale the viewport to fit within available space
+ var scaleX = availableDimensions.width / _data.width;
+ var scaleY = availableDimensions.height / _data.height;
+
+ // Use the smaller scale to ensure the viewport fits within the canvas
+ var scaleFactor = Math.min(scaleX, scaleY);
+
+ // Apply scaling if needed (scale up to use more space, or scale down to fit)
+ if (Math.abs(scaleFactor - 1.0) > 0.01) {
+ // Apply the scale to the base scale (not multiplying current scale)
+ image.scaleX = _baseImageScale.x * scaleFactor;
+ image.scaleY = _baseImageScale.y * scaleFactor;
+ image.setCoords();
+
+ // Recalculate viewport with the new image scale
+ _data = util.calcCrop(image, width, height, units);
+ }
var cropData = canvas.getImageData().getCropData();
var isAspectTheSame = !!(cropData && !util.isAspectChanged(cropData.viewportWidth, cropData.viewportHeight, width, height));
@@ -1942,17 +1826,7 @@ function Viewport(canvas) {
*/
this.setFrame = function (frameType) {
this.getFrameHandler().setFrames(frameType);
-
- var buttons = canvas.getButtonMenu().getItems();
- if (frameType === 'none') {
- buttons[0].setDisabled(true);
- }
- else {
- buttons[0].setDisabled(false);
- }
canvas.getButtonMenu().bringToFront();
-
- canvas.refresh3dView();
};
this.getData = function () {
@@ -1977,7 +1851,7 @@ function Viewport(canvas) {
module.exports = Viewport;
-},{"./FrameHandler":8,"./GoreHandler":9,"./RulerHandler":13,"./util":25}],16:[function(require,module,exports){
+},{"./FrameHandler":7,"./GoreHandler":8,"./RulerHandler":12,"./util":24}],15:[function(require,module,exports){
'use strict';
module.exports = {
@@ -1989,7 +1863,7 @@ module.exports = {
dragBar: require('./config/drag-bar')
};
-},{"./config/button-menu":17,"./config/drag-bar":18,"./config/drag-handle":19,"./config/frames":20,"./config/ruler-handle":21,"./config/text-button":22}],17:[function(require,module,exports){
+},{"./config/button-menu":16,"./config/drag-bar":17,"./config/drag-handle":18,"./config/frames":19,"./config/ruler-handle":20,"./config/text-button":21}],16:[function(require,module,exports){
'use strict';
module.exports = {
@@ -2032,7 +1906,7 @@ module.exports = {
};
-},{}],18:[function(require,module,exports){
+},{}],17:[function(require,module,exports){
'use strict';
module.exports = {
@@ -2040,12 +1914,12 @@ module.exports = {
size: 20,
};
-},{}],19:[function(require,module,exports){
+},{}],18:[function(require,module,exports){
'use strict';
module.exports = {
text: {
- fontFamily: 'breuer',
+ fontFamily: 'Urbanist',
fontSize: 12,
fill: '#ffffff',
originX: 'center',
@@ -2058,7 +1932,7 @@ module.exports = {
},
};
-},{}],20:[function(require,module,exports){
+},{}],19:[function(require,module,exports){
'use strict';
module.exports = {
@@ -2087,7 +1961,7 @@ module.exports = {
};
-},{}],21:[function(require,module,exports){
+},{}],20:[function(require,module,exports){
'use strict';
module.exports = {
@@ -2136,7 +2010,7 @@ module.exports = {
}
};
-},{}],22:[function(require,module,exports){
+},{}],21:[function(require,module,exports){
'use strict';
module.exports = {
@@ -2158,7 +2032,7 @@ module.exports = {
text: {
fill: '#ffffff',
disabledFill: '#999999',
- fontFamily: 'breuer',
+ fontFamily: 'Urbanist',
fontSize: 14,
originX: 'center',
originY: 'center',
@@ -2166,10 +2040,10 @@ module.exports = {
cursor: 'pointer',
disabledCursor: 'default',
- padding: 20,
+ padding: 17,
};
-},{}],23:[function(require,module,exports){
+},{}],22:[function(require,module,exports){
'use strict';
/* globals $, fabric */
@@ -2235,7 +2109,7 @@ function ExtendFabricFunctionality() {
module.exports = ExtendFabricFunctionality;
-},{"./Draggable":7,"./util":25}],24:[function(require,module,exports){
+},{"./Draggable":6,"./util":24}],23:[function(require,module,exports){
'use strict';
(function() {
@@ -2255,7 +2129,7 @@ module.exports = ExtendFabricFunctionality;
}());
-},{"./ImageEditor":11,"./extend-fabric-functionality":23}],25:[function(require,module,exports){
+},{"./ImageEditor":10,"./extend-fabric-functionality":22}],24:[function(require,module,exports){
'use strict';
module.exports = {
@@ -2273,7 +2147,7 @@ module.exports = {
isAspectChanged: require('./utils/is-aspect-changed'),
};
-},{"./utils/assert-between":26,"./utils/assert-key-value-pair":27,"./utils/calc-crop":28,"./utils/is-aspect-changed":29,"./utils/is-fullscreen":30,"./utils/is-mobile":31,"./utils/mouse-metrics":32,"./utils/set-position-inside":33,"./utils/set-properties":34,"./utils/supports-fullscreen":35,"./utils/toggle-fullscreen":36}],26:[function(require,module,exports){
+},{"./utils/assert-between":25,"./utils/assert-key-value-pair":26,"./utils/calc-crop":27,"./utils/is-aspect-changed":28,"./utils/is-fullscreen":29,"./utils/is-mobile":30,"./utils/mouse-metrics":31,"./utils/set-position-inside":32,"./utils/set-properties":33,"./utils/supports-fullscreen":34,"./utils/toggle-fullscreen":35}],25:[function(require,module,exports){
'use strict';
function assertBetween(value, min, max) {
@@ -2288,7 +2162,7 @@ function assertBetween(value, min, max) {
module.exports = assertBetween;
-},{}],27:[function(require,module,exports){
+},{}],26:[function(require,module,exports){
'use strict';
function assertKeyValuePair(key, value) {
@@ -2304,7 +2178,7 @@ function assertKeyValuePair(key, value) {
module.exports = assertKeyValuePair;
-},{}],28:[function(require,module,exports){
+},{}],27:[function(require,module,exports){
'use strict';
/**
@@ -2356,7 +2230,7 @@ function calcCrop(obj, width, height, units) {
module.exports = calcCrop;
-},{}],29:[function(require,module,exports){
+},{}],28:[function(require,module,exports){
'use strict';
function isAspectChanged(x1, y1, x2, y2) {
@@ -2365,7 +2239,7 @@ function isAspectChanged(x1, y1, x2, y2) {
module.exports = isAspectChanged;
-},{}],30:[function(require,module,exports){
+},{}],29:[function(require,module,exports){
'use strict';
function isFullscreen() {
@@ -2374,7 +2248,7 @@ function isFullscreen() {
module.exports = isFullscreen;
-},{}],31:[function(require,module,exports){
+},{}],30:[function(require,module,exports){
'use strict';
function isMobile() {
@@ -2383,7 +2257,7 @@ function isMobile() {
module.exports = isMobile;
-},{}],32:[function(require,module,exports){
+},{}],31:[function(require,module,exports){
'use strict';
var MouseMetrics = {
@@ -2409,7 +2283,7 @@ var MouseMetrics = {
module.exports = MouseMetrics;
-},{}],33:[function(require,module,exports){
+},{}],32:[function(require,module,exports){
'use strict';
/**
@@ -2432,7 +2306,7 @@ function setPositionInside(obj, bounds) {
module.exports = setPositionInside;
-},{}],34:[function(require,module,exports){
+},{}],33:[function(require,module,exports){
'use strict';
/**
@@ -2449,7 +2323,7 @@ function setProperties(obj, properties) {
module.exports = setProperties;
-},{}],35:[function(require,module,exports){
+},{}],34:[function(require,module,exports){
'use strict';
function supportsFullscreen() {
@@ -2460,7 +2334,7 @@ function supportsFullscreen() {
module.exports = supportsFullscreen;
-},{}],36:[function(require,module,exports){
+},{}],35:[function(require,module,exports){
'use strict';
var isFullscreen = require('./is-fullscreen');
@@ -2495,4 +2369,4 @@ function toggleFullscreen(elem) {
module.exports = toggleFullscreen;
-},{"./is-fullscreen":30}]},{},[24]);
+},{"./is-fullscreen":29}]},{},[23]);
diff --git a/examples/basic/index.html b/examples/basic/index.html
index 2b7291a..8aa3d4d 100644
--- a/examples/basic/index.html
+++ b/examples/basic/index.html
@@ -39,7 +39,7 @@
-
+