| 1 |
export default ( elemId, args ) => { |
| 2 |
return { |
| 3 |
getDeeplink() { |
| 4 |
let deeplink = []; |
| 5 |
|
| 6 |
if ( args.deeplinking ) { |
| 7 |
for ( let filter of this.filters ) { |
| 8 |
if ( filter.hasOwnProperty( 'getDeeplink' ) ) { |
| 9 |
deeplink.push( filter.getDeeplink() ); |
| 10 |
} |
| 11 |
} |
| 12 |
|
| 13 |
if ( false !== this.pagination ) { |
| 14 |
if ( this.pagination.hasOwnProperty( 'getDeeplink' ) ) { |
| 15 |
deeplink.push( this.pagination.getDeeplink() ); |
| 16 |
} |
| 17 |
} |
| 18 |
|
| 19 |
deeplink.push( this.getOrderDeeplink() ); |
| 20 |
} |
| 21 |
|
| 22 |
return deeplink.filter( ( l ) => l ).join( '+' ); |
| 23 |
}, |
| 24 |
updateDeeplink() { |
| 25 |
let deeplink = ''; |
| 26 |
|
| 27 |
for ( let grid of Object.values( WPUPG_Grids ) ) { |
| 28 |
let gridDeeplink = grid.getDeeplink(); |
| 29 |
|
| 30 |
if ( gridDeeplink ) { |
| 31 |
if ( deeplink ) { |
| 32 |
deeplink += '#'; |
| 33 |
} |
| 34 |
deeplink += `${ grid.gridSlug }+${ gridDeeplink }`; |
| 35 |
} |
| 36 |
} |
| 37 |
|
| 38 |
replaceDeeplink( deeplink ); |
| 39 |
}, |
| 40 |
jumpToGrid: false, |
| 41 |
restoreDeeplink() { |
| 42 |
let link = document.location.hash; |
| 43 |
link = link.substr(1); |
| 44 |
|
| 45 |
if ( link ) { |
| 46 |
// Make sure characters are not URL encoded |
| 47 |
link = link.replace( '%23', '#' ); |
| 48 |
link = link.replace( '%7C', '|' ); |
| 49 |
link = link.replace( '%2B', '+' ); |
| 50 |
link = link.replace( '%3A', ':' ); |
| 51 |
link = link.replace( '%2C', ',' ); |
| 52 |
|
| 53 |
// Backwards compatibility |
| 54 |
link = link.replace( '|', '+' ); |
| 55 |
|
| 56 |
const grids = link.split('#'); |
| 57 |
|
| 58 |
for ( let i = 0; i < grids.length; i++ ) { |
| 59 |
const grid = grids[i]; |
| 60 |
const parts = grid.split( '+' ); |
| 61 |
const gridSlug = parts.shift(); |
| 62 |
|
| 63 |
if ( 0 === i ) { |
| 64 |
this.jumpToGrid = gridSlug; |
| 65 |
} |
| 66 |
|
| 67 |
// Let each grid handle its own restore. |
| 68 |
if ( gridSlug === this.gridSlug ) { |
| 69 |
// Pause filtering until all filters and pagination are resolved. |
| 70 |
this.pauseFilter(); |
| 71 |
let promises = []; |
| 72 |
|
| 73 |
for ( let part of parts ) { |
| 74 |
const subParts = part.split( ':' ); |
| 75 |
const key = subParts[0]; |
| 76 |
const value = decodeURI( subParts[1] ); |
| 77 |
|
| 78 |
// Let pagination/filters check if this applies to them. |
| 79 |
for ( let filter of this.filters ) { |
| 80 |
if ( filter.hasOwnProperty( 'restoreDeeplink' ) ) { |
| 81 |
promises.push( filter.restoreDeeplink( key, value ) ); |
| 82 |
} |
| 83 |
} |
| 84 |
|
| 85 |
if ( false !== this.pagination ) { |
| 86 |
if ( this.pagination.hasOwnProperty( 'restoreDeeplink' ) ) { |
| 87 |
promises.push( this.pagination.restoreDeeplink( key, value ) ); |
| 88 |
} |
| 89 |
} |
| 90 |
} |
| 91 |
|
| 92 |
// Wait for all promises (if there are any) and resume the filter. Wait for max 2 seconds. |
| 93 |
Promise.race( |
| 94 |
[ |
| 95 |
Promise.all(promises), |
| 96 |
new Promise((resolve) => { |
| 97 |
setTimeout(resolve, 2000); |
| 98 |
}), |
| 99 |
] |
| 100 |
).then(() => this.restoredDeeplink() ).catch(() => this.restoredDeeplink() ); |
| 101 |
} |
| 102 |
} |
| 103 |
} else { |
| 104 |
this.fireEvent( 'restoredDeeplink', false ); |
| 105 |
} |
| 106 |
}, |
| 107 |
restoredDeeplink() { |
| 108 |
// Resume filtering (was paused to prevent too many animations). |
| 109 |
this.resumeFilter(); |
| 110 |
|
| 111 |
// Might be needed to hide pagination. |
| 112 |
this.loadItems({ |
| 113 |
type: 'count', |
| 114 |
}); |
| 115 |
|
| 116 |
// Maybe jump to grid. |
| 117 |
if ( args.hasOwnProperty( 'deeplinking_jump' ) && args.deeplinking_jump ) { |
| 118 |
if ( this.jumpToGrid && this.jumpToGrid === this.gridSlug ) { |
| 119 |
// Try to jump to full grid first. |
| 120 |
const elementsToJumpTo = [ |
| 121 |
`wpupg-grid-with-filters-${ this.gridSlug }`, |
| 122 |
`wpupg-grid-${ this.gridSlug }-filters`, |
| 123 |
`wpupg-grid-container-${ this.gridSlug }`, |
| 124 |
]; |
| 125 |
|
| 126 |
for ( let element of elementsToJumpTo ) { |
| 127 |
const elem = document.getElementById( element ); |
| 128 |
|
| 129 |
if ( elem ) { |
| 130 |
elem.scrollIntoView({ |
| 131 |
behavior: 'smooth', |
| 132 |
}); |
| 133 |
|
| 134 |
break; |
| 135 |
} |
| 136 |
} |
| 137 |
} |
| 138 |
} |
| 139 |
|
| 140 |
this.fireEvent( 'restoredDeeplink', true ); |
| 141 |
}, |
| 142 |
initDeeplinking() { |
| 143 |
if ( ! this.isPreview ) { |
| 144 |
this.on( 'initReady', () => { |
| 145 |
this.restoreDeeplink(); |
| 146 |
}); |
| 147 |
|
| 148 |
this.on( 'filter', () => { |
| 149 |
this.updateDeeplink(); |
| 150 |
}); |
| 151 |
|
| 152 |
this.on( 'sort', () => { |
| 153 |
this.updateDeeplink(); |
| 154 |
}); |
| 155 |
} |
| 156 |
}, |
| 157 |
} |
| 158 |
}; |
| 159 |
|
| 160 |
// Source: http://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-with-javascript-without-page-refresh/5298684#5298684 |
| 161 |
function replaceDeeplink( link ) { |
| 162 |
var scrollV, scrollH, loc = window.location; |
| 163 |
if ("replaceState" in history && ( 'http:' === loc.protocol || 'https:' === loc.protocol ) ) { |
| 164 |
var hash = link == '' ? '' : '#' + link; |
| 165 |
history.replaceState("", document.title, loc.pathname + hash + loc.search); |
| 166 |
} else { |
| 167 |
// Prevent scrolling by storing the page's current scroll offset |
| 168 |
scrollV = document.documentElement.scrollTop || document.body.scrollTop; |
| 169 |
scrollH = document.documentElement.scrollLeft || document.body.scrollLeft; |
| 170 |
|
| 171 |
loc.hash = link; |
| 172 |
|
| 173 |
// Restore the scroll offset, should be flicker free |
| 174 |
document.documentElement.scrollTop = document.body.scrollTop = scrollV; |
| 175 |
document.documentElement.scrollLeft = document.body.scrollLeft = scrollH; |
| 176 |
} |
| 177 |
} |
