├── demo ├── images │ ├── face1.gif │ ├── face2.gif │ ├── face3.gif │ ├── face4.gif │ ├── media-mute.png │ ├── media-play.png │ ├── media-pause.png │ ├── media-sound.png │ ├── music-funnyNote.png │ ├── music-trebleClef.png │ └── music-trebleStaff.png ├── README.md ├── slidy.smil ├── style │ ├── video.css │ ├── slidy.css │ ├── timeline.css │ ├── intro.css │ ├── layout.css │ ├── audio.css │ ├── slideshow.css │ └── transitions.css ├── timeline.js ├── index.html ├── slideshow.html ├── video.html └── audio.html ├── timeline ├── play100.gif ├── play128.png ├── progress.gif ├── cursor-pink.png ├── media-mute.gif ├── media-mute.png ├── media-pause.gif ├── media-pause.png ├── media-play.gif ├── media-play.png ├── media-toc.gif ├── media-toc.png ├── progress32.gif ├── progress44.gif ├── cursor-white.png ├── style-brown.css ├── README.md └── style.css ├── ensLyon ├── images │ ├── img1.png │ ├── img10.png │ ├── img11.png │ ├── img12.png │ ├── img13.png │ ├── img14.png │ ├── img15.png │ ├── img16.png │ ├── img17.png │ ├── img18.png │ ├── img19.png │ ├── img2.png │ ├── img20.png │ ├── img21.png │ ├── img22.png │ ├── img23.png │ ├── img24.png │ ├── img25.png │ ├── img26.png │ ├── img27.png │ ├── img28.png │ ├── img29.png │ ├── img3.png │ ├── img30.png │ ├── img31.png │ ├── img32.png │ ├── img33.png │ ├── img34.png │ ├── img35.png │ ├── img36.png │ ├── img37.png │ ├── img4.png │ ├── img5.png │ ├── img6.png │ ├── img7.png │ ├── img8.png │ ├── img9.png │ └── BSeguin-640.jpg ├── style │ ├── swap.png │ ├── swap24.png │ ├── swap32.png │ ├── play128.png │ ├── progress.gif │ ├── swap100.png │ ├── progress30.gif │ ├── progress44.gif │ ├── swap-reverse.png │ ├── video-right.css │ ├── audio-right.css │ ├── audio-left.css │ ├── video-left.css │ ├── layout-oldie.css │ ├── theme-green.css │ ├── theme-brown.css │ ├── theme-blue.css │ ├── theme-gray.css │ ├── theme-cream.css │ ├── handheld.css │ ├── compact.css │ ├── layout-touch.css │ └── layout.css ├── playlist.smil ├── timesheet.smil ├── playlist.html ├── index.html └── audio.html ├── webRadio ├── images │ ├── tango.jpg │ ├── atelier1.jpg │ ├── atelier2.jpg │ ├── audition1.jpg │ ├── audition2.jpg │ ├── source1.jpg │ ├── source2.jpg │ ├── musiciens1.jpg │ ├── musiciens2.jpg │ ├── musiciens3.jpg │ └── musiciens4.jpg ├── README.md ├── onemediaatatime.js └── fontaine.smil ├── joinMozilla ├── images │ ├── mofo.png │ ├── webday.png │ ├── firefox.jpg │ ├── svitlana.png │ ├── whistler.png │ ├── community.jpg │ ├── screenshot.png │ ├── mofo-filtered.png │ ├── mouseketeers.png │ ├── background-big.png │ ├── background-small.png │ └── background-filtered.png ├── timesheet.smil ├── README.md └── style │ ├── layout.css │ └── transitions.css ├── slideshow ├── images │ ├── ens-demo.png │ ├── ens-markup.png │ ├── media-mute.png │ ├── media-play.png │ ├── banner-dosbox.png │ ├── banner-gnote.png │ ├── media-pause.png │ ├── media-sound.png │ ├── webradio-demo.png │ ├── banner-gpodder.png │ ├── music-funnyNote.png │ ├── webradio-markup.png │ ├── joinMozilla-demo.png │ ├── joinMozilla-markup.png │ ├── music-trebleClef.png │ ├── music-trebleStaff.png │ └── banner-transmission.png ├── style │ ├── layout-oldie.css │ ├── syntax.css │ └── timeline.css └── js │ ├── timeline.js │ ├── markup.js │ └── slideshow.js ├── 3rd-part ├── flashmediaelement.swf ├── html5.js └── README.md ├── xpi ├── chrome │ ├── skin │ │ └── classic │ │ │ ├── 16 │ │ │ ├── gtk-new.png │ │ │ ├── gtk-zoom-100.png │ │ │ ├── gtk-zoom-fit.png │ │ │ ├── gtk-zoom-in.png │ │ │ ├── gtk-zoom-out.png │ │ │ ├── player_pause.png │ │ │ ├── player_play.png │ │ │ ├── gtk-sort-ascending.png │ │ │ └── gtk-sort-descending.png │ │ │ ├── 24 │ │ │ ├── gtk-new.png │ │ │ ├── gtk-zoom-100.png │ │ │ ├── gtk-zoom-fit.png │ │ │ ├── gtk-zoom-in.png │ │ │ ├── gtk-zoom-out.png │ │ │ ├── player_pause.png │ │ │ ├── player_play.png │ │ │ ├── gtk-sort-ascending.png │ │ │ └── gtk-sort-descending.png │ │ │ ├── 32 │ │ │ ├── gtk-new.png │ │ │ ├── gtk-zoom-100.png │ │ │ ├── gtk-zoom-fit.png │ │ │ ├── gtk-zoom-in.png │ │ │ ├── gtk-zoom-out.png │ │ │ ├── player_pause.png │ │ │ ├── player_play.png │ │ │ ├── gtk-sort-ascending.png │ │ │ └── gtk-sort-descending.png │ │ │ ├── timesheets.css │ │ │ └── timeline.css │ └── content │ │ ├── overlay.xul │ │ ├── overlay.js │ │ └── bindings │ │ ├── timeline.css │ │ └── widgets.css ├── README.md ├── chrome.manifest └── install.rdf ├── README.md ├── LICENSE ├── timesheets-navigation.min.js └── timesheets-navigation.js /demo/images/face1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/demo/images/face1.gif -------------------------------------------------------------------------------- /demo/images/face2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/demo/images/face2.gif -------------------------------------------------------------------------------- /demo/images/face3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/demo/images/face3.gif -------------------------------------------------------------------------------- /demo/images/face4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/demo/images/face4.gif -------------------------------------------------------------------------------- /timeline/play100.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/timeline/play100.gif -------------------------------------------------------------------------------- /timeline/play128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/timeline/play128.png -------------------------------------------------------------------------------- /timeline/progress.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/timeline/progress.gif -------------------------------------------------------------------------------- /ensLyon/images/img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img1.png -------------------------------------------------------------------------------- /ensLyon/images/img10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img10.png -------------------------------------------------------------------------------- /ensLyon/images/img11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img11.png -------------------------------------------------------------------------------- /ensLyon/images/img12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img12.png -------------------------------------------------------------------------------- /ensLyon/images/img13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img13.png -------------------------------------------------------------------------------- /ensLyon/images/img14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img14.png -------------------------------------------------------------------------------- /ensLyon/images/img15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img15.png -------------------------------------------------------------------------------- /ensLyon/images/img16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img16.png -------------------------------------------------------------------------------- /ensLyon/images/img17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img17.png -------------------------------------------------------------------------------- /ensLyon/images/img18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img18.png -------------------------------------------------------------------------------- /ensLyon/images/img19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img19.png -------------------------------------------------------------------------------- /ensLyon/images/img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img2.png -------------------------------------------------------------------------------- /ensLyon/images/img20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img20.png -------------------------------------------------------------------------------- /ensLyon/images/img21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img21.png -------------------------------------------------------------------------------- /ensLyon/images/img22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img22.png -------------------------------------------------------------------------------- /ensLyon/images/img23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img23.png -------------------------------------------------------------------------------- /ensLyon/images/img24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img24.png -------------------------------------------------------------------------------- /ensLyon/images/img25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img25.png -------------------------------------------------------------------------------- /ensLyon/images/img26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img26.png -------------------------------------------------------------------------------- /ensLyon/images/img27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img27.png -------------------------------------------------------------------------------- /ensLyon/images/img28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img28.png -------------------------------------------------------------------------------- /ensLyon/images/img29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img29.png -------------------------------------------------------------------------------- /ensLyon/images/img3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img3.png -------------------------------------------------------------------------------- /ensLyon/images/img30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img30.png -------------------------------------------------------------------------------- /ensLyon/images/img31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img31.png -------------------------------------------------------------------------------- /ensLyon/images/img32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img32.png -------------------------------------------------------------------------------- /ensLyon/images/img33.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img33.png -------------------------------------------------------------------------------- /ensLyon/images/img34.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img34.png -------------------------------------------------------------------------------- /ensLyon/images/img35.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img35.png -------------------------------------------------------------------------------- /ensLyon/images/img36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img36.png -------------------------------------------------------------------------------- /ensLyon/images/img37.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img37.png -------------------------------------------------------------------------------- /ensLyon/images/img4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img4.png -------------------------------------------------------------------------------- /ensLyon/images/img5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img5.png -------------------------------------------------------------------------------- /ensLyon/images/img6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img6.png -------------------------------------------------------------------------------- /ensLyon/images/img7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img7.png -------------------------------------------------------------------------------- /ensLyon/images/img8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img8.png -------------------------------------------------------------------------------- /ensLyon/images/img9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/img9.png -------------------------------------------------------------------------------- /ensLyon/style/swap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/style/swap.png -------------------------------------------------------------------------------- /ensLyon/style/swap24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/style/swap24.png -------------------------------------------------------------------------------- /ensLyon/style/swap32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/style/swap32.png -------------------------------------------------------------------------------- /timeline/cursor-pink.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/timeline/cursor-pink.png -------------------------------------------------------------------------------- /timeline/media-mute.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/timeline/media-mute.gif -------------------------------------------------------------------------------- /timeline/media-mute.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/timeline/media-mute.png -------------------------------------------------------------------------------- /timeline/media-pause.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/timeline/media-pause.gif -------------------------------------------------------------------------------- /timeline/media-pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/timeline/media-pause.png -------------------------------------------------------------------------------- /timeline/media-play.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/timeline/media-play.gif -------------------------------------------------------------------------------- /timeline/media-play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/timeline/media-play.png -------------------------------------------------------------------------------- /timeline/media-toc.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/timeline/media-toc.gif -------------------------------------------------------------------------------- /timeline/media-toc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/timeline/media-toc.png -------------------------------------------------------------------------------- /timeline/progress32.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/timeline/progress32.gif -------------------------------------------------------------------------------- /timeline/progress44.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/timeline/progress44.gif -------------------------------------------------------------------------------- /demo/images/media-mute.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/demo/images/media-mute.png -------------------------------------------------------------------------------- /demo/images/media-play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/demo/images/media-play.png -------------------------------------------------------------------------------- /ensLyon/style/play128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/style/play128.png -------------------------------------------------------------------------------- /ensLyon/style/progress.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/style/progress.gif -------------------------------------------------------------------------------- /ensLyon/style/swap100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/style/swap100.png -------------------------------------------------------------------------------- /timeline/cursor-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/timeline/cursor-white.png -------------------------------------------------------------------------------- /webRadio/images/tango.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/webRadio/images/tango.jpg -------------------------------------------------------------------------------- /demo/images/media-pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/demo/images/media-pause.png -------------------------------------------------------------------------------- /demo/images/media-sound.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/demo/images/media-sound.png -------------------------------------------------------------------------------- /ensLyon/style/progress30.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/style/progress30.gif -------------------------------------------------------------------------------- /ensLyon/style/progress44.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/style/progress44.gif -------------------------------------------------------------------------------- /joinMozilla/images/mofo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/joinMozilla/images/mofo.png -------------------------------------------------------------------------------- /joinMozilla/images/webday.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/joinMozilla/images/webday.png -------------------------------------------------------------------------------- /slideshow/images/ens-demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/slideshow/images/ens-demo.png -------------------------------------------------------------------------------- /webRadio/images/atelier1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/webRadio/images/atelier1.jpg -------------------------------------------------------------------------------- /webRadio/images/atelier2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/webRadio/images/atelier2.jpg -------------------------------------------------------------------------------- /webRadio/images/audition1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/webRadio/images/audition1.jpg -------------------------------------------------------------------------------- /webRadio/images/audition2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/webRadio/images/audition2.jpg -------------------------------------------------------------------------------- /webRadio/images/source1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/webRadio/images/source1.jpg -------------------------------------------------------------------------------- /webRadio/images/source2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/webRadio/images/source2.jpg -------------------------------------------------------------------------------- /3rd-part/flashmediaelement.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/3rd-part/flashmediaelement.swf -------------------------------------------------------------------------------- /demo/images/music-funnyNote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/demo/images/music-funnyNote.png -------------------------------------------------------------------------------- /ensLyon/images/BSeguin-640.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/images/BSeguin-640.jpg -------------------------------------------------------------------------------- /ensLyon/style/swap-reverse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/ensLyon/style/swap-reverse.png -------------------------------------------------------------------------------- /joinMozilla/images/firefox.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/joinMozilla/images/firefox.jpg -------------------------------------------------------------------------------- /joinMozilla/images/svitlana.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/joinMozilla/images/svitlana.png -------------------------------------------------------------------------------- /joinMozilla/images/whistler.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/joinMozilla/images/whistler.png -------------------------------------------------------------------------------- /slideshow/images/ens-markup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/slideshow/images/ens-markup.png -------------------------------------------------------------------------------- /slideshow/images/media-mute.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/slideshow/images/media-mute.png -------------------------------------------------------------------------------- /slideshow/images/media-play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/slideshow/images/media-play.png -------------------------------------------------------------------------------- /webRadio/images/musiciens1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/webRadio/images/musiciens1.jpg -------------------------------------------------------------------------------- /webRadio/images/musiciens2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/webRadio/images/musiciens2.jpg -------------------------------------------------------------------------------- /webRadio/images/musiciens3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/webRadio/images/musiciens3.jpg -------------------------------------------------------------------------------- /webRadio/images/musiciens4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/webRadio/images/musiciens4.jpg -------------------------------------------------------------------------------- /demo/images/music-trebleClef.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/demo/images/music-trebleClef.png -------------------------------------------------------------------------------- /demo/images/music-trebleStaff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/demo/images/music-trebleStaff.png -------------------------------------------------------------------------------- /joinMozilla/images/community.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/joinMozilla/images/community.jpg -------------------------------------------------------------------------------- /joinMozilla/images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/joinMozilla/images/screenshot.png -------------------------------------------------------------------------------- /slideshow/images/banner-dosbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/slideshow/images/banner-dosbox.png -------------------------------------------------------------------------------- /slideshow/images/banner-gnote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/slideshow/images/banner-gnote.png -------------------------------------------------------------------------------- /slideshow/images/media-pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/slideshow/images/media-pause.png -------------------------------------------------------------------------------- /slideshow/images/media-sound.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/slideshow/images/media-sound.png -------------------------------------------------------------------------------- /slideshow/images/webradio-demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/slideshow/images/webradio-demo.png -------------------------------------------------------------------------------- /joinMozilla/images/mofo-filtered.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/joinMozilla/images/mofo-filtered.png -------------------------------------------------------------------------------- /joinMozilla/images/mouseketeers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/joinMozilla/images/mouseketeers.png -------------------------------------------------------------------------------- /slideshow/images/banner-gpodder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/slideshow/images/banner-gpodder.png -------------------------------------------------------------------------------- /slideshow/images/music-funnyNote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/slideshow/images/music-funnyNote.png -------------------------------------------------------------------------------- /slideshow/images/webradio-markup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/slideshow/images/webradio-markup.png -------------------------------------------------------------------------------- /joinMozilla/images/background-big.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/joinMozilla/images/background-big.png -------------------------------------------------------------------------------- /joinMozilla/images/background-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/joinMozilla/images/background-small.png -------------------------------------------------------------------------------- /slideshow/images/joinMozilla-demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/slideshow/images/joinMozilla-demo.png -------------------------------------------------------------------------------- /slideshow/images/joinMozilla-markup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/slideshow/images/joinMozilla-markup.png -------------------------------------------------------------------------------- /slideshow/images/music-trebleClef.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/slideshow/images/music-trebleClef.png -------------------------------------------------------------------------------- /slideshow/images/music-trebleStaff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/slideshow/images/music-trebleStaff.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/16/gtk-new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/16/gtk-new.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/24/gtk-new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/24/gtk-new.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/32/gtk-new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/32/gtk-new.png -------------------------------------------------------------------------------- /slideshow/images/banner-transmission.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/slideshow/images/banner-transmission.png -------------------------------------------------------------------------------- /joinMozilla/images/background-filtered.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/joinMozilla/images/background-filtered.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/16/gtk-zoom-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/16/gtk-zoom-100.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/16/gtk-zoom-fit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/16/gtk-zoom-fit.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/16/gtk-zoom-in.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/16/gtk-zoom-in.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/16/gtk-zoom-out.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/16/gtk-zoom-out.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/16/player_pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/16/player_pause.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/16/player_play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/16/player_play.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/24/gtk-zoom-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/24/gtk-zoom-100.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/24/gtk-zoom-fit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/24/gtk-zoom-fit.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/24/gtk-zoom-in.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/24/gtk-zoom-in.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/24/gtk-zoom-out.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/24/gtk-zoom-out.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/24/player_pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/24/player_pause.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/24/player_play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/24/player_play.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/32/gtk-zoom-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/32/gtk-zoom-100.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/32/gtk-zoom-fit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/32/gtk-zoom-fit.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/32/gtk-zoom-in.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/32/gtk-zoom-in.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/32/gtk-zoom-out.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/32/gtk-zoom-out.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/32/player_pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/32/player_pause.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/32/player_play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/32/player_play.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/16/gtk-sort-ascending.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/16/gtk-sort-ascending.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/24/gtk-sort-ascending.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/24/gtk-sort-ascending.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/32/gtk-sort-ascending.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/32/gtk-sort-ascending.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/16/gtk-sort-descending.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/16/gtk-sort-descending.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/24/gtk-sort-descending.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/24/gtk-sort-descending.png -------------------------------------------------------------------------------- /xpi/chrome/skin/classic/32/gtk-sort-descending.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timesheets/timesheets.js/HEAD/xpi/chrome/skin/classic/32/gtk-sort-descending.png -------------------------------------------------------------------------------- /xpi/README.md: -------------------------------------------------------------------------------- 1 | __Timesheet Composer__ 2 | 3 | Experimental Firefox add-on to edit timesheets visually. 4 | Mainly aimed at media annotations at the moment, though the goal is rather to 5 | develop a generic slideshow editor. 6 | 7 | Requires Firefox 3.5 or later. 8 | -------------------------------------------------------------------------------- /ensLyon/style/video-right.css: -------------------------------------------------------------------------------- 1 | @import url(../../timeline/style.css); 2 | @import url(layout.css); 3 | @import url(theme-gray.css); 4 | 5 | /* hide inactive sublists */ 6 | .smil-toc li ul { 7 | display: none; 8 | } 9 | .smil-toc li.current ul { 10 | display: block; 11 | } 12 | -------------------------------------------------------------------------------- /xpi/chrome.manifest: -------------------------------------------------------------------------------- 1 | content timesheets chrome/content/ 2 | locale timesheets en-US chrome/locale/en-US/ 3 | locale timesheets fr chrome/locale/fr/ 4 | skin timesheets classic/1.0 chrome/skin/classic/ 5 | overlay chrome://browser/content/browser.xul chrome://timesheets/content/overlay.xul 6 | 7 | -------------------------------------------------------------------------------- /ensLyon/style/audio-right.css: -------------------------------------------------------------------------------- 1 | @import url(../../timeline/style.css); 2 | @import url(theme-gray.css); 3 | @import url(layout.css); 4 | @import url(layout-touch.css) all and (max-width: 1024px); 5 | @media all and (min-width: 1025px) { 6 | div.smil-toc { 7 | top: 60px; 8 | height: 450px; 9 | } 10 | } 11 | 12 | #swap { 13 | display: none; 14 | } 15 | -------------------------------------------------------------------------------- /timeline/style-brown.css: -------------------------------------------------------------------------------- 1 | @import url(style.css); 2 | .smil-controlBar { 3 | background-color: #522; 4 | } 5 | .smil-controlBar button, .smil-timeSegments a { 6 | background-color: #944; 7 | color: white !important; 8 | } 9 | .smil-controlBar button:hover, .smil-timeSegments a:hover { 10 | background-color: #b66; 11 | } 12 | .smil-controlBar button { 13 | border-color: #722; 14 | } 15 | -------------------------------------------------------------------------------- /ensLyon/style/audio-left.css: -------------------------------------------------------------------------------- 1 | @import url(../../timeline/style.css); 2 | @import url(theme-gray.css); 3 | @import url(layout.css); 4 | @import url(layout-touch.css) all and (max-width: 1024px); 5 | @media all and (min-width: 1025px) { 6 | div.smil-toc { 7 | top: 60px; 8 | right: auto; 9 | left: 0; 10 | height: 450px; 11 | } 12 | div#images { 13 | left: 360px; 14 | } 15 | } 16 | 17 | #swap { 18 | display: none; 19 | } 20 | -------------------------------------------------------------------------------- /ensLyon/style/video-left.css: -------------------------------------------------------------------------------- 1 | @import url(../../timeline/style.css); 2 | @import url(layout.css); 3 | @import url(theme-gray.css); 4 | 5 | /* hide inactive sublists */ 6 | .smil-toc li ul { 7 | display: none; 8 | } 9 | .smil-toc li.current ul { 10 | display: block; 11 | } 12 | 13 | /* put the video+ToC on the left */ 14 | #swap { 15 | left: 330px; 16 | background-image: url(swap-reverse.png); 17 | } 18 | div#images { 19 | left: 360px; 20 | } 21 | div.smil-toc { 22 | right: auto; 23 | left: 0; 24 | } 25 | video { 26 | left: 25px; 27 | } 28 | 29 | -------------------------------------------------------------------------------- /timeline/README.md: -------------------------------------------------------------------------------- 1 | This stylesheet can be used with timesheets-controls.js to display a generic 2 | audio/video timeline: play/pause button, progressbar, elapsed time. 3 | 4 | It also supports the timesheets.js-specific features such as the segmented 5 | timeline and first/prev/next/last buttons. 6 | 7 | It is used in the following demos: 8 | 9 | * [joinMozilla](http://wam.inrialpes.fr/timesheets/public/joinMozilla/) 10 | * [webRadio](http://wam.inrialpes.fr/timesheets/public/webRadio/) 11 | * [ensLyon](http://wam.inrialpes.fr/timesheets/public/ensLyon/) 12 | -------------------------------------------------------------------------------- /ensLyon/style/layout-oldie.css: -------------------------------------------------------------------------------- 1 | /* import this stylesheet for IE6/IE7/IE8 */ 2 | #slideshow { 3 | /*filter: progid:DXImageTransform.Microsoft.Shadow(color='#444', Direction=35, Strength=04);*/ 4 | /*filter: progid:DXImageTransform.Microsoft.Glow(Color='#888888', Strength=10);*/ 5 | /*margin-left: -10px;*/ 6 | /*zoom: 1; */ 7 | } 8 | 9 | div#images img { 10 | visibility: hidden; 11 | } 12 | div#images img#diapo01 { 13 | visibility: visible; 14 | } 15 | #swap { 16 | display: none; 17 | } 18 | div.smil-toc { 19 | font-family: sans-serif; 20 | } 21 | div.smil-toc ul { 22 | padding: 0; 23 | margin-left: 25px; 24 | } 25 | 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | HTML Timing is a cross-browser, JavaScript implementation of SMIL-Timing and 2 | SMIL-Timesheets. The goal of this project is to rely on declarative W3C 3 | standards to synchronize HTML content. 4 | 5 | * __Design interactive presentations.__ 6 | * __Sync HTML content with multimedia streams.__ 7 | * __100% declarative and standard-based.__ 8 | * Cross-browser, one lightweight JS file (7KB), no dependency. 9 | * MIT license. 10 | 11 | W3C References: 12 | 13 | * 14 | * 15 | 16 | Demos and Documentation: 17 | 18 | * 19 | 20 | -------------------------------------------------------------------------------- /slideshow/style/layout-oldie.css: -------------------------------------------------------------------------------- 1 | div#slideshow { 2 | /*padding: 50px 0;*/ 3 | background: white; 4 | /*padding: 0;*/ 5 | border: none; 6 | } 7 | pre { 8 | position: absolute; 9 | top: 0; 10 | left: -36px; /* WTF? */ 11 | width: 800px; 12 | height: 600px; 13 | padding: 50px 90px; /* 90px? WTF? */ 14 | margin: 0; 15 | border: none; 16 | background-color: #eee; 17 | overflow: auto; 18 | } 19 | audio, video { 20 | display: block; 21 | text-align: center; 22 | } 23 | /* IE6 hacks, ignored by newer IEs 24 | * html h2 { 25 | margin-right: 0; 26 | margin-right: -0.5em; 27 | } 28 | * html div { 29 | clear: both; 30 | } 31 | */ 32 | * html nav ol { 33 | bottom: 1em; 34 | } 35 | * html h2 { 36 | display: block; 37 | float: none; 38 | /*width: 100%;*/ 39 | } 40 | -------------------------------------------------------------------------------- /joinMozilla/timesheet.smil: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /joinMozilla/README.md: -------------------------------------------------------------------------------- 1 | SMIL/Timing and Timesheets are an easy and efficient way to sync an HTML 2 | slideshow with an audio track. 3 | 4 | This slideshow is an HTML version of [this 5 | presentation](http://commonspace.wordpress.com/2011/01/12/joinmozilla/) of the 6 | [Join Mozilla](http://www.mozilla.org/join) program by Mark Surman. Mark has 7 | published his slides as a video, we’re taking it a bit further by keeping the 8 | content in HTML (accessibility, indexability…) and sync’ing it with his audio 9 | track. 10 | 11 | There are two versions of this demo: 12 | 13 | * index.html: plain HTML5 page + external timesheet (timesheet.smil) 14 | * inline.html: HTML5 page with inline SMIL-Timing markup (data-\* syntax) 15 | 16 | Note: external timesheets are loaded with XHR. Depending on your browser 17 | cross-domain security policy, you might need a web server (e.g. 18 | http://localhost/…/) to use the first version. 19 | -------------------------------------------------------------------------------- /xpi/install.rdf: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | timesheets@kompozer.net 7 | 0.5.0 8 | 9 | 10 | 11 | 12 | {ec8030f7-c20a-464f-9b0e-13a3a9e97384} 13 | 3.5 14 | 7.* 15 | 16 | 17 | 18 | 19 | Timesheet Composer 20 | SMIL/Timing slideshow editor 21 | Fabien Cazenave 22 | http://wam.inrialpes.fr/timesheets/ 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /ensLyon/style/theme-green.css: -------------------------------------------------------------------------------- 1 | #slideshow { 2 | box-shadow : 0px 1px 10px #242; 3 | -o-box-shadow : 0px 1px 10px #242; 4 | -moz-box-shadow : 0px 1px 10px #242; 5 | -webkit-box-shadow : 0px 1px 10px #242; 6 | } 7 | #slideshow, div.smil-toc { 8 | background-color: #aca; 9 | } 10 | .smil-controlBar { 11 | background-color: #030; 12 | } 13 | .smil-timeSegments a span { 14 | background-color: transparent; 15 | margin-top: 0; 16 | padding: 0; 17 | } 18 | .smil-timeSegments a:hover span, div.smil-toc ul a { 19 | color: white !important; 20 | } 21 | button, 22 | .smil-controlBar button, 23 | .smil-timeSegments a { 24 | background-color: #6a6; 25 | border-color: #686; 26 | color: white !important; 27 | } 28 | video, button:hover, 29 | .smil-timeSlider, 30 | .smil-controlBar button:hover, 31 | .smil-timeSegments a:hover, 32 | .smil-timeSegments a.current { 33 | background-color: #6d6; 34 | } 35 | div.smil-toc li.current > a { 36 | color: brown !important; 37 | } 38 | -------------------------------------------------------------------------------- /ensLyon/style/theme-brown.css: -------------------------------------------------------------------------------- 1 | #slideshow { 2 | box-shadow : 0px 1px 10px #422; 3 | -o-box-shadow : 0px 1px 10px #422; 4 | -moz-box-shadow : 0px 1px 10px #422; 5 | -webkit-box-shadow : 0px 1px 10px #422; 6 | } 7 | #slideshow, div.smil-toc { 8 | background-color: #732d2d; 9 | } 10 | .smil-controlBar { 11 | background-color: #522; 12 | } 13 | .smil-timeSegments a span { 14 | background-color: transparent; 15 | margin-top: 0; 16 | padding: 0; 17 | } 18 | .smil-timeSegments a:hover span, div.smil-toc ul a { 19 | color: white !important; 20 | } 21 | button, 22 | .smil-controlBar button, 23 | .smil-timeSegments a { 24 | background-color: #944; 25 | border-color: #722; 26 | color: white !important; 27 | } 28 | video, button:hover, 29 | .smil-timeSlider, 30 | .smil-controlBar button:hover, 31 | .smil-timeSegments a:hover, 32 | .smil-timeSegments a.current { 33 | background-color: #b66; 34 | } 35 | div.smil-toc li.current > a { 36 | color: orange !important; 37 | } 38 | -------------------------------------------------------------------------------- /ensLyon/style/theme-blue.css: -------------------------------------------------------------------------------- 1 | #slideshow { 2 | box-shadow : 0px 1px 10px #224; 3 | -o-box-shadow : 0px 1px 10px #224; 4 | -moz-box-shadow : 0px 1px 10px #224; 5 | -webkit-box-shadow : 0px 1px 10px #224; 6 | } 7 | #slideshow, div.smil-toc { 8 | background-color: #dde; 9 | } 10 | .smil-controlBar, .smil-timeSegments a span { 11 | background-color: #336; 12 | } 13 | /* .smil-timeSegments a span { 14 | background-color: transparent; 15 | margin-top: 0; 16 | padding: 0; 17 | } */ 18 | .smil-timeSegments a:hover span, div.smil-toc ul a { 19 | color: #500 !important; 20 | } 21 | button, 22 | .smil-controlBar button, 23 | .smil-timeSegments a { 24 | background-color: #66a; 25 | border-color: #666; 26 | color: white !important; 27 | } 28 | video, button:hover, 29 | .smil-timeSlider, 30 | .smil-controlBar button:hover, 31 | .smil-timeSegments a:hover, 32 | .smil-timeSegments a.current { 33 | background-color: #99c; 34 | } 35 | div.smil-toc li.current > a { 36 | color: brown !important; 37 | } 38 | -------------------------------------------------------------------------------- /slideshow/style/syntax.css: -------------------------------------------------------------------------------- 1 | /* syntax highlighting */ 2 | pre { 3 | font-size: 0.6em; 4 | /* margin-left: 1em; */ 5 | /* padding: 0.5em 1em; */ 6 | /* border-left: 1em solid #ddf; */ 7 | background-color: #eee; 8 | /* max-height: 20em; */ 9 | overflow: auto; 10 | } 11 | pre em { 12 | font-style: normal; 13 | color: red; 14 | } 15 | pre .pi { 16 | color: #f6a; 17 | font-style: italic; 18 | } 19 | pre .doctype { 20 | color: #366; 21 | font-style: italic; 22 | } 23 | pre .tagName, pre .cssSelector { 24 | font-weight: bold; 25 | color: purple; 26 | } 27 | pre .attrName, pre .cssProperty { 28 | font-weight: bold; 29 | } 30 | pre .smilNS { 31 | font-weight: normal; 32 | /* font-size: smaller; */ 33 | color: #400; 34 | /* display: none; */ 35 | } 36 | pre .attrValue { 37 | color: blue; 38 | } 39 | pre .comment { 40 | color: green; 41 | } 42 | pre .smilNS { 43 | display: none; 44 | } 45 | /* IE6 hacks */ 46 | * html pre { 47 | margin-left: 4%; 48 | border-left: 4% solid #ddf; 49 | width: 90%; 50 | } 51 | -------------------------------------------------------------------------------- /ensLyon/style/theme-gray.css: -------------------------------------------------------------------------------- 1 | #slideshow { 2 | box-shadow : 0px 1px 10px #422; 3 | -o-box-shadow : 0px 1px 10px #422; 4 | -moz-box-shadow : 0px 1px 10px #422; 5 | -webkit-box-shadow : 0px 1px 10px #422; 6 | } 7 | #slideshow, div.smil-toc { 8 | background-color: white; 9 | } 10 | button { 11 | background-color: #999; 12 | border-color: #777; 13 | color: white; 14 | } 15 | video, .smil-timeSlider, button:hover { 16 | background-color: #bbb; 17 | } 18 | div.smil-toc li.current > a { 19 | color: brown !important; 20 | } 21 | div.smil-toc ul a { 22 | color: navy !important; 23 | } 24 | .smil-timeSegments a span { 25 | border-top-left-radius : 8px; 26 | -o-border-top-left-radius : 8px; 27 | -moz-border-radius-topleft : 8px; 28 | -webkit-border-top-left-radius : 8px; 29 | border-top-right-radius : 8px; 30 | -o-border-top-right-radius : 8px; 31 | -moz-border-radius-topright : 8px; 32 | -webkit-border-top-right-radius : 8px; 33 | background-color: #555; 34 | margin-top: -8px; 35 | padding: 4px 0; 36 | } 37 | -------------------------------------------------------------------------------- /demo/README.md: -------------------------------------------------------------------------------- 1 | Here’s a set of basic demos to get you started with SMIL-Timing. 2 | 3 | 4 | 5 | > Here’s the home page slideshow. Not the simplest example, though. 6 | 7 | 8 | 9 | > SMIL-Timing can easily be used to add HTML subtitles to a video stream. This 10 | > has been applied to the Mozilla Firefox 4 beta “[first 11 | > run](http://www.mozilla.com/fr/firefox/4.0b1/firstrun/)” page… 12 | 13 | 14 | 15 | > Here is a SMIL/Timing adaptation of [this HTML5/Audio 16 | > demo](http://apm.ircam.fr/page/audio-tag/) (proposed by Samuel Goldszmidt, 17 | > IRCAM) — but the HTML content is _synchronized with the audio track_, which 18 | > is precisely the goal of our project. 19 | 20 | 21 | 22 | > A quick slideshow designed with declarative, inline SMIL-Timing markup. 23 | > This demo shows how to get most of the common slideshow effects (transitions, 24 | > incremental display, outlining…) with SMIL-Timing. 25 | 26 | -------------------------------------------------------------------------------- /demo/slidy.smil: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /ensLyon/playlist.smil: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /ensLyon/style/theme-cream.css: -------------------------------------------------------------------------------- 1 | #slideshow { 2 | box-shadow : 0px 1px 10px #552; 3 | -o-box-shadow : 0px 1px 10px #552; 4 | -moz-box-shadow : 0px 1px 10px #552; 5 | -webkit-box-shadow : 0px 1px 10px #552; 6 | /*background-color: #f2f2f2;*/ 7 | } 8 | #slideshow, div.smil-toc { 9 | background-color: #ffc; 10 | } 11 | .smil-controlBar { 12 | /*background-color: #faf4a3;*/ 13 | background-color: #fe8; 14 | color: #c00 !important; 15 | } 16 | .smil-timeSegments a span { 17 | background-color: transparent; 18 | margin-top: 0; 19 | padding: 0; 20 | } 21 | .smil-timeSegments a:hover span, div.smil-toc ul a { 22 | color: #c00 !important; 23 | } 24 | button, 25 | .smil-controlBar button, 26 | .smil-timeSegments a, 27 | .smil-timeSegments a { 28 | background-color: #fc3; 29 | border-color: #f93; 30 | color: #c00 !important; 31 | } 32 | video, button:hover, 33 | .smil-timeSlider, 34 | .smil-controlBar button:hover, 35 | .smil-timeSegments a:hover, 36 | .smil-timeSegments a.current { 37 | background-color: #f93; 38 | } 39 | .smil-timeCursor { 40 | background-image: url(../../../style/timecontroller/cursor-pink.png); 41 | } 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2010-2011 Fabien Cazenave, INRIA 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /webRadio/README.md: -------------------------------------------------------------------------------- 1 | We have worked with [INA](http://www.ina.fr/), the French national archive of 2 | audiovisual, to publish on the web archived radio programs enhanced with 3 | associated material. 4 | 5 | At first glance, the time structure could look similar to the captioned video 6 | example, but the goal here is not only to synchronize pictures or text 7 | with the audio content. The objective is really to create an 8 | application where the user receives help for moving in the audio 9 | record and is free to choose the associated information s/he wants, which 10 | could be multimedia too, with other audio recordings. 11 | 12 | 13 | 14 | __Troubleshooting__ 15 | 16 | This demo relies on an external timesheet (fontaine.smil), which is loaded with 17 | XMLHttpRequest. Depending on your configuration, accessing a local file 18 | (file:/// URL) might not be allowed by your browser security policy: you’ll have 19 | to use a local web server (http://localhost/ URL) to see this demo. 20 | 21 | As Internet Explorer 6 to 8 does not support native <audio> tags, the 22 | Flash fallback will be used. Again, a local web server is required to make it 23 | work. 24 | 25 | -------------------------------------------------------------------------------- /demo/style/video.css: -------------------------------------------------------------------------------- 1 | div#media { 2 | position: relative; 3 | overflow: none; 4 | width: 640px; 5 | height: 385px; 6 | padding: 0.5em 1.5em; 7 | margin: 0 auto; 8 | text-align: center; 9 | } 10 | div#media p { 11 | position: absolute; 12 | bottom: 3em; 13 | height: 2em; 14 | width: 620px; 15 | padding: 0.25em 10px; 16 | margin: 0; 17 | color: white; 18 | background: rgba(0,0,0,0.2); 19 | text-shadow: black 1px 1px 3px; 20 | font-family: sans-serif; 21 | font-weight: bold; 22 | font-size: 1.1em; 23 | /* see timeAction="display" */ 24 | /*display: none;*/ 25 | /* 26 | * ugly hack to align the text vertically: 27 | * the line height is set to 2em by default, and it’s set manually to 1em 28 | * in the paragraph blocks (w/ inline style) that are known to use 2 lines. 29 | */ 30 | line-height: 2em; 31 | } 32 | div#media p.twolines { 33 | line-height: 1em; 34 | } 35 | div#media p.top { 36 | bottom: 7em; 37 | } 38 | div#media p a { 39 | /*color: #f88;*/ 40 | color: orange; 41 | } 42 | div#media p a:hover { 43 | color: white; 44 | } 45 | div#mediaController { 46 | position: absolute; 47 | top: 0; 48 | left: 1.5em; 49 | width: 640px; 50 | height: 385px; 51 | } 52 | 53 | -------------------------------------------------------------------------------- /demo/style/slidy.css: -------------------------------------------------------------------------------- 1 | #slideshow, #slideshow p, #slideshow li { 2 | font-size: 18px; 3 | } 4 | #slideshow code { 5 | font-style: italic; 6 | color: brown; 7 | } 8 | li { 9 | list-style-type: disc; 10 | } 11 | li li { 12 | list-style-type: square !important; 13 | } 14 | #slideshow .slide { 15 | overflow: auto; 16 | } 17 | #slideshow .slide div { 18 | background: none; 19 | border: none; 20 | padding: 0; 21 | margin: 0; 22 | width: 0; 23 | height: 0; 24 | } 25 | #slideshow pre { 26 | font-size: smaller; 27 | font-size: 12px; 28 | color: brown; 29 | } 30 | 31 | /* collapsable lists */ 32 | .outline li, 33 | .accordion li { 34 | cursor: pointer; 35 | list-style-type: circle; 36 | } 37 | .outline li:hover, 38 | .accordion li:hover { 39 | /*text-decoration: underline;*/ 40 | } 41 | .outline li ol, 42 | .outline li ul, 43 | .accordion li ol, 44 | .accordion li ul { 45 | display: none; 46 | } 47 | .outline li.expand.active ol, 48 | .outline li.expand.active ul { 49 | display: none; 50 | } 51 | .outline li.active ol, 52 | .outline li.active ul, 53 | .accordion li.active ol, 54 | .accordion li.active ul { 55 | display: block; 56 | } 57 | .outline li.expand ol, 58 | .outline li.expand ul { 59 | display: block; 60 | } 61 | 62 | -------------------------------------------------------------------------------- /3rd-part/html5.js: -------------------------------------------------------------------------------- 1 | // html5shiv MIT @rem remysharp.com/html5-enabling-script 2 | // iepp v1.5.1 MIT @jon_neal iecss.com/print-protector 3 | /*@cc_on(function(p,e){var q=e.createElement("div");q.innerHTML="i";q.childNodes.length!==1&&function(){function r(a,b){if(g[a])g[a].styleSheet.cssText+=b;else{var c=s[l],d=e[j]("style");d.media=a;c.insertBefore(d,c[l]);g[a]=d;r(a,b)}}function t(a,b){for(var c=new RegExp("\\b("+m+")\\b(?!.*[;}])","gi"),d=function(k){return".iepp_"+k},h=-1;++h\\s*$","i");i.innerHTML=a.outerHTML.replace(/\r|\n/g," ").replace(c,a.currentStyle.display=="block"?"":"");c=i.childNodes[0];c.className+=" iepp_"+ 5 | d;c=f[f.length]=[a,c];a.parentNode.replaceChild(c[1],c[0])}t(e.styleSheets,"all")});p.attachEvent("onafterprint",function(){for(var a=-1,b;++a 3 | 4 | * [MediaElement.js](http://mediaelementjs.com/) 5 | 6 | > Required to use \ media elements with IE6, IE7, IE8. 7 | > Can also be used to avoid double-encoding media files, i.e. to use a Flash or 8 | > Silverlight fallback when the media type isn’t supported by the browser. 9 | 10 | * [sizzle.js](http://sizzlejs.com/) (4KB, gzipped) 11 | 12 | > IE6 and IE7 don’t support querySelector() / querySelectorAll(), which are 13 | > required by SMIL-Timesheets attributes like "select" (or the "mediaSync" and 14 | > "controls" ones that are proposed as extensions). For documents using these 15 | > attributes you should include a library such as Sizzle before loading 16 | > timesheets.js. 17 | > 18 | > Our Timesheet Scheduler will use Sizzle if it’s available, then default to 19 | > IE8’s querySelector, then use getElementById() / getElementsByTagName() for 20 | > IE6 and IE7 if Sizzle isn’t loaded. Note that besides Sizzle, the jQuery, 21 | > Prototype, Dojo, MooTools, ExtJS and YUI frameworks are also supported: 22 | > Sizzle isn’t required if one of these frameworks is already loaded. 23 | 24 | * [html5shiv](http://code.google.com/p/html5shiv/) (1.5KB, gzipped) 25 | 26 | > We recommend using an HTML5 doctype. However, IE6-8 can’t apply style rules on 27 | > “unknown” elements such as \, \, \, \, 28 | > etc. — html5shiv is a perfect workaround for that. 29 | 30 | These JavaScript libraries are available under MIT license. 31 | 32 | -------------------------------------------------------------------------------- /timesheets-navigation.min.js: -------------------------------------------------------------------------------- 1 | (function(){function a(j,c){function e(k){var i=new RegExp("(^|[\\s;]+)"+k+"([\\s;]+|$)","i");return i.test(c)}var g=j.target;if(!g){g=j.timeNodes[0].target.parentNode}if(e("arrows")){EVENTS.bind(document,"keydown",function(m){var k=j.currentIndex;var l=j.timeNodes.length;var i=j.timeNodes[k];switch(m.keyCode){case 32:EVENTS.preventDefault(m);if(m.shiftKey){j.selectIndex(k-1)}else{j.selectIndex(k+1)}break;case 35:EVENTS.preventDefault(m);j.selectIndex(l-1);break;case 36:EVENTS.preventDefault(m);j.selectIndex(0);break;case 37:EVENTS.preventDefault(m);j.selectIndex(k-1);break;case 38:EVENTS.preventDefault(m);i.reset();i.show();break;case 39:EVENTS.preventDefault(m);j.selectIndex(k+1);break;case 40:EVENTS.preventDefault(m);EVENTS.trigger(i.target,"click");break;default:break}})}if(e("click")){EVENTS.bind(g,"mousedown",function(k){var i=k.which||([0,1,3,0,2])[k.button];if(i==1){j.selectIndex(j.currentIndex+1)}else{if(i==2){j.selectIndex(j.currentIndex-1)}}})}if(e("scroll")){function d(i){if(i){if(i.ctrlKey){return}i.preventDefault()}else{i=window.event;if(i.ctrlKey){return}i.returnValue=false}var k=0;if(i.wheelDelta){k=i.wheelDelta/120}else{if(i.detail){k=-i.detail/3}}if(k<0){j.selectIndex(j.currentIndex+1)}else{if(k>0){j.selectIndex(j.currentIndex-1)}}}if(window.addEventListener){g.addEventListener("DOMMouseScroll",d,false)}g.onmousewheel=d}if(e("hash")){var b=j.timeNodes;for(var f=0;f 2 | 37 | 38 | 39 | 17 | 18 | 19 |
20 | 21 |
26 | 27 |
28 | 29 |

