ela 1.1.0

data/README.md

@@ -0,0 +1,66 @@
+# ela.js E-Learning App Framework
+
+ela.js is a JavaScript framework and build environment for developing
+HTML5 E-Learning Apps.
+
+Sorry, a comprehensive readme is currently only
+available [in German](README.de.md).
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'ela'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install ela
+
+## Usage
+
+	$ mkdir my-apps
+	$ cd my-apps
+	$ ela init
+	$ ela serve
+
+## Screenshots
+
+![](screenshots/overview.tablet.png)
+
+![](screenshots/subapps-and-curves-aside.tablet.png)
+
+![](screenshots/airplanes.tablet.png)
+
+![](screenshots/parameters-aside-1.tablet.png)
+
+![](screenshots/parameters-aside-2.tablet.png)
+
+![](screenshots/help.tablet.png)
+
+![](screenshots/airplaneInternalLoads-fuselage.tablet.png)
+
+![](screenshots/airplaneInternalLoads-wing.tablet.png)
+
+![](screenshots/buckling.tablet.png)
+
+![](screenshots/cabinSlendernessRatio.tablet.png)
+
+![](screenshots/laminateDeformation.tablet.png)
+
+![](screenshots/mohrsCircle.tablet.png)
+
+![](screenshots/planeElasticityProblems.tablet.png)
+
+![](screenshots/thrustMatching.tablet.png)
+
+## Credits
+
+This framework was initially written to support teaching at the
+department of aircraft construction, institute of aerospace at the
+Berlin Institute of Technology ("Technische Universität Berlin").

data/Rakefile

