2016-01-26 19:28:29 -05:00
RootView = require ' views/core/RootView '
template = require ' templates/new-home-view '
CocoCollection = require ' collections/CocoCollection '
Course = require ' models/Course '
2016-02-09 15:07:19 -05:00
utils = require ' core/utils '
2016-03-22 18:21:17 -04:00
storage = require ' core/storage '
{ logoutUser , me } = require ( ' core/auth ' )
2016-01-26 19:28:29 -05:00
2016-02-02 17:50:43 -05:00
# TODO: auto margin feature paragraphs
2016-01-26 19:28:29 -05:00
module.exports = class NewHomeView extends RootView
id: ' new-home-view '
className: ' style-flat '
template: template
events:
2016-03-22 18:21:17 -04:00
' click .play-btn ' : ' onClickPlayButton '
2016-01-26 19:28:29 -05:00
' change # school-level-dropdown ' : ' onChangeSchoolLevelDropdown '
2016-03-22 18:21:17 -04:00
' click .teacher-btn ' : ' onClickTeacherButton '
2016-01-26 19:28:29 -05:00
' click # learn-more-link ' : ' onClickLearnMoreLink '
2016-03-04 15:05:07 -05:00
' click .screen-thumbnail ' : ' onClickScreenThumbnail '
' click # carousel-left ' : ' onLeftPressed '
' click # carousel-right ' : ' onRightPressed '
2016-03-22 18:21:17 -04:00
' click .request-demo ' : ' onClickRequestDemo '
' click .join-class ' : ' onClickJoinClass '
' click .logout-btn ' : ' logoutAccount '
2016-03-04 15:05:07 -05:00
shortcuts:
' right ' : ' onRightPressed '
' left ' : ' onLeftPressed '
' esc ' : ' onEscapePressed '
2016-01-26 19:28:29 -05:00
initialize: (options) ->
@courses = new CocoCollection [ ] , { url: " /db/course " , model: Course }
@ supermodel . loadCollection ( @ courses , ' courses ' )
2016-03-22 18:21:17 -04:00
@ variation ? = me . getHomepageGroup ( )
2016-01-26 19:28:29 -05:00
window . tracker ? . trackEvent ' Homepage Loaded ' , category: ' Homepage '
if @ getQueryVariable ' hour_of_code '
application . router . navigate " /hoc " , trigger: true
isHourOfCodeWeek = false # Temporary: default to /hoc flow during the main event week
if isHourOfCodeWeek and ( @ isNewPlayer ( ) or ( @ justPlaysCourses ( ) and me . isAnonymous ( ) ) )
# Go/return straight to playing single-player HoC course on Play click
@playURL = ' /hoc?go=true '
@alternatePlayURL = ' /play '
@alternatePlayText = ' home.play_campaign_version '
else if @ justPlaysCourses ( )
# Save players who might be in a classroom from getting into the campaign
@playURL = ' /courses '
@alternatePlayURL = ' /play '
@alternatePlayText = ' home.play_campaign_version '
else
@playURL = ' /play '
onClickPlayButton: (e) ->
@ playSound ' menu-button-click '
2016-03-22 18:21:17 -04:00
e . preventDefault ( )
e . stopImmediatePropagation ( )
window . tracker ? . trackEvent ' Homepage Click Play ' , category: ' Homepage '
application . router . navigate @ playURL , trigger: true
#window.open @playURL, '_blank'
onClickRequestDemo: (e) ->
@ playSound ' menu-button-click '
e . preventDefault ( )
e . stopImmediatePropagation ( )
window . tracker ? . trackEvent ' Homepage Submit Jumbo Form ' , category: ' Homepage '
obj = storage . load ( ' request-quote-form ' )
obj ? = { }
obj.role = @ $ ( ' # request-form-role ' ) . val ( )
obj.numStudents = @ $ ( ' # request-form-range ' ) . val ( )
storage . save ( ' request-quote-form ' , obj )
application . router . navigate " /teachers/demo " , trigger: true
onClickJoinClass: (e) ->
@ playSound ' menu-button-click '
e . preventDefault ( )
e . stopImmediatePropagation ( )
window . tracker ? . trackEvent ' Homepage Click Join Class ' , category: ' Homepage '
application . router . navigate " /courses " , trigger: true
2016-01-26 19:28:29 -05:00
afterRender: ->
@ onChangeSchoolLevelDropdown ( )
2016-03-04 15:05:07 -05:00
@ $ ( ' # screenshot-lightbox ' ) . modal ( )
@ $ ( ' # screenshot-carousel ' ) . carousel ( {
interval: 0
keyboard: false
} )
2016-01-26 19:28:29 -05:00
super ( )
2016-03-22 18:21:17 -04:00
logoutAccount: ->
Backbone . Mediator . publish ( " auth:logging-out " , { } )
logoutUser ( )
2016-01-26 19:28:29 -05:00
onChangeSchoolLevelDropdown: (e) ->
levels =
elementary: { ' introduction-to-computer-science ' : ' 2-4 ' , ' computer-science-5 ' : ' 15-20 ' , default: ' 10-15 ' , total: ' 50-70 hours (about one year) ' }
middle: { ' introduction-to-computer-science ' : ' 1-3 ' , ' computer-science-5 ' : ' 7-10 ' , default: ' 5-8 ' , total: ' 25-35 hours (about one semester) ' }
high: { ' introduction-to-computer-science ' : ' 1 ' , ' computer-science-5 ' : ' 6-9 ' , default: ' 5-6 ' , total: ' 22-28 hours (about one semester) ' }
level = if e then $ ( e . target ) . val ( ) else ' middle '
2016-02-25 19:49:26 -05:00
@ $el . find ( ' # courses-row .course-details ' ) . each ->
2016-01-26 19:28:29 -05:00
slug = $ ( @ ) . data ( ' course-slug ' )
duration = levels [ level ] [ slug ] or levels [ level ] . default
$ ( @ ) . find ( ' .course-duration .course-hours ' ) . text duration
$ ( @ ) . find ( ' .course-duration .unit ' ) . text ( $ . i18n . t ( if duration is ' 1 ' then ' units.hour ' else ' units.hours ' ) )
@ $el . find ( ' # semester-duration ' ) . text levels [ level ] . total
justPlaysCourses: ->
# This heuristic could be better, but currently we don't add to me.get('courseInstances') for single-player anonymous intro courses, so they have to beat a level without choosing a hero.
2016-03-29 15:48:13 -04:00
return true if me . get ( ' role ' ) is ' student '
2016-01-26 19:28:29 -05:00
return me . get ( ' stats ' ) ? . gamesCompleted and not me . get ( ' heroConfig ' )
isNewPlayer: ->
not me . get ( ' stats ' ) ? . gamesCompleted and not me . get ( ' heroConfig ' )
onClickLearnMoreLink: ->
2016-03-22 18:21:17 -04:00
window . tracker ? . trackEvent ' Homepage Click Learn More ' , category: ' Homepage '
2016-01-26 19:28:29 -05:00
@ scrollToLink ( ' # classroom-in-box-container ' )
onClickTeacherButton: ->
2016-03-22 18:21:17 -04:00
window . tracker ? . trackEvent ' Homepage Click Teacher Button ' , category: ' Homepage '
2016-02-03 13:59:54 -05:00
@ scrollToLink ( ' .request-demo-row ' , 600 )
2016-02-05 14:39:06 -05:00
2016-03-04 15:05:07 -05:00
onRightPressed: (event) ->
# Special handling, otherwise after you click the control, keyboard presses move the slide twice
return if event . type is ' keydown ' and $ ( document . activeElement ) . is ( ' .carousel-control ' )
if $ ( ' # screenshot-lightbox ' ) . data ( ' bs.modal ' ) ? . isShown
event . preventDefault ( )
$ ( ' # screenshot-carousel ' ) . carousel ( ' next ' )
onLeftPressed: (event) ->
return if event . type is ' keydown ' and $ ( document . activeElement ) . is ( ' .carousel-control ' )
if $ ( ' # screenshot-lightbox ' ) . data ( ' bs.modal ' ) ? . isShown
event . preventDefault ( )
$ ( ' # screenshot-carousel ' ) . carousel ( ' prev ' )
onEscapePressed: (event) ->
if $ ( ' # screenshot-lightbox ' ) . data ( ' bs.modal ' ) ? . isShown
event . preventDefault ( )
$ ( ' # screenshot-lightbox ' ) . modal ( ' hide ' )
2016-02-05 14:39:06 -05:00
2016-03-04 15:05:07 -05:00
onClickScreenThumbnail: (event) ->
unless $ ( ' # screenshot-lightbox ' ) . data ( ' bs.modal ' ) ? . isShown
event . preventDefault ( )
# Modal opening happens automatically from bootstrap
$ ( ' # screenshot-carousel ' ) . carousel ( $ ( event . currentTarget ) . data ( " index " ) )