Skip to content

R
rendezvous
Commit c44e6e14 by tady
Options

jsをcoffee化

parent 31351c19
Showing with 188 additions and 216 deletions
app/assets/javascripts/application.js
...@@ -15,6 +15,5 @@ ...@@ -15,6 +15,5 @@
// require turbolinks // require turbolinks
//= require_tree ./lib //= require_tree ./lib
//= require_tree . //= require_tree .
//= require_self
app/assets/javascripts/lib/lib.js.coffee 0 → 100644
# namespace
RV.tools = {}
# get url parameter and parse.
# ex.) /?a=b&c=123 ==> {"a": "b", "c": "123"}
RV.tools.getQueryParams = ->
query = window.location.search.split("+").join(" ")
params = {}
re = /[?&]?([^=]+)=([^&]*)/g
dc = decodeURIComponent
while (tokens = re.exec(query))
params[dc(tokens[1])] = dc(tokens[2])
return params
app/assets/javascripts/posts.js.coffee
# Place all the behaviors and hooks related to the matching controller here. # Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js. # All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/ # You can use CoffeeScript in this file: http://coffeescript.org/
app/assets/javascripts/posts/edit.js.coffee 0 → 100644
if window.location.pathname.match /edit/
$ ->
confirmUnload = ->
return 'このページを離れますか？'
$(window).on('beforeunload', confirmUnload)
$('#save_button').on 'click', ->
$(window).off('beforeunload', confirmUnload)
# Automaticaly change textarea height.
$('textarea.autosize').autosize();
# disable tab key
$('.disable-tab').on 'keydown', (e) ->
$this = $(this)
keyCode = e.keyCode || e.which
if keyCode is 9
e.preventDefault()
start = $this.get(0).selectionStart
end = $this.get(0).selectionEnd
# set textarea value to: text before caret + tab + text after caret
$this.val($this.val().substring(0, start) +
'\t' +
$this.val().substring(end))
# put caret at right position again
$this.get(0).selectionStart =
$this.get(0).selectionEnd = start + 1
else if keyCode is 13
val = $this.val()
start = $this.get(0).selectionStart
bl = val.lastIndexOf("\n", start-1)
line = val.substring(bl, start)
lm = line.match(/^\s+/)
ns = lm ? lm[0].length - 1 : 0
nv = val.substring(0, start) + "\n"
_(ns).times ->
nv += "\t"
$this.val(nv + val.substring(start))
$this.get(0).selectionStart =
$this.get(0).selectionEnd = start + ns + 1
e.preventDefault()
# new post tags
$('#post_tags').select2 {
tags: window.RV.AllTags
}
# Preview post.
load_preview = ->
text = $('#post_body').val()
csrfToken = $("meta[name='csrf-token']").attr('content')
$.post('/posts/preview.api', {
'text': text
'authenticity_token': csrfToken
})
.done (data) ->
$('#post_preview').html(data)
$('#post_body').on('keyup mouseup', load_preview)
load_preview()
app/assets/javascripts/posts/index.js.coffee 0 → 100644
if window.location.pathname.match /^\/$/
$ ->
# Listをクリックしたら右側に詳細を表示
$('.post-list').on 'click', (e) ->
e.preventDefault()
$this = $(this)
$this.siblings().removeClass('active')
$this.addClass('active')
id = $this.data('postId')
$.get('/posts/show_fragment', { id: id })
.done (data) ->
$('#list_post').html(data)
# 初期に詳細を表示
# open post when `id` parameter set.
id_param = RV.tools.getQueryParams()["id"]
if id_param?
$(".post-list[data-post-id='#{id_param}']").addClass('active')
$.get('/posts/show_fragment', {
'id': id_param,
})
.done (data) ->
$('#list_post').html(data)
# search form animation
$('#app-search-form input')
.on 'focus', ->
$(this).parents('#app-search-form').animate({width: '600px'})
.on 'blur', ->
$(this).parents('#app-search-form').animate({width: '200px'})
app/controllers/home_controller.rb
class HomeController < ApplicationController class HomeController < ApplicationController
def show def show
if user_signed_in?
if params[:q].present?
@posts = Post.build_query(params).limit(10)
else
@posts = Post.order(updated_at: :desc).limit(10)
end
render file: 'home/app'
else
render file: 'home/login'
end
end end
......
app/controllers/posts_controller.rb
...@@ -3,6 +3,23 @@ class PostsController < ApplicationController ...@@ -3,6 +3,23 @@ class PostsController < ApplicationController
include ApplicationHelper include ApplicationHelper
# GET /posts
# GET /posts.json
def index
if user_signed_in?
if params[:q].present?
@posts = Post.build_query(params).limit(10)
else
@posts = Post.order(updated_at: :desc).limit(10)
end
render
else
render file: 'home/login'
end
end
def preview def preview
render text: h_application_format_markdown(params[:text]) render text: h_application_format_markdown(params[:text])
end end
...@@ -12,11 +29,6 @@ class PostsController < ApplicationController ...@@ -12,11 +29,6 @@ class PostsController < ApplicationController
render layout: false, partial: 'posts/show_fragment' render layout: false, partial: 'posts/show_fragment'
end end
# GET /posts
# GET /posts.json
def index
@posts = Post.all
end
# GET /posts/1 # GET /posts/1
# GET /posts/1.json # GET /posts/1.json
......
app/views/home/app.html.erb deleted 100644 → 0
<div class="app">
<%= render partial: 'partials/app_header' %>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-4" id="sidebar" role="navigation">
<div class="list-group">
<% @posts.each do |post| %>
<a href="#" data-post-id="<%= post.id %>" class="list-group-item post-list"><%= post.title %></a>
<% end %>
</div>
</div><!--/span-->
<div class="col-xs-12 col-sm-6 col-md-8">
<div id="list_post">
<p style="color:#aaa;font-size:30px">&lt;-- Select a post...</p>
</div>
</div><!--/span-->
</div><!--/row-->
<hr>
<footer>
</footer>
</div><!--/.container-->
</div>
<% content_for :footer_js do %>
<script type="text/javascript">
$(function(){
'use strict';
// post list
$('.post-list').on('click', function(e){
e.preventDefault();
var $this = $(this);
$this.siblings().removeClass('active');
$this.addClass('active');
var id = $this.data('postId');
$.get('/posts/show_fragment', {
'id': id,
})
.done(function(data){
$('#list_post').html(data);
});
});
// initial post selection.
(function(){
// open post when `id` parameter set.
// /?a=b&c=123 ==> {"a": "b", "c": "123"}
var getQueryParams = function() {
var query = location.search.split("+").join(" "),
params = {},
tokens,
re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(query)) {
params[decodeURIComponent(tokens[1])]
= decodeURIComponent(tokens[2]);
}
return params;
}
var id_param = getQueryParams()["id"];
if(id_param) {
$(".post-list[data-post-id='" + id_param + "']").addClass('active');
$.get('/posts/show_fragment', {
'id': id_param,
})
.done(function(data){
$('#list_post').html(data);
});
}
})();
// search form
$('#app-search-form input').on('focus', function(){
$(this).parents('#app-search-form').animate({width: '600px'});
}).on('blur', function(){
$(this).parents('#app-search-form').animate({width: '200px'});
});
});
</script>
<% end %>
app/views/layouts/application.html.erb
...@@ -18,9 +18,15 @@ ...@@ -18,9 +18,15 @@
<%= yield %> <%= yield %>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
window.RV = window.RV || {};
window.RV.AllTags = JSON.parse('<%= raw Tag.all.pluck(:name).to_json %>');
</script>
<%= javascript_include_tag "application" %> <%= javascript_include_tag "application" %>
<%= yield :footer_js %> <%= yield :footer_js %>
......
app/views/posts/_form.html.erb
...@@ -68,80 +68,6 @@ ...@@ -68,80 +68,6 @@
<% content_for :footer_js do %> <% content_for :footer_js do %>
<script type="text/javascript"> <script type="text/javascript">
$(function(){
'use strict';
var confirmUnload = function() {
return 'このページを離れますか？';
};
$(window).on('beforeunload', confirmUnload);
$('#save_button').on('click', function(){
$(window).off('beforeunload', confirmUnload);
});
// Automaticaly change textarea height.
$('textarea.autosize').autosize();
// disable tab key
$('.disable-tab').on('keydown', function(e) {
var $this = $(this);
var keyCode = e.keyCode || e.which;
if (keyCode === 9) {
e.preventDefault();
var start = $this.get(0).selectionStart;
var end = $this.get(0).selectionEnd;
// set textarea value to: text before caret + tab + text after caret
$this.val($this.val().substring(0, start) +
'\t' +
$this.val().substring(end));
// put caret at right position again
$this.get(0).selectionStart =
$this.get(0).selectionEnd = start + 1;
} else if (keyCode === 13) {
var val = $this.val();
var start = $this.get(0).selectionStart;
var bl = val.lastIndexOf("\n", start-1);
var line = val.substring(bl, start);
var lm = line.match(/^\s+/);
var ns = lm ? lm[0].length - 1 : 0;
var nv = val.substring(0, start) + "\n";
for (var i=0; i<ns; i++) {
nv += "\t";
}
$this.val(nv+val.substring(start))
$this.get(0).selectionStart =
$this.get(0).selectionEnd = start + ns + 1;
e.preventDefault();
}
});
// new post tags
$('#post_tags').select2({
tags: <%= raw Tag.all.pluck(:name).to_json %>
});
// Preview post.
var load_preview = function(){
console.log('load_preview')
var text = $('#post_body').val();
var csrfToken = $("meta[name='csrf-token']").attr('content');
$.post('/posts/preview.api', {
'text': text,
'authenticity_token': csrfToken
})
.done(function(data){
$('#post_preview').html(data);
});
};
$('#post_body').on('keyup mouseup', load_preview);
$('#post_body').on('keyup mouseup', function(){
console.log('faij')
});
load_preview();
});
</script> </script>
<% end %> <% end %>
app/views/posts/index.html.erb
<h1>Listing posts</h1>
<div class="app">
<table>
<thead> <%= render partial: 'partials/app_header' %>
<tr>
<th>Title</th> <div class="container">
<th>Body</th>
<th></th> <div class="row">
<th></th>
<th></th> <div class="col-xs-6 col-md-4" id="sidebar" role="navigation">
</tr>
</thead> <div class="list-group">
<tbody>
<% @posts.each do |post| %> <% @posts.each do |post| %>
<tr> <a href="#" data-post-id="<%= post.id %>" class="list-group-item post-list"><%= post.title %></a>
<td><%= post.title %></td>
<td><%= post.body %></td>
<td><%= link_to 'Show', post %></td>
<td><%= link_to 'Edit', edit_post_path(post) %></td>
<td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %> <% end %>
</tbody> </div>
</table> </div><!--/span-->
<div class="col-xs-12 col-sm-6 col-md-8">
<div id="list_post">
<p style="color:#aaa;font-size:30px">&lt;-- Select a post...</p>
</div>
</div><!--/span-->
</div><!--/row-->
<hr>
<footer>
</footer>
</div><!--/.container-->
</div>
<br> <% content_for :footer_js do %>
<script type="text/javascript">
<%= link_to 'New Post', new_post_path %> </script>
<% end %>
config/routes.rb
Rendezvous::Application.routes.draw do Rendezvous::Application.routes.draw do
root 'home#show',as: 'root' root 'posts#index', as: 'root'
post 'posts/preview' => 'posts#preview' post 'posts/preview' => 'posts#preview'
get 'posts/show_fragment' => 'posts#show_fragment' get 'posts/show_fragment' => 'posts#show_fragment'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment