1
0
Fork 0

Syntax selector

This commit is contained in:
Gregory Eremin 2013-07-11 01:20:10 +07:00
parent df03286266
commit e55a6af258
8 changed files with 158 additions and 25 deletions

View File

@ -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'

View File

@ -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 # Hide generic button, show styled button
$_button.hide() $_button.hide()

View File

@ -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

View File

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

View File

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

View File

@ -30,12 +30,20 @@ class Pastemaster < Sinatra::Application
use CoffeeAssets use CoffeeAssets
use StylusAssets 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 get '/' do
@lexers = fetch_lexers
slim :form, layout: :default slim :form, layout: :default
end end
post '/' do post '/' do
paste = Paste.new(params[:contents]) paste = Paste.new(params[:contents], params[:type])
id = paste.save id = paste.save
redirect "/#{id}/#{paste.key}" redirect "/#{id}/#{paste.key}"

View File

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

View File

@ -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