@@ -0,0 +1,96 @@
+require "bundler/gem_tasks"
+require 'jasmine'
+load 'jasmine/tasks/jasmine.rake'
+
+ENV['RACK_ENV'] = 'production'
+APP_FILE  = 'lib/ela/server.rb'
+APP_CLASS = 'ELA::Server'
+require 'sinatra/assetpack/rake'
+
+require './lib/ela/ela'
+
+def compile_custom(path, target_file)
+  response = app.assets.send(:build_get, path)
+  File.open(File.join(app.settings.public_folder, target_file), 'w+') do |f|
+    f.puts response.body
+  end
+  puts "Precompiling #{path} to #{target_file} ..."
+end
+
+def write_yml(path)
+  ELA.write_settings_yml(File.join(path, 'settings.default.yml'))
+  ELA.write_labels_yml(File.join(path, 'labels.default.yml'))
+end
+
+task :clean do
+  rm_rf 'dist'
+  rm_rf 'doc'
+  rm_f 'CHANGELOG.md'
+end
+
+task :build => :clean do
+  mkdir 'dist'
+  compile_custom('/', 'index.html')
+  Rake::Task['assetpack:precompile:packages'].invoke
+  cp_r(File.join(app.settings.root, 'app', 'fonts'), File.join(app.settings.public_folder, 'fonts'))
+  cp_r(File.join(app.settings.root, 'app', 'images'), File.join(app.settings.public_folder, 'images'))
+  cp(File.join(app.settings.root, 'app', 'images', 'favicons', 'favicon.ico'), File.join(app.settings.public_folder, 'favicon.ico'))
+  write_yml(app.settings.public_folder)
+  mkdir 'public/js/vendor'
+  cp_r(Dir[File.join(app.settings.root, 'app', 'js', 'vendor', 'mathjax')], File.join(app.settings.public_folder, 'js', 'vendor'))
+end
+
+task :doc do
+  File.open('CHANGELOG.md', 'w') do |f|
+    f << `git-changelog`
+  end
+  system('codo')
+  cp_r(File.join(app.settings.root, 'screenshots'), File.join(app.settings.root, 'doc', 'extra'))
+end
+
+require 'coffee-script'
+require 'fileutils'
+def coffee_compile(source_dir, target_dir)
+  glob = File.join(source_dir, '**/*.coffee')
+  Dir[glob].each do |file|
+    target_file = file.
+                  gsub(/^#{source_dir}/, target_dir).
+                  gsub(/\.coffee$/, '.js')
+    target_file_dir = File.dirname(target_file)
+    puts " #{file} to #{target_file}"
+    FileUtils.mkdir_p(target_file_dir)
+    File.open(target_file, "w") do |f|
+      f.puts CoffeeScript.compile(File.read(file))
+    end
+  end
+end
+
+namespace :test do
+  desc "Compile app and spec coffeescripts."
+  task :compile do
+    puts "Compiling app coffeescripts for testing ..."
+    coffee_compile('./app/js', './spec/app_js')
+
+    puts "Compiling spec coffeescripts for testing ..."
+    coffee_compile('./spec/coffeescripts', './spec/javascripts')
+
+    puts "Copying vendored javascript for testing ..."
+    cp(Dir["./app/js/vendor/*.js"], "./spec/app_js/vendor/")
+
+    puts "Building config files for testing ..."
+    write_yml('./spec/app_js')
+  end
+
+  desc "Run jasmine specs."
+  task :run => 'jasmine:ci'
+
+  desc "Clean all untracked and ignored files on ./spec folder."
+  task :clean do
+    sh 'git clean -f -d -x -- ./spec'
+  end
+end
+
+desc "Compile, run and clean specs."
+task :test => ['test:compile', 'test:run']
+
+task default: :test

data/app/css/screen.styl

@@ -0,0 +1,425 @@
+// ELA specific
+$range-handler-width = 59px
+
+// Remember that this color should be set in CurveGraph aswell
+// to resemble the fillColor of the range indicator triangles:
+$legend-background = #f2f2f2
+
+@import "poised"
+@import "vendor/stackedit"
+
+sub
+  relative 0.5em  // vertical-align approach affects line height
+  font-size 0.7em
+  margin-left 3px
+
+sup
+  relative -0.5em  // vertical-align approach affects line height
+  font-size 0.7em
+  margin-left 3px
+
+#app
+  absolute 0 0 0 0
+  overflow hidden
+
+#help article
+  overflow scroll
+  -webkit-overflow-scrolling touch
+  padding 10px
+  font-size 80%
+  stackedit()
+
+#overview
+  $margin = 18px
+  $tile-size = 200px
+  $tile-spacing = 8px
+  $tile-image-max-height = 45%
+  $tile-image-top = 37.5%
+
+  ul
+    margin 0
+
+    li.search-box
+      margin $margin
+    li.anchor
+      margin 0 $margin
+      + li.anchor
+      &.collapsed
+        margin-bottom $margin
+
+  article > ul
+    .list-group
+      clearfix()
+      margin ($margin - $tile-spacing/2)
+
+    .tile
+      position relative
+      width 50%
+      height $tile-size
+      max-width $tile-size
+      float left
+      padding ($tile-spacing/2)
+      cursor pointer
+      border 0
+      display inline-block
+
+      .wrapper
+        width 100%
+        height 100%
+        background-color #eeeeee
+
+        img
+          absolute $tile-image-top auto auto 50%
+          transform translateX(-50%) translateY(-50%)
+          max-width 70%
+          max-height $tile-image-max-height
+
+        span.title
+          absolute none 0 ((100% - ($tile-image-top + $tile-image-max-height/2))/2) 0
+          text-align center
+          font-size 0.7em
+          line-height 1.2em
+          padding 0 $tile-spacing $tile-spacing $tile-spacing
+          transform translateY(50%)
+
+  .hint
+    display none
+    margin $margin
+    color lighten($foreground, 30%)
+
+    &:before
+      font-family FontAwesome
+      content "\f05a"
+      margin-right 0.4em
+
+li.share-form
+  form
+    background-color #eaeaea
+    display flex
+
+  input[type=text]
+    width auto // 100% would take the whole <li>
+    flex 1
+
+  button
+    &:before
+      font-family FontAwesome
+
+    &.copy:before
+      content "\f0ea"
+    &.success:before
+      content "\f00c"
+    &.failure:before
+      content "\f00d"
+
+article.graph
+  display flex
+  flex-direction column
+
+  div.legend
+    z-layer 'section', 'legend'
+    font-size .75em
+    line-height 1.2em
+    background $legend-background
+    opacity .8
+    touch-action auto
+
+    .values-at-range
+      font-size 0.9em
+      text-align left
+
+      .line-type
+        position relative
+        top -0.2em
+        height 0
+        display inline-block
+        width 20px
+        border-radius 2px
+        margin-right 10px
+
+        &.solid
+          border 1px solid $foreground
+        &.dashed
+          border 1px dashed $foreground
+
+      .range
+        color #999999
+
+      .label
+        font-weight 500
+
+      .curves
+        display table
+        margin 0 auto
+
+        .curve
+          display table-row
+
+          .line, .line-label
+            display table-cell
+            text-align left
+
+          .line canvas
+            display inline
+            vertical-align bottom
+            margin-right 0.5em
+
+      .col
+        display table-cell
+        width 1%
+        white-space nowrap
+        padding 8px 10px 4px 10px
+        text-align center
+        border-bottom 4px solid transparent
+
+        &.values
+          cursor pointer
+
+        &.active
+          background rgba(#fff, 60%)
+
+    &.legend-simple
+      border-bottom 1px solid #ccc
+      absolute 0
+      width 100%
+
+      .curve
+        display inline-block
+        white-space nowrap
+        padding 7px 10px
+
+        .line
+          border 2px solid
+          border-radius 2px
+          width 20px
+          height 0
+          display inline-block
+          relative -0.2em
+          margin-right 0.5em
+
+        &.original .line
+          border-color #a00
+
+        &.alias .line
+          border-color #00f
+
+  div.graph
+    z-layer 'section', 'graph'
+    flex 1
+    overflow hidden
+
+  div.graph-overlay-wrapper
+    height 0
+    font-size .75em
+    z-index 125
+
+    .graph-overlay
+      padding 10px
+      background-color rgba(255, 255, 255, 0.8)
+
+  div.range-handler
+    text-align center
+    cursor pointer
+    background $legend-background
+    padding 14px 5px
+
+    &.orientation-y
+      absolute 0 none 0 0
+      width $range-handler-width
+
+      span.hint
+        absolute 50% none none 50%
+        transform translateX(-50%) translateY(-50%) rotate(-90deg)
+        width 500px // ugly, but no alternative
+
+// vertical range slider and large, non-transparent legend with values
+#international-standard-atmosphere article.graph div.graph
+  margin-left $range-handler-width
+
+// Some space for the delete button
+#composites
+  aside.parameters > ul > li > label
+    margin-right 45px
+
+aside
+  &.hidden
+    opacity 0 !important
+
+  &.parameters .description
+    padding 1em
+    display table
+
+    .icon
+      display table-cell
+      width 1px
+
+    .text
+      display table-cell
+      padding-left 0.66em
+
+  &.airplanes
+  &.composites
+    li.item
+      padding 0
+      white-space no-wrap
+
+      label.item
+        padding $list-item-padding
+        div
+          font-size 0.85em
+          line-height 1.2em
+          &.name
+            font-weight 400
+
+  &.curves
+    $color-span-width = 30px
+    li.item
+      padding 0
+      height $list-item-height + 1px
+
+      label.item
+        margin 0
+        height $list-item-height + 1px
+
+        .color
+          display inline-block
+          width $color-span-width
+          height $list-item-height
+          background: #ccc
+          border-left 1px solid $list-item-border
+          border-right 1px solid $list-item-border
+
+        .name
+          vertical-center absolute
+          left $color-span-width + 10px
+          font-size 1.2em
+
+      label.checkbox
+        float right
+        margin 3px
+
+    li.anchor
+      padding 4px
+      height auto
+
+    .hint
+      margin: 0 18px 18px 18px
+      text-align center
+
+  &.headup
+    z-layer 'section', 'headup'
+    absolute auto none 0 none
+    background-color rgba(#ffffff, 0.8)
+    opacity 1
+    transform translateY(100%)
+    transition opacity .2s ease-in-out
+
+    &.right
+      transform translateY(100%)
+
+    &.active
+      transform translateY(0)
+
+section.subapp-container
+  &> section
+    transform translateX(0)
+    transition none
+    z-index 5
+    transform-origin 50% 10%
+    opacity 0
+    transform scale(0.75)
+    transition visibility 0s linear 200ms, opacity 0s linear 200ms, transform 0s linear 200ms
+
+    &.active
+      visibility visible
+      transition opacity 200ms ease-out, transform 200ms ease-out
+      opacity 1
+      transform scale(1)
+      z-index 10
+
+.range-handler
+aside.curves
+  > .hint
+    color lighten($foreground, 30%)
+
+    &:before
+      font-family FontAwesome
+      content "\f05a"
+      margin-right 0.4em
+
+img.logo
+  absolute none 0 0 none
+  height $range-handler-width
+  z-layer 'section', 'graph'
+
+  @media $media-lt-phone
+    display none
+
+span.mark
+  background-color yellow
+
+.poised .list-group
+  margin 0
+
+.poised
+  .list-group + .anchor
+    margin-top 18px
+
+.icon.scene:before
+  content: "\f03e"
+
+.icon.composites:before
+  content "\f279"
+
+.icon.calculator:before
+  content: "\f1ec"
+
+.icon.warning:before
+  content: "\f071"
+
+// on iPhones, avoid collision between slider and Safari back-swipes
+@media $media-lt-phone
+  html.ios .poised.slider
+    margin-left 20px
+
+@keyframes tada {
+  0%, 50%, 100% {
+    transform: scale3d(1, 1, 1);
+  }
+
+  5%, 10% {
+    transform: scale3d(.8, .8, .8) rotate3d(0, 0, 1, -7deg);
+  }
+
+  15%, 25%, 35%, 45% {
+    transform: scale3d(1.3, 1.3, 1.3) rotate3d(0, 0, 1, 7deg);
+  }
+
+  20%, 30%, 40% {
+    transform: scale3d(1.3, 1.3, 1.3) rotate3d(0, 0, 1, -7deg);
+  }
+}
+
+#thrust-matching .graph-overlay
+  .parameter-warnings
+    display table
+    width 100%
+
+  .icon
+    display table-cell
+    vertical-align middle
+    color red
+    font-size 2em
+    width 1px // stretches automatically to minimal size
+    padding 0 6px
+    animation tada 2s infinite
+
+  .right
+    display table-cell
+    vertical-align middle
+    padding-left 10px
+    line-height 1.1em
+
+  .headline
+    font-weight bolder
+    padding-bottom 5px