diff --git a/Application.hs b/Application.hs index e92622b..8b66688 100644 --- a/Application.hs +++ b/Application.hs @@ -47,6 +47,7 @@ import Handler.Query import Handler.ShowChallenge import Handler.Shared import Handler.YourAccount +import Handler.Presentation -- This line actually creates our YesodDispatch instance. It is the second half -- of the call to mkYesodData which occurs in Foundation.hs. Please see the diff --git a/Foundation.hs b/Foundation.hs index 859a688..bab47cb 100644 --- a/Foundation.hs +++ b/Foundation.hs @@ -116,6 +116,8 @@ instance Yesod App where isAuthorized (ChallengeDiscussionR _) _ = return Authorized isAuthorized (ChallengeDiscussionFeedR _) _ = return Authorized + isAuthorized Presentation4RealR _ = return Authorized + isAuthorized (AvatarR _) _ = return Authorized -- Default to Authorized for now. diff --git a/Handler/Presentation.hs b/Handler/Presentation.hs new file mode 100644 index 0000000..62d5620 --- /dev/null +++ b/Handler/Presentation.hs @@ -0,0 +1,34 @@ +module Handler.Presentation where + +import Import + +import Handler.ShowChallenge +import Handler.Tables + +import qualified Yesod.Table as Table +import Yesod.Table (Table) + +import Text.Hamlet (hamletFile) + +sampleChallengeName :: Text +sampleChallengeName = "petite-difference-challenge" + +getPresentation4RealR :: Handler Html +getPresentation4RealR = do + readme <- challengeReadme sampleChallengeName + + (Entity challengeId challenge) <- runDB $ getBy404 $ UniqueName sampleChallengeName + Just repo <- runDB $ get $ challengePublicRepo challenge + (test, leaderboard) <- getLeaderboardEntries challengeId + let leaderboardWithRanks = zip [1..] leaderboard + + presentationLayout $(widgetFile "presentation-4real") + +presentationLayout widget = do + master <- getYesod + mmsg <- getMessage + + maybeUser <- maybeAuth + + pc <- widgetToPageContent widget + withUrlRenderer $(hamletFile "templates/presentation-layout.hamlet") diff --git a/Handler/ShowChallenge.hs b/Handler/ShowChallenge.hs index 980afda..7110388 100644 --- a/Handler/ShowChallenge.hs +++ b/Handler/ShowChallenge.hs @@ -40,12 +40,17 @@ getShowChallengeR name = do getChallengeReadmeR :: Text -> Handler Html getChallengeReadmeR name = do + (Entity _ challenge) <- runDB $ getBy404 $ UniqueName name + readme <- challengeReadme name + challengeLayout False challenge $ toWidget readme + +challengeReadme name = do (Entity _ challenge) <- runDB $ getBy404 $ UniqueName name let repoId = challengePublicRepo challenge repoDir <- getRepoDir repoId let readmeFilePath = repoDir readmeFile contents <- readFile readmeFilePath - challengeLayout False challenge $ toWidget $ markdown def $ TL.fromStrict contents + return $ markdown def $ TL.fromStrict contents showChallengeWidget muserId challenge test repo leaderboard = $(widgetFile "show-challenge") where leaderboardWithRanks = zip [1..] leaderboard diff --git a/config/routes b/config/routes index aa6d5b4..9667696 100644 --- a/config/routes +++ b/config/routes @@ -28,3 +28,5 @@ /account YourAccountR GET POST /avatar/#UserId AvatarR GET + +/presentation/4real Presentation4RealR GET diff --git a/gonito.cabal b/gonito.cabal index 74fcc71..d988427 100644 --- a/gonito.cabal +++ b/gonito.cabal @@ -43,6 +43,7 @@ library Handler.Query Handler.Tables Handler.YourAccount + Handler.Presentation if flag(dev) || flag(library-only) cpp-options: -DDEVELOPMENT diff --git a/static/css/impress-demo.css b/static/css/impress-demo.css new file mode 100644 index 0000000..7164183 --- /dev/null +++ b/static/css/impress-demo.css @@ -0,0 +1,706 @@ +/* + So you like the style of impress.js demo? + Or maybe you are just curious how it was done? + + You couldn't find a better place to find out! + + Welcome to the stylesheet impress.js demo presentation. + + Please remember that it is not meant to be a part of impress.js and is + not required by impress.js. + I expect that anyone creating a presentation for impress.js would create + their own set of styles. + + But feel free to read through it and learn how to get the most of what + impress.js provides. + + And let me be your guide. + + Shall we begin? +*/ + + +/* + We start with a good ol' reset. + That's the one by Eric Meyer http://meyerweb.com/eric/tools/css/reset/ + + You can probably argue if it is needed here, or not, but for sure it + doesn't do any harm and gives us a fresh start. +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +h1 { + padding-bottom: 10px; + font-weight: bold; +} + +h2 { + padding-bottom: 10px; + font-weight: bold; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* + Now here is when interesting things start to appear. + + We set up styles with default font and nice gradient in the background. + And yes, there is a lot of repetition there because of -prefixes but we don't + want to leave anybody behind. +*/ +body { + font-family: 'PT Sans', sans-serif; + min-height: 740px; + + background: rgb(215, 215, 215); + background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190))); + background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); + background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); + background: -ms-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); + background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); + background: radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); +} + +/* + Now let's bring some text styles back ... +*/ +b, strong { font-weight: bold } +i, em { font-style: italic } + +/* + ... and give links a nice look. +*/ +a { + color: inherit; + text-decoration: none; + padding: 0 0.1em; + background: rgba(255,255,255,0.5); + text-shadow: -1px -1px 2px rgba(100,100,100,0.9); + border-radius: 0.2em; + + -webkit-transition: 0.5s; + -moz-transition: 0.5s; + -ms-transition: 0.5s; + -o-transition: 0.5s; + transition: 0.5s; +} + +a:hover, +a:focus { + background: rgba(255,255,255,1); + text-shadow: -1px -1px 2px rgba(100,100,100,0.5); +} + +/* + Because the main point behind the impress.js demo is to demo impress.js + we display a fallback message for users with browsers that don't support + all the features required by it. + + All of the content will be still fully accessible for them, but I want + them to know that they are missing something - that's what the demo is + about, isn't it? + + And then we hide the message, when support is detected in the browser. +*/ + +.fallback-message { + font-family: sans-serif; + line-height: 1.3; + + width: 780px; + padding: 10px 10px 0; + margin: 20px auto; + + border: 1px solid #E4C652; + border-radius: 10px; + background: #EEDC94; +} + +.fallback-message p { + margin-bottom: 10px; +} + +.impress-supported .fallback-message { + display: none; +} + +/* + Now let's style the presentation steps. + + We start with basics to make sure it displays correctly in everywhere ... +*/ + +.step { + position: relative; + width: 900px; + padding: 40px; + margin: 20px auto; + + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; + + font-family: 'PT Serif', georgia, serif; + font-size: 48px; + line-height: 1.5; +} + +/* + ... and we enhance the styles for impress.js. + + Basically we remove the margin and make inactive steps a little bit transparent. +*/ +.impress-enabled .step { + margin: 0; + opacity: 0.3; + + -webkit-transition: opacity 1s; + -moz-transition: opacity 1s; + -ms-transition: opacity 1s; + -o-transition: opacity 1s; + transition: opacity 1s; +} + +.impress-enabled .step.active { opacity: 1 } + +/* + These 'slide' step styles were heavily inspired by HTML5 Slides: + http://html5slides.googlecode.com/svn/trunk/styles.css + + ;) + + They cover everything what you see on first three steps of the demo. +*/ +.slide { + display: block; + + width: 900px; + height: 700px; + padding: 40px 60px; + + background-color: white; + border: 1px solid rgba(0, 0, 0, .3); + border-radius: 10px; + box-shadow: 0 2px 6px rgba(0, 0, 0, .1); + + color: rgb(102, 102, 102); + text-shadow: 0 2px 2px rgba(0, 0, 0, .1); + + font-family: 'Open Sans', Arial, sans-serif; + font-size: 30px; + line-height: 36px; + letter-spacing: -1px; +} + +.slide q { + display: block; + font-size: 50px; + line-height: 72px; + + margin-top: 100px; +} + +.slide q strong { + white-space: nowrap; +} + +/* + And now we start to style each step separately. + + I agree that this may be not the most efficient, object-oriented and + scalable way of styling, but most of steps have quite a custom look + and typography tricks here and there, so they had to be styled separately. + + First is the title step with a big