Ever wanted to…

30 |
    31 |
  • 32 | create your own slideshow in HTML? 33 |
    • 34 |
  • 35 | synchronize HTML content with multimedia streams? 36 | (subtitles, transcriptions, annotations…) 37 |
    • 38 |
  • 39 | animate HTML elements? 40 |
    • 41 |
42 |

43 | …without writing any single line of JavaScript? 44 |

45 |
46 | 47 |
48 |

 

49 | It’s possible. 50 | It’s easy. 51 |

52 | It’s based on declarative W3C standards. 53 |

54 |

55 | It works with HTML, SVG and XML. 56 |

57 |

58 | Discover SMIL Timesheets 59 |

60 |

61 | with the following demos! 62 |

63 |
64 | 65 |
66 |
67 |
68 | HTML Subtitles 69 |
70 |
71 | synchronizing rich subtitles with a video stream 72 |
73 |
74 | Annotated Audio 75 |
76 |
77 | synchronizing textual descriptions of musical sections 78 | and introducing declarative user interaction 79 |
80 |
81 | Slideshow Engine 82 |
83 |
84 | nesting time containers to create a highly flexible slideshow engine 85 |
86 |
87 | Slidy Timesheet 88 |
89 |
90 | implementing the HTML Slidy micro-format with a single timesheet! 91 |
92 |
93 |

