mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-03-12 03:50:22 +00:00
Replacing bindonce with native Angularjs syntax in Darkswarm
Involved changing bo-text -> ng-bind, bo-href-i -> ng-href, bo-src-i -> ng-src and ng-html -> ng-bind-html
This commit is contained in:
Rob Harrington
@@ -12,7 +12,6 @@
|
||||
#= require angular-scroll.min.js
|
||||
#= require angular-google-maps.min.js
|
||||
#= require ../shared/mm-foundation-tpls-0.8.0.min.js
|
||||
#= require ../shared/bindonce.min.js
|
||||
#= require ../shared/ng-infinite-scroll.min.js
|
||||
#= require ../shared/angular-local-storage.js
|
||||
#= require ../shared/angular-slideables.js
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
window.Darkswarm = angular.module("Darkswarm", ["ngResource",
|
||||
'mm.foundation',
|
||||
'angularLocalStorage',
|
||||
'pasvaz.bindonce',
|
||||
'infinite-scroll',
|
||||
'angular-flash.service',
|
||||
'templates',
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
%ul{ bindonce: true }
|
||||
%ul
|
||||
%active-selector{ ng: { repeat: "selector in allSelectors", show: "ifDefined(selector.fits, true)" } }
|
||||
%render-svg{path: "{{selector.object.icon}}", ng: { if: "selector.object.icon"} }
|
||||
%span{"bo-text" => "selector.object.name"}
|
||||
%span{"ng-bind" => "::selector.object.name"}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
%div.contact-container{bindonce: true}
|
||||
%div.modal-centered{"bo-if" => "enterprise.email_address || enterprise.website || enterprise.phone"}
|
||||
%div.contact-container
|
||||
%div.modal-centered{"ng-if" => "::enterprise.email_address || enterprise.website || enterprise.phone"}
|
||||
%p.modal-header {{'contact' | t}}
|
||||
%p{"bo-if" => "enterprise.phone", "bo-text" => "enterprise.phone"}
|
||||
%p{"ng-if" => "::enterprise.phone", "ng-bind" => "::enterprise.phone"}
|
||||
|
||||
%p.word-wrap{"ng-if" => "enterprise.email_address"}
|
||||
%a{"bo-href" => "enterprise.email_address | stripUrl", target: "_blank", mailto: true}
|
||||
%span.email{"bo-bind" => "enterprise.email_address | stripUrl"}
|
||||
%p.word-wrap{"ng-if" => "::enterprise.email_address"}
|
||||
%a{"ng-href" => "{{::enterprise.email_address | stripUrl}}", target: "_blank", mailto: true}
|
||||
%span.email{"ng-bind" => "::enterprise.email_address | stripUrl"}
|
||||
|
||||
%p.word-wrap{"ng-if" => "enterprise.website"}
|
||||
%a{"bo-href-i" => "http://{{enterprise.website | stripUrl}}", target: "_blank", "bo-bind" => "enterprise.website | stripUrl"}
|
||||
%a{"ng-href" => "http://{{::enterprise.website | stripUrl}}", target: "_blank", "ng-bind" => "::enterprise.website | stripUrl"}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.row{bindonce: true}
|
||||
.row
|
||||
.small-12.large-8.columns
|
||||
/ TODO: Rob add logic for taxons and properties too:
|
||||
/ %div{"ng-if" => "enterprise.long_description.length > 0 || enterprise.logo"}
|
||||
@@ -22,8 +22,8 @@
|
||||
-# / TODO: Rob - need popover, use will's directive or this? http://pineconellc.github.io/angular-foundation/
|
||||
-#
|
||||
.about-container.pad-top
|
||||
%img.enterprise-logo{"bo-src" => "enterprise.logo", "bo-if" => "enterprise.logo"}
|
||||
%p.text-small{"ng-bind-html" => "enterprise.long_description"}
|
||||
%img.enterprise-logo{"ng-src" => "::enterprise.logo", "ng-if" => "::enterprise.logo"}
|
||||
%p.text-small{"ng-bind-html" => "::enterprise.long_description"}
|
||||
.small-12.large-4.columns
|
||||
%ng-include{src: "'partials/contact.html'"}
|
||||
%ng-include{src: "'partials/follow.html'"}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
.highlight{bindonce: true, "ng-class" => "{'is_distributor' : enterprise.is_distributor}"}
|
||||
.highlight{"ng-class" => "::{'is_distributor' : enterprise.is_distributor}"}
|
||||
.highlight-top.row
|
||||
.small-12.medium-7.large-8.columns
|
||||
%h3{"ng-if" => "enterprise.is_distributor"}
|
||||
%a{"bo-href" => "enterprise.path", "ofn-change-hub" => "enterprise"}
|
||||
%i{"ng-class" => "enterprise.icon_font"}
|
||||
%span{"bo-text" => "enterprise.name"}
|
||||
%h3{"ng-if" => "!enterprise.is_distributor", "ng-class" => "{'is_producer' : enterprise.is_primary_producer}"}
|
||||
%i{"ng-class" => "enterprise.icon_font"}
|
||||
%span{"bo-text" => "enterprise.name"}
|
||||
%h3{"ng-if" => "::enterprise.is_distributor"}
|
||||
%a{"ng-href" => "{{::enterprise.path}}", "ofn-change-hub" => "enterprise"}
|
||||
%i{"ng-class" => "::enterprise.icon_font"}
|
||||
%span{"ng-bind" => "::enterprise.name"}
|
||||
%h3{"ng-if" => "::!enterprise.is_distributor", "ng-class" => "::{'is_producer' : enterprise.is_primary_producer}"}
|
||||
%i{"ng-class" => "::enterprise.icon_font"}
|
||||
%span{"ng-bind" => "::enterprise.name"}
|
||||
.small-12.medium-5.large-4.columns.text-right.small-only-text-left
|
||||
%p{"bo-bind" => "[enterprise.address.city, enterprise.address.state_name] | printArray"}
|
||||
%img.hero-img{"bo-src" => "enterprise.promo_image"}
|
||||
%p{"ng-bind" => "::[enterprise.address.city, enterprise.address.state_name] | printArray"}
|
||||
%img.hero-img{"ng-src" => "::enterprise.promo_image"}
|
||||
|
||||
@@ -1,19 +1,18 @@
|
||||
%div.modal-centered{bindonce: true, "bo-if" => "enterprise.twitter || enterprise.facebook || enterprise.linkedin || enterprise.instagram"}
|
||||
%div.modal-centered{ "ng-if" => "::enterprise.twitter || enterprise.facebook || enterprise.linkedin || enterprise.instagram"}
|
||||
%p.modal-header {{'follow' | t}}
|
||||
.follow-icons
|
||||
%span{"bo-if" => "enterprise.twitter"}
|
||||
%a{"bo-href-i" => "http://twitter.com/{{enterprise.twitter}}", target: "_blank"}
|
||||
%span{"ng-if" => "::enterprise.twitter"}
|
||||
%a{"ng-href" => "http://twitter.com/{{::enterprise.twitter}}", target: "_blank"}
|
||||
%i.ofn-i_041-twitter
|
||||
|
||||
%span{"bo-if" => "enterprise.facebook"}
|
||||
%a{"bo-href-i" => "http://{{enterprise.facebook | stripUrl}}", target: "_blank"}
|
||||
%i.ofn-i_044-facebook
|
||||
|
||||
%span{"bo-if" => "enterprise.linkedin"}
|
||||
%a{"bo-href-i" => "http://{{enterprise.linkedin | stripUrl}}", target: "_blank"}
|
||||
%i.ofn-i_042-linkedin
|
||||
|
||||
%span{"bo-if" => "enterprise.instagram"}
|
||||
%a{"bo-href-i" => "http://instagram.com/{{enterprise.instagram}}", target: "_blank"}
|
||||
%i.ofn-i_043-instagram
|
||||
|
||||
%span{"ng-if" => "::enterprise.facebook"}
|
||||
%a{"ng-href" => "http://{{::enterprise.facebook | stripUrl}}", target: "_blank"}
|
||||
%i.ofn-i_044-facebook
|
||||
|
||||
%span{"ng-if" => "::enterprise.linkedin"}
|
||||
%a{"ng-href" => "http://{{::enterprise.linkedin | stripUrl}}", target: "_blank"}
|
||||
%i.ofn-i_042-linkedin
|
||||
|
||||
%span{"ng-if" => "::enterprise.instagram"}
|
||||
%a{"ng-href" => "http://instagram.com/{{::enterprise.instagram}}", target: "_blank"}
|
||||
%i.ofn-i_043-instagram
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
.row.pad-top{bindonce: true, ng: { if: 'enterprise.is_distributor' } }
|
||||
.row.pad-top{ng: { if: 'enterprise.is_distributor' } }
|
||||
.cta-container.small-12.columns
|
||||
.row
|
||||
.small-4.columns
|
||||
%label{"active-table-hub-link" => "enterprise", change: "{{'change_shop' | t}}", shop: "{{'shop_at' | t}}"}
|
||||
.small-8.columns.right
|
||||
%label.right{"bo-if" => "enterprise.pickup || enterprise.delivery"}
|
||||
%label.right{"ng-if" => "::enterprise.pickup || enterprise.delivery"}
|
||||
{{'hubs_delivery_options' | t}}:
|
||||
%span{"bo-if" => "enterprise.pickup"}
|
||||
%span{"ng-if" => "::enterprise.pickup"}
|
||||
%i.ofn-i_038-takeaway
|
||||
{{'hubs_pickup' | t}}
|
||||
%span{"bo-if" => "enterprise.delivery"}
|
||||
%span{"ng-if" => "::enterprise.delivery"}
|
||||
%i.ofn-i_039-delivery
|
||||
{{'hubs_delivery' | t}}
|
||||
.row
|
||||
.columns.small-12
|
||||
%a.cta-hub{"bo-href" => "enterprise.path",
|
||||
%a.cta-hub{"ng-href" => "{{::enterprise.path}}",
|
||||
"ng-class" => "{primary: enterprise.active, secondary: !enterprise.active}",
|
||||
"ofn-change-hub" => "enterprise"}
|
||||
%i.ofn-i_033-open-sign{"bo-if" => "enterprise.active"}
|
||||
%i.ofn-i_032-closed-sign{"bo-if" => "!enterprise.active"}
|
||||
.hub-name{"bo-text" => "enterprise.name"}
|
||||
.button-address{"bo-bind" => "[enterprise.address.city, enterprise.address.state_name] | printArray"}
|
||||
%i.ofn-i_033-open-sign{"ng-if" => "::enterprise.active"}
|
||||
%i.ofn-i_032-closed-sign{"ng-if" => "::!enterprise.active"}
|
||||
.hub-name{"ng-bind" => "::enterprise.name"}
|
||||
.button-address{"ng-bind" => "::[enterprise.address.city, enterprise.address.state_name] | printArray"}
|
||||
/ %i.ofn-i_007-caret-right
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
-# Show places to buy products from this producer, when there are any
|
||||
-# Do not show this for producer shops selling only their own produce,
|
||||
-# Since a shopping link will already have been displayed in hub_details.html.haml
|
||||
.row.active_table_row.pad-top{bindonce: true, "ng-if" => "enterprise.is_primary_producer && enterprise.hubs.length > 0 && !(enterprise.hubs.length == 1 && enterprise.hubs[0] == enterprise)"}
|
||||
.row.active_table_row.pad-top{ "ng-if" => "enterprise.is_primary_producer && enterprise.hubs.length > 0 && !(enterprise.hubs.length == 1 && enterprise.hubs[0] == enterprise)"}
|
||||
.columns.small-12
|
||||
.row
|
||||
.columns.small-12.fat
|
||||
%div{"bo-if" => "enterprise.name"}
|
||||
%label{"bo-html" => "'shop_for_products_html' | t:{enterprise: enterprise.name}"}
|
||||
%div.show-for-medium-up{"bo-if" => "!enterprise.name"}
|
||||
%div{"ng-if" => "::enterprise.name"}
|
||||
%label{"ng-html" => "::'shop_for_products_html' | t:{enterprise: enterprise.name}"}
|
||||
%div.show-for-medium-up{"ng-if" => "::!enterprise.name"}
|
||||
|
||||
.row.cta-container
|
||||
.columns.small-12
|
||||
%a.cta-hub{"ng-repeat" => "hub in enterprise.hubs | filter:{id: '!'+enterprise.id} | orderBy:'-active'",
|
||||
"bo-href" => "hub.path", "ofn-empties-cart" => "hub",
|
||||
"bo-class" => "{primary: hub.active, secondary: !hub.active}"}
|
||||
%i.ofn-i_033-open-sign{"bo-if" => "hub.active"}
|
||||
%i.ofn-i_032-closed-sign{"bo-if" => "!hub.active"}
|
||||
.hub-name{"bo-text" => "hub.name"}
|
||||
.button-address{"bo-bind" => "[hub.address.city, hub.address.state_name] | printArray"}
|
||||
"ng-href" => "{{::hub.path}}", "ofn-empties-cart" => "hub",
|
||||
"ng-class" => "::{primary: hub.active, secondary: !hub.active}"}
|
||||
%i.ofn-i_033-open-sign{"ng-if" => "::hub.active"}
|
||||
%i.ofn-i_032-closed-sign{"ng-if" => "::!hub.active"}
|
||||
.hub-name{"ng-bind" => "::hub.name"}
|
||||
.button-address{"ng-bind" => "::[hub.address.city, hub.address.state_name] | printArray"}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.small-5.medium-3.large-3.columns.text-right{"bo-if" => "!variant.product.group_buy"}
|
||||
.small-5.medium-3.large-3.columns.text-right{"ng-if" => "::!variant.product.group_buy"}
|
||||
|
||||
%input{type: :number,
|
||||
integer: true,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.small-5.medium-3.large-3.columns.text-right{"bo-if" => "variant.product.group_buy"}
|
||||
.small-5.medium-3.large-3.columns.text-right{"ng-if" => "::variant.product.group_buy"}
|
||||
%span.bulk-input-container
|
||||
%span.bulk-input
|
||||
%input.bulk.first{type: :number,
|
||||
|
||||
@@ -1,38 +1,37 @@
|
||||
.joyride-tip-guide.price_breakdown{bindonce: true, "ng-class" => "{ in: tt_isOpen, fade: tt_animation }"}
|
||||
.joyride-tip-guide.price_breakdown{"ng-class" => "{ in: tt_isOpen, fade: tt_animation }"}
|
||||
%span.joyride-nub.right
|
||||
.joyride-content-wrapper
|
||||
.collapsed{"ng-show" => "!expanded"}
|
||||
%price-percentage{percentage: 'variant.basePricePercentage'}
|
||||
%a{"ng-click" => "expanded = !expanded"}
|
||||
%span{"bo-text" => "'price_breakdown' | t"}
|
||||
%a{"ng-click" => "expanded = !expanded"}
|
||||
%span{"ng-bind" => "::'price_breakdown' | t"}
|
||||
%i.ofn-i_005-caret-down
|
||||
|
||||
.expanded{"ng-show" => "expanded"}
|
||||
%ul
|
||||
%li.cost
|
||||
.right {{ variant.price | localizeCurrency }}
|
||||
%span{"bo-text" => "'item_cost' | t"}
|
||||
%li.admin-fee{"bo-if" => "variant.fees.admin"}
|
||||
%span{"ng-bind" => "::'item_cost' | t"}
|
||||
%li.admin-fee{"ng-if" => "::variant.fees.admin"}
|
||||
.right {{ variant.fees.admin | localizeCurrency }}
|
||||
%span{"bo-text" => "'admin_fee' | t"}
|
||||
%li.sales-fee{"bo-if" => "variant.fees.sales"}
|
||||
%span{"ng-bind" => "::'admin_fee' | t"}
|
||||
%li.sales-fee{"ng-if" => "::variant.fees.sales"}
|
||||
.right {{ variant.fees.sales | localizeCurrency }}
|
||||
%span{"bo-text" => "'sales_fee' | t"}
|
||||
%li.packing-fee{"bo-if" => "variant.fees.packing"}
|
||||
%span{"ng-bind" => "::'sales_fee' | t"}
|
||||
%li.packing-fee{"ng-if" => "::variant.fees.packing"}
|
||||
.right {{ variant.fees.packing | localizeCurrency }}
|
||||
%span{"bo-text" => "'packing_fee' | t"}
|
||||
%li.transport-fee{"bo-if" => "variant.fees.transport"}
|
||||
%span{"ng-bind" => "::'packing_fee' | t"}
|
||||
%li.transport-fee{"ng-if" => "::variant.fees.transport"}
|
||||
.right {{ variant.fees.transport | localizeCurrency }}
|
||||
%span{"bo-text" => "'transport_fee' | t"}
|
||||
%li.fundraising-fee{"bo-if" => "variant.fees.fundraising"}
|
||||
%span{"ng-bind" => "::'transport_fee' | t"}
|
||||
%li.fundraising-fee{"ng-if" => "::variant.fees.fundraising"}
|
||||
.right {{ variant.fees.fundraising | localizeCurrency }}
|
||||
%span{"bo-text" => "'fundraising_fee' | t"}
|
||||
%span{"ng-bind" => "::'fundraising_fee' | t"}
|
||||
%li.total
|
||||
%strong
|
||||
.right = {{ variant.price_with_fees | localizeCurrency }}
|
||||
|
||||
|
||||
%a{"ng-click" => "expanded = !expanded"}
|
||||
%span{"bo-text" => "'price_graph' | t"}
|
||||
%a{"ng-click" => "expanded = !expanded"}
|
||||
%span{"ng-bind" => "::'price_graph' | t"}
|
||||
%i.ofn-i_006-caret-up
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
.row{bindonce: true}
|
||||
.row
|
||||
|
||||
.columns.small-12.large-6.product-header
|
||||
%h3{"bo-text" => "product.name"}
|
||||
%h3{"ng-bind" => "::product.name"}
|
||||
%span
|
||||
%em {{'products_from' | t}}
|
||||
%span{"bo-text" => "enterprise.name"}
|
||||
%span{"ng-bind" => "::enterprise.name"}
|
||||
|
||||
%br
|
||||
|
||||
@@ -16,11 +16,11 @@
|
||||
|
||||
%div{"ng-if" => "product.description"}
|
||||
%hr
|
||||
%p.text-small{"bo-text" => "product.description"}
|
||||
%p.text-small{"ng-bind" => "::product.description"}
|
||||
%hr
|
||||
|
||||
.columns.small-12.large-6
|
||||
%img.product-img{"bo-src" => "product.largeImage", "bo-if" => "product.largeImage"}
|
||||
%img.product-img.placeholder{"bo-src" => "'/assets/noimage/large.png'", "bo-if" => "!product.largeImage"}
|
||||
%img.product-img{"ng-src" => "{{::product.largeImage}}", "ng-if" => "::product.largeImage"}
|
||||
%img.product-img.placeholder{ src: "/assets/noimage/large.png", "ng-if" => "::!product.largeImage"}
|
||||
|
||||
%ng-include{src: "'partials/close.html'"}
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
.container#registration-details{bindonce: true}
|
||||
.container#registration-details
|
||||
%ng-include{ src: "'registration/steps.html'" }
|
||||
.row
|
||||
.small-12.columns
|
||||
%header
|
||||
%h2 {{'registration_detail_headline' | t}}
|
||||
%h5{ bo: { if: "enterprise.type != 'own'" } } {{'registration_detail_enterprise' | t}}
|
||||
%h5{ bo: { if: "enterprise.type == 'own'" } } {{'registration_detail_producer' | t}}
|
||||
%h5{ ng: { if: "::enterprise.type != 'own'" } } {{'registration_detail_enterprise' | t}}
|
||||
%h5{ ng: { if: "::enterprise.type == 'own'" } } {{'registration_detail_producer' | t}}
|
||||
|
||||
%form{ name: 'details', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "selectIfValid('contact',details)" } }
|
||||
|
||||
.row
|
||||
.small-12.medium-9.large-12.columns.end
|
||||
.field
|
||||
%label{ for: 'enterprise_name', bo: { if: "enterprise.type != 'own'" } } {{'registration_detail_name_enterprise' | t}}
|
||||
%label{ for: 'enterprise_name', bo: { if: "enterprise.type == 'own'" } } {{'registration_detail_name_producer' | t}}
|
||||
%label{ for: 'enterprise_name', ng: { if: "::enterprise.type != 'own'" } } {{'registration_detail_name_enterprise' | t}}
|
||||
%label{ for: 'enterprise_name', ng: { if: "::enterprise.type == 'own'" } } {{'registration_detail_name_producer' | t}}
|
||||
%input.chunky{ id: 'enterprise_name', name: 'name', placeholder: "{{'registration_detail_name_placeholder' | t}}", required: true, ng: { model: 'enterprise.name' } }
|
||||
%span.error{ ng: { show: "details.name.$error.required && submitted" } }
|
||||
{{'registration_detail_name_error' | t}}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.container#registration-type{bindonce: true}
|
||||
.container#registration-type
|
||||
|
||||
%ng-include{ src: "'registration/steps.html'" }
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
{{'registration_type_question' | t}}
|
||||
|
||||
%form{ name: 'type', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "create(type)" } }
|
||||
.row#enterprise-types{ 'data-equalizer' => true, bo: { if: "enterprise.type != 'own'" } }
|
||||
.row#enterprise-types{ 'data-equalizer' => true, ng: { if: "::enterprise.type != 'own'" } }
|
||||
.small-12.columns.field
|
||||
.row
|
||||
.small-12.medium-6.large-6.columns{ 'data-equalizer-watch' => true }
|
||||
|
||||
@@ -2,16 +2,14 @@
|
||||
.small-12.medium-4.large-4.columns.variant-name
|
||||
.table-cell
|
||||
.inline {{ variant.name_to_display }}
|
||||
.bulk-buy.inline{"bo-if" => "variant.product.group_buy"}
|
||||
.bulk-buy.inline{"ng-if" => "::variant.product.group_buy"}
|
||||
%i.ofn-i_056-bulk><
|
||||
%em><
|
||||
\ {{'bulk' | t}}
|
||||
|
||||
|
||||
%ng-include{src: "'partials/shop_variant_no_group_buy.html'"}
|
||||
%ng-include{src: "'partials/shop_variant_with_group_buy.html'"}
|
||||
|
||||
|
||||
.small-3.medium-1.large-1.columns.variant-unit
|
||||
.table-cell
|
||||
%em {{ variant.unit_to_display }}
|
||||
|
||||
Reference in New Issue
Block a user