(no room for padding) and some + 3D positioning along Z axis. +*/ + +#title { + padding: 0; +} + +#title .try { + font-size: 64px; + position: absolute; + top: -0.5em; + left: 1.5em; + + -webkit-transform: translateZ(20px); + -moz-transform: translateZ(20px); + -ms-transform: translateZ(20px); + -o-transform: translateZ(20px); + transform: translateZ(20px); +} + +#title h1 { + font-size: 190px; + + -webkit-transform: translateZ(50px); + -moz-transform: translateZ(50px); + -ms-transform: translateZ(50px); + -o-transform: translateZ(50px); + transform: translateZ(50px); +} + +#title .footnote { + font-size: 32px; +} + +/* + Second step is nothing special, just a text with a link, so it doesn't need + any special styling. + + Let's move to 'big thoughts' with centered text and custom font sizes. +*/ +#big { + width: 600px; + text-align: center; + font-size: 60px; + line-height: 1; +} + +#big b { + display: block; + font-size: 250px; + line-height: 250px; +} + +#big .thoughts { + font-size: 90px; + line-height: 150px; +} + +/* + 'Tiny ideas' just need some tiny styling. +*/ +#tiny { + width: 500px; + text-align: center; +} + +/* + This step has some animated text ... +*/ +#ing { width: 500px } + +/* + ... so we define display to `inline-block` to enable transforms and + transition duration to 0.5s ... +*/ +#ing b { + display: inline-block; + -webkit-transition: 0.5s; + -moz-transition: 0.5s; + -ms-transition: 0.5s; + -o-transition: 0.5s; + transition: 0.5s; +} + +/* + ... and we want 'positioning` word to move up a bit when the step gets + `present` class ... +*/ +#ing.present .positioning { + -webkit-transform: translateY(-10px); + -moz-transform: translateY(-10px); + -ms-transform: translateY(-10px); + -o-transform: translateY(-10px); + transform: translateY(-10px); +} + +/* + ... 'rotating' to rotate a quarter of a second later ... +*/ +#ing.present .rotating { + -webkit-transform: rotate(-10deg); + -moz-transform: rotate(-10deg); + -ms-transform: rotate(-10deg); + -o-transform: rotate(-10deg); + transform: rotate(-10deg); + + -webkit-transition-delay: 0.25s; + -moz-transition-delay: 0.25s; + -ms-transition-delay: 0.25s; + -o-transition-delay: 0.25s; + transition-delay: 0.25s; +} + +/* + ... and 'scaling' to scale down after another quarter of a second. +*/ +#ing.present .scaling { + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -ms-transform: scale(0.7); + -o-transform: scale(0.7); + transform: scale(0.7); + + -webkit-transition-delay: 0.5s; + -moz-transition-delay: 0.5s; + -ms-transition-delay: 0.5s; + -o-transition-delay: 0.5s; + transition-delay: 0.5s; +} + +/* + The 'imagination' step is again some boring font-sizing. +*/ + +#imagination { + width: 600px; +} + +#imagination .imagination { + font-size: 78px; +} + +/* + There is nothing really special about 'use the source, Luke' step, too, + except maybe of the Yoda background. + + As you can see below I've 'hard-coded' it in data URL. + That's not the best way to serve images, but because that's just this one + I decided it will be OK to have it this way. + + Just make sure you don't blindly copy this approach. +*/ +#source { + width: 700px; + padding-bottom: 300px; + +} + +#source q { + font-size: 60px; +} + +/* + And the "it's in 3D" step again brings some 3D typography - just for fun. + + Because we want to position elements in 3D we set transform-style to + `preserve-3d` on the paragraph. + It is not needed by webkit browsers, but it is in Firefox. It's hard to say + which behaviour is correct as 3D transforms spec is not very clear about it. +*/ +#its-in-3d p { + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; /* Y U need this Firefox?! */ + -ms-transform-style: preserve-3d; + -o-transform-style: preserve-3d; + transform-style: preserve-3d; +} + +/* + Below we position each word separately along Z axis and we want it to transition + to default position in 0.5s when the step gets `present` class. + + Quite a simple idea, but lot's of styles and prefixes. +*/ +#its-in-3d span, +#its-in-3d b { + display: inline-block; + -webkit-transform: translateZ(40px); + -moz-transform: translateZ(40px); + -ms-transform: translateZ(40px); + -o-transform: translateZ(40px); + transform: translateZ(40px); + + -webkit-transition: 0.5s; + -moz-transition: 0.5s; + -ms-transition: 0.5s; + -o-transition: 0.5s; + transition: 0.5s; +} + +#its-in-3d .have { + -webkit-transform: translateZ(-40px); + -moz-transform: translateZ(-40px); + -ms-transform: translateZ(-40px); + -o-transform: translateZ(-40px); + transform: translateZ(-40px); +} + +#its-in-3d .you { + -webkit-transform: translateZ(20px); + -moz-transform: translateZ(20px); + -ms-transform: translateZ(20px); + -o-transform: translateZ(20px); + transform: translateZ(20px); +} + +#its-in-3d .noticed { + -webkit-transform: translateZ(-40px); + -moz-transform: translateZ(-40px); + -ms-transform: translateZ(-40px); + -o-transform: translateZ(-40px); + transform: translateZ(-40px); +} + +#its-in-3d .its { + -webkit-transform: translateZ(60px); + -moz-transform: translateZ(60px); + -ms-transform: translateZ(60px); + -o-transform: translateZ(60px); + transform: translateZ(60px); +} + +#its-in-3d .in { + -webkit-transform: translateZ(-10px); + -moz-transform: translateZ(-10px); + -ms-transform: translateZ(-10px); + -o-transform: translateZ(-10px); + transform: translateZ(-10px); +} + +#its-in-3d .footnote { + font-size: 32px; + + -webkit-transform: translateZ(-10px); + -moz-transform: translateZ(-10px); + -ms-transform: translateZ(-10px); + -o-transform: translateZ(-10px); + transform: translateZ(-10px); +} + +#its-in-3d.present span, +#its-in-3d.present b { + -webkit-transform: translateZ(0px); + -moz-transform: translateZ(0px); + -ms-transform: translateZ(0px); + -o-transform: translateZ(0px); + transform: translateZ(0px); +} + +/* + The last step is an overview. + There is no content in it, so we make sure it's not visible because we want + to be able to click on other steps. + +*/ +#overview { display: none } + +/* + We also make other steps visible and give them a pointer cursor using the + `impress-on-` class. +*/ +.impress-on-overview .step { + opacity: 1; + cursor: pointer; +} + + +/* + Now, when we have all the steps styled let's give users a hint how to navigate + around the presentation. + + The best way to do this would be to use JavaScript, show a delayed hint for a + first time users, then hide it and store a status in cookie or localStorage... + + But I wanted to have some CSS fun and avoid additional scripting... + + Let me explain it first, so maybe the transition magic will be more readable + when you read the code. + + First of all I wanted the hint to appear only when user is idle for a while. + You can't detect the 'idle' state in CSS, but I delayed a appearing of the + hint by 5s using transition-delay. + + You also can't detect in CSS if the user is a first-time visitor, so I had to + make an assumption that I'll only show the hint on the first step. And when + the step is changed hide the hint, because I can assume that user already + knows how to navigate. + + To summarize it - hint is shown when the user is on the first step for longer + than 5 seconds. + + The other problem I had was caused by the fact that I wanted the hint to fade + in and out. It can be easily achieved by transitioning the opacity property. + But that also meant that the hint was always on the screen, even if totally + transparent. It covered part of the screen and you couldn't correctly clicked + through it. + Unfortunately you cannot transition between display `block` and `none` in pure + CSS, so I needed a way to not only fade out the hint but also move it out of + the screen. + + I solved this problem by positioning the hint below the bottom of the screen + with CSS transform and moving it up to show it. But I also didn't want this move + to be visible. I wanted the hint only to fade in and out visually, so I delayed + the fade in transition, so it starts when the hint is already in its correct + position on the screen. + + I know, it sounds complicated ... maybe it would be easier with the code? +*/ + +.hint { + /* + We hide the hint until presentation is started and from browsers not supporting + impress.js, as they will have a linear scrollable view ... + */ + display: none; + + /* + ... and give it some fixed position and nice styles. + */ + position: fixed; + left: 0; + right: 0; + bottom: 200px; + + background: rgba(0,0,0,0.5); + color: #EEE; + text-align: center; + + font-size: 50px; + padding: 20px; + + z-index: 100; + + /* + By default we don't want the hint to be visible, so we make it transparent ... + */ + opacity: 0; + + /* + ... and position it below the bottom of the screen (relative to it's fixed position) + */ + -webkit-transform: translateY(400px); + -moz-transform: translateY(400px); + -ms-transform: translateY(400px); + -o-transform: translateY(400px); + transform: translateY(400px); + + /* + Now let's imagine that the hint is visible and we want to fade it out and move out + of the screen. + + So we define the transition on the opacity property with 1s duration and another + transition on transform property delayed by 1s so it will happen after the fade out + on opacity finished. + + This way user will not see the hint moving down. + */ + -webkit-transition: opacity 1s, -webkit-transform 0.5s 1s; + -moz-transition: opacity 1s, -moz-transform 0.5s 1s; + -ms-transition: opacity 1s, -ms-transform 0.5s 1s; + -o-transition: opacity 1s, -o-transform 0.5s 1s; + transition: opacity 1s, transform 0.5s 1s; +} + +/* + Now we 'enable' the hint when presentation is initialized ... +*/ +.impress-enabled .hint { display: block } + +/* + ... and we will show it when the first step (with id 'bored') is active. +*/ +.impress-on-bored .hint { + /* + We remove the transparency and position the hint in its default fixed + position. + */ + opacity: 1; + + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -ms-transform: translateY(0px); + -o-transform: translateY(0px); + transform: translateY(0px); + + /* + Now for fade in transition we have the oposite situation from the one + above. + + First after 4.5s delay we animate the transform property to move the hint + into its correct position and after that we fade it in with opacity + transition. + */ + -webkit-transition: opacity 1s 5s, -webkit-transform 0.5s 4.5s; + -moz-transition: opacity 1s 5s, -moz-transform 0.5s 4.5s; + -ms-transition: opacity 1s 5s, -ms-transform 0.5s 4.5s; + -o-transition: opacity 1s 5s, -o-transform 0.5s 4.5s; + transition: opacity 1s 5s, transform 0.5s 4.5s; +} + +/* + And as the last thing there is a workaround for quite strange bug. + It happens a lot in Chrome. I don't remember if I've seen it in Firefox. + + Sometimes the element positioned in 3D (especially when it's moved back + along Z axis) is not clickable, because it falls 'behind' the + element. + + To prevent this, I decided to make non clickable by setting + pointer-events property to `none` value. + Value if this property is inherited, so to make everything else clickable + I bring it back on the #impress element. + + If you want to know more about `pointer-events` here are some docs: + https://developer.mozilla.org/en/CSS/pointer-events + + There is one very important thing to notice about this workaround - it makes + everything 'unclickable' except what's in #impress element. + + So use it wisely ... or don't use at all. +*/ +.impress-enabled { pointer-events: none } +.impress-enabled #impress { pointer-events: auto } + +/* + There is one funny thing I just realized. + + Thanks to this workaround above everything except #impress element is invisible + for click events. That means that the hint element is also not clickable. + So basically all of this transforms and delayed transitions trickery was probably + not needed at all... + + But it was fun to learn about it, wasn't it? +*/ + +/* + That's all I have for you in this file. + Thanks for reading. I hope you enjoyed it at least as much as I enjoyed writing it + for you. +*/ diff --git a/static/js/impress.js b/static/js/impress.js new file mode 100644 index 0000000..8a49994 --- /dev/null +++ b/static/js/impress.js @@ -0,0 +1,836 @@ +/** + * impress.js + * + * impress.js is a presentation tool based on the power of CSS3 transforms and transitions + * in modern browsers and inspired by the idea behind prezi.com. + * + * + * Copyright 2011-2012 Bartek Szopka (@bartaz) + * + * Released under the MIT and GPL Licenses. + * + * ------------------------------------------------ + * author: Bartek Szopka + * version: 0.5.3 + * url: http://bartaz.github.com/impress.js/ + * source: http://github.com/bartaz/impress.js/ + */ + +/*jshint bitwise:true, curly:true, eqeqeq:true, forin:true, latedef:true, newcap:true, + noarg:true, noempty:true, undef:true, strict:true, browser:true */ + +// You are one of those who like to know how things work inside? +// Let me show you the cogs that make impress.js run... +( function( document, window ) { + "use strict"; + + // HELPER FUNCTIONS + + // `pfx` is a function that takes a standard CSS property name as a parameter + // and returns it's prefixed version valid for current browser it runs in. + // The code is heavily inspired by Modernizr http://www.modernizr.com/ + var pfx = ( function() { + + var style = document.createElement( "dummy" ).style, + prefixes = "Webkit Moz O ms Khtml".split( " " ), + memory = {}; + + return function( prop ) { + if ( typeof memory[ prop ] === "undefined" ) { + + var ucProp = prop.charAt( 0 ).toUpperCase() + prop.substr( 1 ), + props = ( prop + " " + prefixes.join( ucProp + " " ) + ucProp ).split( " " ); + + memory[ prop ] = null; + for ( var i in props ) { + if ( style[ props[ i ] ] !== undefined ) { + memory[ prop ] = props[ i ]; + break; + } + } + + } + + return memory[ prop ]; + }; + + } )(); + + // `arraify` takes an array-like object and turns it into real Array + // to make all the Array.prototype goodness available. + var arrayify = function( a ) { + return [].slice.call( a ); + }; + + // `css` function applies the styles given in `props` object to the element + // given as `el`. It runs all property names through `pfx` function to make + // sure proper prefixed version of the property is used. + var css = function( el, props ) { + var key, pkey; + for ( key in props ) { + if ( props.hasOwnProperty( key ) ) { + pkey = pfx( key ); + if ( pkey !== null ) { + el.style[ pkey ] = props[ key ]; + } + } + } + return el; + }; + + // `toNumber` takes a value given as `numeric` parameter and tries to turn + // it into a number. If it is not possible it returns 0 (or other value + // given as `fallback`). + var toNumber = function( numeric, fallback ) { + return isNaN( numeric ) ? ( fallback || 0 ) : Number( numeric ); + }; + + // `byId` returns element with given `id` - you probably have guessed that ;) + var byId = function( id ) { + return document.getElementById( id ); + }; + + // `$` returns first element for given CSS `selector` in the `context` of + // the given element or whole document. + var $ = function( selector, context ) { + context = context || document; + return context.querySelector( selector ); + }; + + // `$$` return an array of elements for given CSS `selector` in the `context` of + // the given element or whole document. + var $$ = function( selector, context ) { + context = context || document; + return arrayify( context.querySelectorAll( selector ) ); + }; + + // `triggerEvent` builds a custom DOM event with given `eventName` and `detail` data + // and triggers it on element given as `el`. + var triggerEvent = function( el, eventName, detail ) { + var event = document.createEvent( "CustomEvent" ); + event.initCustomEvent( eventName, true, true, detail ); + el.dispatchEvent( event ); + }; + + // `translate` builds a translate transform string for given data. + var translate = function( t ) { + return " translate3d(" + t.x + "px," + t.y + "px," + t.z + "px) "; + }; + + // `rotate` builds a rotate transform string for given data. + // By default the rotations are in X Y Z order that can be reverted by passing `true` + // as second parameter. + var rotate = function( r, revert ) { + var rX = " rotateX(" + r.x + "deg) ", + rY = " rotateY(" + r.y + "deg) ", + rZ = " rotateZ(" + r.z + "deg) "; + + return revert ? rZ + rY + rX : rX + rY + rZ; + }; + + // `scale` builds a scale transform string for given data. + var scale = function( s ) { + return " scale(" + s + ") "; + }; + + // `perspective` builds a perspective transform string for given data. + var perspective = function( p ) { + return " perspective(" + p + "px) "; + }; + + // `getElementFromHash` returns an element located by id from hash part of + // window location. + var getElementFromHash = function() { + + // Get id from url # by removing `#` or `#/` from the beginning, + // so both "fallback" `#slide-id` and "enhanced" `#/slide-id` will work + return byId( window.location.hash.replace( /^#\/?/, "" ) ); + }; + + // `computeWindowScale` counts the scale factor between window size and size + // defined for the presentation in the config. + var computeWindowScale = function( config ) { + var hScale = window.innerHeight / config.height, + wScale = window.innerWidth / config.width, + scale = hScale > wScale ? wScale : hScale; + + if ( config.maxScale && scale > config.maxScale ) { + scale = config.maxScale; + } + + if ( config.minScale && scale < config.minScale ) { + scale = config.minScale; + } + + return scale; + }; + + // CHECK SUPPORT + var body = document.body; + + var ua = navigator.userAgent.toLowerCase(); + var impressSupported = + + // Browser should support CSS 3D transtorms + ( pfx( "perspective" ) !== null ) && + + // Browser should support `classList` and `dataset` APIs + ( body.classList ) && + ( body.dataset ) && + + // But some mobile devices need to be blacklisted, + // because their CSS 3D support or hardware is not + // good enough to run impress.js properly, sorry... + ( ua.search( /(iphone)|(ipod)|(android)/ ) === -1 ); + + if ( !impressSupported ) { + + // We can't be sure that `classList` is supported + body.className += " impress-not-supported "; + } else { + body.classList.remove( "impress-not-supported" ); + body.classList.add( "impress-supported" ); + } + + // GLOBALS AND DEFAULTS + + // This is where the root elements of all impress.js instances will be kept. + // Yes, this means you can have more than one instance on a page, but I'm not + // sure if it makes any sense in practice ;) + var roots = {}; + + // Some default config values. + var defaults = { + width: 1024, + height: 768, + maxScale: 1, + minScale: 0, + + perspective: 1000, + + transitionDuration: 1000 + }; + + // It's just an empty function ... and a useless comment. + var empty = function() { return false; }; + + // IMPRESS.JS API + + // And that's where interesting things will start to happen. + // It's the core `impress` function that returns the impress.js API + // for a presentation based on the element with given id ('impress' + // by default). + var impress = window.impress = function( rootId ) { + + // If impress.js is not supported by the browser return a dummy API + // it may not be a perfect solution but we return early and avoid + // running code that may use features not implemented in the browser. + if ( !impressSupported ) { + return { + init: empty, + goto: empty, + prev: empty, + next: empty + }; + } + + rootId = rootId || "impress"; + + // If given root is already initialized just return the API + if ( roots[ "impress-root-" + rootId ] ) { + return roots[ "impress-root-" + rootId ]; + } + + // Data of all presentation steps + var stepsData = {}; + + // Element of currently active step + var activeStep = null; + + // Current state (position, rotation and scale) of the presentation + var currentState = null; + + // Array of step elements + var steps = null; + + // Configuration options + var config = null; + + // Scale factor of the browser window + var windowScale = null; + + // Root presentation elements + var root = byId( rootId ); + var canvas = document.createElement( "div" ); + + var initialized = false; + + // STEP EVENTS + // + // There are currently two step events triggered by impress.js + // `impress:stepenter` is triggered when the step is shown on the + // screen (the transition from the previous one is finished) and + // `impress:stepleave` is triggered when the step is left (the + // transition to next step just starts). + + // Reference to last entered step + var lastEntered = null; + + // `onStepEnter` is called whenever the step element is entered + // but the event is triggered only if the step is different than + // last entered step. + var onStepEnter = function( step ) { + if ( lastEntered !== step ) { + triggerEvent( step, "impress:stepenter" ); + lastEntered = step; + } + }; + + // `onStepLeave` is called whenever the step element is left + // but the event is triggered only if the step is the same as + // last entered step. + var onStepLeave = function( step ) { + if ( lastEntered === step ) { + triggerEvent( step, "impress:stepleave" ); + lastEntered = null; + } + }; + + // `initStep` initializes given step element by reading data from its + // data attributes and setting correct styles. + var initStep = function( el, idx ) { + var data = el.dataset, + step = { + translate: { + x: toNumber( data.x ), + y: toNumber( data.y ), + z: toNumber( data.z ) + }, + rotate: { + x: toNumber( data.rotateX ), + y: toNumber( data.rotateY ), + z: toNumber( data.rotateZ || data.rotate ) + }, + scale: toNumber( data.scale, 1 ), + el: el + }; + + if ( !el.id ) { + el.id = "step-" + ( idx + 1 ); + } + + stepsData[ "impress-" + el.id ] = step; + + css( el, { + position: "absolute", + transform: "translate(-50%,-50%)" + + translate( step.translate ) + + rotate( step.rotate ) + + scale( step.scale ), + transformStyle: "preserve-3d" + } ); + }; + + // `init` API function that initializes (and runs) the presentation. + var init = function() { + if ( initialized ) { return; } + + // First we set up the viewport for mobile devices. + // For some reason iPad goes nuts when it is not done properly. + var meta = $( "meta[name='viewport']" ) || document.createElement( "meta" ); + meta.content = "width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no"; + if ( meta.parentNode !== document.head ) { + meta.name = "viewport"; + document.head.appendChild( meta ); + } + + // Initialize configuration object + var rootData = root.dataset; + config = { + width: toNumber( rootData.width, defaults.width ), + height: toNumber( rootData.height, defaults.height ), + maxScale: toNumber( rootData.maxScale, defaults.maxScale ), + minScale: toNumber( rootData.minScale, defaults.minScale ), + perspective: toNumber( rootData.perspective, defaults.perspective ), + transitionDuration: toNumber( + rootData.transitionDuration, defaults.transitionDuration + ) + }; + + windowScale = computeWindowScale( config ); + + // Wrap steps with "canvas" element + arrayify( root.childNodes ).forEach( function( el ) { + canvas.appendChild( el ); + } ); + root.appendChild( canvas ); + + // Set initial styles + document.documentElement.style.height = "100%"; + + css( body, { + height: "100%", + overflow: "hidden" + } ); + + var rootStyles = { + position: "absolute", + transformOrigin: "top left", + transition: "all 0s ease-in-out", + transformStyle: "preserve-3d" + }; + + css( root, rootStyles ); + css( root, { + top: "50%", + left: "50%", + transform: perspective( config.perspective / windowScale ) + scale( windowScale ) + } ); + css( canvas, rootStyles ); + + body.classList.remove( "impress-disabled" ); + body.classList.add( "impress-enabled" ); + + // Get and init steps + steps = $$( ".step", root ); + steps.forEach( initStep ); + + // Set a default initial state of the canvas + currentState = { + translate: { x: 0, y: 0, z: 0 }, + rotate: { x: 0, y: 0, z: 0 }, + scale: 1 + }; + + initialized = true; + + triggerEvent( root, "impress:init", { api: roots[ "impress-root-" + rootId ] } ); + }; + + // `getStep` is a helper function that returns a step element defined by parameter. + // If a number is given, step with index given by the number is returned, if a string + // is given step element with such id is returned, if DOM element is given it is returned + // if it is a correct step element. + var getStep = function( step ) { + if ( typeof step === "number" ) { + step = step < 0 ? steps[ steps.length + step ] : steps[ step ]; + } else if ( typeof step === "string" ) { + step = byId( step ); + } + return ( step && step.id && stepsData[ "impress-" + step.id ] ) ? step : null; + }; + + // Used to reset timeout for `impress:stepenter` event + var stepEnterTimeout = null; + + // `goto` API function that moves to step given with `el` parameter + // (by index, id or element), with a transition `duration` optionally + // given as second parameter. + var goto = function( el, duration ) { + + if ( !initialized || !( el = getStep( el ) ) ) { + + // Presentation not initialized or given element is not a step + return false; + } + + // Sometimes it's possible to trigger focus on first link with some keyboard action. + // Browser in such a case tries to scroll the page to make this element visible + // (even that body overflow is set to hidden) and it breaks our careful positioning. + // + // So, as a lousy (and lazy) workaround we will make the page scroll back to the top + // whenever slide is selected + // + // If you are reading this and know any better way to handle it, I'll be glad to hear + // about it! + window.scrollTo( 0, 0 ); + + var step = stepsData[ "impress-" + el.id ]; + + if ( activeStep ) { + activeStep.classList.remove( "active" ); + body.classList.remove( "impress-on-" + activeStep.id ); + } + el.classList.add( "active" ); + + body.classList.add( "impress-on-" + el.id ); + + // Compute target state of the canvas based on given step + var target = { + rotate: { + x: -step.rotate.x, + y: -step.rotate.y, + z: -step.rotate.z + }, + translate: { + x: -step.translate.x, + y: -step.translate.y, + z: -step.translate.z + }, + scale: 1 / step.scale + }; + + // Check if the transition is zooming in or not. + // + // This information is used to alter the transition style: + // when we are zooming in - we start with move and rotate transition + // and the scaling is delayed, but when we are zooming out we start + // with scaling down and move and rotation are delayed. + var zoomin = target.scale >= currentState.scale; + + duration = toNumber( duration, config.transitionDuration ); + var delay = ( duration / 2 ); + + // If the same step is re-selected, force computing window scaling, + // because it is likely to be caused by window resize + if ( el === activeStep ) { + windowScale = computeWindowScale( config ); + } + + var targetScale = target.scale * windowScale; + + // Trigger leave of currently active element (if it's not the same step again) + if ( activeStep && activeStep !== el ) { + onStepLeave( activeStep ); + } + + // Now we alter transforms of `root` and `canvas` to trigger transitions. + // + // And here is why there are two elements: `root` and `canvas` - they are + // being animated separately: + // `root` is used for scaling and `canvas` for translate and rotations. + // Transitions on them are triggered with different delays (to make + // visually nice and 'natural' looking transitions), so we need to know + // that both of them are finished. + css( root, { + + // To keep the perspective look similar for different scales + // we need to 'scale' the perspective, too + transform: perspective( config.perspective / targetScale ) + scale( targetScale ), + transitionDuration: duration + "ms", + transitionDelay: ( zoomin ? delay : 0 ) + "ms" + } ); + + css( canvas, { + transform: rotate( target.rotate, true ) + translate( target.translate ), + transitionDuration: duration + "ms", + transitionDelay: ( zoomin ? 0 : delay ) + "ms" + } ); + + // Here is a tricky part... + // + // If there is no change in scale or no change in rotation and translation, it means + // there was actually no delay - because there was no transition on `root` or `canvas` + // elements. We want to trigger `impress:stepenter` event in the correct moment, so + // here we compare the current and target values to check if delay should be taken into + // account. + // + // I know that this `if` statement looks scary, but it's pretty simple when you know + // what is going on + // - it's simply comparing all the values. + if ( currentState.scale === target.scale || + ( currentState.rotate.x === target.rotate.x && + currentState.rotate.y === target.rotate.y && + currentState.rotate.z === target.rotate.z && + currentState.translate.x === target.translate.x && + currentState.translate.y === target.translate.y && + currentState.translate.z === target.translate.z ) ) { + delay = 0; + } + + // Store current state + currentState = target; + activeStep = el; + + // And here is where we trigger `impress:stepenter` event. + // We simply set up a timeout to fire it taking transition duration + // (and possible delay) into account. + // + // I really wanted to make it in more elegant way. The `transitionend` event seemed to + // be the best way to do it, but the fact that I'm using transitions on two separate + // elements and that the `transitionend` event is only triggered when there was a + // transition (change in the values) caused some bugs and made the code really + // complicated, cause I had to handle all the conditions separately. And it still + // needed a `setTimeout` fallback for the situations when there is no transition at + // all. + // So I decided that I'd rather make the code simpler than use shiny new + // `transitionend`. + // + // If you want learn something interesting and see how it was done with `transitionend` + // go back to + // version 0.5.2 of impress.js: + // http://github.com/bartaz/impress.js/blob/0.5.2/js/impress.js + window.clearTimeout( stepEnterTimeout ); + stepEnterTimeout = window.setTimeout( function() { + onStepEnter( activeStep ); + }, duration + delay ); + + return el; + }; + + // `prev` API function goes to previous step (in document order) + var prev = function() { + var prev = steps.indexOf( activeStep ) - 1; + prev = prev >= 0 ? steps[ prev ] : steps[ steps.length - 1 ]; + + return goto( prev ); + }; + + // `next` API function goes to next step (in document order) + var next = function() { + var next = steps.indexOf( activeStep ) + 1; + next = next < steps.length ? steps[ next ] : steps[ 0 ]; + + return goto( next ); + }; + + // Adding some useful classes to step elements. + // + // All the steps that have not been shown yet are given `future` class. + // When the step is entered the `future` class is removed and the `present` + // class is given. When the step is left `present` class is replaced with + // `past` class. + // + // So every step element is always in one of three possible states: + // `future`, `present` and `past`. + // + // There classes can be used in CSS to style different types of steps. + // For example the `present` class can be used to trigger some custom + // animations when step is shown. + root.addEventListener( "impress:init", function() { + + // STEP CLASSES + steps.forEach( function( step ) { + step.classList.add( "future" ); + } ); + + root.addEventListener( "impress:stepenter", function( event ) { + event.target.classList.remove( "past" ); + event.target.classList.remove( "future" ); + event.target.classList.add( "present" ); + }, false ); + + root.addEventListener( "impress:stepleave", function( event ) { + event.target.classList.remove( "present" ); + event.target.classList.add( "past" ); + }, false ); + + }, false ); + + // Adding hash change support. + root.addEventListener( "impress:init", function() { + + // Last hash detected + var lastHash = ""; + + // `#/step-id` is used instead of `#step-id` to prevent default browser + // scrolling to element in hash. + // + // And it has to be set after animation finishes, because in Chrome it + // makes transtion laggy. + // BUG: http://code.google.com/p/chromium/issues/detail?id=62820 + root.addEventListener( "impress:stepenter", function( event ) { + window.location.hash = lastHash = "#/" + event.target.id; + }, false ); + + window.addEventListener( "hashchange", function() { + + // When the step is entered hash in the location is updated + // (just few lines above from here), so the hash change is + // triggered and we would call `goto` again on the same element. + // + // To avoid this we store last entered hash and compare. + if ( window.location.hash !== lastHash ) { + goto( getElementFromHash() ); + } + }, false ); + + // START + // by selecting step defined in url or first step of the presentation + goto( getElementFromHash() || steps[ 0 ], 0 ); + }, false ); + + body.classList.add( "impress-disabled" ); + + // Store and return API for given impress.js root element + return ( roots[ "impress-root-" + rootId ] = { + init: init, + goto: goto, + next: next, + prev: prev + } ); + + }; + + // Flag that can be used in JS to check if browser have passed the support test + impress.supported = impressSupported; + +} )( document, window ); + +// NAVIGATION EVENTS + +// As you can see this part is separate from the impress.js core code. +// It's because these navigation actions only need what impress.js provides with +// its simple API. +// +// In future I think about moving it to make them optional, move to separate files +// and treat more like a 'plugins'. +( function( document, window ) { + "use strict"; + + // Throttling function calls, by Remy Sharp + // http://remysharp.com/2010/07/21/throttling-function-calls/ + var throttle = function( fn, delay ) { + var timer = null; + return function() { + var context = this, args = arguments; + clearTimeout( timer ); + timer = setTimeout( function() { + fn.apply( context, args ); + }, delay ); + }; + }; + + // Wait for impress.js to be initialized + document.addEventListener( "impress:init", function( event ) { + + // Getting API from event data. + // So you don't event need to know what is the id of the root element + // or anything. `impress:init` event data gives you everything you + // need to control the presentation that was just initialized. + var api = event.detail.api; + + // KEYBOARD NAVIGATION HANDLERS + + // Prevent default keydown action when one of supported key is pressed. + document.addEventListener( "keydown", function( event ) { + if ( event.keyCode === 9 || + ( event.keyCode >= 32 && event.keyCode <= 34 ) || + ( event.keyCode >= 37 && event.keyCode <= 40 ) ) { + event.preventDefault(); + } + }, false ); + + // Trigger impress action (next or prev) on keyup. + + // Supported keys are: + // [space] - quite common in presentation software to move forward + // [up] [right] / [down] [left] - again common and natural addition, + // [pgdown] / [pgup] - often triggered by remote controllers, + // [tab] - this one is quite controversial, but the reason it ended up on + // this list is quite an interesting story... Remember that strange part + // in the impress.js code where window is scrolled to 0,0 on every presentation + // step, because sometimes browser scrolls viewport because of the focused element? + // Well, the [tab] key by default navigates around focusable elements, so clicking + // it very often caused scrolling to focused element and breaking impress.js + // positioning. I didn't want to just prevent this default action, so I used [tab] + // as another way to moving to next step... And yes, I know that for the sake of + // consistency I should add [shift+tab] as opposite action... + document.addEventListener( "keyup", function( event ) { + + if ( event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) { + return; + } + + if ( event.keyCode === 9 || + ( event.keyCode >= 32 && event.keyCode <= 34 ) || + ( event.keyCode >= 37 && event.keyCode <= 40 ) ) { + switch ( event.keyCode ) { + case 33: // Page up + case 37: // Left + case 38: // Up + api.prev(); + break; + case 9: // Tab + case 32: // Space + case 34: // Page down + case 39: // Right + case 40: // Down + api.next(); + break; + } + + event.preventDefault(); + } + }, false ); + + // Delegated handler for clicking on the links to presentation steps + document.addEventListener( "click", function( event ) { + + // Event delegation with "bubbling" + // Check if event target (or any of its parents is a link) + var target = event.target; + while ( ( target.tagName !== "A" ) && + ( target !== document.documentElement ) ) { + target = target.parentNode; + } + + if ( target.tagName === "A" ) { + var href = target.getAttribute( "href" ); + + // If it's a link to presentation step, target this step + if ( href && href[ 0 ] === "#" ) { + target = document.getElementById( href.slice( 1 ) ); + } + } + + if ( api.goto( target ) ) { + event.stopImmediatePropagation(); + event.preventDefault(); + } + }, false ); + + // Delegated handler for clicking on step elements + document.addEventListener( "click", function( event ) { + var target = event.target; + + // Find closest step element that is not active + while ( !( target.classList.contains( "step" ) && + !target.classList.contains( "active" ) ) && + ( target !== document.documentElement ) ) { + target = target.parentNode; + } + + if ( api.goto( target ) ) { + event.preventDefault(); + } + }, false ); + + // Touch handler to detect taps on the left and right side of the screen + // based on awesome work of @hakimel: https://github.com/hakimel/reveal.js + document.addEventListener( "touchstart", function( event ) { + if ( event.touches.length === 1 ) { + var x = event.touches[ 0 ].clientX, + width = window.innerWidth * 0.3, + result = null; + + if ( x < width ) { + result = api.prev(); + } else if ( x > window.innerWidth - width ) { + result = api.next(); + } + + if ( result ) { + event.preventDefault(); + } + } + }, false ); + + // Rescale presentation when window is resized + window.addEventListener( "resize", throttle( function() { + + // Force going to active step again, to trigger rescaling + api.goto( document.querySelector( ".step.active" ), 500 ); + }, 250 ), false ); + + }, false ); + +} )( document, window ); + +// THAT'S ALL FOLKS! +// +// Thanks for reading it all. +// Or thanks for scrolling down and reading the last part. +// +// I've learnt a lot when building impress.js and I hope this code and comments +// will help somebody learn at least some part of it. diff --git a/templates/presentation-4real.hamlet b/templates/presentation-4real.hamlet new file mode 100644 index 0000000..160d2b9 --- /dev/null +++ b/templates/presentation-4real.hamlet @@ -0,0 +1,71 @@ +
+