94 | Learn more… 95 | 96 | Download! 97 |

98 |
99 |
100 | 101 |
102 | 103 | 104 | -------------------------------------------------------------------------------- /xpi/chrome/content/overlay.js: -------------------------------------------------------------------------------- 1 | /*- ***** BEGIN LICENSE BLOCK ***** 2 | - Version: MPL 1.1/GPL 2.0/LGPL 2.1 3 | - 4 | - The contents of this file are subject to the Mozilla Public License Version 5 | - 1.1 (the "License"); you may not use this file except in compliance with 6 | - the License. You may obtain a copy of the License at 7 | - http://www.mozilla.org/MPL/ 8 | - 9 | - Software distributed under the License is distributed on an "AS IS" basis, 10 | - WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License 11 | - for the specific language governing rights and limitations under the 12 | - License. 13 | - 14 | - The Original Code is INRIA. 15 | - 16 | - The Initial Developer of the Original Code is INRIA. 17 | - Portions created by the Initial Developer are Copyright (C) 2010-2011 18 | - the Initial Developer. All Rights Reserved. 19 | - 20 | - Contributor(s): 21 | - Fabien Cazenave 22 | - 23 | - Alternatively, the contents of this file may be used under the terms of 24 | - either the GNU General Public License Version 2 or later (the "GPL"), or 25 | - the GNU Lesser General Public License Version 2.1 or later (the "LGPL"), 26 | - in which case the provisions of the GPL or the LGPL are applicable instead 27 | - of those above. If you wish to allow use of your version of this file only 28 | - under the terms of either the GPL or the LGPL, and not to allow others to 29 | - use your version of this file under the terms of the MPL, indicate your 30 | - decision by deleting the provisions above and replace them with the notice 31 | - and other provisions required by the LGPL or the GPL. If you do not delete 32 | - the provisions above, a recipient may use your version of this file under 33 | - the terms of any one of the MPL, the GPL or the LGPL. 34 | - 35 | - ***** END LICENSE BLOCK *****/ 36 | 37 | // hide location bar, requires Gecko 2+ (Firefox 4+) 38 | // https://developer.mozilla.org/en/Hiding_browser_chrome 39 | try { 40 | var prevFunc = XULBrowserWindow.hideChromeForLocation; 41 | XULBrowserWindow.hideChromeForLocation = function(aLocation) { 42 | return (/^chrome:\/\/timesheets\//i.test(aLocation)) || prevFunc.apply(XULBrowserWindow, [aLocation]); 43 | } 44 | } catch(e) {} 45 | 46 | // open chrome://timesheets/content/ in a new tab, or reuse existing tab 47 | // https://developer.mozilla.org/en/Code_snippets/Tabbed_browser#Reusing_tabs 48 | function openAndReuseOneTabPerURL(url) { 49 | var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"] 50 | .getService(Components.interfaces.nsIWindowMediator); 51 | var browserEnumerator = wm.getEnumerator("navigator:browser"); 52 | 53 | // Check each browser instance for our URL 54 | var found = false; 55 | while (!found && browserEnumerator.hasMoreElements()) { 56 | var browserWin = browserEnumerator.getNext(); 57 | var tabbrowser = browserWin.gBrowser; 58 | 59 | // Check each tab of this browser instance 60 | var numTabs = tabbrowser.browsers.length; 61 | for (var index = 0; index < numTabs; index++) { 62 | var currentBrowser = tabbrowser.getBrowserAtIndex(index); 63 | if (url == currentBrowser.currentURI.spec) { 64 | 65 | // The URL is already opened. Select this tab. 66 | tabbrowser.selectedTab = tabbrowser.tabContainer.childNodes[index]; 67 | 68 | // Focus *this* browser-window 69 | browserWin.focus(); 70 | 71 | found = true; 72 | break; 73 | } 74 | } 75 | } 76 | 77 | // Our URL isn't open. Open it now. 78 | if (!found) { 79 | var recentWindow = wm.getMostRecentWindow("navigator:browser"); 80 | if (recentWindow) { 81 | // Use an existing browser window 82 | recentWindow.delayedOpenTab(url, null, null, null, null); 83 | } 84 | else { 85 | // No browser windows are open, so open a new one. 86 | window.open(url); 87 | } 88 | } 89 | } 90 | 91 | function openTimesheetComposer() { 92 | openAndReuseOneTabPerURL("chrome://timesheets/content/timesheets.xul"); 93 | } 94 | -------------------------------------------------------------------------------- /slideshow/js/markup.js: -------------------------------------------------------------------------------- 1 | function fillPreNodes(href) { 2 | var nodes = document.getElementsByTagName("pre"); 3 | 4 | // OLDIE: Internet Explorer 6/7/8 5 | // couldn't find a proper way to use an XML document with that crap 6 | // so here's an *ugly* text-based hack :-/ 7 | if (window.ActiveXObject) { 8 | xhr = new ActiveXObject("Microsoft.XMLHTTP"); 9 | xhr.open("GET", href, true); 10 | xhr.onreadystatechange = function() { 11 | if (xhr.readyState == 4) { 12 | var innerHTML = xhr.responseText; // .replace(/[\r\n]*/, "\r\n"); 13 | for (var i = 0; i < nodes.length; i++) { 14 | var id = nodes[i].id; 15 | if (id) { 16 | var index = innerHTML.indexOf('
/, "");
 20 |               index  = markup.indexOf("
"); 21 | markup = markup.substring(0, index); 22 | markup = markup.replace(/ /g, " "); 23 | markup = markup.replace(/ class/g, " class"); 24 | markup = markup.split("\n").join("
"); 25 | nodes[i].innerHTML = markup; 26 | } else { 27 | index = markup.indexOf("") + 6; 28 | markup = markup.substring(0, index); 29 | nodes[i].outerHTML = markup; 30 | } 31 | } 32 | } 33 | } 34 | }; 35 | xhr.send(null); 36 | } 37 | 38 | // modern browsers 39 | // note that Chrome won't allow loading any local file with XHR 40 | else if (window.XMLHttpRequest) { 41 | xhr = new XMLHttpRequest(); 42 | xhr.overrideMimeType("text/xml"); 43 | xhr.open("GET", href, true); 44 | xhr.onreadystatechange = function() { 45 | if (xhr.readyState == 4) { 46 | var xmlDoc = xhr.responseXML; 47 | for (var i = 0; i < nodes.length; i++) { 48 | var id = nodes[i].id; 49 | if (id) { 50 | var markup = xmlDoc.getElementById(id).innerHTML; 51 | //if (/\/.test(markup)) { 52 | //alert(markup); 53 | markup = markup.replace(/^ /g, ""); 54 | markup = markup.replace(/\s*$/, ""); 55 | //} 56 | nodes[i].innerHTML = markup; 57 | } 58 | } 59 | } 60 | }; 61 | xhr.send(null); 62 | } 63 | } 64 | 65 | // startup: fill 
 nodes + experimental ToC generation
 66 | EVENTS.onSMILReady(function() {
 67 |   var slideshow   = document.getElementById("slideshow");
 68 |   if (!slideshow || !slideshow.timing) return;
 69 | 
 70 |   // fill 
 nodes
 71 |   fillPreNodes("markup.xhtml");
 72 | 
 73 |   // Table of Contents (XXX should be in timesheets-controls.js)
 74 |   var tocButton = document.getElementById("toc");
 75 |   var tocList   = document.getElementsByTagName("nav").item(0)
 76 |                           .getElementsByTagName("ol").item(0);
 77 |   var index = 0;
 78 |   var count = slideshow.timing.timeNodes.length;
 79 |   for (var i = 0; i < slideshow.childNodes.length; i++) {
 80 |     var slide = slideshow.childNodes[i];
 81 |     if ((slide.nodeType == 1) && slide.id) {
 82 |       index ++;
 83 |       slide.index = index;
 84 |       EVENTS.bind(slide, "begin", function() {
 85 |         try {
 86 |           tocButton.innerHTML = (this.index + "/" + count);
 87 |           document.getElementById("active").removeAttribute("id");
 88 |         } catch(e) {}
 89 |         this.tocItem.setAttribute("id", "active");
 90 |       });
 91 |       // XXX won't work with IE<8
 92 |       var titleNode = document.querySelector("#" + slide.id + " h2");
 93 |       var title = titleNode ? titleNode.firstChild.nodeValue : "(untitled)";
 94 |       var li = document.createElement("li");
 95 |       var a  = document.createElement("a");
 96 |       var tn = document.createTextNode(title);
 97 |       // hide ToC entry if untitled
 98 |       if (!titleNode) {
 99 |         li.style.height = 0;
100 |         li.style.visibility = "hidden";
101 |       }
102 |       a.setAttribute("href", "#" + slide.id);
103 |       a.appendChild(tn);
104 |       li.appendChild(a);
105 |       tocList.appendChild(li);
106 |       slide.tocItem = li;
107 |     }
108 |   }
109 | });
110 | 
111 | 


--------------------------------------------------------------------------------
/ensLyon/style/layout-touch.css:
--------------------------------------------------------------------------------
  1 | /* resize UI for smaller screens */
  2 | body {
  3 |   width: 980px;
  4 |   margin: auto;
  5 |   overflow: auto;
  6 | }
  7 | header, footer {
  8 |   display: none;
  9 | }
 10 | #slideshow {
 11 |   background-color: transparent !important;
 12 |   box-shadow         : none !important;
 13 |   -o-box-shadow      : none !important;
 14 |   -moz-box-shadow    : none !important;
 15 |   -webkit-box-shadow : none !important;
 16 | }
 17 | div#images {
 18 |   border: none;
 19 | }
 20 | div#images, div.smil-toc, .smil-tocDisplay, .smil-controlBar {
 21 |   left: 170px;
 22 |   width: 640px;
 23 | }
 24 | 
 25 | /* user controls: timeline */
 26 | .smil-controlBar {
 27 |   width: 640px;
 28 |   height: 32px;
 29 |   z-index: 2;
 30 | }
 31 | .smil-timeSegments, .smil-timeCursor {
 32 |   display: none;
 33 | }
 34 | .smil-timeSlider {
 35 |   display: block;
 36 | }
 37 | .smil-timeline, .smil-timeSlider {
 38 |   border-radius         : 10px;
 39 |   -o-border-radius      : 10px;
 40 |   -moz-border-radius    : 10px;
 41 |   -webkit-border-radius : 10px;
 42 | }
 43 | .smil-timeline {
 44 |   height: 24px;
 45 |   margin-top: 4px;
 46 |   overflow: hidden; /* XXX */
 47 | }
 48 | .smil-currentTime {
 49 |   font-size: 16px;
 50 |   font-weight: bold;
 51 |   font-family: sans-serif;
 52 | }
 53 | 
 54 | /* user controls: navigation buttons */
 55 | .smil-first, .smil-last {
 56 |   display: none;
 57 | }
 58 | .smil-prev, .smil-next {
 59 |   position: absolute;
 60 |   top: -498px;
 61 |   height: 480px;
 62 |   margin: 0;
 63 |   padding: 0;
 64 |   width: 150px !important;
 65 |   font-size: 128px !important;
 66 |   opacity: 0.5;
 67 |   filter: alpha(opacity=50);
 68 | }
 69 | .smil-prev {
 70 |   left: -150px;
 71 |   border-top-left-radius         : 50px;
 72 |   -o-border-top-left-radius      : 50px;
 73 |   -moz-border-radius-topleft     : 50px;
 74 |   -webkit-border-top-left-radius : 50px;
 75 |   border-bottom-left-radius         : 50px;
 76 |   -o-border-bottom-left-radius      : 50px;
 77 |   -moz-border-radius-bottomleft     : 50px;
 78 |   -webkit-border-bottom-left-radius : 50px;
 79 | }
 80 | .smil-next {
 81 |   right: -150px;
 82 |   border-top-right-radius         : 50px;
 83 |   -o-border-top-right-radius      : 50px;
 84 |   -moz-border-radius-topright     : 50px;
 85 |   -webkit-border-top-right-radius : 50px;
 86 |   border-bottom-right-radius         : 50px;
 87 |   -o-border-bottom-right-radius      : 50px;
 88 |   -moz-border-radius-bottomright     : 50px;
 89 |   -webkit-border-bottom-right-radius : 50px;
 90 | }
 91 | button.smil-play {
 92 |   position: absolute;
 93 |   top: -498px;
 94 |   left: 3px;
 95 |   width: 640px !important;
 96 |   height: 480px;
 97 |   border: none;
 98 |   border-radius         : 1px !important;
 99 |   -o-border-radius      : 1px !important;
100 |   -moz-border-radius    : 1px !important;
101 |   -webkit-border-radius : 1px !important;
102 |   opacity: 0.5;
103 |   filter: alpha(opacity=50);
104 |   background-image: url(progress44.gif);
105 |   background-color: transparent !important;
106 | }
107 | .playing button.smil-play {
108 |   background-color: transparent;
109 |   background-image: none;
110 | }
111 | .paused button.smil-play {
112 |   background-color: transparent;
113 |   background-image: url(play128.png);
114 | }
115 | 
116 | /* user controls: table of contents */
117 | div.smil-toc {
118 |   top: inherit;
119 |   bottom: 10px;
120 |   right: 20px;
121 |   z-index: 3;
122 |   border-radius          : 8px;
123 |   -o-border-radius       : 8px;
124 |   -moz-border-radius     : 8px;
125 |   -webkit-border-radius  : 8px;
126 |   opacity: 0.9;
127 |   filter: alpha(opacity=90);
128 |   /* transition */
129 |   transition         : height 0.5s;
130 |   -o-transition      : height 0.5s;
131 |   -moz-transition    : height 0.5s;
132 |   -webkit-transition : height 0.5s;
133 |   height: 0;
134 |   overflow: hidden;
135 |   /*font-size: 24px !important;*/
136 |   font-size: 32px !important;
137 |   font-family: sans-serif !important;
138 | }
139 | div.smil-toc.active, .active {
140 |   height: 530px;
141 | }
142 | 
143 | /* hide inactive sublists */
144 | .smil-toc li ul {
145 |   display: none;
146 | }
147 | .smil-toc li.current ul {
148 |   display: block;
149 | }
150 | 
151 | /* transparent button over the timeline */
152 | .smil-tocDisplay {
153 |   position: absolute;
154 |   bottom: 10px;
155 |   left: 20px;
156 |   width: 840px;
157 |   height: 40px;
158 |   opacity: 0.5;
159 |   filter: alpha(opacity=50);
160 |   z-index: 4;
161 | }
162 | 
163 | 


