auto_html demo

auto_html.html.haml

- title = 'auto_html demo'
- content_for :title, title

.page-header

  %h1 
    .pull-right
      .btn-group
        = link_to 'article', '/2010/08/15/auto_html', class: 'btn'
        = link_to 'source', 'https://github.com/dejan/auto_html', class: 'btn'

    = title


.well
  %h2 Input
  %hr/

  %form#comment_form
    %label Enter some text with URLs (or click on the examples bellow)

    %textarea#auto_html_comment_body{style:'width:100%;height:150px', name:"auto_html_comment[body]"}
    #examples
      = link_to 'image', 'http://farm4.static.flickr.com/3171/2622922160_afc2ca4cff.jpg', class: 'badge badge-info'
      = link_to 'dailymotion', 'http://www.dailymotion.com/relevance/search/fleet+foxes/video/x8bob0_fleet-foxes-mykonos_music', title: 'click to copy/paste', class: 'badge badge-info'
      = link_to 'youtube', 'http://www.youtube.com/watch?v=8JMO-hxYRq4', title: 'click to copy/paste', class: 'badge badge-info'
      = link_to 'plain page', 'http://rubyonrails.org', title: 'click to copy/paste', class: 'badge badge-info'
      = link_to 'google video', 'http://video.google.com/videoplay?docid=7065205277695921912', title: 'click to copy/paste', class: 'badge badge-info'
      = link_to 'vimeo', 'http://vimeo.com/1747316', title: 'click to copy/paste', class: 'badge badge-info'
      = link_to 'soundcloud', 'http://www.soundcloud.com/forss/flickermood', title: 'click to copy/paste', class: 'badge badge-info'
      = link_to 'metacafe', 'http://www.metacafe.com/watch/yt-7kQNFyEI2rs/pink_floyd_echoes_part_1/', title: 'click to copy/paste', class: 'badge badge-info'
      = link_to 'gooogle map', 'https://maps.google.com/maps?q=Alexanderplatz,+Berlin,+Germany&hl=en&sll=52.519171,13.406091&sspn=0.442471,0.850754&oq=berlin+alex&t=h&hq=Alexanderplatz,+Berlin,+Germany&radius=15000&z=13', title: 'click to copy/paste', class: 'badge badge-info'
      = link_to 'twitter', 'https://twitter.com/forkedout/status/229131989150736384', title: 'click to copy/paste', class: 'badge badge-info'
      = link_to 'flickr', 'http://www.flickr.com/photos/larandy/6883287725/', title: 'click to copy/paste', class: 'badge badge-info'


.well  
  %h2 Output
  %hr/
  
  %p Code
  %p#code.alert.alert-info

  %p Preview
  %p#preview.well{style: 'background:#fff;border:1px solid #ddd;padding-bottom:10px'}

= comments @demo

auto_html.js.coffee

window.previewComment = ->
  value = 't':$('#auto_html_comment_body').val()
  $.getJSON "/demos/auto_html.json?callback=?", value, (data) ->
    $('#code').text data 
    $('#preview').html data
      
$(document).on 'ready pjax:success', ->
  $("#auto_html_comment_body").focus()
  $('#examples a').click (e) ->
    $('#auto_html_comment_body').focus()
    $('#auto_html_comment_body').val($(this).attr('href'))
    previewComment()
    e.preventDefault()
  $("#auto_html_comment_body").on 'input', ->
    previewComment()

demos_controller.rb

class DemosController < ApplicationController
  #...
  def auto_html
    @demo = Demo.find_or_create_by_title('auto_html demo')
    respond_to do |format|
      format.html
      format.json do
        t = AutoHtml.auto_html(params[:t]) { 
          html_escape
          with_options(:width => 410, :height => 270) do |o|
            %w(dailymotion youtube google_video vimeo metacafe).each { |f| o.send(f) }
          end
          image
          soundcloud
          google_map
          twitter
          flickr
          link :target => "_blank", :rel => "nofollow"
          simple_format
        }
        render :json => t.to_json, :callback => params[:callback]
      end
    end
  end
  # ...
end