Merge pull request #395 from matestack/fix_issue_386

Fix issue 386

Author: jonasjabari

app/concepts/matestack/ui/core/app/app.js

@@ -10,12 +10,20 @@ const componentDef = {
   },
   computed: Vuex.mapState({
     asyncTemplate: state => state.pageTemplate,
+    currentPathName: state => state.currentPathName,
+    currentSearch: state => state.currentSearch,
+    currentOrigin: state => state.currentOrigin,
   }),
   mounted: function(){
+    const self = this;
     window.onpopstate = (event) => {
-      if (isNavigatingToAnotherPage(document.location, event)) {
-        this.$store.dispatch("navigateTo", {url: document.location.pathname, backwards: true} );
-      };
+      if (isNavigatingToAnotherPage({
+          origin: self.currentOrigin,
+          pathName: self.currentPathName,
+          search: self.currentSearch
+        }, document.location)){
+        self.$store.dispatch("navigateTo", {url: document.location.pathname, backwards: true} );
+      }
     }
   },
   components: {

app/concepts/matestack/ui/core/app/location.js

@@ -1,8 +1,7 @@
-const isNavigatingToAnotherPage = function(currentLocation, popstateEvent) {
-  const targetLocation = popstateEvent.target.location;
+const isNavigatingToAnotherPage = function(currentLocation, targetLocation) {
 
   // omits hash by design
-  return currentLocation.pathname !== targetLocation.pathname ||
+  return currentLocation.pathName !== targetLocation.pathname ||
     currentLocation.origin !== targetLocation.origin ||
     currentLocation.search !== targetLocation.search
 }

app/concepts/matestack/ui/core/app/store.js

@@ -8,14 +8,18 @@ Vue.use(Vuex)
 const store = new Vuex.Store({
   state: {
     pageTemplate: null,
-    currentPath: document.location.pathname
+    currentPathName: document.location.pathname,
+    currentSearch: document.location.search,
+    currentOrigin: document.location.origin
   },
   mutations: {
     setPageTemplate (state, serverResponse){
       state.pageTemplate = serverResponse
     },
-    setCurrentPath (state, path){
-      state.currentPath = path
+    setCurrentLocation (state, current){
+      state.currentPathName = current.path
+      state.currentSearch = current.search
+      state.currentOrigin = current.origin
     }
   },
   actions: {
@@ -46,7 +50,7 @@ const store = new Vuex.Store({
           setTimeout(function () {
             resolve(response["data"])
             commit('setPageTemplate', response["data"])
-            commit('setCurrentPath', url)
+            commit('setCurrentLocation', { path: url, search: document.location.search, origin: document.location.origin })
             matestackEventHub.$emit("page_loaded", url);
             if (typeof matestackUiCoreTransitionSuccess !== 'undefined') {
               matestackUiCoreTransitionSuccess(url);

spec/usage/components/transition_spec.rb

@@ -3,7 +3,7 @@
 
 describe "Transition Component", type: :feature, js: true do
 
-  it "Example 1 - Perform transition from one page to another without page reload if related to app" do
+  before :all do
 
     class Apps::ExampleApp < Matestack::Ui::App
 
@@ -78,6 +78,10 @@ def page2
     end
     Rails.application.reload_routes!
 
+  end
+
+  it "Example 1 - Perform transition from one page to another without page reload if related to app" do
+
     visit "/my_example_app/page1"
 
     expect(page).to have_content("My Example App Layout")
@@ -113,6 +117,46 @@ def page2
     expect(first_content_on_page_1).not_to eq(refreshed_content_on_page_1)
   end
 
+  it "Example 2 - Perform transition from one page to another without page reload when using page history buttons" do
+
+    visit "/my_example_app/page1"
+
+    expect(page).to have_content("My Example App Layout")
+    expect(page).to have_button("Page 1")
+    expect(page).to have_button("Page 2")
+
+    expect(page).to have_content("This is Page 1")
+    expect(page).not_to have_content("This is Page 2")
+
+    element = page.find("#my-div-on-page-1")
+    first_content_on_page_1 = element.text
+
+    page.evaluate_script('document.body.classList.add("not-reloaded")')
+    expect(page).to have_selector("body.not-reloaded")
+
+    click_button("Page 2")
+
+    expect(page).to have_content("My Example App Layout")
+    expect(page).not_to have_content("This is Page 1")
+    expect(page).to have_content("This is Page 2")
+    expect(page).to have_selector("body.not-reloaded")
+
+    page.go_back
+
+    expect(page).to have_content("My Example App Layout")
+    expect(page).to have_content("This is Page 1")
+    expect(page).not_to have_content("This is Page 2")
+    expect(page).to have_selector("body.not-reloaded")
+    expect(page).to have_no_content(first_content_on_page_1)
+
+    page.go_forward
+
+    expect(page).to have_content("My Example App Layout")
+    expect(page).not_to have_content("This is Page 1")
+    expect(page).to have_content("This is Page 2")
+    expect(page).to have_selector("body.not-reloaded")
+  end
+
   # supposed to work, but doesn't. Suspect Vue is the culprint here
   # it "Example 2 - Perform transition from one page to another by providing route as string (not recommended)" do
   #

vendor/assets/javascripts/dist/manifest.json

@@ -2,17 +2,21 @@
   "entrypoints": {
     "matestack-ui-core": {
       "css": [
-        "/dist/matestack-ui-core.min.css"
+        "/dist/matestack-ui-core.css"
       ],
       "js": [
-        "/dist/matestack-ui-core.min.js"
+        "/dist/matestack-ui-core.js"
+      ],
+      "css.map": [
+        "/dist/matestack-ui-core.css.map"
       ],
       "js.map": [
-        "/dist/matestack-ui-core.min.js.map"
+        "/dist/matestack-ui-core.js.map"
       ]
     }
   },
-  "matestack-ui-core.css": "/dist/matestack-ui-core.min.css",
-  "matestack-ui-core.js": "/dist/matestack-ui-core.min.js",
-  "matestack-ui-core.js.map": "/dist/matestack-ui-core.min.js.map"
+  "matestack-ui-core.css": "/dist/matestack-ui-core.css",
+  "matestack-ui-core.css.map": "/dist/matestack-ui-core.css.map",
+  "matestack-ui-core.js": "/dist/matestack-ui-core.js",
+  "matestack-ui-core.js.map": "/dist/matestack-ui-core.js.map"
 }