Gonito.net +

open platform for research competition, cooperation and reproducibility +

Filip Graliński, Rafał Jaworski, Łukasz Borchmann, Piotr Wierzchoń +

LREC 2016 / 4REAL Workshop + +

+

Motivation +
    +
  • We needed a place to keep track of our results for +
      +
    • our research +
    • teaching our students +
    • just playing with our data sets +
    • (but didn't want to save the world and earn $$$) + +
      +

      Alternatives? +
        +
      • Kaggle +
          +
        • you need to ask Kaggle people +
        • Kaggle in class only for teaching +
        • not fully open ☹ +
        • DrivenData +
            +
          • more or less similar to Kaggle
            • +
          • CodaLab +
              +
            • open! +
            • trying hard but didn't find it ☹ +
            • no git + +
              +

              That's why we created +

              Gonito.net +

              open platform for machine learning competition +

                +
              • Be open +
                  +
                • GNU Affero General Public License +
                • Anyone can set up their own instance +
                • Users are encouraged to share source codes +
                • Users are free to use whatever programming language and tools +
                • Use git +
                    +
                  • Challenges are created as Git repositories +
                  • Solutions uploaded with Git +
                  • Solutions can be forked and reused +
                  • Even if a Gonito.net ceases to exist, Git repos may live + +
                    +

                    … and +

                    GEval +

                    companion Haskell library and stand-alone tool for machine learning evaluation +

                      +
                    • accuracy +
                    • (R)MSE +
                    • BLEU +
                    • … more to come + +
                      +

                      A challenge… +
                      + ^{readme} + +
                      +

                      Current status… + +
                      + ^{Table.buildBootstrap (leaderboardTable Nothing (challengeName challenge) test) leaderboardWithRanks} diff --git a/templates/presentation-layout.hamlet b/templates/presentation-layout.hamlet new file mode 100644 index 0000000..95a51a9 --- /dev/null +++ b/templates/presentation-layout.hamlet @@ -0,0 +1,30 @@ +$newline never +\ +\ +\ +\ +\ + + + + + + + + + + + + + + +
                      +

                      Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation. +

                      For the best experience please use the latest Chrome, Safari or Firefox browser. + +

                      + ^{pageBody pc} + + +