--------------------------------------------------------------------------------
/joinMozilla/style/transitions.css:
--------------------------------------------------------------------------------
  1 | .smil-controlBar {
  2 |   position: absolute;
  3 |   left: 130px;
  4 |   top: 500px;
  5 |   width: 640px;
  6 |   z-index: 2;
  7 | }
  8 | .smil-timeSegments a span {
  9 |   border-top-left-radius          : 8px;
 10 |   -o-border-top-left-radius       : 8px;
 11 |   -moz-border-radius-topleft      : 8px;
 12 |   -webkit-border-top-left-radius  : 8px;
 13 |   border-top-right-radius         : 8px;
 14 |   -o-border-top-right-radius      : 8px;
 15 |   -moz-border-radius-topright     : 8px;
 16 |   -webkit-border-top-right-radius : 8px;
 17 |   background-color: #555;
 18 |   margin-top: -8px;
 19 |   padding: 4px 0;
 20 | }
 21 | .smil-timeSlider {
 22 |   display: none;
 23 | }
 24 | /* #slideshow > * {
 25 |   position: absolute;
 26 |   top: 50px;
 27 |   left: 50px;
 28 |   width: 800px;
 29 |   height: 600px;
 30 | }
 31 | body > div {
 32 |   overflow-x: hidden;
 33 | } */
 34 | #slideshow {
 35 |   overflow: hidden;
 36 | }
 37 | 
 38 | #slideshow > * {
 39 |   position: absolute;
 40 |   top: 0;
 41 |   left: 130px;
 42 |   transition         : all 1s;
 43 |   -o-transition      : all 1s;
 44 |   -moz-transition    : all 1s;
 45 |   -webkit-transition : all 1s;
 46 | }
 47 | 
 48 | /* cross-fade effect */
 49 | .crossfade #slideshow > *[smil=idle] {
 50 |   opacity: 0;
 51 | }
 52 | .crossfade #slideshow > *[smil=done] {
 53 |   opacity: 0;
 54 | }
 55 | .crossfade #slideshow > *[smil=active] {
 56 |   opacity: 1;
 57 |   z-index: 1;
 58 | }
 59 | 
 60 | 
 61 | /* carousel effect */
 62 | .carousel #slideshow > *[smil=idle] {
 63 |   opacity: 0;
 64 |   transform         : scale(0.3) translate(+150%);
 65 |   -o-transform      : scale(0.3) translate(+150%);
 66 |   -moz-transform    : scale(0.3) translate(+150%);
 67 |   -webkit-transform : scale(0.3) translate(+150%);
 68 | }
 69 | .carousel #slideshow > *[smil=done] {
 70 |   opacity: 0;
 71 |   transform         : scale(0.3) translate(-150%);
 72 |   -o-transform      : scale(0.3) translate(-150%);
 73 |   -moz-transform    : scale(0.3) translate(-150%);
 74 |   -webkit-transform : scale(0.3) translate(-150%);
 75 | }
 76 | .carousel #slideshow > *[smil=active] {
 77 |   opacity: 1;
 78 | }
 79 | 
 80 | /* fade-through effect */
 81 | .fadethrough #slideshow > * {
 82 |   opacity: 0;
 83 | }
 84 | .fadethrough #slideshow > *[smil=done] {
 85 |   transform         : scale(1.5) translate(0, -10%);
 86 |   -o-transform      : scale(1.5) translate(0, -10%);
 87 |   -moz-transform    : scale(1.5) translate(0, -10%);
 88 |   -webkit-transform : scale(1.5) translate(0, -10%);
 89 | }
 90 | .fadethrough #slideshow > *[smil=active] {
 91 |   opacity: 1;
 92 | }
 93 | 
 94 | /* slide-in effect */
 95 | .slide #slideshow > *[smil=idle] {
 96 |   transform         : translate(+800px ,0);
 97 |   -o-transform      : translate(+800px ,0);
 98 |   -moz-transform    : translate(+800px ,0);
 99 |   -webkit-transform : translate(+800px ,0);
100 | }
101 | .slide #slideshow > *[smil=done] {
102 |   transform         : translate(-800px ,0);
103 |   -o-transform      : translate(-800px ,0);
104 |   -moz-transform    : translate(-800px ,0);
105 |   -webkit-transform : translate(-800px ,0);
106 | }
107 | 
108 | /* toss effect */
109 | .toss #slideshow > * {
110 |   opacity: 0;
111 | }
112 | .toss #slideshow > *[smil=idle] {
113 |   transform         : rotate(-30deg) translate(-80px, -240px);
114 |   -o-transform      : rotate(-30deg) translate(-80px, -240px);
115 |   -moz-transform    : rotate(-30deg) translate(-80px, -240px);
116 |   -webkit-transform : rotate(-30deg) translate(-80px, -240px);
117 | }
118 | .toss #slideshow > *[smil=active] {
119 |   opacity: 1;
120 | }
121 | 
122 | /* disable all transitions */
123 | .none #slideshow > * {
124 |   visibility: hidden;
125 |   transition         : none;
126 |   -o-transition      : none;
127 |   -moz-transition    : none;
128 |   -webkit-transition : none;
129 | }
130 | .none #slideshow > *[smil=active] {
131 |   visibility: visible;
132 | }
133 | 
134 | /* transition selector */
135 | #transitionSelector {
136 |   margin-bottom: 0;
137 |   padding-right: 2em;
138 |   text-align: right;
139 |   font-size: 0.8em;
140 |   user-select         : none;
141 |   -o-user-select      : none;
142 |   -moz-user-select    : none;
143 |   -webkit-user-select : none;
144 | }
145 | #transitionSelector button {
146 |   cursor: pointer;
147 |   color: navy;
148 |   border: none;
149 |   background: none;
150 |   padding: 0;
151 | }
152 | #transitionSelector button:hover {
153 |   text-decoration: underline;
154 | }
155 | .none        button.none,
156 | .crossfade   button.crossfade,
157 | .carousel    button.carousel,
158 | .fadethrough button.fadethrough,
159 | .slide       button.slide,
160 | .toss        button.toss {
161 |   text-decoration: underline;
162 |   color: brown !important;
163 | }
164 | 
165 | 


--------------------------------------------------------------------------------
/xpi/chrome/skin/classic/timesheets.css:
--------------------------------------------------------------------------------
  1 | /*- ***** BEGIN LICENSE BLOCK *****
  2 |   - Version: MPL 1.1/GPL 2.0/LGPL 2.1
  3 |   -
  4 |   - The contents of this file are subject to the Mozilla Public License Version
  5 |   - 1.1 (the "License"); you may not use this file except in compliance with
  6 |   - the License. You may obtain a copy of the License at
  7 |   - http://www.mozilla.org/MPL/
  8 |   -
  9 |   - Software distributed under the License is distributed on an "AS IS" basis,
 10 |   - WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 11 |   - for the specific language governing rights and limitations under the
 12 |   - License.
 13 |   -
 14 |   - The Original Code is Timesheet Composer.
 15 |   -
 16 |   - The Initial Developer of the Original Code is INRIA.
 17 |   - Portions created by the Initial Developer are Copyright (C) 2010-2011
 18 |   - the Initial Developer. All Rights Reserved.
 19 |   -
 20 |   - Contributor(s):
 21 |   -    Fabien Cazenave 
 22 |   -
 23 |   - Alternatively, the contents of this file may be used under the terms of
 24 |   - either the GNU General Public License Version 2 or later (the "GPL"), or
 25 |   - the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
 26 |   - in which case the provisions of the GPL or the LGPL are applicable instead
 27 |   - of those above. If you wish to allow use of your version of this file only
 28 |   - under the terms of either the GPL or the LGPL, and not to allow others to
 29 |   - use your version of this file under the terms of the MPL, indicate your
 30 |   - decision by deleting the provisions above and replace them with the notice
 31 |   - and other provisions required by the LGPL or the GPL. If you do not delete
 32 |   - the provisions above, a recipient may use your version of this file under
 33 |   - the terms of any one of the MPL, the GPL or the LGPL.
 34 |   -
 35 |   - ***** END LICENSE BLOCK *****/
 36 | 
 37 | splitter vbox, splitter hbox {
 38 |  border: 1px inset black;
 39 | }
 40 | 
 41 | #sidebar-left, #sidebar-right {
 42 |   background-color: white;
 43 | }
 44 | #sidebar-right textbox {
 45 |   text-align: right;
 46 | }
 47 | #sidebar-right toolbarbutton {
 48 |   border: 1px solid gray;
 49 | }
 50 | 
 51 | #sidebar-left hbox {
 52 |   min-width: 150px;
 53 |   width: 150px;
 54 |   height: 120px;
 55 |   border-radius: 10px;
 56 |   border: 1px solid black;
 57 |   padding: 10px;
 58 |   margin: 10px;
 59 |   font-size: 2em;
 60 |   /*background-color: #99f;*/
 61 | }
 62 | #sidebar-left hbox.active {
 63 |   background-color: #f99;
 64 | }
 65 | 
 66 | #editionTab, #previewTab {
 67 |   background-color: white;
 68 | }
 69 | 
 70 | #timeline {
 71 |   padding: 20px;
 72 |   overflow: hidden;
 73 | }
 74 | 
 75 | #mediaPlayer {
 76 |   display: none;
 77 | }
 78 | 
 79 | #content {
 80 |   overflow: auto;
 81 | }
 82 | 
 83 | /* to be moved to timeline.css */
 84 | #timeSegments {
 85 |   position: relative;
 86 |   width: 100%;
 87 |   height: 34px;
 88 |   /*margin-top: 60px;*/
 89 |   background-color: white;
 90 |   border: 1px solid #ddd;
 91 | }
 92 | #timeSegments > * {
 93 |   position: absolute;
 94 |   top: 0;
 95 |   background-color: #99f;
 96 |   outline: 1pt dashed navy;
 97 |   overflow: hidden;
 98 |   width: 50px; /* default width, will be overridden */
 99 |   height: 32px;
100 |   /*cursor: move;*/
101 |   cursor: pointer;
102 |   opacity: 0.6;
103 | }
104 | #timeSegments > *.active {
105 |   background-color: #f99;
106 |   outline-color: brown;
107 |   z-index: 1;
108 | }
109 | #timeSegments > *:hover {
110 |   /*background-color: #bbf;*/
111 |   /*opacity: 1;*/
112 |   outline-style: solid;
113 | }
114 | #timeSegments div.handle-left,
115 | #timeSegments div.handle-right {
116 |   position: absolute;
117 |   top: 0;
118 |   width: 5px;
119 |   height: 32px;
120 | }
121 | #timeSegments div.handle-left {
122 |   left: 0;
123 |   cursor: w-resize;
124 | }
125 | #timeSegments div.handle-right {
126 |   right: 0;
127 |   cursor: e-resize;
128 | }
129 | 
130 | /* XBL sandbox */
131 | 
132 | waveform {
133 |   -moz-binding: url("chrome://timesheets/content/timeline.xml#waveform");
134 |   /*outline: 1px solid brown;*/
135 |   /*margin-bottom: 20px;*/
136 | }
137 | 
138 | timeController {
139 |   -moz-binding: url("chrome://timesheets/content/timeline.xml#timeController");
140 |   outline: 1px solid gray;
141 |   margin-bottom: 20px;
142 | }
143 | timeController #newSegment {
144 |   list-style-image: url("chrome://timesheets/skin/24/gtk-new.png");
145 | }
146 | 
147 | timeContainer {
148 |   -moz-binding: url("chrome://timesheets/content/timeline.xml#timeContainer");
149 |   /*outline: 1px solid red;*/
150 | }
151 | 
152 | dataform {
153 |   -moz-binding: url("chrome://timesheets/content/timeline.xml#dataform1");
154 | }
155 | 
156 | slider {
157 |   /*-moz-binding: url("");*/
158 |   -moz-appearance: scrollbartrack-horizontal;
159 |   -moz-user-select: none;
160 |   display: block;
161 |   background-color: red !important;
162 | }
163 | thumb {
164 |   -moz-binding: url("chrome://global/content/bindings/scrollbar.xml#thumb");
165 |   -moz-appearance: scrollbarthumb-horizontal;
166 |   background-color: blue !important;
167 | }
168 | 


