Giter Site home page Giter Site logo

recon_frontend's People

Contributors

chennech avatar ericgunther avatar jrolimited avatar jugglinmike avatar justinmanor avatar kronick avatar recon2012 avatar tbranyen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

recon_frontend's Issues

Implement left nav bar to design spec.

Implement to Chen's design spec.

The nav bar is fixed to the upper left at all times and is fixed in size.

My plan was to lay it out horizontally, then use CSS rotate (I already added a .rot90 class to index.css) to rotate the whole navBar.

The div heirarchy is #navigation > #navBar

I assigned the Navigation.View a template and started to fill it out.

When you click the ReConstitution title, it takes you back to the landing page where you can select which debate to watch (same page you see when you land at the site).

The clock is always the time of the current sentence. So in the live debates, it is the real clock time. In the playback of the debates, it is whenever the current sentence was originally spoken (aka between 9:00PM and 10:30PM).

When you scroll back up the transcript, the clock switches to the text GO LIVE, with some color. If you press this text, the transcript will jump back to the current sentence (aka down to the bottom edge).

The yellow progress bar always reflects the time of the current sentence, normalized over the whole hour and a half (which is the height of the white box). When you scroll back up the transcript, some graphic (a line or box) will slide up along this yellow line to indicate where you currently are in the transcript.

Client-side event naming + payload standards?

"message:word" or "words:add" or "words:new" or ??? This is going to get really confusing if we don't settle on something consistent.

Also, do we want to avoid passing state in events (such as "live" in

app.trigger("message:word", {msg:msg,live:live});
) ? Should we create a model for app state that all modules can access? Or should we have events for app state changes that modules can listen for and respond accordingly? @tbranyen, what's your advice?

Frequent word count superscript : Is double div causing slowdown?

Granted, we'll be adding lots more crap to the transcript and we'll definitely look into culling the offscreen paragraphs—part of the slowdown might be coming from the double-div for the superscripts.

Is there a way to make those superscripts a single span? And have them either added as a child of the word span or actually inserted into the word span flow?

Autoscroll broke when span-per-word was removed in transcript.

Transcript no longer adds a span per word. It just inserts the words into the sentence span.

And then MarkupManager wraps selected words with spans (with their special classes). For now, these are frequent words and word count overlay words.

Autoscrolling is disabled for now in Ref.

getCurSentencePosY() and getRecentWordPos() depend on race condition

These functions look for the #curParagraph and #curSentence elements, which sometimes do not exist (namely between paragraph and sentence start/end messages). I'm getting exceptions when working on the numbers overlay since it calls these functions at the end of the sentence.

We either need to cache these values somehow, or explicitly pass this position information in the relevant events (the latter will make sure the context of "current" doesn't change between the event being fired and the DOM being manipulated).

Cull overlay/translateZ'ed elements

Elements with -webkit-transform: translateZ() properties slow down rendering when there are many in the DOM. Right now, the problem elements are .bigWord and .wordCountTextHolder . Both are absolutely positioned, so they can be culled by setting display: none without affecting the rest of the layout.

To do this efficiently, elements will need to cache their top and bottom positions so we don't have to call $().offset() (which is also relatively slow). Calculating this might not be trivial since these elements are moving with parallax...

Implement Quotes Overlay

This is the said, saying, says, etc. overlay. markup:quote events should already be triggered in transcript. MarkupManager should listen for these and do the right thing.

Basically, the "say" word and the word before it gets extracted for the overlay expand and blown up. Along with big quotation marks. The sentence in the transcript (the entire sentence — we're not going to try to find quotes becuase they're too inconsistent) gets styled as the maroon color with an underline.

In Chen's sketches, she shows the sentence first with the background rect and then underlined, but for now let's just go straight to the underline.

For the overlay animation, i like the look of the words sliding up from nowhere (like the wordCount one) so let's try to figure out a way to make that work for this. Give me a holler when you sit down to work on the overlay expand for this and we can chat it through. Thanks!

Would hiding out-of-viewport paragraphs help performance?

Right now after running the transcript for about 30 minutes Chrome takes 100% CPU when I scroll. The DOM is getting pretty complex as we begin to mark up each word. Can we just do some sort of viewport culling and keep things snappy?

Comparison scrolling / parallax architecture.

Figure out how to do comparison scrolling (with parallax!)

From Justin:
when you reach the bottom of the comparisons, the bottom of your 'viewport' starts to be chopped off. you can restore them by scrolling all the way back to the top

Set up events-based communication between modules

Using Backbone.Events, which is rolled into the app object by BBB.

To trigger:
app.trigger("eventdomain:action", data);

To receive:
app.on("eventdomain:action", handler, this);

These are separate events from DOM events (onClick, etc) and WebSocket message events (word, sentenceEnd, etc), though both of those event types could (and probably should) trigger app events.

design backbone architecture

Start designing data models and collections for Backbone architecture and thinking about how they will fit in with views and front end.

Implement Numbers Overlay.

Hey Sam,

Chen's most recent designs are in Dropbox/Recon2012/Design/DesignInProgress_modes_cb04.pdf
The numbers overlay design is the salmon colored "16 million".

I got number phase detection going. Transcript has logic in addWord to detect numbers, wait until a set number of words have come in after a number, and emit a markup:number event. MarkupManager listens for these, and uses the new transcript.addSpanToRecentWord() function to style the number phrase.

I already added in the husks for numbers overlay (Overlay.Views.NumbersView and numbers.html template). Look at how wordCount overlay was done and implement the numbers overlay. We're currently thinking that the big numbers overlay slides in from the right for the expand animation. Let's see how this works.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.