Skip to content

Commit

Permalink
Brand new react.js based player
Browse files Browse the repository at this point in the history
  • Loading branch information
@ku1ik
ku1ik committed May 14, 2014
1 parent 4e11f4e commit c1e194a
Show file tree
Hide file tree
Showing 59 changed files with 35,137 additions and 1,545 deletions.
134 changes: 134 additions & 0 deletions Gruntfile.coffee
View file
@@ -0,0 +1,134 @@
module.exports = (grunt) ->

grunt.initConfig
pkg: grunt.file.readJSON("package.json")

sass:
dist:
files:
"dist/css/<%= pkg.name %>.css": "src/styles/main.sass"

cssmin:
minify:
expand: true
cwd: "dist/css/"
src: [
"**/*.css"
"!*.min.css"
]
dest: "dist/css/"
ext: ".min.css"

react:
files:
expand: true
cwd: 'src/'
src: ['**/*.jsx']
dest: 'src/'
ext: '.js'

coffee:
options:
bare: true

all:
files: [{
expand: true
cwd: 'src/'
src: ['**/*.coffee']
dest: 'src/'
ext: '.js'
}, {
expand: true
cwd: 'test/'
src: ['**/*.coffee']
dest: 'test/'
ext: '.js'
}]

mocha:
test:
src: ["test/*.html"]
options:
run: true
logErrors: true

watch:
sass:
files: [
"src/styles/**/*.sass"
"src/styles/**/*.scss"
]
tasks: ["sass"]

cssmin:
files: [
"dist/css/**/*.css"
"!dist/css/**/*.min.css"
]
tasks: ["cssmin"]

react:
files: "src/**/*.jsx"
tasks: ["react"]

coffee:
files: ["src/**/*.coffee", "test/**/*.coffee"]
tasks: ["coffee"]

test:
files: ["test/**/*_test.js", "test/*.html"]
tasks: ["mocha"]

rgbcolors:
files: ["src/colors/rgb.json"]
tasks: ["rgb-colors"]

themes:
files: ["src/colors/themes/*.json"]
tasks: ["themes"]

grunt.loadNpmTasks "grunt-contrib-watch"
grunt.loadNpmTasks "grunt-contrib-coffee"
grunt.loadNpmTasks "grunt-react"
grunt.loadNpmTasks "grunt-contrib-sass"
grunt.loadNpmTasks "grunt-contrib-cssmin"
grunt.loadNpmTasks "grunt-mocha"

grunt.registerTask "default", ["watch"]

generatePalette = (colors, baseIndex, parentSelector) ->
css = ""
colors.forEach (color, index) ->
css += parentSelector + " .fg-" + (baseIndex + index) + " { color: " + color + " }\n"
css += parentSelector + " .bg-" + (baseIndex + index) + " { background-color: " + color + " }\n"

css

grunt.registerTask "rgb-colors", "...", ->
colors = grunt.file.readJSON("src/colors/rgb.json")
contents = generatePalette(colors, 16, ".asciinema-player")
grunt.file.write "src/styles/partials/_rgb.scss", contents

path = require("path")

grunt.registerTask "themes", "...", ->
paths = grunt.file.expand("src/colors/themes/*.json")

paths.forEach (jsonPath) ->
name = path.basename(jsonPath, ".json")
theme = grunt.file.readJSON(jsonPath)
contents = ""
contents += ".asciinema-theme-" + name + " .terminal {"
contents += "color: " + theme.foreground + ";"
contents += "background-color: " + theme.background
contents += "}\n"
contents += ".asciinema-theme-" + name + " .fg-bg {"
contents += "color: " + theme.background
contents += "}\n"
contents += ".asciinema-theme-" + name + " .bg-fg {"
contents += "background-color: " + theme.foreground
contents += "}\n"
contents += generatePalette(theme.palette, 0, ".asciinema-theme-" + name)
outputPath = "dist/css/themes/" + name + ".css"
grunt.file.write outputPath, contents
120 changes: 0 additions & 120 deletions Gruntfile.js
View file

This file was deleted.

1 change: 1 addition & 0 deletions demo/7443-stdout.json
View file

Large diffs are not rendered by default.

33 changes: 33 additions & 0 deletions demo/react.html
View file
@@ -0,0 +1,33 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/dist/css/asciinema-player.css" />
<link rel="stylesheet" type="text/css" href="/dist/css/themes/default.css" />

<script src="http://fb.me/react-0.10.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
</head>
<body>
<div id="player-container"></div>

<script src="/src/scripts/cursor.js"></script>
<script src="/src/scripts/part.js"></script>
<script src="/src/scripts/line.js"></script>
<script src="/src/scripts/terminal.js"></script>
<script src="/src/scripts/progress_bar.js"></script>
<script src="/src/scripts/timer.js"></script>
<script src="/src/scripts/icons.js"></script>
<script src="/src/scripts/control_bar.js"></script>
<script src="/src/scripts/overlays.js"></script>
<script src="/src/scripts/movie.js"></script>
<script src="/src/scripts/http_array_source.js"></script>
<script src="/src/scripts/navigable_array_source.js"></script>
<script src="/src/scripts/player.js"></script>
<script src="/src/scripts/screenfull.js"></script>

<script>
asciinema.createPlayer(document.getElementById('player-container'));
</script>

</body>
</html>
52 changes: 52 additions & 0 deletions demo/svg-icons-test.html
View file
@@ -0,0 +1,52 @@
<html>
<head>
<style>
body {
background-color: #555;
}
.container {
background-color: #000;
width: 240px;
height: 240px;
float: left;
margin-right: 10px;
}

.container svg path {
fill: white;
}

.container svg:hover path {
fill: red;
}
</style>
</head>
<body>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<path d="M1,0 L11,6 L1,12 Z"></path>
</svg>
</div>

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<path d="M1,0 L4,0 L4,12 L1,12 Z"></path>
<path d="M8,0 L11,0 L11,12 L8,12 Z"></path>
</svg>
</div>

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<path d="M0,0 L5,0 L3,2 L5,4 L4,5 L2,3 L0,5 Z"></path>
<path d="M12,12 L12,7 L10,9 L8,7 L7,8 L9,10 L7,12 Z"></path>
</svg>
</div>

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<path d="M5,5 L5,0 L3,2 L1,0 L0,1 L2,3 L0,5 Z"></path>
<path d="M7,7 L12,7 L10,9 L12,11 L11,12 L9,10 L7,12 Z"></path>
</svg>
</div>
</body>
</html>

0 comments on commit c1e194a

Please sign in to comment.