--------------------------------------------------------------------------------
/ensLyon/style/layout.css:
--------------------------------------------------------------------------------
  1 | /*@import url(../../../style/timecontroller/style.css);*/
  2 | @import url(../../timeline/style.css);
  3 | @import url(theme-gray.css);
  4 | 
  5 | /* main page layout */
  6 | html {
  7 |   background-color: #eee;
  8 | }
  9 | body {
 10 |   width: 1024px;
 11 |   margin: 20px auto;
 12 |   /*overflow: hidden;*/
 13 | }
 14 | header h1 {
 15 |   font-size: 1.5em;
 16 |   margin: 0;
 17 |   padding: 0;
 18 | }
 19 | header p {
 20 |   margin-top: 0;
 21 |   padding-top: 0;
 22 |   /*text-align: right;*/
 23 | }
 24 | footer {
 25 |   padding-top: 1em;
 26 | }
 27 | footer p {
 28 |   margin: 0;
 29 |   padding: 0;
 30 |   text-align: right;
 31 | }
 32 | 
 33 | /* default slideshow layout */
 34 | #slideshow {
 35 |   position: relative;
 36 |   width: 100%;
 37 |   height: 560px;
 38 |   border-radius         : 15px;
 39 |   -o-border-radius      : 15px;
 40 |   -moz-border-radius    : 15px;
 41 |   -webkit-border-radius : 15px;
 42 |   box-shadow         : 0px 1px 10px #444; /* color */
 43 |   -o-box-shadow      : 0px 1px 10px #444;
 44 |   -moz-box-shadow    : 0px 1px 10px #444;
 45 |   -webkit-box-shadow : 0px 1px 10px #444;
 46 |   background-color: white;
 47 | }
 48 | video {
 49 |   position: absolute;
 50 |   top: 20px;
 51 |   left: 680px;
 52 | }
 53 | div#images {
 54 |   position: relative;
 55 |   top: 20px;
 56 |   left: 20px;
 57 |   width: 640px;
 58 |   height: 480px;
 59 |   overflow: hidden;
 60 | }
 61 | div#images img {
 62 |   width: 100%;
 63 |   height: 100%;
 64 |   position: absolute;
 65 |   left: 0;
 66 |   top: 0;
 67 | }
 68 | 
 69 | /* alternative slideshow layout */
 70 | #swap {
 71 |   position: absolute;
 72 |   left: 667px;
 73 |   top: 266px;
 74 |   font-size: 22px;
 75 |   font-weight: bold;
 76 |   /*color: white;*/
 77 |   border: none;
 78 |   border-radius         : 5px;
 79 |   -o-border-radius      : 5px;
 80 |   -moz-border-radius    : 5px;
 81 |   -webkit-border-radius : 5px;
 82 |   cursor: pointer;
 83 |   z-index: 1;
 84 |   width: 24px;
 85 |   height: 24px;
 86 |   padding: 0;
 87 |   margin: 0;
 88 |   max-width: 24px !important;
 89 |   max-height: 24px !important;
 90 |   background-image: url(swap.png);
 91 |   background-position: center center;
 92 |   background-repeat: no-repeat;
 93 | }
 94 | #swap span {
 95 |   display: none;
 96 | }
 97 | div#images, video {
 98 |   transition         : all 1s;
 99 |   -o-transition      : all 1s;
100 |   -moz-transition    : all 1s;
101 |   -webkit-transition : all 1s;
102 |   z-index: 1;
103 | }
104 | .swapped video {
105 |   width: 640px !important;
106 |   height: 480px !important;
107 |   transform         : translate(-660px);
108 |   -o-transform      : translate(-660px);
109 |   -ms-transform     : translate(-660px);
110 |   -moz-transform    : translate(-660px);
111 |   -webkit-transform : translate(-660px);
112 | }
113 | .swapped div#images {
114 |   width: 320px !important;
115 |   height: 240px !important;
116 |   transform         : translate(+660px);
117 |   -o-transform      : translate(+660px);
118 |   -ms-transform     : translate(+660px);
119 |   -moz-transform    : translate(+660px);
120 |   -webkit-transform : translate(+660px);
121 | }
122 | 
123 | /* Table of Contents */
124 | div.smil-toc {
125 |   width: 330px;
126 |   height: 250px;
127 |   overflow: auto;
128 |   position: absolute;
129 |   right: 25px;
130 |   top: 260px;
131 | }
132 | div.smil-toc ul {
133 |   margin: 0;
134 |   margin-top: 0.8em;
135 |   list-style-type: none;
136 | }
137 | div.smil-toc ul ul {
138 |   margin-top: 0;
139 | }
140 | div.smil-toc ul a {
141 |   /*color: white !important;*/
142 |   text-decoration: none;
143 | }
144 | div.smil-toc ul a:hover {
145 |   text-decoration: underline;
146 | }
147 | 
148 | /* timeline */
149 | .smil-controlBar {
150 |   position: absolute;
151 |   bottom: 10px;
152 |   right: 10px;
153 |   width: 1000px;
154 |   z-index: 2;
155 | }
156 | .smil-timeline, .smil-timeline a:hover span {
157 |   /*width: 810px;*/
158 | }
159 | .smil-timeSegments, .smil-timeCursor {
160 |   display: block;
161 | }
162 | .smil-timeSlider {
163 |   display: none;
164 | }
165 | 
166 | /* cross-fade transitions */
167 | .cross-fade div#images img {
168 |   opacity: 0;
169 |   transition         : opacity 1s;
170 |   -o-transition      : opacity 1s;
171 |   -moz-transition    : opacity 1s;
172 |   -webkit-transition : opacity 1s;
173 | }
174 | /*
175 | .cross-fade div#images img[smil=active],
176 | .cross-fade div#images img:first-child[smil=idle] {
177 |   opacity: 1;
178 |   z-index: 1;
179 | }
180 | */
181 | .cross-fade div#images img[smil=active] {
182 |   opacity: 1;
183 |   z-index: 1;
184 | }
185 | 
186 | /* slide-in transitions */
187 | .slide-in div#images img {
188 |   transition         :         transform 1s;
189 |   -o-transition      :      -o-transform 1s;
190 |   -moz-transition    :    -moz-transform 1s;
191 |   -webkit-transition : -webkit-transform 1s;
192 | }
193 | .slide-in div#images img[smil=idle] {
194 |   transform         : translate(0, +480px);
195 |   -o-transform      : translate(0, +480px);
196 |   -moz-transform    : translate(0, +480px);
197 |   -webkit-transform : translate(0, +480px);
198 | }
199 | .slide-in div#images img[smil=done] {
200 |   transform         : translate(0, -480px);
201 |   -o-transform      : translate(0, -480px);
202 |   -moz-transform    : translate(0, -480px);
203 |   -webkit-transform : translate(0, -480px);
204 | }
205 | 


--------------------------------------------------------------------------------
/demo/slideshow.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | 
  4 |   
  5 |    HTML Timing :: Slideshow Engine 
  6 |   
  7 |   
  8 |   
  9 |   
 10 |   
 11 | 
 12 | 
 13 |   

 14 |     

 22 | 
 23 |       

 24 |         
 Slideshows With SMIL/Timing 

 25 |         

 26 |           A <seq> time container is a good basis for a
 27 |           slideshow engine:
 28 |         

 29 |         
    
 30 |           
  • 
 31 |             each slide is a child of this main <seq> time
 32 |             container
 33 |           
    • 
 34 |           
  • 
 35 |             the first|prev|next|last attributes provide a navigation
 36 |             menu "out of the box"
 37 |           
    • 
 38 |           
  • 
 39 |             setting an ID attribute to each slide allows to use hyperlinks to get
 40 |             a direct access
 41 |           
    • 
 42 |         

 43 |       

 44 | 
 45 |       

 46 |         
 Progressive Display with <par> 

 47 |         
    
 48 |           
  •  On this slide 
    • 
 49 |           
  •  the list items 
    • 
 50 |           
  •  appear one after another 
    • 
 51 |           
  •  at 2s intervals. 
    • 
 52 |         

 53 |         

 54 |           The next slide will appear in 10s or if you click
 55 |           on the "Next" button below — whatever comes first.
 56 |         

 57 |       

 58 | 
 59 |       

 60 |         
 Incremental Display with <seq> 

 61 |         
    
 62 |           
  •  Click on this slide 
    • 
 63 |           
  •  and the list items  
    • 
 64 |           
  •  will appear         
    • 
 65 |           
  •  one after another.  
    • 
 66 |         

 67 |         

 68 |           (you still have to click the "next" button to get the next slide)
 69 |         

 70 |       

 71 | 
 72 |       

 73 |         
 Outlines with event-values 

 74 |         
    
 75 |           
  • 
 76 |             hover me
 77 |             
      
 78 |               
    •  this item is collapsed by default 
      • 
 79 |               
    •  this item is expanded when active 
      • 
 80 |             
    
 81 |           
    • 
 82 |           
  • 
 83 |             click me
 84 |             
      
 85 |               
    •  this item is collapsed by default 
      • 
 86 |               
    •  this item is expanded when active 
      • 
 87 |             
    
 88 |           
    • 
 89 |           
  • 
 90 |             click me
 91 |             
      
 92 |               
    •  this item is expanded by default 
      • 
 93 |               
    •  this item is collapsed when active 
      • 
 94 |             
    
 95 |           
    • 
 96 |         

 97 |       

 98 | 
 99 |       

100 |         
 And More! 

101 |         
    
102 |           
  • 
103 |             define your own transitions with CSS3
104 |           
    • 
105 |           
  • 
106 |             define user interactions with event-values
108 |           
    • 
109 |           
  • 
110 |             include audio|video clips in any slide
111 |           
    • 
112 |           
  • 
113 |             sync your slides with an audio or video track
114 |           
    • 
115 |         

116 |         

117 |           A slideshow alone doesn’t bring much information, but it can get much
118 |           more useful when the speaker’s voice is sync’ed!
119 |         

120 |       

121 | 
122 |       

123 |         
124 |         
125 |         
126 |         
127 |       

128 | 
129 |     

130 |   

131 | 
132 |   

133 |     CSS transition:
134 |      |
136 |      |
138 |      |
140 |      |
142 |      |
144 |     
146 |   

147 | 
148 | 
149 | 


--------------------------------------------------------------------------------
/demo/video.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | 
  4 |   
  5 |    HTML Timing :: HTML Subtitles 
  6 |   
  7 |   
  8 |   
 21 |   
 22 |   
 48 | 
 49 | 
 50 |   

 51 |     

 52 | 
 53 |       
 64 | 
 65 |       

 66 |         
 67 |       

 68 | 
 69 |       

 70 |         As an open source project and community, 

 71 |         we need your feedback
 72 |         to make the next generation browser.
 73 |       

 74 |       

 75 |         Meet some of the team that has been hard at work 

 76 |         on the Firefox 4 project.
 77 |       

 78 |       

 79 |         I work on Web Standards like HTML 5, File APIs and IndexedDB.
 80 |       

 81 |       

 82 |         We’re going to make the best and most secure browser out there!
 83 |       

 84 |       

 85 |         We work on testing Firefox 4 beta. 

 86 |         We’d like to know what you think, we’d like your feedback.
 87 |       

 88 |       

 89 |         You’re going to notice a feedback button 

 90 |         on the upper-right corner of your browser…
 91 |       

 92 |       

 93 |         …that you can use to tell us 

 94 |         what you like and don’t like about Firefox 4.
 95 |       

 96 |       

 97 |         Let me know what you think.
 98 |       

 99 |       

100 |         Im working on the Firefox 4 beta program.
101 |       

102 |       

103 |         I work on content security policy for Firefox 4.
104 |       

105 |       

106 |         We work on crash bugs.
107 |       

108 |       

109 |         I’m David and I work on developer tools for Firefox 4, 

110 |         and I’d really like to know what you think.
111 |       

112 |       

113 |         We need as much feedback as possible.
114 |       

115 |       

116 |         I work on the Firefox 4 Sync servers.
117 |       

118 |       

119 |         Firefox Sync lets you take your Firefox experience with you 

120 |         wherever you go.
121 |       

122 |       

123 |         And we’re really looking forward to your feedback.
124 |       

125 |       

126 |         I work on JetPack, which is a project 

127 |         to make it easier to build Add-Ons and to make Add-Ons easier to use.
128 |       

129 |       

130 |         I worked on the new Add-ons manager in Firefox 4.
131 |       

132 |       

133 |         We’d really like to know your feedback 

134 |         about what you love and hate about Firefox 4, so let us know.
135 |       

136 |       

137 |         Please help us and make Firefox better!
138 |       

139 |       

140 |         We need your feedback.
141 |       

142 | 
143 |     

144 |   

145 | 
146 | 
147 | 


--------------------------------------------------------------------------------
/slideshow/js/slideshow.js:
--------------------------------------------------------------------------------
  1 | function fillPreNodes(href) {
  2 |   var nodes = document.getElementsByTagName("pre");
  3 | 
  4 |   // OLDIE: Internet Explorer 6/7/8
  5 |   // couldn't find a proper way to use an XML document with that crap
  6 |   // so here's an *ugly* text-based hack :-/
  7 |   if (window.ActiveXObject) {
  8 |     xhr = new ActiveXObject("Microsoft.XMLHTTP");
  9 |     xhr.open("GET", href, true);
 10 |     xhr.onreadystatechange = function() {
 11 |       if (xhr.readyState == 4) {
 12 |         var innerHTML = xhr.responseText; // .replace(/[\r\n]*/, "\r\n");
 13 |         for (var i = 0; i < nodes.length; i++) {
 14 |           var id = nodes[i].id;
 15 |           if (id) {
 16 |             var index  = innerHTML.indexOf('
/, "");
 20 |               index  = markup.indexOf("
");
 21 |               markup = markup.substring(0, index);
 22 |               markup = markup.replace(/ /g, " ");
 23 |               markup = markup.replace(/ class/g, " class");
 24 |               markup = markup.split("\n").join("
");
 25 |               nodes[i].innerHTML = markup;
 26 |             } else {
 27 |               index  = markup.indexOf("
") + 6;
 28 |               markup = markup.substring(0, index);
 29 |               nodes[i].outerHTML = markup;
 30 |             }
 31 |           }
 32 |         }
 33 |       }
 34 |     };
 35 |     xhr.send(null);
 36 |   }
 37 | 
 38 |   // modern browsers
 39 |   // note that Chrome won't allow loading any local timesheet with XHR
 40 |   else if (window.XMLHttpRequest) {
 41 |     xhr = new XMLHttpRequest();
 42 |     xhr.overrideMimeType("text/xml");
 43 |     xhr.open("GET", href, true);
 44 |     xhr.onreadystatechange = function() {
 45 |       if (xhr.readyState == 4) {
 46 |         var xmlDoc = xhr.responseXML;
 47 |         for (var i = 0; i < nodes.length; i++) {
 48 |           var id = nodes[i].id;
 49 |           if (id) {
 50 |             var markup = xmlDoc.getElementById(id).innerHTML;
 51 |             //if (/\/.test(markup)) {
 52 |               //alert(markup);
 53 |               markup = markup.replace(/^    /g, "");
 54 |               markup = markup.replace(/\s*$/, "");
 55 |             //}
 56 |             nodes[i].innerHTML = markup;
 57 |           }
 58 |         }
 59 |       }
 60 |     };
 61 |     xhr.send(null);
 62 |   }
 63 | }
 64 | 
 65 | // experimental: ToC + keyboard navigation
 66 | EVENTS.onSMILReady(function() {
 67 |   var slideshow   = document.getElementById("slideshow");
 68 |   if (!slideshow || !slideshow.timing) return;
 69 | 
 70 |   // fill 
 nodes
 71 |   fillPreNodes("markup.xhtml");
 72 | 
 73 |   // Table of Contents
 74 |   var tocButton = document.getElementById("toc");
 75 |   var tocList   = document.getElementsByTagName("nav").item(0)
 76 |                           .getElementsByTagName("ol").item(0);
 77 | 
 78 |   // add custom keyboard shortcuts for the slideshow player
 79 |   var firstButton = slideshow.timing.first;
 80 |   var prevButton  = slideshow.timing.prev;
 81 |   var nextButton  = slideshow.timing.next;
 82 |   var lastButton  = slideshow.timing.last;
 83 | 
 84 |   EVENTS.bind(document, "keydown", function(e) {
 85 |     if (e.altKey || e.metaKey || e.cmdKey || e.ctrlKey)
 86 |       return;
 87 |     switch(e.keyCode) {
 88 |       case 36: // home key
 89 |         EVENTS.preventDefault(e);
 90 |         EVENTS.trigger(firstButton, "click");
 91 |         break;
 92 |       case 37: // left arrow key
 93 |         EVENTS.preventDefault(e);
 94 |         EVENTS.trigger(prevButton, "click");
 95 |         break;
 96 |       case 39: // right arrow key
 97 |         EVENTS.preventDefault(e);
 98 |         EVENTS.trigger(nextButton, "click");
 99 |         break;
100 |       case 35: // end key
101 |         EVENTS.preventDefault(e);
102 |         EVENTS.trigger(lastButton, "click");
103 |         break;
104 |       case 32: // spacebar
105 |         EVENTS.preventDefault(e);
106 |         if (e.shiftKey)
107 |           EVENTS.trigger(prevButton, "click");
108 |         else
109 |           EVENTS.trigger(nextButton, "click");
110 |         break;
111 |       case 38: // up arrow key
112 |         EVENTS.preventDefault(e);
113 |         tocList.style.color = "";
114 |         EVENTS.trigger(tocButton, "click");
115 |         break;
116 |       case 40: // down arrow key
117 |         EVENTS.preventDefault(e);
118 |         tocList.style.color = "red";
119 |         EVENTS.trigger(tocButton, "click");
120 |         break;
121 |       default:
122 |         break;
123 |     }
124 |   });
125 | 
126 |   // update the hash when possible
127 |   var index = 0;
128 |   var count = slideshow.timing.timeNodes.length;
129 |   for (var i = 0; i < slideshow.childNodes.length; i++) {
130 |     var slide = slideshow.childNodes[i];
131 |     if ((slide.nodeType == 1) && slide.id) {
132 |       index ++;
133 |       slide.index = index;
134 |       EVENTS.bind(slide, "begin", function() {
135 |         document.location.hash = "#" + this.id;
136 |         try {
137 |           tocButton.innerHTML = (this.index + "/" + count);
138 |           document.getElementById("active").removeAttribute("id");
139 |         } catch(e) {}
140 |         this.tocItem.setAttribute("id", "active");
141 |       });
142 |       // TODO: table of contents
143 |       var titleNode = document.querySelector("#" + slide.id + " h2");
144 |       var title = titleNode ? titleNode.firstChild.nodeValue : "(untitled)";
145 |       var li = document.createElement("li");
146 |       var a  = document.createElement("a");
147 |       var tn = document.createTextNode(title);
148 |       // hide ToC entry if untitled
149 |       if (!titleNode) {
150 |         li.style.height = 0;
151 |         li.style.visibility = "hidden";
152 |       }
153 |       a.setAttribute("href", "#" + slide.id);
154 |       a.appendChild(tn);
155 |       li.appendChild(a);
156 |       tocList.appendChild(li);
157 |       slide.tocItem = li;
158 |     }
159 |     /* TODO: table of contents
160 |     if (slide.nodeType == 1) { // Node.ELEMENT_NODE
161 |       var titleNode = slide.querySelector("h1, h2, h3");
162 |       var title = titleNode ? titleNode.firstChild.nodeValue : "(untitled)";
163 |       console.log("  title: " + title);
164 |     } */
165 |   }
166 | });
167 | 


--------------------------------------------------------------------------------
/demo/style/transitions.css:
--------------------------------------------------------------------------------
  1 | #demo {
  2 |   overflow: hidden;
  3 | }
  4 | 
  5 | /*****************************************************************************\
  6 | |                                                                             |
  7 | |  CSS3 Transitions                                                           |
  8 | |                                                                             |
  9 | |*****************************************************************************|
 10 | |                                                                             |
 11 | |  'transform' and 'transition' rules are supported by these browsers:        |
 12 | |    Firefox 4+                                                               |
 13 | |    Chrome 5+                                                                |
 14 | |    Safari 4+                                                                |
 15 | |    Opera 10.6+                                                              |
 16 | |                                                                             |
 17 | |  => on other browsers, only the 'opacity' rule would apply                  |
 18 | |                                                                             |
 19 | \*****************************************************************************/
 20 | 
 21 | /*#slideshow > *,*/
 22 | /*#slideshow .transition * {*/
 23 |   /*transition         : all 0.5s;*/
 24 |   /*-o-transition      : all 0.5s;*/
 25 |   /*-moz-transition    : all 0.5s;*/
 26 |   /*-webkit-transition : all 0.5s;*/
 27 | /*}*/
 28 | #slideshow * {
 29 |   transition         : all 1s;
 30 |   -o-transition      : all 1s;
 31 |   -moz-transition    : all 1s;
 32 |   -webkit-transition : all 1s;
 33 |   /*transition         : opacity 1s,         transform 1s;*/
 34 |   /*-o-transition      : opacity 1s,      -o-transform 1s;*/
 35 |   /*-moz-transition    : opacity 1s,    -moz-transform 1s;*/
 36 |   /*-webkit-transition : opacity 1s, -webkit-transform 1s;*/
 37 | }
 38 | 
 39 | /* cross-fade effect */
 40 | .crossfade #slideshow > *[smil=idle],
 41 | .crossfade #slideshow > .transition *[smil=idle],
 42 | #slideshow > .crossfade *[smil=idle] {
 43 |   opacity: 0;
 44 | }
 45 | .crossfade #slideshow > *[smil=done],
 46 | .crossfade #slideshow > .transition *[smil=done],
 47 | #slideshow > .crossfade *[smil=done] {
 48 |   opacity: 0;
 49 | }
 50 | .crossfade #slideshow > *[smil=active],
 51 | .crossfade #slideshow > .transition *[smil=active],
 52 | #slideshow > .crossfade *[smil=active] {
 53 |   opacity: 1;
 54 |   z-index: 1;
 55 | }
 56 | 
 57 | 
 58 | /* carousel effect */
 59 | .carousel #slideshow > *[smil=idle],
 60 | .carousel #slideshow > .transition *[smil=idle] {
 61 |   opacity: 0;
 62 |   transform         : scale(0.3) translate(+220%);
 63 |   -o-transform      : scale(0.3) translate(+220%);
 64 |   -moz-transform    : scale(0.3) translate(+220%);
 65 |   -webkit-transform : scale(0.3) translate(+220%);
 66 | }
 67 | .carousel #slideshow > *[smil=done],
 68 | .carousel #slideshow > .transition *[smil=done] {
 69 |   opacity: 0;
 70 |   transform         : scale(0.3) translate(-220%);
 71 |   -o-transform      : scale(0.3) translate(-220%);
 72 |   -moz-transform    : scale(0.3) translate(-220%);
 73 |   -webkit-transform : scale(0.3) translate(-220%);
 74 | }
 75 | .carousel #slideshow > *[smil=active],
 76 | .carousel #slideshow > .transition *[smil=active] {
 77 |   opacity: 1;
 78 | }
 79 | 
 80 | 
 81 | /* fade-through effect */
 82 | .fadethrough #slideshow > *[smil=idle] {
 83 |   opacity: 0;
 84 | }
 85 | .fadethrough #slideshow > *[smil=done] {
 86 |   opacity: 0;
 87 |   transform         : scale(1.5) translate(0, -10%);
 88 |   -o-transform      : scale(1.5) translate(0, -10%);
 89 |   -moz-transform    : scale(1.5) translate(0, -10%);
 90 |   -webkit-transform : scale(1.5) translate(0, -10%);
 91 | }
 92 | .fadethrough #slideshow > *[smil=active] {
 93 |   opacity: 1;
 94 |   z-index: 1;
 95 | }
 96 | 
 97 | 
 98 | /* slide-in effect */
 99 | .slide #slideshow > *[smil=idle] {
