From ce5fc82ca99582dba0bc505d44e880012e8ca749 Mon Sep 17 00:00:00 2001 From: Peter Cottle Date: Mon, 20 Apr 2015 15:31:30 +1000 Subject: [PATCH] BOOM removed helper bar view look at those stats brah --- src/js/app/index.js | 6 +- src/js/react_views/CommandsHelperBarView.jsx | 69 +++++ src/js/react_views/HelperBarView.jsx | 64 +++++ src/js/react_views/IntlHelperBarView.jsx | 85 ++++++ src/js/react_views/MainHelperBarView.jsx | 75 ++++++ src/js/views/index.js | 262 ------------------- src/template.index.html | 30 +-- 7 files changed, 305 insertions(+), 286 deletions(-) create mode 100644 src/js/react_views/CommandsHelperBarView.jsx create mode 100644 src/js/react_views/HelperBarView.jsx create mode 100644 src/js/react_views/IntlHelperBarView.jsx create mode 100644 src/js/react_views/MainHelperBarView.jsx diff --git a/src/js/app/index.js b/src/js/app/index.js index 2be330ed..8a76df36 100644 --- a/src/js/app/index.js +++ b/src/js/app/index.js @@ -278,8 +278,8 @@ function CommandUI() { var Collections = require('../models/collections'); var CommandViews = require('../views/commandViews'); var CommandHistoryView = require('../react_views/CommandHistoryView.jsx'); + var MainHelperBarView = require('../react_views/MainHelperBarView.jsx'); - var mainHelperBar = new Views.MainHelperBar(); var backgroundView = new Views.BackgroundView(); this.commandCollection = new Collections.CommandCollection(); @@ -291,6 +291,10 @@ function CommandUI() { el: $('#commandLineBar') }); + React.render( + React.createElement(MainHelperBarView), + document.getElementById('helperBarMount') + ); React.render( React.createElement( CommandHistoryView, diff --git a/src/js/react_views/CommandsHelperBarView.jsx b/src/js/react_views/CommandsHelperBarView.jsx new file mode 100644 index 00000000..4982d56e --- /dev/null +++ b/src/js/react_views/CommandsHelperBarView.jsx @@ -0,0 +1,69 @@ +var HelperBarView = require('../react_views/HelperBarView.jsx'); +var Main = require('../app'); +var React = require('react'); + +var log = require('../log'); + +var CommandsHelperBarView = React.createClass({ + + propTypes: { + shown: React.PropTypes.bool.isRequired, + onExit: React.PropTypes.func.isRequired + }, + + render: function() { + return ( + + ); + }, + + fireCommand: function(command) { + log.viewInteracted('commandHelperBar'); + Main.getEventBaton().trigger('commandSubmitted', command); + }, + + getItems: function() { + return [{ + text: 'Levels', + onClick: function() { + this.fireCommand('levels'); + }.bind(this), + }, { + text: 'Solution', + onClick: function() { + this.fireCommand('show solution'); + }.bind(this), + }, { + text: 'Reset', + onClick: function() { + this.fireCommand('reset'); + }.bind(this), + }, { + text: 'Undo', + onClick: function() { + this.fireCommand('undo'); + }.bind(this), + }, { + text: 'Objective', + onClick: function() { + this.fireCommand('objective'); + }.bind(this), + }, { + text: 'Help', + onClick: function() { + this.fireCommand('help general; git help'); + }.bind(this) + }, { + icon: 'signout', + onClick: function() { + this.props.onExit(); + }.bind(this) + }]; + } + +}); + +module.exports = CommandsHelperBarView; diff --git a/src/js/react_views/HelperBarView.jsx b/src/js/react_views/HelperBarView.jsx new file mode 100644 index 00000000..59b25134 --- /dev/null +++ b/src/js/react_views/HelperBarView.jsx @@ -0,0 +1,64 @@ +var React = require('react'); + +var reactUtil = require('../util/reactUtil'); + +var HelperBarView = React.createClass({ + + propTypes: { + className: React.PropTypes.string, + shown: React.PropTypes.bool.isRequired, + items: React.PropTypes.array.isRequired + }, + + render: function() { + var topClassName = reactUtil.joinClasses([ + 'helperBar', + 'transitionAll', + this.props.shown ? 'show' : '', + this.props.className ? this.props.className : '' + ]); + + return ( +
+ {this.props.items.map(function(item, index) { + return [ + this.renderItem(item), + // ugh -- we need this spacer at the end only + // if we are not the last element + index === this.props.items.length - 1 ? + null : + {' '} + ]; + }.bind(this))} +
+ ); + }, + + renderItem: function(item, index) { + if (item.newPageLink) { + return ( + + + {' '} + + ); + } + return ( + + {item.text ? item.text : + + } + {' '} + + ); + } + +}); + +module.exports = HelperBarView; diff --git a/src/js/react_views/IntlHelperBarView.jsx b/src/js/react_views/IntlHelperBarView.jsx new file mode 100644 index 00000000..c89b2131 --- /dev/null +++ b/src/js/react_views/IntlHelperBarView.jsx @@ -0,0 +1,85 @@ +var HelperBarView = require('../react_views/HelperBarView.jsx'); +var Main = require('../app'); +var React = require('react'); + +var log = require('../log'); + +var IntlHelperBarView = React.createClass({ + + propTypes: { + shown: React.PropTypes.bool.isRequired, + onExit: React.PropTypes.func.isRequired + }, + + render: function() { + return ( + + ); + }, + + fireCommand: function(command) { + log.viewInteracted('intlSelect'); + Main.getEventBaton().trigger('commandSubmitted', command); + this.props.onExit(); + }, + + getItems: function() { + return [{ + text: 'Git Branching', + onClick: function() { + this.fireCommand('locale en_US; levels'); + }.bind(this) + }, { + text: '日本語版リポジトリ', + onClick: function() { + this.fireCommand('locale ja; levels'); + }.bind(this) + }, { + text: 'Git 브랜치 배우기', + onClick: function() { + this.fireCommand('locale ko; levels'); + }.bind(this) + }, { + text: '学习 Git 分支', + onClick: function() { + this.fireCommand('locale zh_CN; levels'); + }.bind(this) + }, { + text: '學習 Git 分支', + onClick: function() { + this.fireCommand('locale zh_TW; levels'); + }.bind(this) + }, { + text: 'español', + onClick: function() { + this.fireCommand('locale es_AR; levels'); + }.bind(this) + }, { + text: 'português', + onClick: function() { + this.fireCommand('locale pt_BR; levels'); + }.bind(this) + }, { + text: 'français', + onClick: function() { + this.fireCommand('locale fr_FR; levels'); + }.bind(this) + }, { + text: 'Deutsch', + onClick: function() { + this.fireCommand('locale de_DE; levels'); + }.bind(this) + }, { + icon: 'signout', + onClick: function() { + this.props.onExit(); + }.bind(this) + }]; + } + +}); + +module.exports = IntlHelperBarView; diff --git a/src/js/react_views/MainHelperBarView.jsx b/src/js/react_views/MainHelperBarView.jsx new file mode 100644 index 00000000..e41326e9 --- /dev/null +++ b/src/js/react_views/MainHelperBarView.jsx @@ -0,0 +1,75 @@ +var HelperBarView = require('../react_views/HelperBarView.jsx'); +var IntlHelperBarView = + require('../react_views/IntlHelperBarView.jsx'); +var CommandsHelperBarView = + require('../react_views/CommandsHelperBarView.jsx'); +var React = require('react'); + +var keyMirror = require('../util/keyMirror'); +var log = require('../log'); + +var BARS = keyMirror({ + SELF: null, + INTL: null, + COMMANDS: null +}); + +var MainHelperBarView = React.createClass({ + + getInitialState: function() { + return { + shownBar: BARS.SELF + }; + }, + + render: function() { + return ( +
+ + + +
+ ); + }, + + showSelf: function() { + this.setState({ + shownBar: BARS.SELF + }); + }, + + getItems: function() { + return [{ + icon: 'question-sign', + onClick: function() { + this.setState({ + shownBar: BARS.COMMANDS + }); + }.bind(this) + }, { + icon: 'globe', + onClick: function() { + this.setState({ + shownBar: BARS.INTL + }); + }.bind(this) + }, { + newPageLink: true, + icon: 'facebook', + href: 'https://www.facebook.com/LearnGitBranching' + }]; + } + +}); + +module.exports = MainHelperBarView; diff --git a/src/js/views/index.js b/src/js/views/index.js index 1a693ab6..191a92cd 100644 --- a/src/js/views/index.js +++ b/src/js/views/index.js @@ -560,265 +560,6 @@ var ZoomAlertWindow = ViewportAlert.extend({ } }); -var HelperBar = BaseView.extend({ - getClassName: function() { - return 'BaseHelperBar'; - }, - - tagName: 'div', - className: 'helperBar transitionAll', - template: _.template($('#helper-bar-template').html()), - events: { - 'click a': 'onClick' - }, - - onClick: function(ev) { - var target = ev.target; - var id = $(target).attr('data-id'); - var funcName = 'on' + id[0].toUpperCase() + id.slice(1) + 'Click'; - this[funcName].call(this); - }, - - show: function() { - this.$el.toggleClass('show', true); - }, - - hide: function() { - this.$el.toggleClass('show', false); - if (this.deferred) { - this.deferred.resolve(); - } - }, - - getItems: function() { - return []; - }, - - setupChildren: function() { - }, - - fireCommand: function(command) { - Main.getEventBaton().trigger('commandSubmitted', command); - }, - - showDeferMe: function(otherBar) { - this.hide(); - - var whenClosed = Q.defer(); - otherBar.deferred = whenClosed; - whenClosed.promise.then(_.bind(function() { - this.show(); - }, this)); - otherBar.show(); - }, - - onExitClick: function() { - this.hide(); - }, - - initialize: function(options) { - options = options || {}; - this.destination = $('body'); - - this.JSON = { - items: this.getItems() - }; - this.render(); - this.$el.addClass(this.getClassName()); - this.setupChildren(); - - if (!options.wait) { - this.show(); - } - } -}); - -var IntlHelperBar = HelperBar.extend({ - getClassName: function() { - return 'IntlHelperBar'; - }, - - getItems: function() { - return [{ - text: 'Git Branching', - id: 'english' - }, { - text: '日本語版リポジトリ', - id: 'japanese' - }, { - text: 'Git 브랜치 배우기', - id: 'korean' - }, { - text: '学习 Git 分支', - id: 'simpchinese' - }, { - text: '學習 Git 分支', - id: 'tradchinese' - }, { - text: 'español', - id: 'spanish' - }, { - text: 'português', - id: 'portuguese' - }, { - text: 'français', - id: 'french' - }, { - text: 'Deutsch', - id: 'german' - }, { - icon: 'signout', - id: 'exit' - }]; - }, - - fireCommand: function() { - log.viewInteracted('intlSelect'); - HelperBar.prototype.fireCommand.apply(this, arguments); - }, - - onJapaneseClick: function() { - this.fireCommand('locale ja; levels'); - this.hide(); - }, - - onEnglishClick: function() { - this.fireCommand('locale en_US; levels'); - this.hide(); - }, - - onKoreanClick: function() { - this.fireCommand('locale ko; levels'); - this.hide(); - }, - - onSpanishClick: function() { - this.fireCommand('locale es_AR; levels'); - this.hide(); - }, - - onPortugueseClick: function() { - this.fireCommand('locale pt_BR; levels'); - this.hide(); - }, - - onFrenchClick: function() { - this.fireCommand('locale fr_FR; levels'); - this.hide(); - }, - - onGermanClick: function() { - this.fireCommand('locale de_DE; levels'); - this.hide(); - }, - - onSimpchineseClick: function() { - this.fireCommand('locale zh_CN; levels'); - this.hide(); - }, - - onTradchineseClick: function() { - this.fireCommand('locale zh_TW; levels'); - this.hide(); - } -}); - -var CommandsHelperBar = HelperBar.extend({ - getClassName: function() { - return 'CommandsHelperBar'; - }, - - getItems: function() { - return [{ - text: 'Levels', - id: 'levels' - }, { - text: 'Solution', - id: 'solution' - }, { - text: 'Reset', - id: 'reset' - }, { - text: 'Undo', - id: 'undo' - }, { - text: 'Objective', - id: 'objective' - }, { - text: 'Help', - id: 'help' - }, { - icon: 'signout', - id: 'exit' - }]; - }, - - fireCommand: function() { - log.viewInteracted('helperBar'); - HelperBar.prototype.fireCommand.apply(this, arguments); - }, - - onSolutionClick: function() { - this.fireCommand('show solution'); - }, - - onObjectiveClick: function() { - this.fireCommand('objective'); - }, - - onLevelsClick: function() { - this.fireCommand('levels'); - }, - - onResetClick: function() { - this.fireCommand('reset'); - }, - - onUndoClick: function() { - this.fireCommand('undo'); - }, - - onHelpClick: function() { - this.fireCommand('help general; git help'); - } -}); - -var MainHelperBar = HelperBar.extend({ - getItems: function() { - return [{ - icon: 'question-sign', - id: 'commands' - }, { - icon: 'globe', - id: 'intl' - }, { - newPageLink: true, - icon: 'facebook', - id: 'fb', - href: 'https://www.facebook.com/LearnGitBranching' - }]; - }, - - onFbClick: function() { - log.viewInteracted('fbPageLink'); - }, - - onIntlClick: function() { - this.showDeferMe(this.intlHelper); - log.viewInteracted('openIntlBar'); - }, - - onCommandsClick: function() { - this.showDeferMe(this.commandsHelper); - log.viewInteracted('openCommandsBar'); - }, - - setupChildren: function() { - this.commandsHelper = new CommandsHelperBar({ wait: true }); - this.intlHelper = new IntlHelperBar({ wait: true}); - } -}); - var CanvasTerminalHolder = BaseView.extend({ tagName: 'div', className: 'canvasTerminalHolder box flex1', @@ -966,8 +707,5 @@ exports.ZoomAlertWindow = ZoomAlertWindow; exports.ConfirmCancelTerminal = ConfirmCancelTerminal; exports.WindowSizeAlertWindow = WindowSizeAlertWindow; -exports.MainHelperBar = MainHelperBar; - exports.CanvasTerminalHolder = CanvasTerminalHolder; exports.NextLevelConfirm = NextLevelConfirm; - diff --git a/src/template.index.html b/src/template.index.html index 0344c201..4c8458e6 100644 --- a/src/template.index.html +++ b/src/template.index.html @@ -91,6 +91,12 @@
+
+
+ +
+
+ - - - + - -
-