This repository has been archived by the owner on Feb 16, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 58
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
16 changed files
with
502 additions
and
226 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,164 +1,72 @@ | ||
| this.DetailsPane = (function(){ | ||
|
|
||
| var OFFICES = { | ||
| mv: { | ||
| address: '516 Clyde Avenue\nMountain View, CA 94043', | ||
| mapsUrl: 'https://maps.google.com/maps?q=Blue+Jeans+Network&hl=en&ll=37.398528,-122.046776&spn=0.270018,0.528374&cid=14115605422088510097&gl=US&t=m&z=12', | ||
| yelpId: 'bluejeans-mountain-view' | ||
| }, | ||
| sf: { | ||
| address: '625 2nd Street\nSuite 104\nSan Francisco, CA 94107', | ||
| mapsUrl: 'https://maps.google.com/maps?q=625+2nd+Street+%23104,+San+Francisco,+CA+94107&hl=en&ll=37.781366,-122.391386&spn=0.066887,0.132093&sll=37.781358,-122.391386&sspn=0.066887,0.132093&hnear=625+2nd+St+%23104,+San+Francisco,+California+94107&t=m&z=14&iwloc=A', | ||
| yelpId: null | ||
| }, | ||
| oc: { | ||
| address: '3333 Michelson Drive\nSuite 700\nIrvine, CA 92612', | ||
| mapsUrl: 'https://maps.google.com/maps?q=3333+Michelson+Drive,+Suite+700,+Irvine,+CA+92612&hl=en&ll=33.672926,-117.843475&spn=1.131436,2.113495&sll=33.916327,-118.105384&sspn=1.128228,2.113495&t=m&hnear=3333+Michelson+Dr+%23700,+Irvine,+Orange,+California+92612&z=10', | ||
| yelpId: null | ||
| }, | ||
| blr: { | ||
| address: 'Xylem Tech Park\n5th Floor\nUnit 501 and 502\nWhite Field Road\nDevasandra Extension\nMahadevapura\nBangalore\nKarnataka\n560048', | ||
| mapsUrl: 'https://www.google.com/maps?source=embed&near=International+Technology+Park+Bangalore,+1st+Floor,+Innovator+Building,+Whitefield+Road,+Bangalore,+Karnataka+560066,+India&geocode=CZMgqS6v0udsFW4mxgAd5SeiBCkzTpso5RGuOzFPgVFRu2mhtA&q=xylem&f=l&dq=Xylem+Tech+Park,+Bangalore&sll=12.985966,77.735909&sspn=0.295278,0.286308&ie=UTF8&hq=xylem&hnear=&ll=12.994438,77.701664&spn=0.015974,0.032787&z=14&iwloc=A&vpsrc=0&oi=map_misc&ct=api_logo', | ||
| yelpId: null | ||
| } | ||
| }; | ||
|
|
||
| var DetailsPane = Backbone.View.extend({ | ||
| initialize: function(){ | ||
| _.bindAll(this); | ||
|
|
||
| mediator.subscribe("activatePersonConfirmed", function(person, opts){ | ||
| this.els.intro.hide(); | ||
| this.els.content.show(); | ||
| this.trigger('change:model', person, opts); | ||
| this.toggleIntro(false); | ||
| this.setPersonModel(person); | ||
| }, {}, this); | ||
|
|
||
| this.on('change:model', this.setModel); | ||
| mediator.subscribe("activateRoom", function(endpoint, opts){ | ||
| this.toggleIntro(false); | ||
| this.setRoomModel(endpoint); | ||
| }, {}, this); | ||
|
|
||
| this.els = {}; | ||
| this.introView = new IntroView(); | ||
| this.personDetailsView = new PersonDetailsView(); | ||
| this.roomDetailsView = new RoomDetailsView(); | ||
| }, | ||
|
|
||
| render: function(){ | ||
| if(this.$el.is(':empty')){ | ||
| this.$el.addClass(floorplanParams.officeId); | ||
| var office = OFFICES[floorplanParams.officeId]; | ||
|
|
||
| var intro = this.els.intro = $('<div>', { class: 'intro' }); | ||
| intro.append($('<h2>', { text: 'Blue Jeans' })); | ||
| intro.append($('<h3>', { class: 'address' }).append($('<a>', { | ||
| text : office.address, | ||
| title : "View in Google Maps", | ||
| href : office.mapsUrl || '#', | ||
| target : '_blank' | ||
| }))); | ||
|
|
||
| if(office.yelpId){ | ||
| this.els.rating = $('<div>', { class: 'rating' }) | ||
| .click(function(){ | ||
| window.open('http://www.yelp.com/biz/bluejeans-mountain-view'); | ||
| }); | ||
| intro.append(this.els.rating); | ||
| } | ||
|
|
||
|
|
||
| var content = this.els.content = $('<div>', { class: 'content' }); | ||
|
|
||
| this.els.photo = $('<img>', { class: 'photo' }); | ||
| this.els.name = $('<h2>', { class: 'name' }); | ||
| this.els.title = $('<h3>', { class: 'title' }); | ||
|
|
||
| content.append(this.els.photo); | ||
| content.append(this.els.name); | ||
| content.append(this.els.title); | ||
|
|
||
| var dl = $('<dl>'); | ||
| this.els.email = $('<a>'); | ||
| this.els.linkedInProfile = $('<a>', { text: 'view profile', target: '_blank' }); | ||
| this.els.workPhone = $('<dd>'); | ||
| this.els.mobilePhone = $('<dd>'); | ||
|
|
||
| dl.append($('<dt>', { text: 'Email' })); | ||
| dl.append($('<dd>').append(this.els.email)); | ||
|
|
||
| dl.append($('<dt>', { text: 'LinkedIn' })); | ||
| dl.append($('<dd>').append(this.els.linkedInProfile)); | ||
|
|
||
| dl.append($('<dt>', { text: 'Mobile' })); | ||
| dl.append(this.els.mobilePhone); | ||
|
|
||
| dl.append($('<dt>', { text: 'Work' })); | ||
| dl.append(this.els.workPhone); | ||
|
|
||
| content.append(dl); | ||
|
|
||
| var correctionsLink = $('<a>', { | ||
| class: 'corrections', | ||
| href: 'mailto:[email protected]', | ||
| text: 'Suggest a correction' | ||
| }); | ||
|
|
||
| this.$el.append(intro); | ||
| this.$el.append(content); | ||
| this.$el.append(correctionsLink); | ||
|
|
||
| office.yelpId && this.renderRating(office.yelpId); | ||
| } | ||
|
|
||
| if(this.model){ | ||
| this.els.photo.attr('src', this.model.getPhotoPath()); | ||
| this.els.name.text(this.model.get('fullname')); | ||
| this.els.title.text(this.model.get('title') || ''); | ||
|
|
||
| var email = this.model.get('email'); | ||
| this.els.email | ||
| .attr('href', 'mailto:'+email+((email||'').indexOf('@') == -1 ? '@bluejeans.com' : '')) | ||
| .text(email) | ||
| .closest('dd').prev('dt').addBack().toggle(!!email); | ||
| this.introView.$el | ||
| .hide() | ||
| .appendTo(this.$el); | ||
|
|
||
| this.els.linkedInProfile | ||
| .attr('href', 'http://www.linkedin.com/profile/view?id='+this.model.get('linkedInId')) | ||
| .closest('dd').prev('dt').addBack().toggle(!!this.model.get('linkedInId')); | ||
| this.personDetailsView.$el | ||
| .appendTo(this.$el); | ||
|
|
||
| this.els.mobilePhone | ||
| .text(formatPhoneNumber(this.model.get('mobilePhone'))) | ||
| .prev('dt').addBack().toggle(!!this.model.get('mobilePhone')); | ||
| this.roomDetailsView.$el | ||
| .appendTo(this.$el); | ||
|
|
||
| this.els.workPhone | ||
| .text(formatPhoneNumber(this.model.get('workPhone'))) | ||
| .prev('dt').addBack().toggle(!!this.model.get('workPhone')); | ||
| this.$el.append(correctionsLink); | ||
| } | ||
|
|
||
| this.introView.render(); | ||
| this.personDetailsView.render(); | ||
| this.roomDetailsView.render(); | ||
|
|
||
| return this.el; | ||
| }, | ||
|
|
||
| setModel: function(model){ | ||
| this.model = model; | ||
| setPersonModel: function(model){ | ||
| this.personDetailsView.model = model; | ||
| this.roomDetailsView.model = null; | ||
| this.render(); | ||
| }, | ||
|
|
||
| renderRating: function(yelpId){ | ||
| yelp.getRating(yelpId) | ||
| .then(_.bind(function(rating){ | ||
| this.els.rating | ||
| .css('background-position', '-2px '+(-3 - 18*2*(rating.stars-.5))+'px') | ||
| .attr('title', rating.stars + ' stars on Yelp\n('+rating.reviews+' reviews)'); | ||
| }, this)) | ||
| setRoomModel: function(model){ | ||
| this.personDetailsView.model = null; | ||
| this.roomDetailsView.model = model; | ||
| this.render(); | ||
| }, | ||
|
|
||
| toggleIntro: function(shouldShow){ | ||
| this.els.intro.toggle(!!shouldShow); | ||
| this.els.content.toggle(!shouldShow); | ||
| this.introView.$el.toggle(!!shouldShow); | ||
| this.personDetailsView.$el.toggle(!shouldShow); | ||
| this.roomDetailsView.$el.toggle(!shouldShow); | ||
| } | ||
| }); | ||
|
|
||
| function formatPhoneNumber(phoneNumber){ | ||
| if(phoneNumber){ | ||
| return phoneNumber.replace(/[\(\)]/g, '').replace(/[\.]/g, '-'); | ||
| } else { | ||
| return phoneNumber; | ||
| } | ||
| } | ||
|
|
||
| return DetailsPane; | ||
|
|
||
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| this.IntroView = (function(){ | ||
|
|
||
| var OFFICES = { | ||
| mv: { | ||
| address: '516 Clyde Avenue\nMountain View, CA 94043', | ||
| mapsUrl: 'https://maps.google.com/maps?q=Blue+Jeans+Network&hl=en&ll=37.398528,-122.046776&spn=0.270018,0.528374&cid=14115605422088510097&gl=US&t=m&z=12', | ||
| yelpId: 'bluejeans-mountain-view' | ||
| }, | ||
| sf: { | ||
| address: '625 2nd Street\nSuite 104\nSan Francisco, CA 94107', | ||
| mapsUrl: 'https://maps.google.com/maps?q=625+2nd+Street+%23104,+San+Francisco,+CA+94107&hl=en&ll=37.781366,-122.391386&spn=0.066887,0.132093&sll=37.781358,-122.391386&sspn=0.066887,0.132093&hnear=625+2nd+St+%23104,+San+Francisco,+California+94107&t=m&z=14&iwloc=A', | ||
| yelpId: null | ||
| }, | ||
| oc: { | ||
| address: '3333 Michelson Drive\nSuite 700\nIrvine, CA 92612', | ||
| mapsUrl: 'https://maps.google.com/maps?q=3333+Michelson+Drive,+Suite+700,+Irvine,+CA+92612&hl=en&ll=33.672926,-117.843475&spn=1.131436,2.113495&sll=33.916327,-118.105384&sspn=1.128228,2.113495&t=m&hnear=3333+Michelson+Dr+%23700,+Irvine,+Orange,+California+92612&z=10', | ||
| yelpId: null | ||
| }, | ||
| blr: { | ||
| address: 'Xylem Tech Park\n5th Floor\nUnit 501 and 502\nWhite Field Road\nDevasandra Extension\nMahadevapura\nBangalore\nKarnataka\n560048', | ||
| mapsUrl: 'https://www.google.com/maps?source=embed&near=International+Technology+Park+Bangalore,+1st+Floor,+Innovator+Building,+Whitefield+Road,+Bangalore,+Karnataka+560066,+India&geocode=CZMgqS6v0udsFW4mxgAd5SeiBCkzTpso5RGuOzFPgVFRu2mhtA&q=xylem&f=l&dq=Xylem+Tech+Park,+Bangalore&sll=12.985966,77.735909&sspn=0.295278,0.286308&ie=UTF8&hq=xylem&hnear=&ll=12.994438,77.701664&spn=0.015974,0.032787&z=14&iwloc=A&vpsrc=0&oi=map_misc&ct=api_logo', | ||
| yelpId: null | ||
| } | ||
| }; | ||
|
|
||
| var IntroView = Backbone.View.extend({ | ||
|
|
||
| className: 'intro', | ||
|
|
||
| initialize: function(){ | ||
| _.bindAll(this); | ||
| }, | ||
|
|
||
| render: function(){ | ||
| if(this.$el.is(':empty')){ | ||
| this.$el.addClass(floorplanParams.officeId); | ||
| var office = OFFICES[floorplanParams.officeId]; | ||
|
|
||
| this.$el.append($('<h2>', { text: 'Blue Jeans' })); | ||
| this.$el.append($('<h3>', { class: 'address' }).append($('<a>', { | ||
| text : office.address, | ||
| title : "View in Google Maps", | ||
| href : office.mapsUrl || '#', | ||
| target : '_blank' | ||
| }))); | ||
|
|
||
| if(office.yelpId){ | ||
| var ratingEl = $('<div>', { class: 'rating' }) | ||
| .click(function(){ | ||
| window.open('http://www.yelp.com/biz/bluejeans-mountain-view'); | ||
| }); | ||
| this.$el.append(ratingEl); | ||
| } | ||
|
|
||
| office.yelpId && this.renderRating(office.yelpId); | ||
| } | ||
|
|
||
| return this.el; | ||
| }, | ||
|
|
||
| renderRating: function(yelpId){ | ||
| yelp.getRating(yelpId) | ||
| .then(_.bind(function(rating){ | ||
| this.$('.rating') | ||
| .css('background-position', '-2px '+(-3 - 18*2*(rating.stars-.5))+'px') | ||
| .attr('title', rating.stars + ' stars on Yelp\n('+rating.reviews+' reviews)'); | ||
| }, this)); | ||
| } | ||
| }); | ||
|
|
||
| return IntroView; | ||
|
|
||
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.