100 |   transform         : translate(+120% ,0);
101 |   -o-transform      : translate(+120% ,0);
102 |   -moz-transform    : translate(+120% ,0);
103 |   -webkit-transform : translate(+120% ,0);
104 | }
105 | .slide #slideshow > *[smil=done] {
106 |   transform         : translate(-120% ,0);
107 |   -o-transform      : translate(-120% ,0);
108 |   -moz-transform    : translate(-120% ,0);
109 |   -webkit-transform : translate(-120% ,0);
110 | }
111 | 
112 | 
113 | /* toss effect */
114 | .toss #slideshow > *[smil=done] {
115 |   opacity: 0;
116 | }
117 | .toss #slideshow > *[smil=idle] {
118 |   opacity: 0;
119 |   transform         : rotate(-30deg) translate(-80px, -240px);
120 |   -o-transform      : rotate(-30deg) translate(-80px, -240px);
121 |   -moz-transform    : rotate(-30deg) translate(-80px, -240px);
122 |   -webkit-transform : rotate(-30deg) translate(-80px, -240px);
123 | }
124 | .toss #slideshow > *[smil=active] {
125 |   opacity: 1;
126 | }
127 | 
128 | 
129 | /* disable all transitions */
130 | .none #slideshow > * {
131 |   visibility: hidden;
132 |   transition         : none;
133 |   -o-transition      : none;
134 |   -moz-transition    : none;
135 |   -webkit-transition : none;
136 | }
137 | .none #slideshow > *[smil=active] {
138 |   visibility: visible;
139 | }
140 | 
141 | 
142 | /*****************************************************************************\
143 | |                                                                             |
144 | |  Transition Selector                                                        |
145 | |                                                                             |
146 | \*****************************************************************************/
147 | 
148 | #transitionSelector {
149 |   width: 640px;
150 |   margin: 0 auto;
151 |   padding-right: 2em;
152 |   text-align: right;
153 |   font-size: 0.8em;
154 |   user-select         : none;
155 |   -o-user-select      : none;
156 |   -moz-user-select    : none;
157 |   -webkit-user-select : none;
158 | }
159 | #transitionSelector button {
160 |   cursor: pointer;
161 |   color: navy;
162 |   border: none;
163 |   background: none;
164 |   padding: 0;
165 | }
166 | #transitionSelector button:hover {
167 |   text-decoration: underline;
168 | }
169 | .none        button.none,
170 | .crossfade   button.crossfade,
171 | .carousel    button.carousel,
172 | .fadethrough button.fadethrough,
173 | .slide       button.slide,
174 | .toss        button.toss {
175 |   text-decoration: underline;
176 |   color: brown !important;
177 | }
178 | 
179 | 


--------------------------------------------------------------------------------
/xpi/chrome/skin/classic/timeline.css:
--------------------------------------------------------------------------------
  1 | /*- ***** BEGIN LICENSE BLOCK *****
  2 |   - Version: MPL 1.1/GPL 2.0/LGPL 2.1
  3 |   -
  4 |   - The contents of this file are subject to the Mozilla Public License Version
  5 |   - 1.1 (the "License"); you may not use this file except in compliance with
  6 |   - the License. You may obtain a copy of the License at
  7 |   - http://www.mozilla.org/MPL/
  8 |   -
  9 |   - Software distributed under the License is distributed on an "AS IS" basis,
 10 |   - WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 11 |   - for the specific language governing rights and limitations under the
 12 |   - License.
 13 |   -
 14 |   - The Original Code is Timesheet Composer.
 15 |   -
 16 |   - The Initial Developer of the Original Code is INRIA.
 17 |   - Portions created by the Initial Developer are Copyright (C) 2010-2011
 18 |   - the Initial Developer. All Rights Reserved.
 19 |   -
 20 |   - Contributor(s):
 21 |   -    Fabien Cazenave 
 22 |   -
 23 |   - Alternatively, the contents of this file may be used under the terms of
 24 |   - either the GNU General Public License Version 2 or later (the "GPL"), or
 25 |   - the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
 26 |   - in which case the provisions of the GPL or the LGPL are applicable instead
 27 |   - of those above. If you wish to allow use of your version of this file only
 28 |   - under the terms of either the GPL or the LGPL, and not to allow others to
 29 |   - use your version of this file under the terms of the MPL, indicate your
 30 |   - decision by deleting the provisions above and replace them with the notice
 31 |   - and other provisions required by the LGPL or the GPL. If you do not delete
 32 |   - the provisions above, a recipient may use your version of this file under
 33 |   - the terms of any one of the MPL, the GPL or the LGPL.
 34 |   -
 35 |   - ***** END LICENSE BLOCK *****/
 36 | 
 37 | textbox[type="time"] {
 38 |   -moz-binding: url("chrome://timesheets/content/timeline.xml#timebox");
 39 | }
 40 | waveform {
 41 |   -moz-binding: url("chrome://timesheets/content/timeline.xml#waveform");
 42 | }
 43 | 
 44 | /*******************************************************************************
 45 |   * waveform
 46 |   *****************************************************************************/
 47 | 
 48 | /* timeline */
 49 | [anonid="timeline"] {
 50 |   position: relative;
 51 |   height: 80px; /* apply if the scrollbar is in the 
 block */
 52 |   height: 60px;
 53 | }
 54 | canvas {
 55 |   position: absolute;
 56 |   left: 0;
 57 |   z-index: 2;
 58 |   width: 100%;
 59 | }
 60 | canvas[anonid="pcmGraph"] {
 61 |   top: 0px;
 62 |   height: 60px;
 63 | }
 64 | canvas[anonid="pcmZoom"] {
 65 |   top: 60px;
 66 |   height: 20px;
 67 | }
 68 | 
 69 | /* cursor */
 70 | div[anonid="timePos"], div[anonid="timeSpan"] {
 71 |   position: absolute;
 72 |   top: 0px;
 73 |   left: 0;
 74 |   height: 58px;
 75 |   width: 0;
 76 | }
 77 | div[anonid="timePos"] {
 78 |   z-index: 1;
 79 |   border-left: 1px solid navy;
 80 | }
 81 | div[anonid="timeSpan"] {
 82 |   border: 1px solid brown;
 83 |   background-color: #fcc;
 84 | }
 85 | span[anonid="time"] {
 86 |   float: left;
 87 |   color: brown;
 88 | }
 89 | 
 90 | /* scrollbar
 91 | slider {
 92 |   background-color: red;
 93 |   min-height: 8px;
 94 |   width: 100%;
 95 | }
 96 | slider thumb {
 97 |   border: 2px solid;
 98 |   -moz-appearance: scrollbarthumb-horizontal;
 99 |   min-width: 8px;
100 |   min-height: 8px;
101 | }
102 | */
103 | /*
104 | thumb {
105 |   background-image: url("chrome://global/skin/arrow/thumb-vrt.gif");
106 |   min-height: 17px;
107 |   min-width: 0;
108 | }
109 | thumb:active,
110 | scrollbarbutton:hover:active,
111 | scrollbarbutton[active="true"] {
112 |   -moz-border-top-colors:    ThreeDDarkShadow ThreeDShadow;
113 |   -moz-border-right-colors:  ThreeDHighlight  ThreeDHighlight;
114 |   -moz-border-bottom-colors: ThreeDHighlight  ThreeDHighlight;
115 |   -moz-border-left-colors:   ThreeDDarkShadow ThreeDShadow;
116 | }
117 | thumb[orient="horizontal"] {
118 |   background-image: url("chrome://global/skin/arrow/thumb-hrz.gif");
119 |   min-height: 0;
120 |   min-width: 17px;
121 | }
122 | */
123 | 
124 | 
125 | /*******************************************************************************
126 |   * timeController
127 |   *****************************************************************************/
128 | 
129 | [anonid="mediaTime"] {
130 |   width: 60px;
131 |   text-align: right;
132 | }
133 | 
134 | /* timeController :: toolbar */
135 | [anonid="toolbar"] {
136 |   /*outline: 1px solid brown;*/
137 | }
138 | [anonid="mediaPlay"] {
139 |   list-style-image: url("chrome://timesheets/skin/24/player_play.png");
140 | }
141 | [anonid="mediaPause"] {
142 |   list-style-image: url("chrome://timesheets/skin/24/player_pause.png");
143 | }
144 | [anonid="zoomFit"] {
145 |   list-style-image: url("chrome://timesheets/skin/24/gtk-zoom-fit.png");
146 | }
147 | [anonid="zoomIn"] {
148 |   list-style-image: url("chrome://timesheets/skin/24/gtk-zoom-in.png");
149 | }
150 | [anonid="zoomOut"] {
151 |   list-style-image: url("chrome://timesheets/skin/24/gtk-zoom-out.png");
152 | }
153 | 
154 | .playing [anonid="mediaPlay"],
155 | .pause   [anonid="mediaPause"] {
156 |   display: none;
157 | }
158 | 
159 | /*******************************************************************************
160 |   * timeContainer
161 |   *****************************************************************************/
162 | 
163 | /* timeContainer :: toolbar */
164 | [anonid="sort"] {
165 |   list-style-image: url("chrome://timesheets/skin/16/gtk-sort-ascending.png");
166 | }
167 | 
168 | /* timeContainer :: segments */
169 | [anonid="segments"] {
170 |   position: relative;
171 |   width: 100%;
172 |   height: 34px;
173 |   /*margin-top: 60px;*/
174 |   background-color: white;
175 |   border: 1px solid #ddd;
176 | }
177 | [anonid="segments"] > * {
178 |   position: absolute;
179 |   top: 0;
180 |   background-color: #99f;
181 |   outline: 1pt dashed navy;
182 |   overflow: hidden;
183 |   width: 50px; /* default width, will be overridden */
184 |   height: 32px;
185 |   /*cursor: move;*/
186 |   cursor: pointer;
187 |   opacity: 0.6;
188 | }
189 | [anonid="segments"] > *.active {
190 |   background-color: #f99;
191 |   outline-color: brown;
192 |   z-index: 1;
193 | }
194 | [anonid="segments"] > *:hover {
195 |   /*background-color: #bbf;*/
196 |   /*opacity: 1;*/
197 |   outline-style: solid;
198 | }
199 | [anonid="segments"] div.handle-left,
200 | [anonid="segments"] div.handle-right {
201 |   position: absolute;
202 |   top: 0;
203 |   width: 5px;
204 |   height: 32px;
205 | }
206 | [anonid="segments"] div.handle-left {
207 |   left: 0;
208 |   cursor: w-resize;
209 | }
210 | [anonid="segments"] div.handle-right {
211 |   right: 0;
212 |   cursor: e-resize;
213 | }
214 | 
215 | 


