swup - npm Package Compare versions

Comparing version 0.3.11 to 0.4.0

lib/Cache.js

@@ -62,2 +62,7 @@ 'use strict';
         }
+    }, {
+        key: 'remove',
+        value: function remove(url) {
+            delete this.pages[url];
+        }
     }]);
@@ -64,0 +69,0 @@

lib/index.js

@@ -135,3 +135,4 @@ 'use strict';
 
-            LINK_SELECTOR: 'a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]'
+            LINK_SELECTOR: 'a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]',
+            FORM_SELECTOR: 'form[data-swup-form]'
 
@@ -249,2 +250,7 @@ /**
             /**
+             * form submit handler
+             */
+            this.delegatedListeners.formSubmit = (0, _delegate2.default)(document, this.options.FORM_SELECTOR, 'submit', this.formSubmitHandler.bind(this));
+
+            /**
              * popstate handler
@@ -361,3 +367,3 @@ */
                     }
-                    this.loadPage(link.getAddress(), false);
+                    this.loadPage({ url: link.getAddress() }, false);
                 }
@@ -379,3 +385,3 @@ } else {
                     this.preloadPromise = new Promise(function (resolve) {
-                        _this2.getPage(link.getAddress(), function (response) {
+                        _this2.getPage({ url: link.getAddress() }, function (response) {
                             if (response === null) {
@@ -400,2 +406,61 @@ console.warn('Server error.');
     }, {
+        key: 'formSubmitHandler',
+        value: function formSubmitHandler(event) {
+            // no control key pressed
+            if (!event.metaKey) {
+                this.triggerEvent('submitForm');
+                event.preventDefault();
+                var form = event.target;
+                var formData = new FormData(form);
+
+                var link = new _Link2.default();
+                link.setPath(form.action);
+
+                if (form.method.toLowerCase() != "get") {
+                    // remove page from cache
+                    this.cache.remove(link.getAddress());
+
+                    // send data
+                    this.loadPage({
+                        url: link.getAddress(),
+                        method: form.method,
+                        data: formData
+                    });
+                } else {
+                    // create base url
+                    var url = link.getAddress() || window.location.href;
+                    var inputs = form.querySelectorAll('input');
+                    if (url.indexOf('?') == -1) {
+                        url += "?";
+                    } else {
+                        url += "&";
+                    }
+
+                    // add form data to url
+                    inputs.forEach(function (input) {
+                        if (input.type == "checkbox" || input.type == "radio") {
+                            if (input.checked) {
+                                url += encodeURIComponent(input.name) + "=" + encodeURIComponent(input.value) + "&";
+                            }
+                        } else {
+                            url += encodeURIComponent(input.name) + "=" + encodeURIComponent(input.value) + "&";
+                        }
+                    });
+
+                    // remove last "&"
+                    url = url.slice(0, -1);
+
+                    // remove page from cache
+                    this.cache.remove(url);
+
+                    // send data
+                    this.loadPage({
+                        url: url
+                    });
+                }
+            } else {
+                this.triggerEvent('openFormSubmitInNewTab');
+            }
+        }
+    }, {
         key: 'popStateHandler',
@@ -412,3 +477,3 @@ value: function popStateHandler(event) {
             this.triggerEvent('popState');
-            this.loadPage(link.getAddress(), event);
+            this.loadPage({ url: link.getAddress() }, event);
         }
@@ -415,0 +480,0 @@ }]);

lib/modules/loadPage.js

@@ -6,3 +6,3 @@ 'use strict';
 
-module.exports = function (url, popstate) {
+module.exports = function (data, popstate) {
     var _this = this;
@@ -24,3 +24,3 @@
         document.documentElement.classList.add('is-animating');
-        document.documentElement.classList.add('to-' + this.classify(url));
+        document.documentElement.classList.add('to-' + this.classify(data.url));
 
@@ -46,5 +46,5 @@ // detect animation end
         if (this.scrollToElement != null) {
-            var pop = url + this.scrollToElement;
+            var pop = data.url + this.scrollToElement;
         } else {
-            var pop = url;
+            var pop = data.url;
         }
@@ -57,3 +57,3 @@ this.createState(pop);
 
-    if (this.cache.exists(url)) {
+    if (this.cache.exists(data.url)) {
         var xhrPromise = new Promise(function (resolve) {
@@ -64,5 +64,5 @@ resolve();
     } else {
-        if (!this.preloadPromise || this.preloadPromise.route != url) {
+        if (!this.preloadPromise || this.preloadPromise.route != data.url) {
             var xhrPromise = new Promise(function (resolve) {
-                _this.getPage(url, function (response) {
+                _this.getPage(data, function (response) {
                     if (response === null) {
@@ -75,3 +75,3 @@ console.warn('Server error.');
                         var page = _this.getDataFromHtml(response);
-                        page.url = url;
+                        page.url = data.url;
                         // render page
@@ -90,3 +90,3 @@ _this.cache.cacheUrl(page, _this.options.debugMode);
     Promise.all(animationPromises.concat([xhrPromise])).then(function () {
-        finalPage = _this.cache.getPage(url);
+        finalPage = _this.cache.getPage(data.url);
         if (!_this.options.cache) {
@@ -93,0 +93,0 @@ _this.cache.empty(_this.options.debugMode);

lib/modules/preloadPages.js

@@ -17,3 +17,3 @@ 'use strict';
             if (link.getAddress() != _this.currentUrl && !_this.cache.exists(link.getAddress()) && _this.preloadPromise == null) {
-                _this.getPage(link.getAddress(), function (response) {
+                _this.getPage({ url: link.getAddress() }, function (response) {
                     if (response === null) {
@@ -20,0 +20,0 @@ console.warn('Server error.');

lib/modules/request.js

 "use strict";
 
-module.exports = function (location, callback) {
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+module.exports = function (options) {
+    var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+    var defaults = {
+        url: window.location.pathname + window.location.search,
+        method: "GET",
+        data: null
+    };
+
+    var data = _extends({}, defaults, options);
+
     var request = new XMLHttpRequest();
@@ -16,6 +28,6 @@
 
-    request.open("GET", location, true);
+    request.open(data.method, data.url, true);
     request.setRequestHeader("X-Requested-With", "swup");
-    request.send(null);
+    request.send(data.data);
     return request;
 };

package.json

 {
   "name": "swup",
-  "version": "0.3.11",
+  "version": "0.4.0",
   "description": "Animated page transitions with css.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

readme.md

@@ -21,2 +21,3 @@ # swup
 * [Link Selector](#link-selector)
+* [Form Selector](#form-selector)
 * [Element](#elements)
@@ -187,2 +188,17 @@ * [Animation Selector](#animation-selector)
 
+### Form Selector
+Form selector defines forms that will be submitted via swup (with animation and all, as any other request). By default, any form with `data-swup-form` attribute is selected. The raw selector form is shown below.
+```javascript
+FORM_SELECTOR: 'form[data-swup-form]'
+```
+Swup will take the form data and submit it with appropriate `method` and `action` based on form attributes, where method defaults to `GET` and action defaults to current url.
+In case of `GET` method, swup serializes the data into url. In case of `POST` request, swup wraps the data and sends in via POST request. 
+
+**Note:** This feature is rather experimental and serves to enable submission of simple forms such as "search on website" form. 
+The response from the server must be a valid page with all elements that need to be replaced by swup.
+Feature might not play well with swup cache. When cache is enabled, swup does not visit same url twice, including `POST` requests with different data. Consider disabling cache or removing page from cache when necessary with `swup.cache.remove('/you-url')` (swup does this before form submission, so the submit goes through every time). 
+This method does not support submission of files, or other advanced features. 
+Please refer to [API](#api) section, for using swup API for sending requests. 
+
+
 ### Elements
@@ -290,2 +306,3 @@ Elements option defines the array of selectors of elements to be replaced.
     LINK_SELECTOR: 'a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]',
+    FORM_SELECTOR: 'form[data-swup-form]',
     elements: [
@@ -344,2 +361,3 @@ '#swup'
 * **swup:pageRetrievedFromCache** - triggers when page is retrieved from cache and no request is necessary
+* **swup:submitForm** - triggers when form is submitted trough swup (right before submission)
 * **swup:enabled** - triggers when swup instance is created or re-enabled after call of `destroy()`
@@ -399,10 +417,24 @@ * **swup:disabled** - triggers on `destroy()`
 ```
+or remove page from cache
+```javascript
+// enable cache
+swup.cache.remove('/you-url');
+```
+
 or use built in functions
 ```javascript
-// navigates to /someRoute with the animations and all...
-swup.loadPage('/someRoute', false)
+// navigates to /someRoute with the animations and all... (can be used to submit forms)
+swup.loadPage({
+    url: "/someRoute", // route of request (defaults to current url)
+    method: "GET", // method of request (defaults to "GET")
+    data: data, // data passed into XMLHttpRequest send method
+});
+```
+**Note:** This built in function is used to submit forms with swup. For more information on submitting forms with `XMLHttpRequest`, refer to [Sending forms through JavaScript](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript).
+
+```javascript
 // disable swup
 swup.destroy()
 ```
-Sky is the limit here.
+Sky is the limit here...
 
@@ -409,0 +441,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

133575

increased by5.14%

Lines of code

1029

increased by7.3%

Number of lines in readme file

446

increased by7.73%

No dependency changes