mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-02-06 22:36:07 +00:00
Use tabs_and_panels_controller.js instead of PageSelectionCtrl
Prefer StimulusJS over Angular
This commit is contained in:
Jean-Baptiste Bellet
@@ -1,22 +0,0 @@
|
||||
angular.module('Darkswarm').controller "PageSelectionCtrl", ($scope, $rootScope, $location) ->
|
||||
$scope.selectedPage = ->
|
||||
# The path looks like `/contact` for the URL `https://ofn.org/shop#/contact`.
|
||||
# We remove the slash at the beginning.
|
||||
page = $location.path()[1..]
|
||||
|
||||
return $scope.whitelist[0] unless page
|
||||
|
||||
# If the path points to an unrelated path like `/login`, stay where we were.
|
||||
return $scope.lastPage unless page in $scope.whitelist
|
||||
|
||||
$scope.lastPage = page
|
||||
page
|
||||
|
||||
$scope.whitelistPages = (pages) ->
|
||||
$scope.whitelist = pages
|
||||
$scope.lastPage = pages[0]
|
||||
|
||||
# when an order cycle is changed, ensure the shop tab is active to save a click
|
||||
$rootScope.$on "orderCycleSelected", ->
|
||||
if $scope.selectedPage() != "shop"
|
||||
$location.path("shop")
|
||||
@@ -1,15 +1,15 @@
|
||||
- if (@order&.distributor || current_distributor) == current_distributor
|
||||
|
||||
- shop_tabs.each do |tab|
|
||||
= render "shopping_shared/tabs/#{tab[:name]}"
|
||||
|
||||
#shop-tabs{ ng: { controller: "PageSelectionCtrl", init: "whitelistPages(#{shop_tab_names.to_json})", cloak: true } }
|
||||
#shop-tabs{"data-controller": "tabs-and-panels", "data-tabs-and-panels-class-name-value": "selected"}
|
||||
.tab-buttons
|
||||
.flex.row
|
||||
.columns.small-12.large-8
|
||||
- shop_tabs.each do |tab|
|
||||
.page{ "ng-class" => "{ selected: selectedPage() == '#{tab[:name]}' }" }
|
||||
%a{ href: "##{tab[:name]}" }=tab[:title]
|
||||
.page
|
||||
%a{ id: tab[:name], href: "##{tab[:name]}", data: { action: "tabs-and-panels#changeActivePanel tabs-and-panels#changeActiveTab", "tabs-and-panels-target": "tab" }, class: ("selected" if tab[:name] == "shop") }=tab[:title]
|
||||
.columns.large-4.show-for-large-up
|
||||
= render partial: "shopping_shared/order_cycles"
|
||||
.page-view{ ng: {include: "'shop/' + selectedPage() + '.html'" } }
|
||||
- shop_tabs.each do |tab|
|
||||
%div{id: "#{tab[:name]}_panel", "data-tabs-and-panels-target": "panel #{'default' if tab[:name] === "shop"}" }
|
||||
.page-view
|
||||
= render "shopping_shared/tabs/#{tab[:name]}"
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
%script{ type: "text/ng-template", id: "shop/about.html" }
|
||||
#about{"ng-controller" => "AboutUsCtrl"}
|
||||
%img.hero-img-small{"ng-src" => "{{::shopfront.promo_image}}", "ng-if" => "::shopfront.promo_image"}
|
||||
#about{"ng-controller" => "AboutUsCtrl"}
|
||||
%img.hero-img-small{"ng-src" => "{{::shopfront.promo_image}}", "ng-if" => "::shopfront.promo_image"}
|
||||
|
||||
.content
|
||||
.row
|
||||
.small-12.columns
|
||||
%p{"ng-bind-html" => "::shopfront.long_description"}
|
||||
.small-12.large-4.columns
|
||||
|
||||
.content
|
||||
.row
|
||||
.small-12.columns
|
||||
%p{"ng-bind-html" => "::shopfront.long_description"}
|
||||
.small-12.large-4.columns
|
||||
|
||||
|
||||
@@ -1,67 +1,66 @@
|
||||
%script{ type: "text/ng-template", id: "shop/contact.html" }
|
||||
.content#contact
|
||||
.row
|
||||
.small-12.large-4.columns
|
||||
- if current_distributor.address.address1 || current_distributor.address.address2 || current_distributor.address.city || current_distributor.address.state || current_distributor.address.zipcode
|
||||
%div.center
|
||||
.header
|
||||
= t :shopping_contact_address
|
||||
%span= current_distributor.name
|
||||
%p
|
||||
= current_distributor.address.address1
|
||||
- unless current_distributor.address.address2.blank?
|
||||
%br
|
||||
= current_distributor.address.address2
|
||||
.content#contact
|
||||
.row
|
||||
.small-12.large-4.columns
|
||||
- if current_distributor.address.address1 || current_distributor.address.address2 || current_distributor.address.city || current_distributor.address.state || current_distributor.address.zipcode
|
||||
%div.center
|
||||
.header
|
||||
= t :shopping_contact_address
|
||||
%span= current_distributor.name
|
||||
%p
|
||||
= current_distributor.address.address1
|
||||
- unless current_distributor.address.address2.blank?
|
||||
%br
|
||||
= current_distributor.address.city
|
||||
= current_distributor.address.state
|
||||
= current_distributor.address.zipcode
|
||||
= current_distributor.address.address2
|
||||
%br
|
||||
= current_distributor.address.city
|
||||
= current_distributor.address.state
|
||||
= current_distributor.address.zipcode
|
||||
|
||||
.small-12.large-4.columns
|
||||
- if current_distributor.website || current_distributor.email_address || current_distributor.phone || current_distributor.whatsapp_phone
|
||||
%div.center
|
||||
.header
|
||||
= t :shopping_contact_web
|
||||
%p
|
||||
- if current_distributor.phone.present?
|
||||
= current_distributor.phone
|
||||
.small-12.large-4.columns
|
||||
- if current_distributor.website || current_distributor.email_address || current_distributor.phone || current_distributor.whatsapp_phone
|
||||
%div.center
|
||||
.header
|
||||
= t :shopping_contact_web
|
||||
%p
|
||||
- if current_distributor.phone.present?
|
||||
= current_distributor.phone
|
||||
%br
|
||||
- if current_distributor.whatsapp_phone.present?
|
||||
%a{href: current_distributor.whatsapp_url, target: "_blank" }
|
||||
%img{ src: image_pack_path("social-logos/whatsapp.svg") }
|
||||
= current_distributor.whatsapp_phone
|
||||
%br
|
||||
- if current_distributor.whatsapp_phone.present?
|
||||
%a{href: current_distributor.whatsapp_url, target: "_blank" }
|
||||
%img{ src: image_pack_path("social-logos/whatsapp.svg") }
|
||||
= current_distributor.whatsapp_phone
|
||||
%br
|
||||
- if current_distributor.website.present?
|
||||
%a{href: "http://#{current_distributor.website}", target: "_blank" }
|
||||
= current_distributor.website
|
||||
%br
|
||||
- if current_distributor.email_address.present?
|
||||
%a{href: current_distributor.email_address.reverse, mailto: true}
|
||||
%span.obfuscatedEmail.email
|
||||
= current_distributor.email_address.reverse
|
||||
- if current_distributor.website.present?
|
||||
%a{href: "http://#{current_distributor.website}", target: "_blank" }
|
||||
= current_distributor.website
|
||||
%br
|
||||
- if current_distributor.email_address.present?
|
||||
%a{href: current_distributor.email_address.reverse, mailto: true}
|
||||
%span.obfuscatedEmail.email
|
||||
= current_distributor.email_address.reverse
|
||||
|
||||
.small-12.large-4.columns
|
||||
- if current_distributor.twitter.present? || current_distributor.facebook.present? || current_distributor.linkedin.present? || current_distributor.instagram.present?
|
||||
%div.center
|
||||
.header
|
||||
= t :shopping_contact_social
|
||||
%div.follow-icons
|
||||
- if current_distributor.twitter.present?
|
||||
%span
|
||||
%a{href: "http://twitter.com/#{current_distributor.twitter}", target: "_blank" }
|
||||
%i.twitter.ofn-i_041-twitter
|
||||
.small-12.large-4.columns
|
||||
- if current_distributor.twitter.present? || current_distributor.facebook.present? || current_distributor.linkedin.present? || current_distributor.instagram.present?
|
||||
%div.center
|
||||
.header
|
||||
= t :shopping_contact_social
|
||||
%div.follow-icons
|
||||
- if current_distributor.twitter.present?
|
||||
%span
|
||||
%a{href: "http://twitter.com/#{current_distributor.twitter}", target: "_blank" }
|
||||
%i.twitter.ofn-i_041-twitter
|
||||
|
||||
- if current_distributor.facebook.present?
|
||||
%span
|
||||
%a{href: "http://#{current_distributor.facebook}", target: "_blank" }
|
||||
%i.facebook.ofn-i_044-facebook
|
||||
- if current_distributor.facebook.present?
|
||||
%span
|
||||
%a{href: "http://#{current_distributor.facebook}", target: "_blank" }
|
||||
%i.facebook.ofn-i_044-facebook
|
||||
|
||||
- if current_distributor.linkedin.present?
|
||||
%span
|
||||
%a{href: "http://#{current_distributor.linkedin}", target: "_blank" }
|
||||
%i.linkedin.ofn-i_042-linkedin
|
||||
- if current_distributor.linkedin.present?
|
||||
%span
|
||||
%a{href: "http://#{current_distributor.linkedin}", target: "_blank" }
|
||||
%i.linkedin.ofn-i_042-linkedin
|
||||
|
||||
- if current_distributor.instagram.present?
|
||||
%span
|
||||
%a{href: "http://instagram.com/#{current_distributor.instagram}", target: "_blank" }
|
||||
%i.instagram.ofn-i_043-instagram
|
||||
- if current_distributor.instagram.present?
|
||||
%span
|
||||
%a{href: "http://instagram.com/#{current_distributor.instagram}", target: "_blank" }
|
||||
%i.instagram.ofn-i_043-instagram
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
%script{ type: "text/ng-template", id: "shop/groups.html" }
|
||||
.content
|
||||
.row
|
||||
.small-12.columns
|
||||
- if current_distributor.groups.length > 0
|
||||
%h5
|
||||
=current_distributor.name
|
||||
= t :shopping_groups_part_of
|
||||
%ul.bullet-list.small-block-grid-1.medium-block-grid-2.large-block-grid-3
|
||||
- for group in current_distributor.groups
|
||||
%li
|
||||
%a{href: main_app.groups_path + "/#{group.permalink}"}
|
||||
= group.name
|
||||
.content
|
||||
.row
|
||||
.small-12.columns
|
||||
- if current_distributor.groups.length > 0
|
||||
%h5
|
||||
=current_distributor.name
|
||||
= t :shopping_groups_part_of
|
||||
%ul.bullet-list.small-block-grid-1.medium-block-grid-2.large-block-grid-3
|
||||
- for group in current_distributor.groups
|
||||
%li
|
||||
%a{href: main_app.groups_path + "/#{group.permalink}"}
|
||||
= group.name
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
%script{ type: "text/ng-template", id: "shop/home.html" }
|
||||
.order-cycle-bar.hide-for-large-up
|
||||
= render partial: "shopping_shared/order_cycles"
|
||||
.order-cycle-bar.hide-for-large-up
|
||||
= render partial: "shopping_shared/order_cycles"
|
||||
|
||||
- if require_customer?
|
||||
= render partial: "shop/messages/customer_required"
|
||||
- if require_customer?
|
||||
= render partial: "shop/messages/customer_required"
|
||||
|
||||
- else
|
||||
- if no_open_order_cycles?
|
||||
= render partial: "shop/messages/closed_shop"
|
||||
|
||||
- else
|
||||
- if no_open_order_cycles?
|
||||
= render partial: "shop/messages/closed_shop"
|
||||
|
||||
- else
|
||||
= render partial: "shop/messages/open_shop"
|
||||
= render partial: "shop/messages/open_shop"
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
%script{ type: "text/ng-template", id: "shop/producers.html" }
|
||||
.content#producers{"ng-controller" => "ProducersTabCtrl"}
|
||||
.row
|
||||
.small-12.columns
|
||||
%h5
|
||||
= t :shopping_producers_of_hub, hub: '{{ shopfront.name }}'
|
||||
%ul.small-block-grid-1.medium-block-grid-2.large-block-grid-3
|
||||
%li{"ng-repeat" => "enterprise in shopfront.producers"}
|
||||
%enterprise-modal{"ng-if": "enterprise.visible != 'hidden'"}
|
||||
%i.ofn-i_036-producers
|
||||
{{ enterprise.name }}
|
||||
%span{"ng-if": "enterprise.visible == 'hidden'"}
|
||||
%i.ofn-i_036-producers
|
||||
{{ enterprise.name }}
|
||||
.content#producers{"ng-controller" => "ProducersTabCtrl"}
|
||||
.row
|
||||
.small-12.columns
|
||||
%h5
|
||||
= t :shopping_producers_of_hub, hub: '{{ shopfront.name }}'
|
||||
%ul.small-block-grid-1.medium-block-grid-2.large-block-grid-3
|
||||
%li{"ng-repeat" => "enterprise in shopfront.producers"}
|
||||
%enterprise-modal{"ng-if": "enterprise.visible != 'hidden'"}
|
||||
%i.ofn-i_036-producers
|
||||
{{ enterprise.name }}
|
||||
%span{"ng-if": "enterprise.visible == 'hidden'"}
|
||||
%i.ofn-i_036-producers
|
||||
{{ enterprise.name }}
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
%script{ type: "text/ng-template", id: "shop/shop.html" }
|
||||
.order-cycle-bar.hide-for-large-up
|
||||
= render partial: "shopping_shared/order_cycles"
|
||||
.order-cycle-bar.hide-for-large-up
|
||||
= render partial: "shopping_shared/order_cycles"
|
||||
|
||||
%div{"ng-controller" => "ProductsCtrl"}
|
||||
- if no_open_order_cycles?
|
||||
= render partial: "shop/messages/closed_shop"
|
||||
- else
|
||||
= render partial: "shop/messages/select_oc"
|
||||
%div{"ng-controller" => "ProductsCtrl"}
|
||||
- if no_open_order_cycles?
|
||||
= render partial: "shop/messages/closed_shop"
|
||||
- else
|
||||
= render partial: "shop/messages/select_oc"
|
||||
|
||||
-# Rendering the form, even if there are no open OCs, makes display only shops possible
|
||||
= render partial: "shop/products/form"
|
||||
-# Rendering the form, even if there are no open OCs, makes display only shops possible
|
||||
= render partial: "shop/products/form"
|
||||
|
||||
@@ -56,13 +56,13 @@
|
||||
padding: 0.35em 0 0.65em 0;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-bottom: 4px solid $teal-500;
|
||||
&.selected {
|
||||
border-bottom: 4px solid $teal-500;
|
||||
|
||||
a {
|
||||
color: $teal-500;
|
||||
a {
|
||||
color: $teal-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user