--------------------------------------------------------------------------------
/xpi/chrome/content/bindings/timeline.css:
--------------------------------------------------------------------------------
  1 | /*- ***** BEGIN LICENSE BLOCK *****
  2 |   - Version: MPL 1.1/GPL 2.0/LGPL 2.1
  3 |   -
  4 |   - The contents of this file are subject to the Mozilla Public License Version
  5 |   - 1.1 (the "License"); you may not use this file except in compliance with
  6 |   - the License. You may obtain a copy of the License at
  7 |   - http://www.mozilla.org/MPL/
  8 |   -
  9 |   - Software distributed under the License is distributed on an "AS IS" basis,
 10 |   - WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 11 |   - for the specific language governing rights and limitations under the
 12 |   - License.
 13 |   -
 14 |   - The Original Code is Timesheet Composer.
 15 |   -
 16 |   - The Initial Developer of the Original Code is INRIA.
 17 |   - Portions created by the Initial Developer are Copyright (C) 2010-2011
 18 |   - the Initial Developer. All Rights Reserved.
 19 |   -
 20 |   - Contributor(s):
 21 |   -    Fabien Cazenave 
 22 |   -
 23 |   - Alternatively, the contents of this file may be used under the terms of
 24 |   - either the GNU General Public License Version 2 or later (the "GPL"), or
 25 |   - the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
 26 |   - in which case the provisions of the GPL or the LGPL are applicable instead
 27 |   - of those above. If you wish to allow use of your version of this file only
 28 |   - under the terms of either the GPL or the LGPL, and not to allow others to
 29 |   - use your version of this file under the terms of the MPL, indicate your
 30 |   - decision by deleting the provisions above and replace them with the notice
 31 |   - and other provisions required by the LGPL or the GPL. If you do not delete
 32 |   - the provisions above, a recipient may use your version of this file under
 33 |   - the terms of any one of the MPL, the GPL or the LGPL.
 34 |   -
 35 |   - ***** END LICENSE BLOCK *****/
 36 | 
 37 | textbox[type="time"] {
 38 |   -moz-binding: url("chrome://timesheets/content/timeline.xml#timebox");
 39 | }
 40 | waveform {
 41 |   -moz-binding: url("chrome://timesheets/content/timeline.xml#waveform");
 42 | }
 43 | 
 44 | /*******************************************************************************
 45 |   * waveform
 46 |   *****************************************************************************/
 47 | 
 48 | /* timeline */
 49 | [anonid="timeline"] {
 50 |   position: relative;
 51 |   height: 80px; /* apply if the scrollbar is in the 
 block */
 52 |   height: 60px;
 53 | }
 54 | canvas {
 55 |   position: absolute;
 56 |   left: 0;
 57 |   z-index: 2;
 58 |   width: 100%;
 59 | }
 60 | canvas[anonid="pcmGraph"] {
 61 |   top: 0px;
 62 |   height: 60px;
 63 | }
 64 | canvas[anonid="pcmZoom"] {
 65 |   top: 60px;
 66 |   height: 20px;
 67 | }
 68 | 
 69 | /* cursor */
 70 | div[anonid="timePos"], div[anonid="timeSpan"] {
 71 |   position: absolute;
 72 |   top: 0px;
 73 |   left: 0;
 74 |   height: 58px;
 75 |   width: 0;
 76 | }
 77 | div[anonid="timePos"] {
 78 |   z-index: 1;
 79 |   border-left: 1px solid navy;
 80 | }
 81 | div[anonid="timeSpan"] {
 82 |   border: 1px solid brown;
 83 |   background-color: #fcc;
 84 | }
 85 | span[anonid="time"] {
 86 |   float: left;
 87 |   color: brown;
 88 | }
 89 | 
 90 | /* scrollbar
 91 | slider {
 92 |   background-color: red;
 93 |   min-height: 8px;
 94 |   width: 100%;
 95 | }
 96 | slider thumb {
 97 |   border: 2px solid;
 98 |   -moz-appearance: scrollbarthumb-horizontal;
 99 |   min-width: 8px;
100 |   min-height: 8px;
101 | }
102 | */
103 | /*
104 | thumb {
105 |   background-image: url("chrome://global/skin/arrow/thumb-vrt.gif");
106 |   min-height: 17px;
107 |   min-width: 0;
108 | }
109 | thumb:active,
110 | scrollbarbutton:hover:active,
111 | scrollbarbutton[active="true"] {
112 |   -moz-border-top-colors:    ThreeDDarkShadow ThreeDShadow;
113 |   -moz-border-right-colors:  ThreeDHighlight  ThreeDHighlight;
114 |   -moz-border-bottom-colors: ThreeDHighlight  ThreeDHighlight;
115 |   -moz-border-left-colors:   ThreeDDarkShadow ThreeDShadow;
116 | }
117 | thumb[orient="horizontal"] {
118 |   background-image: url("chrome://global/skin/arrow/thumb-hrz.gif");
119 |   min-height: 0;
120 |   min-width: 17px;
121 | }
122 | */
123 | 
124 | 
125 | /*******************************************************************************
126 |   * timeController
127 |   *****************************************************************************/
128 | 
129 | [anonid="mediaTime"] {
130 |   width: 60px;
131 |   text-align: right;
132 | }
133 | 
134 | /* timeController :: toolbar */
135 | [anonid="toolbar"] {
136 |   /*outline: 1px solid brown;*/
137 | }
138 | [anonid="mediaPlay"] {
139 |   list-style-image: url("chrome://timesheets/skin/24/player_play.png");
140 | }
141 | [anonid="mediaPause"] {
142 |   list-style-image: url("chrome://timesheets/skin/24/player_pause.png");
143 | }
144 | [anonid="zoomFit"] {
145 |   list-style-image: url("chrome://timesheets/skin/24/gtk-zoom-fit.png");
146 | }
147 | [anonid="zoomIn"] {
148 |   list-style-image: url("chrome://timesheets/skin/24/gtk-zoom-in.png");
149 | }
150 | [anonid="zoomOut"] {
151 |   list-style-image: url("chrome://timesheets/skin/24/gtk-zoom-out.png");
152 | }
153 | 
154 | .playing [anonid="mediaPlay"],
155 | .pause   [anonid="mediaPause"] {
156 |   display: none;
157 | }
158 | 
159 | /*******************************************************************************
160 |   * timeContainer
161 |   *****************************************************************************/
162 | 
163 | /* timeContainer :: toolbar */
164 | [anonid="sort"] {
165 |   list-style-image: url("chrome://timesheets/skin/16/gtk-sort-ascending.png");
166 | }
167 | 
168 | /* timeContainer :: segments */
169 | [anonid="segments"] {
170 |   position: relative;
171 |   width: 100%;
172 |   height: 34px;
173 |   /*margin-top: 60px;*/
174 |   background-color: white;
175 |   border: 1px solid #ddd;
176 | }
177 | [anonid="segments"] > * {
178 |   position: absolute;
179 |   top: 0;
180 |   background-color: #99f;
181 |   outline: 1pt dashed navy;
182 |   overflow: hidden;
183 |   width: 50px; /* default width, will be overridden */
184 |   height: 32px;
185 |   /*cursor: move;*/
186 |   cursor: pointer;
187 |   opacity: 0.6;
188 | }
189 | [anonid="segments"] > *.active {
190 |   background-color: #f99;
191 |   outline-color: brown;
192 |   z-index: 1;
193 | }
194 | [anonid="segments"] > *:hover {
195 |   /*background-color: #bbf;*/
196 |   /*opacity: 1;*/
197 |   outline-style: solid;
198 | }
199 | [anonid="segments"] div.handle-left,
200 | [anonid="segments"] div.handle-right {
201 |   position: absolute;
202 |   top: 0;
203 |   width: 5px;
204 |   height: 32px;
205 | }
206 | [anonid="segments"] div.handle-left {
207 |   left: 0;
208 |   cursor: w-resize;
209 | }
210 | [anonid="segments"] div.handle-right {
211 |   right: 0;
212 |   cursor: e-resize;
213 | }
214 | 
215 | 


--------------------------------------------------------------------------------
/xpi/chrome/content/bindings/widgets.css:
--------------------------------------------------------------------------------
  1 | /*- ***** BEGIN LICENSE BLOCK *****
  2 |   - Version: MPL 1.1/GPL 2.0/LGPL 2.1
  3 |   -
  4 |   - The contents of this file are subject to the Mozilla Public License Version
  5 |   - 1.1 (the "License"); you may not use this file except in compliance with
  6 |   - the License. You may obtain a copy of the License at
  7 |   - http://www.mozilla.org/MPL/
  8 |   -
  9 |   - Software distributed under the License is distributed on an "AS IS" basis,
 10 |   - WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 11 |   - for the specific language governing rights and limitations under the
 12 |   - License.
 13 |   -
 14 |   - The Original Code is Timesheet Composer.
 15 |   -
 16 |   - The Initial Developer of the Original Code is INRIA.
 17 |   - Portions created by the Initial Developer are Copyright (C) 2010-2011
 18 |   - the Initial Developer. All Rights Reserved.
 19 |   -
 20 |   - Contributor(s):
 21 |   -    Fabien Cazenave 
 22 |   -
 23 |   - Alternatively, the contents of this file may be used under the terms of
 24 |   - either the GNU General Public License Version 2 or later (the "GPL"), or
 25 |   - the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
 26 |   - in which case the provisions of the GPL or the LGPL are applicable instead
 27 |   - of those above. If you wish to allow use of your version of this file only
 28 |   - under the terms of either the GPL or the LGPL, and not to allow others to
 29 |   - use your version of this file under the terms of the MPL, indicate your
 30 |   - decision by deleting the provisions above and replace them with the notice
 31 |   - and other provisions required by the LGPL or the GPL. If you do not delete
 32 |   - the provisions above, a recipient may use your version of this file under
 33 |   - the terms of any one of the MPL, the GPL or the LGPL.
 34 |   -
 35 |   - ***** END LICENSE BLOCK *****/
 36 | 
 37 | textbox[type="time"] {
 38 |   -moz-binding: url("chrome://timesheets/content/timeline.xml#timebox");
 39 | }
 40 | waveform {
 41 |   -moz-binding: url("chrome://timesheets/content/timeline.xml#waveform");
 42 | }
 43 | 
 44 | /*******************************************************************************
 45 |   * waveform
 46 |   *****************************************************************************/
 47 | 
 48 | /* timeline */
 49 | [anonid="timeline"] {
 50 |   position: relative;
 51 |   height: 80px; /* apply if the scrollbar is in the 
 block */
 52 |   height: 60px;
 53 | }
 54 | canvas {
 55 |   position: absolute;
 56 |   left: 0;
 57 |   z-index: 2;
 58 |   width: 100%;
 59 | }
 60 | canvas[anonid="pcmGraph"] {
 61 |   top: 0px;
 62 |   height: 60px;
 63 | }
 64 | canvas[anonid="pcmZoom"] {
 65 |   top: 60px;
 66 |   height: 20px;
 67 | }
 68 | 
 69 | /* cursor */
 70 | div[anonid="timePos"], div[anonid="timeSpan"] {
 71 |   position: absolute;
 72 |   top: 0px;
 73 |   left: 0;
 74 |   height: 58px;
 75 |   width: 0;
 76 | }
 77 | div[anonid="timePos"] {
 78 |   z-index: 1;
 79 |   border-left: 1px solid navy;
 80 | }
 81 | div[anonid="timeSpan"] {
 82 |   border: 1px solid brown;
 83 |   background-color: #fcc;
 84 | }
 85 | span[anonid="time"] {
 86 |   float: left;
 87 |   color: brown;
 88 | }
 89 | 
 90 | /* scrollbar
 91 | slider {
 92 |   background-color: red;
 93 |   min-height: 8px;
 94 |   width: 100%;
 95 | }
 96 | slider thumb {
 97 |   border: 2px solid;
 98 |   -moz-appearance: scrollbarthumb-horizontal;
 99 |   min-width: 8px;
100 |   min-height: 8px;
101 | }
102 | */
103 | /*
104 | thumb {
105 |   background-image: url("chrome://global/skin/arrow/thumb-vrt.gif");
106 |   min-height: 17px;
107 |   min-width: 0;
108 | }
109 | thumb:active,
110 | scrollbarbutton:hover:active,
111 | scrollbarbutton[active="true"] {
112 |   -moz-border-top-colors:    ThreeDDarkShadow ThreeDShadow;
113 |   -moz-border-right-colors:  ThreeDHighlight  ThreeDHighlight;
114 |   -moz-border-bottom-colors: ThreeDHighlight  ThreeDHighlight;
115 |   -moz-border-left-colors:   ThreeDDarkShadow ThreeDShadow;
116 | }
117 | thumb[orient="horizontal"] {
118 |   background-image: url("chrome://global/skin/arrow/thumb-hrz.gif");
119 |   min-height: 0;
120 |   min-width: 17px;
121 | }
122 | */
123 | 
124 | 
125 | /*******************************************************************************
126 |   * timeController
127 |   *****************************************************************************/
128 | 
129 | [anonid="mediaTime"] {
130 |   width: 60px;
131 |   text-align: right;
132 | }
133 | 
134 | /* timeController :: toolbar */
135 | [anonid="toolbar"] {
136 |   /*outline: 1px solid brown;*/
137 | }
138 | [anonid="mediaPlay"] {
139 |   list-style-image: url("chrome://timesheets/skin/24/player_play.png");
140 | }
141 | [anonid="mediaPause"] {
142 |   list-style-image: url("chrome://timesheets/skin/24/player_pause.png");
143 | }
144 | [anonid="zoomFit"] {
145 |   list-style-image: url("chrome://timesheets/skin/24/gtk-zoom-fit.png");
146 | }
147 | [anonid="zoomIn"] {
148 |   list-style-image: url("chrome://timesheets/skin/24/gtk-zoom-in.png");
149 | }
150 | [anonid="zoomOut"] {
151 |   list-style-image: url("chrome://timesheets/skin/24/gtk-zoom-out.png");
152 | }
153 | 
154 | .playing [anonid="mediaPlay"],
155 | .pause   [anonid="mediaPause"] {
156 |   display: none;
157 | }
158 | 
159 | /*******************************************************************************
160 |   * timeContainer
161 |   *****************************************************************************/
162 | 
163 | /* timeContainer :: toolbar */
164 | [anonid="sort"] {
165 |   list-style-image: url("chrome://timesheets/skin/16/gtk-sort-ascending.png");
166 | }
167 | 
168 | /* timeContainer :: segments */
169 | [anonid="segments"] {
170 |   position: relative;
171 |   width: 100%;
172 |   height: 34px;
173 |   /*margin-top: 60px;*/
174 |   background-color: white;
175 |   border: 1px solid #ddd;
176 | }
177 | [anonid="segments"] > * {
178 |   position: absolute;
179 |   top: 0;
180 |   background-color: #99f;
181 |   outline: 1pt dashed navy;
182 |   overflow: hidden;
183 |   width: 50px; /* default width, will be overridden */
184 |   height: 32px;
185 |   /*cursor: move;*/
186 |   cursor: pointer;
187 |   opacity: 0.6;
188 | }
189 | [anonid="segments"] > *.active {
190 |   background-color: #f99;
191 |   outline-color: brown;
192 |   z-index: 1;
193 | }
194 | [anonid="segments"] > *:hover {
195 |   /*background-color: #bbf;*/
196 |   /*opacity: 1;*/
197 |   outline-style: solid;
198 | }
199 | [anonid="segments"] div.handle-left,
200 | [anonid="segments"] div.handle-right {
201 |   position: absolute;
202 |   top: 0;
203 |   width: 5px;
204 |   height: 32px;
205 | }
206 | [anonid="segments"] div.handle-left {
207 |   left: 0;
208 |   cursor: w-resize;
209 | }
210 | [anonid="segments"] div.handle-right {
211 |   right: 0;
212 |   cursor: e-resize;
213 | }
214 | 
215 | 


--------------------------------------------------------------------------------
/ensLyon/playlist.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | 
  4 |   
  5 |    Le changement climatique vu par les végétaux 
  6 |   
  7 |   
  8 |   
  9 |   
 14 |   
 15 |   
 16 | 
 17 | 
 18 |   

 19 |     
 22 |     
 Le changement climatique vu par les végétaux 

 23 |     
 Bernard Seguin, Institut National de Recherche Agronomique. 

 24 |   

 25 | 
 26 |   

 27 |     
 28 | 
 29 |     

 30 |       diapo01
 31 |       diapo02
 32 |       diapo03
 33 |       diapo04
 34 |       diapo05
 35 |       diapo06
 36 |       diapo07
 37 |       diapo08
 38 |       diapo09
 39 |       diapo10
 40 |       diapo11
 41 |       diapo12
 42 |       diapo13
 43 |       diapo14
 44 |       diapo15
 45 |       diapo16
 46 |       diapo17
 47 |       diapo18
 48 |       diapo19
 49 |       diapo20
 50 |       diapo21
 51 |       diapo22
 52 |       diapo23
 53 |       diapo24
 54 |       diapo25
 55 |       diapo26
 56 |       diapo27
 57 |       diapo28
 58 |       diapo29
 59 |       diapo30
 60 |       diapo31
 61 |       diapo32
 62 |       diapo33
 63 |       diapo34
 64 |       diapo35
 65 |       diapo36
 66 |       diapo37
 67 |       
 71 |     

 72 | 
 73 |     
 81 |     
 86 | 
 87 |     
128 |   

129 | 
130 |   

131 |     

132 |       Conférence Formaterre du 26 octobre 2007
133 |     

134 |     

135 |       Post-production : Gérard Vidal
136 |       — Synchronisation : timesheets.js
138 |       — © 2007 ENS-Lyon
139 |     

140 |   

141 | 
142 | 
143 | 


