Syntax selector

app/assets/javascripts/dropdown.coffee

@@ -0,0 +1,33 @@
+class Selector
+  constructor: (selector) ->
+    @input = $("#{selector}-input")
+    @dropdown = $(selector)
+    @placeholder = @dropdown.children 'span'
+    @prefix = @placeholder.text()
+    @options = @dropdown.find 'ul.dropdown > li'
+    this.initEvents()
+
+  initEvents: ->
+    self = this
+
+    @dropdown.on 'click', (e) ->
+      $(this).toggleClass('active')
+      false
+
+    @options.on 'click', (e) ->
+      $el = $(this)
+      $el.siblings().removeClass 'selected'
+      $el.addClass 'selected'
+      self.placeholder.text "#{self.prefix}: #{$el.text()}"
+      self.setValue $el.data 'value'
+
+    @options.filter('.selected').click()
+    @dropdown.removeClass 'active'
+
+  setValue: (value) ->
+    @input.val value
+
+$ ->
+  new Selector '#type'
+  $(document).on 'click', (e) ->
+    $('.wrapper-dropdown').removeClass 'active'

app/assets/javascripts/pastemaster.coffee

@@ -1,8 +1,8 @@
 $ ->
-  $form = $('#pasteform')
+  $form = $('form')
-  $contents = $('#contents')
+  $contents = $form.find('textarea')
-  $_button = $('#submitbtn')
+  $_button = $form.find('input[type="submit"]')
-  $button = $('#submitlnk')
+  $button = $form.find('a[role="submit"]')
 
   # Hide generic button, show styled button
   $_button.hide()

app/assets/stylesheets/dropdown.styl

@@ -0,0 +1,86 @@
+.wrapper-dropdown
+  position absolute
+  right 9em
+
+  width 15em
+  padding 0.5em 1em
+  margin 0.4em auto
+
+  background #f5f5f5
+  background-image -webkit-linear-gradient(top, #ffffff, #f5f5f5)
+  background-image linear-gradient(to bottom, #ffffff, #f5f5f5)
+
+  color #666
+  outline none
+  cursor pointer
+
+  border #ddd 1px solid
+  border-radius 5px
+
+  &:after
+    content ""
+    width 0
+    height 0
+    position absolute
+    right 16px
+    top 50%
+    margin-top -6px
+    border-width 6px 0 6px 6px
+    border-style solid
+    border-color transparent #666
+
+  .dropdown
+    position absolute
+    bottom 2em
+    left 0
+    right 0
+    background #fafafa
+    list-style none
+    font-weight normal
+    border #ddd 1px solid
+    border-radius 5px
+    opacity 0
+    pointer-events none
+    height 20em
+    overflow-x ellipsis
+    overflow-y auto
+    padding 0
+
+    li
+      display block
+      text-decoration none
+      color #9e9e9e
+      padding 10px 20px
+      white-space nowrap
+      overflow hidden
+      text-overflow ellipsis
+
+      &:hover
+        background #ccc
+        color #fff
+
+      &.selected
+        background #eee
+
+  &.active
+    background #fafafa
+
+    .dropdown
+      opacity 1
+      pointer-events auto
+
+    &:after
+      border-color #aaa transparent
+      border-width 0 6px 6px 6px
+      margin-top -3px
+
+/* No CSS3 support */
+
+.no-opacity, .no-pointerevents
+  .wrapper-dropdown .dropdown
+    display none
+    opacity 1
+    pointer-events auto
+
+  .wrapper-dropdown.active .dropdown
+    display block

app/assets/stylesheets/pastemaster.styl

@@ -51,40 +51,33 @@ textarea {
   height: 100%;
   line-height: 120%;
   resize: none;
-  border-style: solid;
+  border: #ddd 1px solid;
-  border-color: #ddd;
   border-radius: 5px;
   padding: .5em;
 }
 
-#submitbtn, #submitlnk {
+form input[type="submit"], form a[role="submit"] {
   float: right;
 }
-#submitlnk {
+form a[role="submit"] {
   background-color: #fefefe;
   background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
   background-image: linear-gradient(to bottom, #ffffff, #f5f5f5);
   box-shadow: 0 1px 2px 2px #ffffff;
   color: #666;
   text-shadow: 0 0 2px #ffffff;
-  border-style: solid;
+  border: #ddd 1px solid;
-  border-color: #ddd;
   border-radius: 4px;
-  border-width: 1px;
   border-bottom-width: 4px;
   font-size: 1em;
   width: 5em;
   text-align: center;
   padding: .4em 0;
-  margin: .5em 0;
+  margin: .4em 0;
   text-decoration: none;
   display: none;
 }
-#submitlnk:active {
+form a[role="submit"]:active {
   box-shadow: 0 0 2px 2px #eee inset;
   border-bottom-width: 1px;
 }
-
-p {
-  width: 100%;
-}

app/paste.rb

@@ -10,7 +10,7 @@ class Paste
 
   def initialize(contents, type = nil)
     @contents = contents
-    @type = type
+    @type = type if available_types.include?(type)
   end
 
   def save
@@ -37,14 +37,18 @@ class Paste
   end
 
   def highlighted
-    Pygments.highlight(@contents, lexer: 'ruby', options: { linenos: 'table' })
+    Pygments.highlight(contents, lexer: type, options: { linenos: 'table' })
   end
 
   def paragraph
-    "<pre>#{@contents}</pre>"
+    "<pre>#{contents}</pre>"
   end
 
   def html
     type ? highlighted : paragraph
   end
+
+  def available_types
+    @available_types ||= Pygments::Lexer.all.map(&:aliases).flatten
+  end
 end

pastemaster.rb

@@ -30,12 +30,20 @@ class Pastemaster < Sinatra::Application
   use CoffeeAssets
   use StylusAssets
 
+  def fetch_lexers
+    @lexers_list ||= Pygments::Lexer.all.map do |lexer|
+      { alias: lexer.aliases.first, name: lexer.name }
+    end.sort_by{ |a| a[:name] }
+  end
+
   get '/' do
+    @lexers = fetch_lexers
+
     slim :form, layout: :default
   end
 
   post '/' do
-    paste = Paste.new(params[:contents])
+    paste = Paste.new(params[:contents], params[:type])
     id = paste.save
 
     redirect "/#{id}/#{paste.key}"

views/default.slim

@@ -4,6 +4,7 @@ html
     title Pastemaster
     link rel="stylesheet" href="/normalize.css?v2.1.2"
     link rel="stylesheet" href="/assets/pastemaster.css?r1"
+    link rel="stylesheet" href="/assets/dropdown.css?r1"
     link rel="stylesheet" href="/pygments_solarized_modified.css?r1"
   body
     h1
@@ -12,3 +13,4 @@ html
     .container== yield
     script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"
     script type="text/javascript" src="/assets/pastemaster.js?r1"
+    script type="text/javascript" src="/assets/dropdown.js?r1"

views/form.slim

@@ -1,4 +1,11 @@
-form#pasteform action="/" method="post" accept-charset="UTF-8"
+form action="/" method="post" accept-charset="UTF-8"
-  textarea#contents name="contents"
+  textarea name="contents"
-  input#submitbtn type="submit" value="Save"
+  input id="type-input" type="hidden" name="type" value=""
-  a#submitlnk href="#" role="submit" Save
+  div id="type" class="wrapper-dropdown" tabindex="1"
+    span Syntax
+    ul.dropdown
+      li.selected data-value="" Plain Text
+      - for lexer in @lexers
+        li data-value=lexer[:alias] =lexer[:name]
+  input type="submit" value="Save"
+  a href="#" role="submit" Save