105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
--------------------------------------------------------------------------------
/extension/src/popup.js:
--------------------------------------------------------------------------------
1 | Mousetrap._stopCallback = Mousetrap.stopCallback;
2 | Mousetrap.stopCallback = function(e, element, combo){
3 |
4 | if (element.id === 'tags_tag'){
5 | return false;
6 | }
7 |
8 | return Mousetrap._stopCallback(e, element, combo);
9 | };
10 |
11 | var Templates = {
12 | addCard: $('#add-card').html(),
13 | authenticate: $('#authenticate').html()
14 | };
15 |
16 | function addCard(data){
17 | var card = data.card;
18 | $('#content').html(Templates.addCard);
19 | $('#front').val(card.front);
20 | $('#back').val(card.back);
21 | $('#who').attr({src: getGravatar(data.user + '@gmail.com')});
22 |
23 | function update(){
24 | chrome.runtime.sendMessage({
25 | origin: 'popup',
26 | content: card
27 | });
28 | }
29 |
30 | function nullOut(){
31 | chrome.runtime.sendMessage({
32 | origin: 'popup',
33 | content: null
34 | });
35 | }
36 |
37 | $('#front,#back').keypress(function() {
38 | card.front = $('#front').val();
39 | card.back = $('#back').val();
40 | update();
41 | });
42 | $('#back').focus(function() {
43 | $(this).css({height: '150px'});
44 | });
45 | $('#back').blur(function() {
46 | if (this.value === ''){
47 | $(this).css({height: '40px'});
48 | }
49 | });
50 | $('#cancel').click(function() {
51 | nullOut();
52 | window.close();
53 | });
54 | $('#save').click(function(){
55 | update();
56 | window.close();
57 | });
58 |
59 | Mousetrap.bind(['ctrl+s', 'command+s'], function(e) {
60 | e.preventDefault();
61 | update();
62 | window.close();
63 | });
64 |
65 | Mousetrap.bind('esc', function(e) {
66 | e.preventDefault();
67 | nullOut();
68 | window.close();
69 | });
70 |
71 | Mousetrap.bind('up up down down', function(e) {
72 | var front = $('#front').val();
73 | var back = $('#back').val();
74 | $('#front').val(back);
75 | $('#back').val(front);
76 |
77 | if (front !== ''){
78 | $('#back').css({height: '150px'});
79 | }
80 | });
81 |
82 | $(".taginput").tagsInput({
83 | onChange: function(){
84 | card.tags = $('#tags').val().split(',');
85 | update();
86 | }
87 | });
88 |
89 | $('#front').focus();
90 | $('#front')[0].selectionStart = card.front.length;
91 | $('#front')[0].selectionEnd = card.front.length;
92 | }
93 |
94 | function authenticate(){
95 | $('#content').html(Templates.authenticate);
96 | $('#login').click(function(){
97 | chrome.tabs.create({'url': "http://www.memfinity.org/login"});
98 | });
99 | }
100 |
101 | function flash(){
102 | $('#flash').fadeOut(250, function(){
103 | $(this).css({display: 'none'});
104 | });
105 | }
106 |
107 | if (window.location.protocol == 'file:'){
108 | addCard({
109 | card: {
110 | front: 'Hello, world!',
111 | back: '',
112 | info: '',
113 | tags: [],
114 | source_url: ''
115 | },
116 | user: 'sam.m.birch'
117 | });
118 | flash();
119 | } else {
120 | // http://stackoverflow.com/questions/3907804/how-to-detect-when-action-popup-gets-closed
121 | // unload events don't work for popups.
122 | function ping() {
123 | chrome.extension.getBackgroundPage().PopupCloseMonitor.popupPing();
124 | setTimeout(ping, 500);
125 | }
126 | ping();
127 |
128 | chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
129 | console.log('popup got message', request, sender);
130 |
131 | if (request.origin === 'background'){
132 | window[request.content.initialize](request.content.data);
133 | flash();
134 | }
135 | });
136 |
137 | // Set everything in motion via the content script
138 | chrome.tabs.getSelected(null, function(tab) {
139 | chrome.tabs.executeScript(null, {file: 'inject.js'});
140 | });
141 | }
142 |
--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | # For running unit tests.
2 | NoseGAE==0.2.1
3 | nose==1.3.3
4 |
--------------------------------------------------------------------------------
/webapp/api.py:
--------------------------------------------------------------------------------
1 | import datetime
2 | import json
3 |
4 | from google.appengine.api import oauth
5 | from google.appengine.api import users
6 | from google.appengine.ext import ndb
7 |
8 | import jsonify
9 | import models
10 | import search
11 |
12 |
13 | def get_oauth_user():
14 | """Return the OAuth authenticated user, else raise an exception."""
15 | try:
16 | # Get the db.User that represents the user on whose behalf the
17 | # consumer is making this request.
18 | user = oauth.get_current_user()
19 |
20 | except oauth.OAuthRequestError:
21 | # The request was not a valid OAuth request.
22 | raise # TODO(jace) something better to do here?
23 |
24 | return user
25 |
26 |
27 | def get_current_user(handler):
28 | """Return the UserData for the currently logged in user (or None)."""
29 | user = users.get_current_user()
30 |
31 | if not user:
32 | handler.error(401)
33 | return None
34 |
35 | return models.UserData.get_for_user_id(user.user_id())
36 |
37 |
38 | def entity_view(handler, route_root):
39 | """Query for a single entity by Key."""
40 | path = handler.request.path
41 | response = '{}'
42 |
43 | if not path.startswith(route_root) and len(path) > len(route_root):
44 | return response
45 |
46 | entity_key = path[len(route_root):]
47 | entity = ndb.Key(urlsafe=entity_key).get()
48 | if entity:
49 | response = jsonify.jsonify(entity, pretty_print=True)
50 |
51 | return response
52 |
53 |
54 | def user_view_current(handler):
55 | """Return information about the currently logged in user."""
56 | return jsonify.jsonify(users.get_current_user())
57 |
58 |
59 | def user_view(handler):
60 | """Query for a single user by Key."""
61 | return entity_view(handler, '/api/user/')
62 |
63 |
64 | def card_view(handler):
65 | """Query for a single card by Key."""
66 | return entity_view(handler, '/api/card/')
67 |
68 |
69 | def card_query(handler):
70 | """Query for multiple cards.
71 |
72 | See main.py for usage examples.
73 |
74 | TODO(jace): return a query cursor, too?
75 | """
76 |
77 | tag = handler.request.get("tag", None)
78 | tag_list = tag.split(',') if tag else None
79 | review = handler.request.get('review', None)
80 | reviewAll = handler.request.get('reviewAll', False)
81 | include_followers = handler.request.get('include_followers', None)
82 | user_key = handler.request.get('user', None)
83 |
84 | if review and user_key:
85 | handler.error(400)
86 | return "'review' and 'user_key' cannot be used together."
87 |
88 | if review and include_followers:
89 | handler.error(400)
90 | return "'review' and 'include_followers' cannot be used together."
91 |
92 | if include_followers and not user_key:
93 | handler.error(400)
94 | return "'review' and 'include_followers' cannot be used together."
95 |
96 |
97 | if review:
98 | # if asked for review cards, get them for the current user only
99 | current_user = get_current_user(handler)
100 | if not current_user:
101 | handler.error(400)
102 | return "must be logged in to quer for review cards."
103 | user_key = current_user.key.urlsafe()
104 |
105 |
106 | query = models.Card.query()
107 |
108 | if include_followers:
109 | user_data = ndb.Key(urlsafe=user_key).get()
110 | if not user_data:
111 | handler.error(500)
112 | return "UserData not found."
113 | user_list = user_data.following + [ndb.Key(urlsafe=user_key)]
114 | query = query.filter(models.Card.user_key.IN(user_list))
115 | elif user_key:
116 | query = query.filter(models.Card.user_key == ndb.Key(urlsafe=user_key))
117 |
118 | if tag_list:
119 | query = query.filter(models.Card.tags.IN(tag_list))
120 |
121 | if review:
122 | # For review mode, we sort by next scheduled review
123 | query = query.order(models.Card.next_review)
124 | else:
125 | query = query.order(-models.Card.added)
126 |
127 | results = query.fetch(100)
128 |
129 | response = '[]'
130 | if results:
131 | if review and not reviewAll:
132 | # TODO(jace) if the current user is asking for review cards but
133 | # hasn't explicitly asked to review ALL cards, then we truncate
134 | # the results to include just cards scheduled on or before
135 | # today... the future can wait.
136 | now = datetime.datetime.now()
137 | results = [card for card in results if card.next_review <= now]
138 |
139 | response = jsonify.jsonify(results, pretty_print=True)
140 |
141 | return response
142 |
143 |
144 | def card_search(handler):
145 | """Search cards with query parameter "q".
146 |
147 | Returns a (possibly empty) list of JSONified models.Card
148 | entities. See search.py for query processing details.
149 | """
150 | user = users.get_current_user()
151 | if user:
152 | user_data = models.UserData.get_for_user_id(user.user_id())
153 | user_key = user_data.key.urlsafe()
154 | else:
155 | user_key = None
156 |
157 | query = handler.request.get('q', '')
158 | search_results = search.query_cards(query, limit=20, ids_only=True,
159 | user_key=user_key)
160 | results = ndb.get_multi([ndb.Key(urlsafe=result.doc_id)
161 | for result in search_results])
162 | return jsonify.jsonify(results)
163 |
164 |
165 | def card_add(handler):
166 | """Add a new Card."""
167 | user_data = get_current_user(handler)
168 | if not user_data:
169 | return
170 |
171 | data = json.loads(handler.request.body)
172 |
173 | card = models.Card(user_key=user_data.key)
174 | card.update_from_dict(data)
175 | card.update_email_and_nickname()
176 |
177 | card.put()
178 | search.insert_cards([card])
179 |
180 | # Update the list of all known tags for this user
181 | # Update the list of all known tags for this user
182 | user_data.update_card_tags([], data.get('tags', []))
183 | user_data.put() # TODO(jace): only put if necessary
184 |
185 | # TODO(jace) Notify followers
186 |
187 | return card.key.urlsafe()
188 |
189 |
190 | def card_update(handler, delete=False, review=False):
191 | """Update or Delete an exisiting Card."""
192 | user_data = get_current_user(handler)
193 | if not user_data:
194 | return
195 |
196 | path = handler.request.path
197 | route_root = '/api/card/'
198 | err_response = '{}'
199 |
200 | if not path.startswith(route_root) and len(path) > len(route_root):
201 | return err_response
202 |
203 | card_key = path[len(route_root):]
204 | if card_key.endswith('/review'):
205 | card_key = card_key[:-len('/review')]
206 |
207 | card = ndb.Key(urlsafe=card_key).get()
208 | if not card:
209 | return err_response
210 |
211 | if user_data.key != card.user_key:
212 | # Disallow modification of other people's cards
213 | return err_response
214 |
215 | # Finally ready to do the update
216 | card_tags_original = set(card.tags)
217 | if delete:
218 | card_tags_updated = set()
219 | card.key.delete()
220 | search.delete_cards([card])
221 | elif review:
222 | data = json.loads(handler.request.body)
223 | card.record_review(data.get('grade'))
224 | card_tags_updated = set(card.tags) # unchanged in this case
225 | card.put()
226 | else:
227 | data = json.loads(handler.request.body)
228 | card.update_from_dict(data)
229 | card_tags_updated = set(card.tags)
230 | card.put()
231 | search.insert_cards([card])
232 |
233 | # Update the list of all known tags for this user
234 | user_data.update_card_tags(card_tags_original, card_tags_updated)
235 | user_data.put() # TODO(jace): only put if necessary
236 |
237 | # TODO(jace) Notify followers
238 |
239 | return card.key.urlsafe()
240 |
241 |
242 | def card_import(handler):
243 | """Import another user's existing Card to the current user's account.
244 |
245 | Called with the form: /api/card/
12 |
;
57 | }
58 | });
59 |
60 |
61 | module.exports = About;
62 |
--------------------------------------------------------------------------------
/webapp/frontend/backbonemixin.js:
--------------------------------------------------------------------------------
1 | var _validateModelArray = function(backboneModels) {
2 | if (!_.isArray(backboneModels)) {
3 | throw new Error('getBackboneModels must return an array, ' +
4 | 'get this ' + backboneModels + ' out of here.');
5 | }
6 | }
7 |
8 | /**
9 | * BackboneMixin - automatic binding and unbinding for react classes mirroring
10 | * backbone models and views. Example:
11 | *
12 | * var Model = Backbone.Model.extend({ ... });
13 | * var Collection = Backbone.Collection.extend({ ... });
14 | *
15 | * var Example = React.createClass({
16 | * mixins: [BackboneMixin],
17 | * getBackboneModels: function() {
18 | * return [this.model, this.collection];
19 | * }
20 | * });
21 | *
22 | * List the models and collections that your class uses and it'll be
23 | * automatically `forceUpdate`-ed when they change.
24 | *
25 | * This binds *and* unbinds the events.
26 | */
27 | var BackboneMixin = {
28 | // Passing this.forceUpdate directly to backbone.on will cause it to call
29 | // forceUpdate with the changed model, which we don't want
30 | _backboneForceUpdate: function() {
31 | this.forceUpdate();
32 | },
33 | componentDidMount: function() {
34 | // Whenever there may be a change in the Backbone data, trigger a
35 | // reconcile.
36 | var backboneModels = this.getBackboneModels();
37 | _validateModelArray(backboneModels);
38 | backboneModels.map(function(backbone) {
39 | // The add, remove, and reset events are never fired for
40 | // models, as far as I know.
41 | backbone.on('add change remove reset', this._backboneForceUpdate,
42 | this);
43 | }.bind(this));
44 | },
45 | componentWillUnmount: function() {
46 | var backboneModels = this.getBackboneModels();
47 | _validateModelArray(backboneModels);
48 | // Ensure that we clean up any dangling references when the
49 | // component is destroyed.
50 | backboneModels.map(function(backbone) {
51 | // Remove all callbacks for all events with `this` as a context
52 | backbone.off('add change remove reset', this._backboneForceUpdate,
53 | this);
54 | }.bind(this));
55 | }
56 | };
57 |
58 | module.exports = BackboneMixin;
59 |
--------------------------------------------------------------------------------
/webapp/frontend/editor.jsx:
--------------------------------------------------------------------------------
1 | /** @jsx React.DOM */
2 | /*
3 | * Interface for card editing
4 | */
5 | var React = require('react');
6 | var Router = require('react-nested-router');
7 | var BackboneMixin = require('./backbonemixin.js');
8 | var models = require('./models.js');
9 |
10 | // props: submitCardData
11 | // stats: [a dict representing fields which have been changed]
12 | var EditorForm = React.createClass({
13 | getInitialState: function() {
14 | return {isEnabled: true};
15 | },
16 | handleChange: function(field, event) {
17 | var state = {};
18 | if (field === 'reversible' || field === 'private') {
19 | state[field] = event.target.checked;
20 | } else {
21 | state[field] = event.target.value;
22 | }
23 | this.setState(state);
24 | },
25 | handleTagsInputChange: function(elt) {
26 | // The tagsInput arguments aren't helpful or consistent, so we
27 | // go straight to the source.
28 | // TODO(chris): this is called once per tag on initialization,
29 | // which is silly.
30 | var tags = this.refs.tagsinput.getDOMNode().value.split(',');
31 | this.setState({tags: tags});
32 | },
33 | handleSubmit: function() {
34 | this.setState({isEnabled: false});
35 | this.props.submitCardData(this.state);
36 | },
37 | render: function() {
38 | var tagsArray = this.props.cardModel.tags;
39 | var tagsCSV = tagsArray ? tagsArray.join(", ") : "";
40 | var inputFormat = (this.props.cardModel.input_format
41 | ? this.props.cardModel.input_format.toLowerCase()
42 | : "text");
43 | return ;
92 | },
93 | componentDidMount: function() {
94 | $(this.refs.tagsinput.getDOMNode()).tagsInput({
95 | onChange: this.handleTagsInputChange
96 | });
97 | }
98 | });
99 |
100 |
101 | // props: params.cardKey
102 | // state: cardModel
103 | var Editor = React.createClass({
104 | render: function() {
105 | if (window.user_key === 'None') {
106 | return
13 |
30 |
14 | 
15 |
29 |
16 |
28 |
17 |
21 |
27 | Memfinity
18 |A social spaced-repetition system.
19 |Learn with your friends. Remember forever.
20 |
31 |
56 |
32 |
54 |
55 | Remember all the things! We all encounter facts and information that we'd love to remember permanently, and now it's possible. Enter Memfinity, a powerful tool for personalized and social learning.
33 |
34 |
37 | Create flashcards on-the-fly.
35 |Memfinity lets you create your own flashcards right in your browser. In addition to the website, Memfinity offers a Chrome browser extension for even faster card creation. See a new vocab word while reading online? Wanna remember that incredible statistic? Stoked about an awesome keyboard shortcut, math concept, or piece of ridculous trivia? With card creation this simple, it takes just seconds to file information away for permanent recall.
36 |
38 |
41 | Turbocharge your brain.
39 |Spaced repetition algorithms are a game changer for personal learning. Each time you practice a card, you can rate it as "easy" or "hard". Memfinity will automatically adapt and schedule your next review of that card, maximizing your efficiency and making it possible to ensure all concepts will eventually become part of your permanent knowledge.
40 |
42 |
45 | Follow friends, and see what the world is learning.
43 |Memfinity is social, so you can also follow the public learning activity of people that share your learning interests. See a feed of what others care about learning, and efforlessly create a copy of cards that you want to learn, too.
44 |
46 |
50 | Built for openess.
47 | 48 |Memfinity is built from the ground up as a web-service. That means the open source community can create new apps for phones, browsers, or any device. Also, with Memfinity your data is never held hostage. We're open source, and you're always free to host your own personal version of Memfinity. And by learning with Memfinity, you're not only helping yourself learn; you're opening up doors for world-class research on memory and how people learn.
49 |
51 |
53 | Still wanna know more? Check out our FAQ page.
52 |
107 | Please log in to create your own cards. :)
108 |
;
109 | }
110 |
111 | if (!this.state.cardModel) {
112 | // If we don't have the data yet, display a temp message.
113 | return
114 | Please wait while your card data is fetched for editing.
115 | {this.props.params.cardKey} 116 |
;
117 | }
118 |
119 | return 115 | {this.props.params.cardKey} 116 |
120 |
;
125 | },
126 | getInitialState: function() {
127 | var isCreateMode = !this.props.params.cardKey;
128 | return {
129 | isCreateMode: isCreateMode,
130 | cardModel: isCreateMode ? new models.CardModel() : null,
131 | pendingSubmit: false
132 | };
133 | },
134 | componentDidMount: function(elem) {
135 | if (!this.state.cardModel) {
136 | this.fetchCardData();
137 | }
138 | },
139 | fetchCardData: function() {
140 | var self = this;
141 | $.get('/api/card/' + this.props.params.cardKey, function(cardData) {
142 | cardData = JSON.parse(cardData);
143 | self.setState({cardModel: cardData});
144 | });
145 | },
146 | submitCardData: function(data) {
147 | var self = this;
148 | console.log("submitting");
149 | console.log(data);
150 | this.setState({pendingSubmit: true});
151 | if (this.state.isCreateMode) {
152 | $.ajax({
153 | url: '/api/card',
154 | contentType: "application/json",
155 | type: 'POST',
156 | data: JSON.stringify(data),
157 | success: function(response) {
158 | console.log("creation POST was successful: " + response);
159 | self.setState({pendingSubmit: false});
160 | // if you successfully created a new card, we just route
161 | // you back to your feed.
162 | setTimeout(function () {
163 | // setTimeout necessary due to eventual consistency.
164 | // TODO(jace) eliminate this setTimeout! We should
165 | // pass the newly created card's key (which we have
166 | // in response) via a param in transitionTo to
167 | // the Feed component, which can explicity query
168 | // the API by key (which is consistent) and merge
169 | // that card in if it's not already present.
170 | Router.transitionTo('feed');
171 | }, 1000);
172 | },
173 | error: function(xhr, status, err) {
174 | console.error(self.props.url, status, err.toString());
175 | self.setState({pendingSubmit: false});
176 | }
177 | });
178 | } else {
179 | $.ajax({
180 | url: '/api/card/' + this.props.params.cardKey,
181 | contentType: "application/json",
182 | type: 'PUT',
183 | data: JSON.stringify(data),
184 | success: function(response) {
185 | console.log("PUT was successful: " + response);
186 | self.setState({pendingSubmit: false});
187 | },
188 | error: function(xhr, status, err) {
189 | console.error(self.props.url, status, err.toString());
190 | self.setState({pendingSubmit: false});
191 | }
192 | });
193 | }
194 | }
195 | });
196 |
197 | module.exports = Editor;
198 |
--------------------------------------------------------------------------------
/webapp/frontend/faq.jsx:
--------------------------------------------------------------------------------
1 | /** @jsx React.DOM */
2 | /*
3 | * Interface for the FAQ page
4 | */
5 | var React = require('react');
6 | var BackboneMixin = require('./backbonemixin.js');
7 | var models = require('./models.js');
8 |
9 | var FAQ = React.createClass({
10 | render: function() {
11 | return
12 |
;
48 | }
49 | });
50 |
51 |
52 | module.exports = FAQ;
53 |
--------------------------------------------------------------------------------
/webapp/frontend/feed.jsx:
--------------------------------------------------------------------------------
1 | /** @jsx React.DOM */
2 | /*
3 | * Interface for feed mode
4 | */
5 | var React = require('react');
6 | var Link = require('react-nested-router').Link;
7 | var BackboneMixin = require('./backbonemixin.js');
8 | var models = require('./models.js');
9 | var gravatar = require('./gravatar.js');
10 | var UserHeader = require('./userheader.jsx');
11 |
12 | // TODO(chris): this is chock-full of XSS potential. Plz fix. We
13 | // really ought to sanitize the generated HTML, probably on the
14 | // server. See Markdown and Bleach for Python.
15 | var converter = new Showdown.converter();
16 |
17 | // props: model
18 | var FeedCard = React.createClass({
19 | mixins: [BackboneMixin],
20 | render: function() {
21 | var cardActionButtons;
22 | if (window.user_key === null || window.user_key === 'None') {
23 | cardActionButtons = null;
24 | } else if (window.user_key !== this.props.model.get('user_key')) {
25 | cardActionButtons =
26 |
13 |
19 |
14 |
18 |
15 |
17 | Memfinity: Frequently Asked Questions
16 |
20 |
47 |
21 |
46 |
22 |
25 | Q: What kind of spaced repetition algorithm does Memfinity use?
23 |A: Memfinity uses a Leitner system algorithm. The current configuration for the algorithm uses five boxes with corresponding review intervals of 1, 5, 25, 125, and 625 days. In the future, we'd like to add the ability for each user to customize this configuration.
24 |
26 |
29 | Q: Why was Memfinity made? Doesn't high quality spaced repetition software alread exist?
27 |A: Memfinity was made as a hackthon project with friends from Khan Academy. While other spaced repetition software exists, we were intrigued by making something that had social component. We also wanted something that was web-native and built on top of a web services API. Memfinity requires no downloads, and lives where you live and learn--in your browser.
28 |
30 |
33 | Q: Can I embed images in my cards?
31 |A: Yup, at least if the images are hosted somewhere else on the web. Memfinity supports Markdown syntax for your cards, and you can find the syntax for specifying an image in Markdown here. If your images are not already hosted on the web, you can use a product like a public Dropbox folder to create linkable URLs for your images.
32 |
34 |
37 | Q: Do I need to have a Google account to use Memfinity?
35 |A: Right now, Memfinity requires a Google account to log in. You can search public cards without logging in, but in order to create and practice cards you will need to create a free Google account.
36 |
38 |
41 | Q: How do I customize my avatar?
39 |A: Memfinity uses Gravatar for avatar support. To customize your avatar, create a Gravatar associated with the Gmail account you use for logging in to Memfinity.
40 |
42 |
45 | Q: How can I contribute to Memfinity?
43 |A: If you're a developer, you can find us on GitHub and help make the project better. We consider it a pretty basic proof-of-concept right now, and we'd love to keep improving it.
44 |
27 | Take
28 |
;
29 | } else {
30 | cardActionButtons =
31 |
32 |
;
40 | };
41 |
42 | var inputFormat = this.props.model.get('input_format'),
43 | front = this.props.model.get('front'),
44 | back = this.props.model.get('back');
45 | if (inputFormat == 'text') {
46 | front =
33 | Delete
34 |
35 |
37 | Edit
38 |
39 | {front}
;
47 | back = {back}
;
48 | } else if (inputFormat == 'markdown') {
49 | front = ;
50 | back = ;
51 | }
52 |
53 | return
54 |
;
66 | },
67 | getBackboneModels: function() {
68 | return [this.props.model];
69 | },
70 | deleteCard: function() {
71 | // fire off an async DELETE to the server
72 | this.props.model.deleteCard();
73 | // optimistically, we remove it from the UI
74 | this.props.onDeleteCard(this.props.model);
75 | },
76 | takeCard: function() {
77 | this.props.model.takeCard();
78 | }
79 | });
80 |
81 | var FeedCardMeta = React.createClass({
82 | render: function() {
83 | // TODO get this info from google
84 | // http://stackoverflow.com/q/3591278/2121468
85 | var userImage = gravatar(this.props.model.get('user_email'), 60),
86 | photoStyle = {background: 'url(' + userImage + ') no-repeat'};
87 | return
56 |
65 | {front}
57 | {back}
58 |
59 |
64 |
61 | {cardActionButtons}
62 |
63 |
88 |
89 |
90 |
;
97 | },
98 | takeCard: function() {
99 | console.log('TODO');
100 | }
101 | });
102 |
103 | var Tags = React.createClass({
104 | render: function() {
105 | var tags = _(this.props.list).map(function(tag) {
106 | return {tag};
107 | });
108 | return
91 |
95 |
96 |
92 | {this.props.model.get('user_nickname')}
93 |
94 |
109 | Tags: {tags}
110 |
;
111 | }
112 | });
113 |
114 | // props: collection, onDeleteCard
115 | var FeedBody = React.createClass({
116 | render: function() {
117 | var onDeleteCard = this.props.onDeleteCard;
118 | var collection = this.props.collection;
119 | var feedItems = _(collection.models).map(function(model) {
120 | return -
126 | {feedItems}
127 |
135 | Practice {this.props.count} cards
136 |
;
137 | }
138 | });
139 |
140 | // props: onFilterChange
141 | var FilterBar = React.createClass({
142 | handleSubmit: function(event) {
143 | event.preventDefault();
144 | var query = this.refs.query.getDOMNode().value.trim();
145 | this.props.onFilterChange(query);
146 | },
147 | render: function() {
148 | return
149 |
163 |
;
167 | }
168 | });
169 |
170 | // props: collection, query, showSearchBar, params.refresh(optional)
171 | var SearchFeed = React.createClass({
172 | render: function() {
173 | var filterbar = '';
174 | if (!this.props.hasOwnProperty('showSearchBar')
175 | || this.props.showSearchBar) {
176 | filterbar =
164 |
165 |
166 |
181 | {filterbar}
182 |
;
185 | },
186 | getInitialState: function() {
187 | // TODO set some state for a spinner?
188 | return {
189 | cardCollection: new models.CardCollection(),
190 | userKey: window.user_key
191 | };
192 | },
193 | componentDidMount: function() {
194 | this.fetchCardData(this.props.query);
195 | },
196 | cardsFromJSON: function(cardsJSON) {
197 | var cardData = JSON.parse(cardsJSON);
198 | var cardModels = _(cardData).map(function(card) {
199 | return new models.CardModel(card);
200 | });
201 | return new models.CardCollection(cardModels);
202 | },
203 | fetchCardData: function(query) {
204 | var self = this;
205 | $.get('/api/cards/search', {q: query}, function(newCardsJSON) {
206 | self.setState({cardCollection: self.cardsFromJSON(newCardsJSON)});
207 | });
208 | },
209 | onDeleteCard: function(cardModel) {
210 | // TODO(jace) This seems lame and inefficient to make copy of the
211 | // existing card collection, but there are warnings
212 | // against modifying state directly. Should figure out a better way.
213 | var cardCollection = new models.CardCollection(this.state.cardCollection.models);
214 | cardCollection.remove(cardModel);
215 | this.setState({cardCollection: cardCollection});
216 | },
217 | onTakeAll: function() {
218 | console.log("Take ALL", this.state.cardCollection.models);
219 | var self = this;
220 | _.map(this.state.cardCollection.models, function(cardModel) {
221 | if (cardModel.get('user_key') !== self.state.userKey) {
222 | cardModel.takeCard();
223 | }
224 | });
225 | }
226 | });
227 |
228 | var UserFeed = React.createClass({
229 | determineUserKey: function() {
230 | if (this.props.params && this.props.params.userKey) {
231 | return this.props.params.userKey;
232 | }
233 | if (window.user_key !== 'None') {
234 | return window.user_key;
235 | }
236 | return null;
237 | },
238 | render: function() {
239 | if (!this.determineUserKey()) {
240 | // hack: use a real class name
241 | return Log in to view your feed...
;
242 | }
243 |
244 | if (!this.state.userData || !this.state.query) {
245 | return Hold on, reticulating splines...
;
246 | }
247 |
248 | return
249 |
;
252 |
253 | },
254 | getInitialState: function() {
255 | return {
256 | userData: null,
257 | query: ''
258 | };
259 | },
260 | componentDidMount: function() {
261 | var userKey = this.determineUserKey();
262 | if (!this.state.userData && userKey) {
263 | var url = '/api/user/' + userKey ;
264 | var self = this;
265 | $.get(url, function(response) {
266 | var userData = JSON.parse(response);
267 | var query = [userData.key].concat(userData.following).join(' ');
268 | self.setState({userData: userData, query: query});
269 | });
270 | }
271 | }
272 | });
273 |
274 | module.exports = {
275 | SearchFeed: SearchFeed,
276 | UserFeed: UserFeed
277 | };
278 |
--------------------------------------------------------------------------------
/webapp/frontend/follows.jsx:
--------------------------------------------------------------------------------
1 | /** @jsx React.DOM */
2 | /*
3 | * Interface for feed mode
4 | */
5 | var React = require('react');
6 | var Link = require('react-nested-router').Link;
7 | var gravatar = require('./gravatar.js');
8 | var UserHeader = require('./userheader.jsx');
9 |
10 | // props: model
11 | var UserCard = React.createClass({
12 | render: function() {
13 | var cardActionButtons;
14 | if (window.username === null) {
15 | cardActionButtons = null;
16 | } else if (window.username !== this.props.user.email) {
17 | cardActionButtons = null;
18 | // TODO.. should implement a *follow* button here...
19 | //
20 | // Take
21 | //
;
22 | };
23 | var front = this.props.user.nickname,
24 | back = this.props.user.name;
25 | return
26 |
;
37 | }
38 | });
39 |
40 | var UserCardMeta = React.createClass({
41 | render: function() {
42 | // TODO get this info from google
43 | // http://stackoverflow.com/q/3591278/2121468
44 | // TODO DRY this up with-- duplicates FeedCardMeta in feed.jsx
45 | var userImage = gravatar(this.props.user.email, 60),
46 | photoStyle = {background: 'url(' + userImage + ') no-repeat'};
47 | return
28 |
36 | {front}
29 | {back}
30 |
31 |
35 |
32 | {cardActionButtons}
33 |
34 |
48 |
49 |
50 |
;
57 | }
58 | });
59 |
60 | // props: userKey, followersOrFollowing
61 | var Follows = React.createClass({
62 | render: function() {
63 | if (!this.state.followsData) {
64 | return
51 |
55 |
56 |
52 | {this.props.user.nickname}
53 |
54 | Count to ten, your data will be arriving shortly.
;
65 | }
66 |
67 | var userDicts;
68 | if (this.props.followersOrFollowing === 'following') {
69 | userDicts = this.state.followsData.following;
70 | } else {
71 | userDicts = this.state.followsData.followers;
72 | }
73 |
74 | var userItems = _(userDicts).map(function(user) {
75 | return
81 |
;
88 | },
89 | getInitialState: function() {
90 | // TODO set some state for a spinner?
91 | return { followsData: null };
92 | },
93 | componentDidMount: function() {
94 | if (!this.state.followsData) {
95 | // force an API call to retrieve cards
96 | this.fetchData();
97 | }
98 | },
99 | fetchData: function() {
100 | var self = this;
101 | var url = '/api/user/' + this.props.userKey + '/follows';
102 | $.get(url, function(response) {
103 | self.setState({followsData: JSON.parse(response)});
104 | });
105 | }
106 | });
107 |
108 | var Following = React.createClass({
109 | render: function() {
110 | return
83 |
87 | -
84 | {userItems}
85 |
}){kind=avatar}
Logout;
14 | }
15 | return
16 |
;
29 | }
30 | });
31 |
32 | module.exports = Header;
33 |
--------------------------------------------------------------------------------
/webapp/frontend/models.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Cards store the following data:
3 | * - front: markup appearing on the front of the card
4 | * - back: markup appearing on the back of the card
5 | * - tags: list of tag names
6 | * - ... meta ...
7 | */
8 | var CardModel = Backbone.Model.extend({
9 | url: function() {
10 | return '/api/card/' + this.get('key');
11 | },
12 | rate: function(rating) {
13 | $.ajax({
14 | url: this.url() + '/review',
15 | data: JSON.stringify({ grade: rating }),
16 | contentType: 'application/json',
17 | type: 'PUT'
18 | })
19 | //.done(function() { console.log('card rate success'); })
20 | .fail(function() { console.log('card rate fail'); });
21 | },
22 | deleteCard: function() {
23 | $.ajax({
24 | url: this.url(),
25 | type: 'DELETE'
26 | })
27 | //.done(function() { console.log('card delete success'); })
28 | .fail(function() { console.log('card delete fail'); });
29 | },
30 | takeCard: function() {
31 | $.ajax({
32 | url: this.url() + '/import',
33 | type: 'PUT'
34 | })
35 | //.done(function() { console.log('card import success'); })
36 | .fail(function() { console.log('card import fail'); });
37 | },
38 | });
39 |
40 | var CardCollection = Backbone.Collection.extend({
41 | model: CardModel,
42 | url: '/api/cards' // TODO
43 | // TODO - comparator
44 | });
45 |
46 | module.exports = {
47 | CardModel: CardModel,
48 | CardCollection: CardCollection
49 | };
50 |
--------------------------------------------------------------------------------
/webapp/frontend/review.jsx:
--------------------------------------------------------------------------------
1 | /** @jsx React.DOM */
2 | /*
3 | * Interface for review mode
4 | */
5 | var React = require('react');
6 | var Link = require('react-nested-router').Link;
7 | var BackboneMixin = require('./backbonemixin.js');
8 | var models = require('./models.js');
9 |
10 | // TODO(chris): this is chock-full of XSS potential. Plz fix. We
11 | // really ought to sanitize the generated HTML, probably on the
12 | // server. See Markdown and Bleach for Python.
13 | var converter = new Showdown.converter();
14 |
15 | var CardModel = models.CardModel,
16 | CardCollection = models.CardCollection;
17 |
18 | var Review = React.createClass({
19 | render: function() {
20 | if (window.user_key === 'None') {
21 | return
17 |
28 | -
18 |
- Create 19 |
- Practice 20 |
- Feed 21 |
- Search 22 |
-
24 |
- About 25 |
- {loginLink} 26 |
22 | Please log in to practice your personal cards. :)
23 |
;
24 | }
25 |
26 | if (!this.state.reviewingStack) {
27 | // If we don't have the data yet, display a temp message.
28 | return Sit tight, partner. We‘re loading your data now!
;
29 | }
30 |
31 | var hardStack = new CardCollection(),
32 | easyStack = new CardCollection();
33 |
34 | var rate = function(cid, rating) {
35 | var reviewingStack = this.state.reviewingStack,
36 | model = reviewingStack.get(cid);
37 | model.rate(rating);
38 | reviewingStack.remove(model);
39 | if (rating === 'easy') {
40 | easyStack.add(model);
41 | } else { // hard
42 | hardStack.add(model);
43 | }
44 | }.bind(this);
45 |
46 | return
47 |
;
56 | },
57 | getInitialState: function() {
58 | var reviewAll = (
59 | (this.props.params && this.props.params.reviewAll==='true') ||
60 | (this.props.query && this.props.query.reviewAll==='true')
61 | );
62 | return {
63 | reviewingStack: null,
64 | reviewAll: reviewAll
65 | };
66 | },
67 | componentDidMount: function() {
68 | if (this.state.reviewingStack === null) {
69 | // force an API call to retrieve cards
70 | this.fetchCardData(this.state.reviewAll);
71 | }
72 | },
73 | onKeepPracticing: function() {
74 | this.setState({reviewAll: true, reviewingStack: null});
75 | this.fetchCardData(true);
76 | },
77 | fetchCardData: function(reviewAll) {
78 | var self = this;
79 | var url = '/api/cards?review=1';
80 | if (reviewAll) {
81 | url += "&reviewAll=true"
82 | }
83 |
84 | $.get(url, function(reviewCards) {
85 | var cardModels = _(JSON.parse(reviewCards)).map(function(card) {
86 | return new models.CardModel(card);
87 | });
88 | var reviewingStack = new models.CardCollection(cardModels);
89 | self.setState({reviewingStack: reviewingStack});
90 | });
91 | },
92 | });
93 |
94 | var stackSides = function (primary, secondary, size, times) {
95 | times = 1;
96 | var ret = [];
97 | _(times).times(function(n) {
98 | n += 1; // 1-indexed
99 | var color = n % 2 === 0 ? primary : secondary,
100 | sz = (size * n) + 'px ';
101 | ret.push(sz + sz + color);
102 | });
103 | ret = ret.join(', ');
104 | return ret;
105 | };
106 |
107 | // props: collection, position ({x, y})?, rate
108 | var ReviewingStack = React.createClass({
109 | mixins: [BackboneMixin],
110 | render: function() {
111 | var topCardModel = _(this.props.collection.models).first();
112 | var sideLayers = Math.max(1, this.props.collection.models.length);
113 | var stackstyle = {
114 | 'box-shadow': stackSides('#2C3E50', '#BDC3C7', 2, sideLayers)
115 | };
116 |
117 | var stack;
118 | if (!topCardModel) { // empty stack
119 | // TODO
120 | stack =
122 |
;
130 | } else {
131 | var topCard = Congratulations!
123 | 124 |you have no cards needing practice right now.
125 |126 | Create new cards or 127 | continue practicing 128 |
129 |
135 | {topCard}
136 |
;
137 | }
138 | return
139 |
;
144 | },
145 | onKeepPracticing: function(event) {
146 | this.props.onKeepPracticing();
147 | },
148 | getBackboneModels: function() {
149 | return [this.props.collection];
150 | }
151 | });
152 |
153 | var ReviewingStackMeta = React.createClass({
154 | render: function() {
155 | var count = this.props.count,
156 | word = this.props.count === 1 ? 'card' : 'cards',
157 | phrase = count + ' ' + word;
158 | return
159 |
;
162 | }
163 | });
164 |
165 | // props: collection, position, (some handler)
166 | var ReviewedStack = React.createClass({
167 | mixins: [BackboneMixin],
168 | render: function() {
169 | var sideLayers = this.props.collection.models.length;
170 | var stackstyle = {
171 | 'box-shadow': stackSides('#2C3E50', '#BDC3C7', 2, sideLayers)
172 | };
173 |
174 | var topCardModel = _(this.props.collection.models).last();
175 | if (topCardModel) {
176 | // TODO way to view this card
177 | topCard = {this.props.name}
160 |{phrase}
161 |
183 |
;
190 | },
191 | getBackboneModels: function() {
192 | return [this.props.collection];
193 | }
194 | });
195 |
196 | var ReviewedStackMeta = React.createClass({
197 | render: function() {
198 | var count = this.props.count,
199 | word = this.props.count === 1 ? 'card' : 'cards',
200 | phrase = count + ' ' + word;
201 | return
186 |
187 | {topCard}
188 |
189 |
202 |
;
205 | }
206 | });
207 |
208 | // props: nextCard, front, back, (tags or meta)
209 | // TODO this should probably take state as as prop
210 | var Card = React.createClass({
211 | render: function() {
212 | var stateView,
213 | content;
214 | if (this.state.state === 'front') {
215 | var clickHandler = function() {
216 | this.setState({state: 'back'});
217 | }.bind(this);
218 | content = this.props.model.get('front');
219 | if (this.props.model.get('input_format') == 'markdown') {
220 | content = ;
222 | }
223 | stateView = {this.props.name}
203 | {phrase} 204 |
239 | {stateView}
240 |
;
241 | },
242 | getInitialState: function() {
243 | return {
244 | state: 'front'
245 | };
246 | }
247 | });
248 |
249 | var CardFront = React.createClass({
250 | render: function() {
251 | return
252 |
;
255 | }
256 | });
257 |
258 | var CardBack = React.createClass({
259 | render: function() {
260 | // (click to reveal and rate)
254 |
262 |
;
265 | }
266 | });
267 |
268 | var CardMeta = React.createClass({
269 | render: function() {
270 | return ;
271 | }
272 | });
273 |
274 | var Content = React.createClass({
275 | render: function() {
276 | return {this.props.content}
;
277 | }
278 | });
279 |
280 | var Choices = React.createClass({
281 | render: function() {
282 | return
283 |
285 | Hard
286 |
287 |
289 | Easy
290 |
291 |
;
292 | }
293 | });
294 |
295 | var MetaButton = React.createClass({
296 | render: function() {
297 | return ;
298 | }
299 | });
300 |
301 | module.exports = Review;
302 |
--------------------------------------------------------------------------------
/webapp/frontend/site.jsx:
--------------------------------------------------------------------------------
1 | /** @jsx React.DOM */
2 | var React = window.React = require('react');
3 | var Route = require('react-nested-router').Route;
4 | var models = require('./models.js'),
5 | Review = require('./review.jsx'),
6 | Header = require('./header.jsx'),
7 | SearchFeed = require('./feed.jsx').SearchFeed,
8 | UserFeed = require('./feed.jsx').UserFeed,
9 | Editor = require('./editor.jsx'),
10 | Following = require('./follows.jsx').Following,
11 | Followers = require('./follows.jsx').Followers,
12 | About = require('./about.jsx'),
13 | FAQ = require('./faq.jsx');
14 |
15 | var Site = React.createClass({
16 | render: function() {
17 | return
18 |
;
21 | }
22 | });
23 |
24 | React.renderComponent((
25 |
34 |
;
47 | },
48 | fireAJAX: function(followOrUnfollow) {
49 | var self = this;
50 | var userDataKey = this.props.userData.key;
51 | $.ajax({
52 | url: '/api/user/' + userDataKey + '/' + followOrUnfollow,
53 | type: 'PUT',
54 | success: function(response) {
55 | console.log("PUT was successful: " + response);
56 | var fn = followOrUnfollow == "follow" ? _.union : _.difference;
57 | self.setState({following: fn(window.following, [userDataKey])});
58 | },
59 | error: function(xhr, status, err) {
60 | console.log("PUT failed: ", status, err.toString());
61 | }
62 | });
63 | },
64 | onFollow: function() {
65 | this.fireAJAX('follow');
66 | },
67 | onUnfollow: function() {
68 | this.fireAJAX('unfollow');
69 | }
70 | });
71 |
72 | module.exports = UserHeader;
73 |
--------------------------------------------------------------------------------
/webapp/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
35 |
46 | -
36 |
- {userData.nickname} 38 | {followItem} 39 | {unfollowItem} 40 |
}){kind=avatar}
-
42 |
- {followers.length} Followers. 43 |
- Following {userData.following.length}. 44 |