codecombat/app/views/NewHomeView.coffee

148 lines
5.9 KiB
CoffeeScript
Raw Normal View History

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'
'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'
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()
@$('#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'
@$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.
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)
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')
onClickScreenThumbnail: (event) ->
unless $('#screenshot-lightbox').data('bs.modal')?.isShown
event.preventDefault()
# Modal opening happens automatically from bootstrap
$('#screenshot-carousel').carousel($(event.currentTarget).data("index"))