mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-02-28 01:53:25 +00:00
Adding modals for the map
This commit is contained in:
Will Marshall
33
app/assets/images/map-icon-hub.svg
Normal file
33
app/assets/images/map-icon-hub.svg
Normal file
@@ -0,0 +1,33 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="40px" height="48px" viewBox="-32.878 -67.317 40 48" enable-background="new -32.878 -67.317 40 48" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#8F301D" d="M-12.878-19.317c-0.19,0-0.382-0.058-0.537-0.176c-0.795-0.601-19.463-14.902-19.463-29.791
|
||||
c0-9.944,8.972-18.033,20-18.033s20,8.09,20,18.033c0,15.154-18.675,29.205-19.47,29.796
|
||||
C-12.501-19.374-12.69-19.317-12.878-19.317z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M-10.354-38.634c2.596-4.504,5.505-10.231,5.505-13.324c0-4.426-3.602-8.028-8.029-8.028
|
||||
c-4.427,0-8.029,3.602-8.029,8.029c0,3.097,2.907,8.821,5.505,13.324c-2.95,0.473-4.89,1.716-4.89,3.216
|
||||
c-0.002,1.956,3.187,3.432,7.414,3.432s7.414-1.476,7.414-3.433C-5.464-36.918-7.405-38.16-10.354-38.634z M-20.033-51.957
|
||||
c0-3.944,3.209-7.154,7.155-7.154c3.944,0,7.154,3.209,7.155,7.153c0,2.315-1.863,6.771-5.387,12.887l-0.483,0.837l-0.06,0.102
|
||||
c-0.109,0.185-0.204,0.344-0.301,0.505l-0.077,0.129l-0.175,0.295l-0.237,0.391l-0.176,0.291l-0.058,0.092l-0.046,0.074
|
||||
c-0.058,0.094-0.109,0.177-0.154,0.252l-0.153-0.249l-0.043-0.07l-0.068-0.111l-0.304-0.5l-0.093-0.152l-0.109-0.183l-0.092-0.154
|
||||
l-0.098-0.164c-0.056-0.093-0.111-0.186-0.17-0.284l0,0l-0.635-1.1C-18.119-45.09-20.033-49.668-20.033-51.957z M-12.879-33.01
|
||||
c-3.766,0-6.391-1.267-6.391-2.408c0-0.851,1.644-1.908,4.412-2.27c0.133,0.227,0.245,0.412,0.366,0.614
|
||||
c0.066,0.111,0.136,0.226,0.198,0.332c0.153,0.251,0.282,0.461,0.403,0.661c0.038,0.062,0.08,0.131,0.116,0.188
|
||||
c0.132,0.217,0.234,0.382,0.312,0.508c0.008,0.01,0.019,0.031,0.028,0.043c0.078,0.126,0.124,0.197,0.124,0.197l0.431,0.682
|
||||
l0.435-0.682c0,0,0.041-0.064,0.117-0.185c0.018-0.028,0.043-0.071,0.066-0.108c0.077-0.12,0.166-0.264,0.286-0.461
|
||||
c0.028-0.043,0.06-0.096,0.089-0.142c0.127-0.211,0.268-0.44,0.431-0.71c0.055-0.093,0.119-0.2,0.179-0.301
|
||||
c0.124-0.207,0.241-0.402,0.379-0.635c2.768,0.361,4.41,1.418,4.41,2.269C-6.49-34.277-9.114-33.01-12.879-33.01z"/>
|
||||
<path fill="#FFFFFF" d="M-8.941-51.964c0-2.174-1.763-3.938-3.938-3.938s-3.938,1.763-3.938,3.938
|
||||
c0,2.174,1.763,3.938,3.938,3.938S-8.941-49.79-8.941-51.964z M-15.941-51.964c0-1.689,1.374-3.062,3.062-3.062
|
||||
s3.062,1.374,3.062,3.062c0,1.689-1.374,3.062-3.062,3.062S-15.941-50.276-15.941-51.964z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
47
app/assets/images/map-icon-producer.svg
Normal file
47
app/assets/images/map-icon-producer.svg
Normal file
@@ -0,0 +1,47 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="40px" height="48px" viewBox="17.362 -67.317 40 48" enable-background="new 17.362 -67.317 40 48" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#0A5647" d="M37.362-19.317c-0.19,0-0.382-0.058-0.537-0.176c-0.795-0.601-19.463-14.902-19.463-29.791
|
||||
c0-9.944,8.972-18.033,20-18.033s20,8.09,20,18.033c0,15.154-18.675,29.205-19.47,29.796
|
||||
C37.739-19.374,37.551-19.317,37.362-19.317z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M35.854-54.162l-5.744,0.01l-0.005,1.407l-0.004,4.232c1.756-0.064,3.767-0.1,5.717-0.1
|
||||
c0.656,0,1.306,0.004,1.936,0.013l-0.066-0.026L35.854-54.162z M35.817-49.487c-1.601,0-3.287,0.025-4.841,0.071l0.004-3.327
|
||||
l0.002-0.535l4.24-0.007l1.258,3.799C36.261-49.487,36.039-49.487,35.817-49.487z"/>
|
||||
<path fill="#FFFFFF" d="M50.94-43.756c0.176-0.936,0.304-1.937,0.404-3.147c0.044-0.529,0.034-1.133-0.376-1.596
|
||||
c-0.41-0.463-1.02-0.547-1.561-0.568c-1.148-0.041-2.222-0.084-3.341-0.13c0.013-1.177,0.047-2.809,0.048-2.83l0.01-0.455
|
||||
l-0.367-0.269c-0.084-0.062-0.536-0.369-1.175-0.37c-0.344,0-0.507,0.088-0.816,0.261l-0.28,0.25v0.513v2.77
|
||||
c-0.875-0.017-1.75-0.041-3.501-0.067c0-0.001,0-0.001,0-0.002c0-0.305-0.17-0.702-0.357-1.191
|
||||
c-0.434-1.135-0.832-2.69-1.557-4.782l0.164-0.025v-0.065c-0.875-0.678-1.464-1.864-3.003-1.864H28.44h-0.706v0.953v6.908
|
||||
c0,0.011-0.191,0.021-0.238,0.025l-0.71,0.067l-0.13,0.662c-0.109,0.663-0.184,1.298,0.214,1.771
|
||||
c-2.078,1.09-3.508,3.267-3.508,5.772c0,3.593,2.922,6.517,6.516,6.517c3.409,0,6.207-2.633,6.486-5.973l0.074,0.01l0.121-0.055
|
||||
c0.121,0.019,0.269-0.03,0.435-0.03h0.016l0.044,0.073c1.031-0.026,2.071-0.008,3.112-0.026c1.225-0.022,2.476-0.025,3.73-0.062
|
||||
c-0.355,0.599-0.556,1.304-0.556,2.033c0,2.201,1.791,3.996,3.993,3.996c2.201,0,3.992-1.788,3.992-3.989
|
||||
c0-1.045-0.419-2.017-1.105-2.74c0.308-0.29,0.478-0.754,0.591-1.529C50.841-43.165,50.88-43.434,50.94-43.756z M29.877-35.523
|
||||
c-3.112,0-5.644-2.531-5.644-5.642c0-2.504,1.641-4.629,3.904-5.365c0.164-0.021,0.34-0.054,0.558-0.116
|
||||
c0.213-0.06,0.429-0.102,0.645-0.135c0.177-0.017,0.355-0.027,0.536-0.027c3.109,0,5.639,2.531,5.639,5.642
|
||||
S32.986-35.523,29.877-35.523z M50.473-46.976c-0.085,1.023-0.204,2.049-0.393,3.059c-0.39,2.095,0.06,2.025-2.267,2.172
|
||||
c1.489,0.233,2.636,1.521,2.636,3.075c0,1.72-1.398,3.116-3.117,3.116c-1.721,0-3.118-1.397-3.118-3.116
|
||||
c0-1.43,0.971-2.709,2.286-3.073c-3.156,0.158-6.319,0.171-9.478,0.171c-0.01,0-0.019,0-0.029,0c-0.142,0-0.288,0.039-0.445,0.018
|
||||
c-0.027-0.196-0.05-0.316-0.067-0.473c-0.402-3.3-3.205-5.713-6.353-5.713c-0.295,0-0.592,0.034-0.892,0.079
|
||||
c-0.447,0.044-0.881,0.137-1.298,0.266c-0.026,0.002-0.059,0.011-0.083,0.011c-0.465,0-0.411-0.352-0.274-1.185
|
||||
c0.431-0.043,1.027-0.257,1.027-0.257v-7.624c0,0,5.49,0,6.623,0c1.369,0,1.91,1.328,1.91,1.328
|
||||
c1.046,3.02,1.843,5.001,2.207,6.009c0.141,0.383,0.609,0.576,0.717,0.578c2.427,0.05,4.296,0.105,4.296,0.105
|
||||
c0-1.266,0-2.476,0-3.668c0-0.111,0.22-0.15,0.389-0.15c0.385,0,0.573,0.2,0.573,0.2s-0.095,2.555-0.095,3.606
|
||||
c0,0.056,0.048,0.086,0.09,0.087c1.395,0.056,2.671,0.109,4.066,0.158C50.321-48.157,50.553-47.933,50.473-46.976z"/>
|
||||
<path fill="#FFFFFF" d="M45.695-38.67c0,0.903,0.735,1.638,1.637,1.638c0.901,0,1.637-0.735,1.637-1.638
|
||||
c0-0.902-0.736-1.637-1.637-1.637C46.43-40.306,45.695-39.571,45.695-38.67z M48.094-38.67c0,0.421-0.342,0.763-0.762,0.763
|
||||
c-0.42,0-0.761-0.342-0.761-0.763c0-0.419,0.341-0.761,0.761-0.761C47.751-39.43,48.094-39.089,48.094-38.67z"/>
|
||||
<path fill="#FFFFFF" d="M29.877-44.299c-1.728,0-3.133,1.405-3.133,3.134c0,1.728,1.405,3.132,3.133,3.132
|
||||
c1.728,0,3.133-1.405,3.133-3.132S31.604-44.299,29.877-44.299z M29.877-38.908c-1.245,0-2.258-1.013-2.258-2.257
|
||||
c0-1.245,1.013-2.259,2.258-2.259c1.245,0,2.258,1.013,2.258,2.259C32.135-39.92,31.121-38.908,29.877-38.908z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
@@ -1,10 +1,9 @@
|
||||
Darkswarm.controller "MapCtrl", ($scope, MapConfiguration, OfnMap, Marker)->
|
||||
Darkswarm.controller "MapCtrl", ($scope, MapConfiguration, OfnMap)->
|
||||
$scope.OfnMap = OfnMap
|
||||
console.log Marker
|
||||
window.Marker = Marker
|
||||
$scope.map =
|
||||
center:
|
||||
latitude: -37.775757
|
||||
longitude: 144.743663
|
||||
zoom: 8
|
||||
styles: MapConfiguration.options
|
||||
|
||||
|
||||
14
app/assets/javascripts/darkswarm/services/map.js.coffee
Normal file
14
app/assets/javascripts/darkswarm/services/map.js.coffee
Normal file
@@ -0,0 +1,14 @@
|
||||
Darkswarm.factory "OfnMap", (enterprisesForMap, MapModal)->
|
||||
new class OfnMap
|
||||
constructor: ->
|
||||
@enterprises = (@extend(enterprise) for enterprise in enterprisesForMap)
|
||||
|
||||
# Adding methods to each enterprise
|
||||
extend: (enterprise)->
|
||||
new class MapMarker
|
||||
icon: "/test.opng"
|
||||
constructor: ->
|
||||
@[k] = v for k, v of enterprise
|
||||
|
||||
reveal: =>
|
||||
MapModal.open @
|
||||
@@ -0,0 +1,6 @@
|
||||
Darkswarm.factory "MapModal", ($modal, $rootScope)->
|
||||
new class MapModal
|
||||
open: (enterprise)->
|
||||
scope = $rootScope.$new(true) # Spawn an isolate to contain the enterprise
|
||||
scope.enterprise = enterprise
|
||||
$modal.open(templateUrl: "map_modal.html", scope: scope)
|
||||
48
app/assets/javascripts/templates/map_modal.html.haml
Normal file
48
app/assets/javascripts/templates/map_modal.html.haml
Normal file
@@ -0,0 +1,48 @@
|
||||
.row
|
||||
.small-12.columns.producer-hero
|
||||
%h3.producer-name
|
||||
%i.ofn-i_036-producers
|
||||
{{ producer.name }}
|
||||
%img.producer-hero-img{"ng-src" => "{{enterprise.promo_image}}"}
|
||||
|
||||
.row
|
||||
.small-12.large-6.columns
|
||||
%p{"ng-bind-html" => "enterprise.long_description"}
|
||||
.small-12.large-6.columns
|
||||
%img.producer-logo{"ng-src" => "{{enterprise.logo}}", "ng-if" => "enterprise.logo"}
|
||||
%h5 Stay in touch with {{ enterprise.name }}
|
||||
|
||||
%ul.small-block-grid-1{bindonce: true}
|
||||
|
||||
%li{"ng-if" => "enterprise.website"}
|
||||
%a{"ng-href" => "http://{{enterprise.website | stripUrl}}", target: "_blank" }
|
||||
%i.ofn-i_049-web
|
||||
{{ enterprise.website | stripUrl }}
|
||||
|
||||
%li{"ng-if" => "enterprise.email"}
|
||||
%a{"ng-href" => "mailto:{{enterprise.email | stripUrl}}", target: "_blank" }
|
||||
%i.ofn-i_050-mail-circle
|
||||
{{ enterprise.email | stripUrl }}
|
||||
|
||||
%li{"ng-if" => "enterprise.twitter"}
|
||||
%a{"ng-href" => "http://twitter.com/{{enterprise.twitter}}", target: "_blank"}
|
||||
%i.ofn-i_041-twitter
|
||||
{{ enterprise.twitter }}
|
||||
|
||||
%li{"ng-if" => "enterprise.facebook"}
|
||||
%a{"ng-href" => "http://{{enterprise.facebook | stripUrl}}", target: "_blank"}
|
||||
%i.ofn-i_044-facebook
|
||||
{{ enterprise.facebook | stripUrl }}
|
||||
|
||||
%li{"ng-if" => "enterprise.linkedin"}
|
||||
%a{"ng-href" => "http://{{enterprise.linkedin | stripUrl}}", target: "_blank"}
|
||||
%i.ofn-i_042-linkedin
|
||||
{{ enterprise.linkedin | stripUrl }}
|
||||
|
||||
%li{"ng-if" => "enterprise.instagram"}
|
||||
%a{"ng-href" => "http://instagram.com/{{enterprise.instagram}}", target: "_blank"}
|
||||
%i.ofn-i_043-instagram
|
||||
{{ enterprise.instagram }}
|
||||
|
||||
%a.close-reveal-modal{"ng-click" => "$close()"}
|
||||
%i.ofn-i_009-close
|
||||
11
app/views/json/_enterprises_for_map.rabl
Normal file
11
app/views/json/_enterprises_for_map.rabl
Normal file
@@ -0,0 +1,11 @@
|
||||
collection @enterprises
|
||||
extends 'json/enterprises'
|
||||
attributes :latitude, :longitude
|
||||
|
||||
node :icon do |e|
|
||||
if e.is_primary_producer?
|
||||
image_path "map-icon-producer.svg"
|
||||
else
|
||||
image_path "map-icon-hub.svg"
|
||||
end
|
||||
end
|
||||
@@ -4,9 +4,6 @@
|
||||
= inject_json "enterprisesForMap" , "enterprises_for_map", collection: @enterprises
|
||||
|
||||
%map{"ng-controller" => "MapCtrl"}
|
||||
%span{"ng-repeat" => "marker in OfnMap.enterprises"}
|
||||
{{ marker.visible }}
|
||||
|
||||
%google-map{center: "map.center", zoom: "map.zoom", styles: "map.styles", draggable: "true"}
|
||||
|
||||
%markers{models: "OfnMap.enterprises", fit: "true",
|
||||
|
||||
Reference in New Issue
Block a user