Syntax selector
This commit is contained in:
Gregory Eremin
parent
df03286266
commit
e55a6af258
|
|
@ -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'
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
$ ->
|
||||
$form = $('#pasteform')
|
||||
$contents = $('#contents')
|
||||
$_button = $('#submitbtn')
|
||||
$button = $('#submitlnk')
|
||||
$form = $('form')
|
||||
$contents = $form.find('textarea')
|
||||
$_button = $form.find('input[type="submit"]')
|
||||
$button = $form.find('a[role="submit"]')
|
||||
|
||||
# Hide generic button, show styled button
|
||||
$_button.hide()
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -51,40 +51,33 @@ textarea {
|
|||
height: 100%;
|
||||
line-height: 120%;
|
||||
resize: none;
|
||||
border-style: solid;
|
||||
border-color: #ddd;
|
||||
border: #ddd 1px solid;
|
||||
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-color: #ddd;
|
||||
border: #ddd 1px solid;
|
||||
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%;
|
||||
}
|
||||
|
|
|
|||
10
app/paste.rb
10
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
|
||||
|
|
|
|||
|
|
@ -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}"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,11 @@
|
|||
form#pasteform action="/" method="post" accept-charset="UTF-8"
|
||||
textarea#contents name="contents"
|
||||
input#submitbtn type="submit" value="Save"
|
||||
a#submitlnk href="#" role="submit" Save
|
||||
form action="/" method="post" accept-charset="UTF-8"
|
||||
textarea name="contents"
|
||||
input id="type-input" type="hidden" name="type" value=""
|
||||
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
|
||||
|
|
|
|||
Loading…
Reference in New Issue