Merge pull request #410 from matestack/fix_issue_408

Fix issue 408: Transition Component is missing the active class

Author: jonasjabari

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

@@ -53,7 +53,7 @@ const store = new Vuex.Store({
           setTimeout(function () {
             resolve(response["data"])
             commit('setPageTemplate', response["data"])
-            commit('setCurrentLocation', { path: url, search: document.location.search, origin: document.location.origin })
+            commit('setCurrentLocation', { path: url.split("?")[0], search: document.location.search, origin: document.location.origin })
             matestackEventHub.$emit("page_loaded", url);
             if (typeof matestackUiCoreTransitionSuccess !== 'undefined') {
               matestackUiCoreTransitionSuccess(url);

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

@@ -9,7 +9,10 @@ const componentDef = {
   },
   computed: Vuex.mapState({
     isActive (state) {
-      return this.componentConfig["link_path"] === state.currentPath
+      return (this.componentConfig["link_path"].split("?")[0]) === state.currentPathName
+    },
+    isChildActive (state) {
+      return ((this.componentConfig["link_path"].split("?")[0]) !== state.currentPathName) && (state.currentPathName.indexOf(this.componentConfig["link_path"].split("?")[0]) !== -1)
     }
   }),
   methods: {

app/concepts/matestack/ui/core/transition/transition.rb

@@ -6,7 +6,7 @@ def setup
       @tag_attributes.merge!({
         "href": link_path,
         "@click.prevent": navigate_to(link_path),
-        "v-bind:class": "{ active: isActive }"
+        "v-bind:class": "{ active: isActive, 'active-child': isChildActive }"
       })
     end
 

docs/components/transition.md

@@ -30,6 +30,18 @@ transition path: :page1_path, text: 'Click me for a transition'
 
 If no text is present, the transition component expects a block that it then *yields* the usual way.
 
+### Active class
+
+The `transition` component automatically gets the `active` class on the clientside when the current path equals the target path.
+
+When a sub page of a parent `transition` component is currently active, the parent `transition` component gets the `active-child` class. A sub page is recognized if the current path is included in the target path of the parent `transition` component:
+
+Parent target: `/some_page`
+
+Currently active: `/some_page/child_page` --> Parent gets `child-active`
+
+Query params do not interfere with this behavior.
+
 ## Examples
 
 The transition core component renders the HTML `<a>` tag and performs a page transition

spec/usage/components/transition_spec.rb

@@ -14,7 +14,7 @@ def response
             transition path: :page1_path do
               button text: "Page 1"
             end
-            transition path: :page2_path, params: { some_other_param: "bar" } do
+            transition path: :page2_path, params: {some_other_param: "bar" } do
               button text: "Page 2"
             end
           end
@@ -56,6 +56,26 @@ def response
             button text: "Back to Page 1"
             plain "#{context[:params][:some_other_param]}"
           end
+          transition path: :sub_page2_path do
+            button text: "Sub Page 2"
+          end
+        }
+      end
+
+    end
+
+    class Pages::ExampleApp::SubSecondExamplePage < Matestack::Ui::Page
+
+      def response
+        components {
+          div id: "my-div-on-page-2" do
+            heading size: 2, text: "This is a Subpage of Page 2"
+            plain "#{DateTime.now.strftime('%Q')}"
+          end
+          transition path: :page1_path do
+            button text: "Back to Page 1"
+            plain "#{context[:params][:some_other_param]}"
+          end
         }
       end
 
@@ -72,11 +92,16 @@ def page2
         responder_for(Pages::ExampleApp::SecondExamplePage)
       end
 
+      def sub_page2
+        responder_for(Pages::ExampleApp::SubSecondExamplePage)
+      end
+
     end
 
     Rails.application.routes.append do
       get 'my_example_app/page1', to: 'example_app_pages#page1', as: 'page1'
       get 'my_example_app/page2', to: 'example_app_pages#page2', as: 'page2'
+      get 'my_example_app/page2/sub_page2', to: 'example_app_pages#sub_page2', as: 'sub_page2'
     end
     Rails.application.reload_routes!
 
@@ -206,6 +231,40 @@ def page2
     expect(page).to have_selector("body.not-reloaded")
   end
 
+  it "Example 4 - Sets active class on clientside when target path is current path " do
+
+    visit "/my_example_app/page1"
+    sleep 1
+
+    link = find('a.active')
+    expect(link.text).to eq("Page 1")
+
+    click_button("Page 2")
+    sleep 1
+
+    link = find('a.active')
+    expect(link.text).to eq("Page 2")
+
+    # query params should not disturb active class
+    visit "/my_example_app/page1?some_param=foo"
+
+    link = find('a.active')
+    expect(link.text).to eq("Page 1")
+
+    # active sub page sets special active class on parent
+    visit "/my_example_app/page2"
+    sleep 1
+
+    link = find('a.active')
+    expect(link.text).to eq("Page 2")
+
+    click_button("Sub Page 2")
+    sleep 1
+
+    link = find('a.active-child')
+    expect(link.text).to eq("Page 2")
+  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
   #