2016-01-26 19:28:29 -05:00
RootView = require ' views/core/RootView '
template = require ' templates/new-home-view '
CocoCollection = require ' collections/CocoCollection '
2016-03-30 19:20:37 -04:00
TrialRequest = require ' models/TrialRequest '
TrialRequests = require ' collections/TrialRequests '
2016-07-22 19:37:53 -04:00
Courses = require ' collections/Courses '
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-06-08 09:24:59 -04:00
' click .student-btn ' : ' onClickStudentButton '
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 .logout-btn ' : ' logoutAccount '
2016-06-08 09:24:59 -04:00
' click .profile-btn ' : ' onClickViewProfile '
' click .setup-class-btn ' : ' onClickSetupClass '
' click .wiki-btn ' : ' onClickWikiButton '
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) ->
2016-07-22 19:37:53 -04:00
@courses = new Courses ( )
@ supermodel . trackRequest @ courses . fetchReleased ( )
2016-01-26 19:28:29 -05:00
2016-03-30 19:20:37 -04:00
if me . isTeacher ( )
@trialRequests = new TrialRequests ( )
@ trialRequests . fetchOwn ( )
@ supermodel . loadCollection ( @ trialRequests )
2016-01-26 19:28:29 -05:00
isHourOfCodeWeek = false # Temporary: default to /hoc flow during the main event week
2016-05-20 17:52:04 -04:00
if isHourOfCodeWeek and ( @ isNewPlayer ( ) or ( me . justPlaysCourses ( ) and me . isAnonymous ( ) ) )
2016-01-26 19:28:29 -05:00
# Go/return straight to playing single-player HoC course on Play click
@playURL = ' /hoc?go=true '
@alternatePlayURL = ' /play '
@alternatePlayText = ' home.play_campaign_version '
2016-05-20 17:52:04 -04:00
else if me . justPlaysCourses ( )
2016-01-26 19:28:29 -05:00
# Save players who might be in a classroom from getting into the campaign
@playURL = ' /courses '
else
@playURL = ' /play '
2016-03-30 19:20:37 -04:00
onLoaded: ->
@trialRequest = @ trialRequests . first ( ) if @ trialRequests ? . size ( )
@isTeacherWithDemo = @ trialRequest and @ trialRequest . get ( ' status ' ) in [ ' approved ' , ' submitted ' ]
super ( )
2016-06-08 09:24:59 -04:00
onClickLearnMoreLink: ->
2016-07-20 17:45:13 -04:00
window . tracker ? . trackEvent ' Homepage Click Learn More ' , category: ' Homepage ' , [ ]
2016-06-08 09:24:59 -04:00
@ scrollToLink ( ' # classroom-in-box-container ' )
2016-01-26 19:28:29 -05:00
onClickPlayButton: (e) ->
2016-07-20 17:45:13 -04:00
window . tracker ? . trackEvent $ ( e . target ) . data ( ' event-action ' ) , category: ' Homepage ' , [ ]
2016-03-22 18:21:17 -04:00
onClickRequestDemo: (e) ->
@ playSound ' menu-button-click '
e . preventDefault ( )
e . stopImmediatePropagation ( )
2016-07-20 17:45:13 -04:00
window . tracker ? . trackEvent $ ( e . target ) . data ( ' event-action ' ) , category: ' Homepage ' , [ ]
2016-06-08 09:24:59 -04:00
if me . isTeacher ( )
application . router . navigate ' /teachers/update-account ' , trigger: true
else
application . router . navigate ' /teachers/demo ' , trigger: true
onClickSetupClass: (e) ->
2016-07-20 17:45:13 -04:00
window . tracker ? . trackEvent $ ( e . target ) . data ( ' event-action ' ) , category: ' Homepage ' , [ ]
2016-06-08 09:24:59 -04:00
application . router . navigate ( " /teachers/classes " , { trigger: true } )
onClickStudentButton: (e) ->
2016-07-20 17:45:13 -04:00
window . tracker ? . trackEvent $ ( e . target ) . data ( ' event-action ' ) , category: ' Homepage ' , [ ]
2016-06-08 09:24:59 -04:00
onClickTeacherButton: (e) ->
2016-07-20 17:45:13 -04:00
window . tracker ? . trackEvent $ ( e . target ) . data ( ' event-action ' ) , category: ' Homepage ' , [ ]
2016-06-08 09:24:59 -04:00
if me . isTeacher ( )
application . router . navigate ( ' /teachers ' , { trigger: true } )
else
@ scrollToLink ( ' .request-demo-row ' , 600 )
onClickViewProfile: (e) ->
2016-07-20 17:45:13 -04:00
window . tracker ? . trackEvent $ ( e . target ) . data ( ' event-action ' ) , category: ' Homepage ' , [ ]
2016-06-08 09:24:59 -04:00
application . router . navigate ( " /user/ #{ me . getSlugOrID ( ) } " , { trigger: true } )
onClickWikiButton: (e) ->
2016-07-20 17:45:13 -04:00
window . tracker ? . trackEvent $ ( e . target ) . data ( ' event-action ' ) , category: ' Homepage ' , [ ]
2016-06-08 09:24:59 -04:00
window . location.href = ' https://sites.google.com/a/codecombat.com/teacher-guides/course-guides '
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-04-26 20:41:26 -04:00
$ ( window ) . on ' resize ' , @ fitToPage
@ fitToPage ( )
setTimeout ( @ fitToPage , 0 )
2016-06-30 18:32:58 -04:00
if me . isAnonymous ( )
CreateAccountModal = require ' views/core/CreateAccountModal/CreateAccountModal '
if document . location . hash is ' # create-account '
@ openModalView ( new CreateAccountModal ( ) )
if document . location . hash is ' # create-account-individual '
@ openModalView ( new CreateAccountModal ( { startOnPath: ' individual ' } ) )
if document . location . hash is ' # create-account-student '
@ openModalView ( new CreateAccountModal ( { startOnPath: ' student ' } ) )
2016-01-26 19:28:29 -05:00
super ( )
2016-05-13 18:46:05 -04:00
destroy: ->
$ ( window ) . off ' resize ' , @ fitToPage
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 =
2016-06-16 15:56:43 -04:00
elementary: { ' introduction-to-computer-science ' : ' 2-4 ' , ' computer-science-6 ' : ' 24-30 ' , ' computer-science-7 ' : ' 30-40 ' , ' computer-science-8 ' : ' 30-40 ' , default: ' 16-25 ' , total: ' 150-215 hours (about two and a half years) ' }
middle: { ' introduction-to-computer-science ' : ' 1-3 ' , ' computer-science-6 ' : ' 12-14 ' , ' computer-science-7 ' : ' 14-16 ' , ' computer-science-8 ' : ' 14-16 ' , default: ' 8-12 ' , total: ' 75-100 hours (about one and a half years) ' }
high: { ' introduction-to-computer-science ' : ' 1 ' , ' computer-science-6 ' : ' 10-12 ' , ' computer-science-7 ' : ' 12-16 ' , ' computer-science-8 ' : ' 12-16 ' , default: ' 8-10 ' , total: ' 65-85 hours (about one year) ' }
2016-01-26 19:28:29 -05:00
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
isNewPlayer: ->
not me . get ( ' stats ' ) ? . gamesCompleted and not me . get ( ' heroConfig ' )
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 " ) )
2016-04-26 20:41:26 -04:00
fitToPage: =>
windowHeight = $ ( window ) . height ( )
linkBox = @ $ ( " # learn-more-link " ) . parent ( )
linkOffset = linkBox . offset ( )
adjustment = windowHeight - ( linkOffset . top + linkBox . height ( ) )
target = @ $ ( ' .top-spacer ' ) . first ( )
newOffset = parseInt ( target . css ( ' height ' ) || 0 ) + adjustment
newOffset = Math . min ( Math . max ( 0 , newOffset ) , 170 )
target . css ( height: " #{ newOffset } px " )