--------------------------------------------------------------------------------
/timesheets-navigation.js:
--------------------------------------------------------------------------------
  1 | /* Copyright (c) 2011 Fabien Cazenave, INRIA 
  2 |  *
  3 |  * Permission is hereby granted, free of charge, to any person obtaining a copy
  4 |  * of this software and associated documentation files (the "Software"), to deal
  5 |  * in the Software without restriction, including without limitation the rights
  6 |  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  7 |  * copies of the Software, and to permit persons to whom the Software is
  8 |  * furnished to do so, subject to the following conditions:
  9 |  *
 10 |  * The above copyright notice and this permission notice shall be included in
 11 |  * all copies or substantial portions of the Software.
 12 |  *
 13 |  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 14 |  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 15 |  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 16 |  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 17 |  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 18 |  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 19 |  * THE SOFTWARE.
 20 |  */
 21 | 
 22 | /*
 23 |  * author      : Fabien Cazenave (:kaze)
 24 |  * contact     : fabien.cazenave@inria.fr, kaze@kompozer.net
 25 |  * license     : MIT
 26 |  * version     : 0.4.1
 27 |  * last change : 2011-03-30
 28 |  */
 29 | 
 30 | (function(){
 31 | 
 32 | /*****************************************************************************\
 33 | |                                                                             |
 34 | | This library adds 'navigation' support to timesheets.js.                    |
 35 | |                                                                             |
 36 | | As this is *NOT* part of the SMIL/Timing recommendation:                    |
 37 | |   * the microformat syntax is likely to change in upcoming versions         |
 38 | |   * this can be rather easily extended to support additional features       |
 39 | |                                                                             |
 40 | \*****************************************************************************/
 41 | 
 42 | function bindNavControls(timeContainer, navigation) {
 43 |   function hasControl(control) {
 44 |     var re = new RegExp("(^|[\\s;]+)" + control + "([\\s;]+|$)", "i");
 45 |     return re.test(navigation);
 46 |   }
 47 | 
 48 |   // get slideshow node
 49 |   var slideshow = timeContainer.target; // works fine with inline timing but...
 50 |   if (!slideshow) // ...sometimes the timeContainer is defined in a timesheet
 51 |     slideshow = timeContainer.timeNodes[0].target.parentNode;
 52 | 
 53 |   // keyboard events: http://unixpapa.com/js/key.html
 54 |   if (hasControl("arrows")) EVENTS.bind(document, "keydown", function(e) {
 55 |     var index = timeContainer.currentIndex;     // index of the current slide
 56 |     var count = timeContainer.timeNodes.length; // number of slides
 57 |     var slide = timeContainer.timeNodes[index]; // current slide
 58 |     switch(e.keyCode) {
 59 |       case 32: // spacebar => next/prev slide
 60 |         EVENTS.preventDefault(e);
 61 |         if (e.shiftKey)
 62 |           timeContainer.selectIndex(index - 1);
 63 |         else
 64 |           timeContainer.selectIndex(index + 1);
 65 |         break;
 66 |       case 35: // end key => last slide
 67 |         EVENTS.preventDefault(e);
 68 |         timeContainer.selectIndex(count - 1);
 69 |         break;
 70 |       case 36: // home key => first slide
 71 |         EVENTS.preventDefault(e);
 72 |         timeContainer.selectIndex(0);
 73 |         break;
 74 |       case 37: // left arrow key => previous slide
 75 |         EVENTS.preventDefault(e);
 76 |         timeContainer.selectIndex(index - 1);
 77 |         break;
 78 |       case 38: // up arrow key => restart current slide
 79 |         EVENTS.preventDefault(e);
 80 |         slide.reset();
 81 |         slide.show();
 82 |         break;
 83 |       case 39: // right arrow key => next slide
 84 |         EVENTS.preventDefault(e);
 85 |         timeContainer.selectIndex(index + 1);
 86 |         break;
 87 |       case 40: // down arrow key => click on current slide
 88 |         EVENTS.preventDefault(e);
 89 |         EVENTS.trigger(slide.target, "click");
 90 |         break;
 91 |       default:
 92 |         break;
 93 |     }
 94 |   });
 95 | 
 96 |   // mouse clicks: http://unixpapa.com/js/mouse.html
 97 |   if (hasControl("click")) EVENTS.bind(slideshow, "mousedown", function(event) {
 98 |     // IE doesn't support event.which, relying on event.button instead
 99 |     var button = event.which || ([0,1,3,0,2])[event.button];
100 |     if (button == 1)      // left click => next slide
101 |       timeContainer.selectIndex(timeContainer.currentIndex + 1);
102 |     else if (button == 2) // middle click => previous slide
103 |       timeContainer.selectIndex(timeContainer.currentIndex - 1);
104 |   });
105 | 
106 |   // mouse scroll: http://adomas.org/javascript-mouse-wheel/
107 |   if (hasControl("scroll")) {
108 |     function onMouseWheel(event) {
109 |       if (event) {
110 |         if (event.ctrlKey) return;
111 |         event.preventDefault();
112 |       }
113 |       else {
114 |         event = window.event;
115 |         if (event.ctrlKey) return;
116 |         event.returnValue = false;
117 |       }
118 |       // get scroll direction
119 |       var delta = 0;
120 |       if (event.wheelDelta) { // IE, Opera
121 |         delta = event.wheelDelta / 120;
122 |       } else if (event.detail) { // Mozilla
123 |         delta = -event.detail / 3;
124 |       }
125 |       // prev/next slide
126 |       if (delta < 0)
127 |         timeContainer.selectIndex(timeContainer.currentIndex + 1);
128 |       else if (delta > 0)
129 |         timeContainer.selectIndex(timeContainer.currentIndex - 1);
130 |     }
131 |     if (window.addEventListener) // DOMMouseScroll is specific to Mozilla
132 |       slideshow.addEventListener("DOMMouseScroll", onMouseWheel, false);
133 |     slideshow.onmousewheel = onMouseWheel;
134 |   }
135 | 
136 |   // update the hash whenever possible
137 |   if (hasControl("hash")) {
138 |     var timeNodes = timeContainer.timeNodes;
139 |     for (var i = 0; i < timeNodes.length; i++) {
140 |       var target = timeNodes[i].target;
141 |       if (target.id) EVENTS.bind(target, "begin", function() {
142 |         document.location.hash = "#" + this.id;
143 |       });
144 |     }
145 |   }
146 | }
147 | 
148 | EVENTS.onSMILReady(function() {
149 |   // activate all navigation bindings
150 |   var containers = document.getTimeContainersByTagName("*");
151 |   for (var i = 0; i < containers.length; i++) {
152 |     // parse the "navigation" attribute and get the target element
153 |     // (works with "navigation", "data-navigation", "smil:navigation" and so on)
154 |     var navigation = containers[i].parseAttribute("navigation");
155 |     if (navigation) {
156 |       bindNavControls(containers[i], navigation);
157 |     }
158 |   }
159 | });
160 | 
161 | })();
162 | 


--------------------------------------------------------------------------------
/demo/audio.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | 
  4 |   
  5 |    HTML Timing :: Audio Annotations 
  6 |   
  7 |   
  8 |   
 15 |   
 16 |   
 17 |   
 18 |   
 19 | 
 20 | 
 21 |   

 22 |     

 23 | 
 24 |       
 25 |       

 33 | 
 34 |         

 35 |           treble clef
 36 |           While the three other instruments hold a cluster of high notes, the
 37 |           cellist’s silent gestures interact with them, provoking a windy sonority
 38 |           that becomes noisier as the cellist’s gestures become more energetic.
 39 |         

 40 | 
 41 |         

 42 |           funny music note
 43 |           A short interlude employing conventional playing techniques (bows are
 44 |           applied on the strings in the usual way, though sounds are still high
 45 |           and dissonant).
 46 |         

 47 | 
 48 |         

 49 |           A rich mixture of tremolos and glissandos at various speeds in the highest
 50 |           register. Each part of the quartet descends progressively into the medium
 51 |           register: a  sound colour with greater solidity emerges.
 52 |         

 53 | 
 54 |         

 55 |           The first violin plays high notes once again, this time “flautando” i.e. with a flute-like tone (by lightly
 57 |           bowing across the end of the fingerboard). The other instruments
 58 |           follow suit until a disparate mix of “flautando” and
 59 |           “sul ponticello” is established and enriched by
 60 |           granular synthesis from the electronics.
 61 |         

 62 | 
 63 |         

 64 |           Louder notes and groups of notes irregularly irrupt, often using a
 65 |           “gettato” bow stroke: the player lets the bow freely
 66 |           rebound against the string-once or several times in a row like a ping
 67 |           pong ball.
 68 |         

 69 | 
 70 |         

 71 |           treble clef
 72 |           From this point onward all the preceding techniques are increasingly
 73 |           varied and combined. Identifying them becomes more challenging. Good
 74 |           luck!
 75 |         

 76 |       

 77 | 
 78 |       
 79 |       

 80 |         

 81 |           

 82 |             
 85 |             
 88 |           

 89 |           
 97 |           

 98 |           

 99 |             0:00
100 |           

101 |           

102 |         

103 | 
104 |         
118 |       

119 | 
120 |       
121 |       

122 |         
123 |         
124 |         
125 |         
126 |       

127 |       

128 |         controls:
129 |          |
131 |          |
133 |         
135 |       

136 | 
137 |     

138 |   

139 | 
140 | 
141 | 


--------------------------------------------------------------------------------
/ensLyon/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | 
  4 |   
  5 |    Le changement climatique vu par les végétaux 
  6 |   
  7 |   
  8 |   
  9 |   
 10 |   
 11 |   
 12 |   
 17 |   
 18 |   
 19 |   
 22 |   
 32 |   
 40 | 
 41 | 
 42 |   

 43 |     

 44 |       
 51 |       
 52 |         audio vidéo
 53 |       
 54 |     

 55 |     
 Le changement climatique vu par les végétaux 

 56 |     
 Bernard Seguin, Institut National de Recherche Agronomique. 

 57 |   

 58 | 
 59 |   

 60 |     
 61 | 
 62 |     

 63 |       
 64 |       
 65 |       
 66 |       
 67 |       
 68 |       
 69 |       
 70 |       
 71 |       
 72 |       
 73 |       
 74 |       
 75 |       
 76 |       
 77 |       
 78 |       
 79 |       
 80 |       
 81 |       
 82 |       
 83 |       
 84 |       
 85 |       
 86 |       
 87 |       
 88 |       
 89 |       
 90 |       
 91 |       
 92 |       
 93 |       
 94 |       
 95 |       
 96 |       
 97 |       
 98 |       
 99 |       
100 |     

101 | 
102 |     
107 | 
108 |     
149 |   

150 | 
151 |   

152 |     

153 |       Conférence Formaterre du 26 octobre 2007
154 |     

155 |     

156 |       Post-production : Gérard Vidal
157 |       — Synchronisation : timesheets.js
159 |       — © 2007 ENS-Lyon
160 |     

161 |   

162 | 
163 | 
164 | 


--------------------------------------------------------------------------------
/ensLyon/audio.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | 
  4 |   
  5 |    Le changement climatique vu par les végétaux 
  6 |   
  7 |   
  8 |   
  9 |   
 21 |   
 22 |   
 23 |   
 28 |   
 29 |   
 30 |   
 31 |   
 42 | 
 43 | 
 44 |   

 45 |     

 46 |       
 51 |       
 52 |         audio vidéo
 53 |       
 54 |     

 55 |     
 Le changement climatique vu par les végétaux 

 56 |     
 Bernard Seguin, Institut National de Recherche Agronomique. 

 57 |   

 58 | 
 59 |   

 60 |     
 61 | 
 62 |     

 63 |       
 64 |       
 65 |       
 66 |       
 67 |       
 68 |       
 69 |       
 70 |       
 71 |       
 72 |       
 73 |       
 74 |       
 75 |       
 76 |       
 77 |       
 78 |       
 79 |       
 80 |       
 81 |       
 82 |       
 83 |       
 84 |       
 85 |       
 86 |       
 87 |       
 88 |       
 89 |       
 90 |       
 91 |       
 92 |       
 93 |       
 94 |       
 95 |       
 96 |       
 97 |       
 98 |       
 99 |       
100 |     

101 | 
102 |     
106 |     
111 | 
112 |     
155 |   

156 |   ´
157 |   
167 | 
168 | 
169 | 


--------------------------------------------------------------------------------
/timeline/style.css:
--------------------------------------------------------------------------------
  1 | /* default: 320*32px, gray */
  2 | .smil-controlBar {
  3 |   width: 320px;
  4 |   color: white;
  5 |   background-color: #555;
  6 |   user-select         : none;
  7 |   -o-user-select      : none;
  8 |   -moz-user-select    : none;
  9 |   -webkit-user-select : none;
 10 |   border-radius         : 5px;
 11 |   -o-border-radius      : 5px;
 12 |   -moz-border-radius    : 5px;
 13 |   -webkit-border-radius : 5px;
 14 | }
 15 | .smil-controlBar button,
 16 | .smil-timeSegments a {
 17 |   background-color: #999;
 18 |   color: white !important;
 19 | }
 20 | .smil-controlBar button:hover,
 21 | .smil-timeSegments a:hover,
 22 | .smil-timeSegments a.current {
 23 |   background-color: #bbb;
 24 | }
 25 | .smil-controlBar button {
 26 |   border: 1px solid #777;
 27 | }
 28 | 
 29 | /* left/right toolbars */
 30 | .smil-left {
 31 |   float: left;
 32 |   margin-left: 5px;
 33 |   display: table-cell;
 34 |   vertical-align: middle;
 35 | }
 36 | .smil-right {
 37 |   float: right;
 38 |   margin-right: 5px;
 39 |   margin-top: 3px;
 40 |   display: table-cell;
 41 |   vertical-align: middle;
 42 | }
 43 | * html .smil-left { /* IE6 */
 44 |   margin-left: 2px;
 45 | }
 46 | * html .smil-right { /* IE6 */
 47 |   margin-right: 2px;
 48 | }
 49 | 
 50 | /* toolbar buttons */
 51 | .smil-controlBar button {
 52 |   /*display: block;*/
 53 |   /*float: left;*/
 54 |   width: 24px;
 55 |   margin: 0 -3px;
 56 |   padding: 1px 4px;
 57 |   vertical-align: middle;
 58 |   font-size: 12px;
 59 |   text-align: center;
 60 | }
 61 | * html .smil-controlBar button { /* IE6 */
 62 |   /*margin: 0 -1px;*/
 63 |   margin: 0;
 64 |   padding: 1px;
 65 | }
 66 | .smil-left  button:first-child,
 67 | .smil-right button:first-child {
 68 |   border-top-left-radius         : 10px;
 69 |   -o-border-top-left-radius      : 10px;
 70 |   -moz-border-radius-topleft     : 10px;
 71 |   -webkit-border-top-left-radius : 10px;
 72 |   border-bottom-left-radius         : 10px;
 73 |   -o-border-bottom-left-radius      : 10px;
 74 |   -moz-border-radius-bottomleft     : 10px;
 75 |   -webkit-border-bottom-left-radius : 10px;
 76 | }
 77 | .smil-left  button:last-child,
 78 | .smil-right button:last-child {
 79 |   border-top-right-radius         : 10px;
 80 |   -o-border-top-right-radius      : 10px;
 81 |   -moz-border-radius-topright     : 10px;
 82 |   -webkit-border-top-right-radius : 10px;
 83 |   border-bottom-right-radius         : 10px;
 84 |   -o-border-bottom-right-radius      : 10px;
 85 |   -moz-border-radius-bottomright     : 10px;
 86 |   -webkit-border-bottom-right-radius : 10px;
 87 | }
 88 | 
 89 | /* play/pause button */
 90 | button.smil-play {
 91 |   border-radius         : 10px !important;
 92 |   -o-border-radius      : 10px !important;
 93 |   -moz-border-radius    : 10px !important;
 94 |   -webkit-border-radius : 10px !important;
 95 |   height: 32px;
 96 |   width: 36px;
 97 |   /*
 98 |   border-radius         : 16px !important;
 99 |   -o-border-radius      : 16px !important;
100 |   -moz-border-radius    : 16px !important;
101 |   -webkit-border-radius : 16px !important;
102 |   height: 32px;
103 |   width: 32px;
104 |   */
105 |   background-image: url(progress.gif);
106 |   background-position: center center;
107 |   background-repeat: no-repeat;
108 |   /*z-index: 20;*/
109 | }
110 | * html button.smil-play { /* IE6 */
111 |   width: 32px;
112 | }
113 | button.smil-play span {
114 |   display: none;
115 | }
116 | .paused button.smil-play {
117 |   background-image: url(media-play.png);
118 | }
119 | .playing button.smil-play {
120 |   background-image: url(media-pause.png);
121 | }
122 | * html .paused button.smil-play { /* IE6 */
123 |   background-image: url(media-play.gif);
124 | }
125 | * html .playing button.smil-play { /* IE6 */
126 |   background-image: url(media-pause.gif);
127 | }
128 | 
129 | /* ToC button */
130 | button.smil-tocDisplay {
131 |   border-radius         : 5px !important;
132 |   -o-border-radius      : 5px !important;
133 |   -moz-border-radius    : 5px !important;
134 |   -webkit-border-radius : 5px !important;
135 |   height: 24px;
136 |   width: 24px;
137 |   background-image: url(media-toc.png);
138 |   background-position: center center;
139 |   background-repeat: no-repeat;
140 |   z-index: 2;
141 | }
142 | * html button.smil-tocDisplay { /* IE6 */
143 |   background-image: url(media-toc.gif);
144 | }
145 | button.smil-tocDisplay span {
146 |   display: none;
147 | }
148 | 
149 | /* timeline (width is automatically set by timecontroller.js) */
150 | .smil-timeline {
151 |   float: left;
152 |   margin-left: 12px;
153 |   margin-top: 5px;
154 |   padding: 0;
155 |   height: 24px;
156 |   /*overflow: hidden;*/
157 |   /*overflow-x: hidden;*/
158 |   /*overflow-y: hidden;*/
159 |   position: relative;
160 |   border-radius         : 5px;
161 |   -o-border-radius      : 5px;
162 |   -moz-border-radius    : 5px;
163 |   -webkit-border-radius : 5px;
164 | }
165 | .smil-timeSegments a {
166 |   display: block;
167 |   float: left;
168 |   margin: 5px 0;
169 |   padding: 0;
170 |   height: 12px;
171 |   text-decoration: none;
172 | }
173 | .smil-timeline .smil-timeSegments a:first-child {
174 |   border-top-left-radius         : 10px;
175 |   -o-border-top-left-radius      : 10px;
176 |   -moz-border-radius-topleft     : 10px;
177 |   -webkit-border-top-left-radius : 10px;
178 |   border-bottom-left-radius         : 10px;
179 |   -o-border-bottom-left-radius      : 10px;
180 |   -moz-border-radius-bottomleft     : 10px;
181 |   -webkit-border-bottom-left-radius : 10px;
182 | }
183 | .smil-timeline .smil-timeSegments a:last-child {
184 |   border-top-right-radius         : 10px;
185 |   -o-border-top-right-radius      : 10px;
186 |   -moz-border-radius-topright     : 10px;
187 |   -webkit-border-top-right-radius : 10px;
188 |   border-bottom-right-radius         : 10px;
189 |   -o-border-bottom-right-radius      : 10px;
190 |   -moz-border-radius-bottomright     : 10px;
191 |   -webkit-border-bottom-right-radius : 10px;
192 | }
193 | .smil-timeSegments a span,
194 | .dragging .smil-timeSegments a:hover span {
195 |   display: none;
196 | }
197 | .smil-timeSegments a:hover span {
198 |   display: block;
199 |   position: absolute;
200 |   top: -16px;
201 |   left: 0;
202 |   width: 100%;
203 |   text-align: center;
204 |   color: white !important;
205 | }
206 | 
207 | /* timeline: elapsed time */
208 | .smil-timeCursor {
209 |   position: absolute;
210 |   top: 0;
211 |   left: 0;
212 |   height: 24px;
213 |   /*width: 0;*/
214 |   width: 20px;
215 |   margin-left: -10px;
216 |   z-index: 10;
217 |   /*border-right: 2px solid white;*/
218 |   cursor: col-resize;
219 |   background-image: url(cursor-white.png);
220 |   background-position: center;
221 |   background-repeat: no-repeat;
222 | }
223 | .smil-currentTime {
224 |   margin-top: 5px;
225 |   padding: 0 8px;
226 |   /*height: 24px;*/
227 |   font-size: 12px;
228 |   line-height: 24px;
229 | }
230 | .smil-timeSlider {
231 |   height: 100%;
232 |   width: 0;
233 |   border-radius         : 10px;
234 |   -o-border-radius      : 10px;
235 |   -moz-border-radius    : 10px;
236 |   -webkit-border-radius : 10px;
237 | }
238 | 
239 | /* active item in the table of contents */
240 | .smil-toc li.current > a {
241 |   font-weight: bold;
242 |   color: orange !important;
243 | }
244 | /* IE6 sucks badly */
245 | * html .smil-toc li.current a {
246 |   font-weight: bold;
247 |   color: orange !important;
248 | }
249 | * html .smil-toc li.current li a {
250 |   font-weight: normal;
251 |   color: white !important;
252 | }
253 | * html .smil-toc li li.current a {
254 |   font-weight: bold;
255 |   color: orange !important;
256 | }
257 | 


--------------------------------------------------------------------------------