Fix bug when checking if elements were parsed already

parse-element.js checks if the element was already parsed by
checking for the `data-pjax-click-state` attribute. However, this
attribute was not added until the link is clicked.

Originally, there was a separate attribute, `data-pjax-enabled`,
which tracked if the element was parsed already, but that was
changed in 9a86044.

This commit merges the attributes for mouse clicks and key presses
into one and adds that attribute when the element is initially
parsed.
This commit is contained in:
Behind The Math
2018-03-19 22:08:56 -04:00
parent 688810fbae
commit ee82d0e0c7
3 changed files with 12 additions and 18 deletions

View File

@@ -1,8 +1,7 @@
var on = require("../events/on") var on = require("../events/on")
var clone = require("../util/clone") var clone = require("../util/clone")
var attrClick = "data-pjax-click-state" var attrState = "data-pjax-state"
var attrKey = "data-pjax-keyup-state"
var linkAction = function(el, event) { var linkAction = function(el, event) {
// Since loadUrl modifies options and we may add our own modifications below, // Since loadUrl modifies options and we may add our own modifications below,
@@ -11,7 +10,7 @@ var linkAction = function(el, event) {
// Dont break browser special behavior on links (like page in new window) // Dont break browser special behavior on links (like page in new window)
if (event.which > 1 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) { if (event.which > 1 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
el.setAttribute(attrClick, "modifier") el.setAttribute(attrState, "modifier")
return return
} }
@@ -20,25 +19,25 @@ var linkAction = function(el, event) {
// Ignore external links. // Ignore external links.
if (el.protocol !== window.location.protocol || el.host !== window.location.host) { if (el.protocol !== window.location.protocol || el.host !== window.location.host) {
el.setAttribute(attrClick, "external") el.setAttribute(attrState, "external")
return return
} }
// Ignore click if we are on an anchor on the same page // Ignore click if we are on an anchor on the same page
if (el.pathname === window.location.pathname && el.hash.length > 0) { if (el.pathname === window.location.pathname && el.hash.length > 0) {
el.setAttribute(attrClick, "anchor-present") el.setAttribute(attrState, "anchor-present")
return return
} }
// Ignore anchors on the same page (keep native behavior) // Ignore anchors on the same page (keep native behavior)
if (el.hash && el.href.replace(el.hash, "") === window.location.href.replace(location.hash, "")) { if (el.hash && el.href.replace(el.hash, "") === window.location.href.replace(location.hash, "")) {
el.setAttribute(attrClick, "anchor") el.setAttribute(attrState, "anchor")
return return
} }
// Ignore empty anchor "foo.html#" // Ignore empty anchor "foo.html#"
if (el.href === window.location.href.split("#")[0] + "#") { if (el.href === window.location.href.split("#")[0] + "#") {
el.setAttribute(attrClick, "anchor-empty") el.setAttribute(attrState, "anchor-empty")
return return
} }
@@ -49,12 +48,12 @@ var linkAction = function(el, event) {
this.options.currentUrlFullReload && this.options.currentUrlFullReload &&
el.href === window.location.href.split("#")[0] el.href === window.location.href.split("#")[0]
) { ) {
el.setAttribute(attrClick, "reload") el.setAttribute(attrState, "reload")
this.reload() this.reload()
return return
} }
el.setAttribute(attrClick, "load") el.setAttribute(attrState, "load")
options.triggerElement = el options.triggerElement = el
this.loadUrl(el.href, options) this.loadUrl(el.href, options)
@@ -71,6 +70,7 @@ module.exports = function(el) {
if (isDefaultPrevented(event)) { if (isDefaultPrevented(event)) {
return return
} }
el.setAttribute(attrState, "")
linkAction.call(that, el, event) linkAction.call(that, el, event)
}) })
@@ -80,12 +80,6 @@ module.exports = function(el) {
return return
} }
// Dont break browser special behavior on links (like page in new window)
if (event.which > 1 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
el.setAttribute(attrKey, "modifier")
return
}
if (event.keyCode === 13) { if (event.keyCode === 13) {
linkAction.call(that, el, event) linkAction.call(that, el, event)
} }

View File

@@ -2,14 +2,14 @@ module.exports = function(el) {
switch (el.tagName.toLowerCase()) { switch (el.tagName.toLowerCase()) {
case "a": case "a":
// only attach link if el does not already have link attached // only attach link if el does not already have link attached
if (!el.hasAttribute("data-pjax-click-state")) { if (!el.hasAttribute("data-pjax-state")) {
this.attachLink(el) this.attachLink(el)
} }
break break
case "form": case "form":
// only attach link if el does not already have link attached // only attach link if el does not already have link attached
if (!el.hasAttribute("data-pjax-click-state")) { if (!el.hasAttribute("data-pjax-state")) {
this.attachForm(el) this.attachForm(el)
} }
break break

View File

@@ -5,7 +5,7 @@ var trigger = require("../../../lib/events/trigger")
var attachLink = require("../../../lib/proto/attach-link") var attachLink = require("../../../lib/proto/attach-link")
var a = document.createElement("a") var a = document.createElement("a")
var attr = "data-pjax-click-state" var attr = "data-pjax-state"
var preventDefault = function(e) { e.preventDefault() } var preventDefault = function(e) { e.preventDefault() }
tape("test attach link prototype method", function(t) { tape("test attach link prototype method", function(t) {