From e0b29048f459ba6eff624be2ffbb89f05675c77f Mon Sep 17 00:00:00 2001 From: Maxwell Salzberg Date: Wed, 15 Feb 2012 23:40:01 -0800 Subject: [PATCH] haxy auto comment functionality; try me and then revert me" --- app/controllers/comments_controller.rb | 2 +- app/views/posts/show.html.haml | 19 ++ .../vendor/bootstrap/bootstrap-modal.js | 209 ++++++++++++++++++ .../vendor/bootstrap/bootstrap-transition.js | 51 +++++ 4 files changed, 280 insertions(+), 1 deletion(-) create mode 100644 public/javascripts/vendor/bootstrap/bootstrap-modal.js create mode 100644 public/javascripts/vendor/bootstrap/bootstrap-transition.js diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb index 6c43f2455..44a149e9e 100644 --- a/app/controllers/comments_controller.rb +++ b/app/controllers/comments_controller.rb @@ -21,7 +21,7 @@ class CommentsController < ApplicationController if @comment respond_to do |format| format.json{ render :json => @comment.as_api_response(:backbone), :status => 201 } - format.html{ render :nothing => true, :status => 201 } + format.html{ redirect_to :back} format.mobile{ render :partial => 'comment', :locals => {:post => @comment.post, :comment => @comment} } end else diff --git a/app/views/posts/show.html.haml b/app/views/posts/show.html.haml index d32cc8768..41fb3e3aa 100644 --- a/app/views/posts/show.html.haml +++ b/app/views/posts/show.html.haml @@ -5,6 +5,18 @@ - content_for :page_title do = post_page_title @post +- content_for :head do + =javascript_include_tag 'vendor/bootstrap/bootstrap-transition', 'vendor/bootstrap/bootstrap-modal' + +:javascript + $(function(){ + $(document).keypress(function(event){ + $('#text').focus(); + $('#comment').modal(); + $('#text').focus(); + }); + }); + #post-author-header = person_image_tag @post.author = @post.author.name @@ -13,3 +25,10 @@ = link_to image_tag('arrow-left.png'), post_path(@post.id-1), :class => 'nav-arrow left' = link_to image_tag('arrow-right.png'), post_path(@post.id+1), :class => 'nav-arrow right' + +#comment.modal.fade + .modal-body + = form_tag comments_path, :remote => true do + = text_area_tag :text, '' + = hidden_field_tag :post_id, @post.id + = submit_tag 'submit', :onclick => "$('#comment').modal('hide'); $('#text').text('')" \ No newline at end of file diff --git a/public/javascripts/vendor/bootstrap/bootstrap-modal.js b/public/javascripts/vendor/bootstrap/bootstrap-modal.js new file mode 100644 index 000000000..bac0dee18 --- /dev/null +++ b/public/javascripts/vendor/bootstrap/bootstrap-modal.js @@ -0,0 +1,209 @@ +/* ========================================================= + * bootstrap-modal.js v2.0.0 + * http://twitter.github.com/bootstrap/javascript.html#modals + * ========================================================= + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================= */ + + +!function( $ ){ + + "use strict" + + /* MODAL CLASS DEFINITION + * ====================== */ + + var Modal = function ( content, options ) { + this.options = $.extend({}, $.fn.modal.defaults, options) + this.$element = $(content) + .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this)) + } + + Modal.prototype = { + + constructor: Modal + + , toggle: function () { + return this[!this.isShown ? 'show' : 'hide']() + } + + , show: function () { + var that = this + + if (this.isShown) return + + $('body').addClass('modal-open') + + this.isShown = true + this.$element.trigger('show') + + escape.call(this) + backdrop.call(this, function () { + var transition = $.support.transition && that.$element.hasClass('fade') + + !that.$element.parent().length && that.$element.appendTo(document.body) //don't move modals dom position + + that.$element + .show() + + if (transition) { + that.$element[0].offsetWidth // force reflow + } + + that.$element.addClass('in') + + transition ? + that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) : + that.$element.trigger('shown') + + }) + } + + , hide: function ( e ) { + e && e.preventDefault() + + if (!this.isShown) return + + var that = this + this.isShown = false + + $('body').removeClass('modal-open') + + escape.call(this) + + this.$element + .trigger('hide') + .removeClass('in') + + $.support.transition && this.$element.hasClass('fade') ? + hideWithTransition.call(this) : + hideModal.call(this) + } + + } + + + /* MODAL PRIVATE METHODS + * ===================== */ + + function hideWithTransition() { + var that = this + , timeout = setTimeout(function () { + that.$element.off($.support.transition.end) + hideModal.call(that) + }, 500) + + this.$element.one($.support.transition.end, function () { + clearTimeout(timeout) + hideModal.call(that) + }) + } + + function hideModal( that ) { + this.$element + .hide() + .trigger('hidden') + + backdrop.call(this) + } + + function backdrop( callback ) { + var that = this + , animate = this.$element.hasClass('fade') ? 'fade' : '' + + if (this.isShown && this.options.backdrop) { + var doAnimate = $.support.transition && animate + + this.$backdrop = $('
') + .appendTo(document.body) + + if (this.options.backdrop != 'static') { + this.$backdrop.click($.proxy(this.hide, this)) + } + + if (doAnimate) this.$backdrop[0].offsetWidth // force reflow + + this.$backdrop.addClass('in') + + doAnimate ? + this.$backdrop.one($.support.transition.end, callback) : + callback() + + } else if (!this.isShown && this.$backdrop) { + this.$backdrop.removeClass('in') + + $.support.transition && this.$element.hasClass('fade')? + this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) : + removeBackdrop.call(this) + + } else if (callback) { + callback() + } + } + + function removeBackdrop() { + this.$backdrop.remove() + this.$backdrop = null + } + + function escape() { + var that = this + if (this.isShown && this.options.keyboard) { + $(document).on('keyup.dismiss.modal', function ( e ) { + e.which == 27 && that.hide() + }) + } else if (!this.isShown) { + $(document).off('keyup.dismiss.modal') + } + } + + + /* MODAL PLUGIN DEFINITION + * ======================= */ + + $.fn.modal = function ( option ) { + return this.each(function () { + var $this = $(this) + , data = $this.data('modal') + , options = typeof option == 'object' && option + if (!data) $this.data('modal', (data = new Modal(this, options))) + if (typeof option == 'string') data[option]() + else data.show() + }) + } + + $.fn.modal.defaults = { + backdrop: true + , keyboard: true + } + + $.fn.modal.Constructor = Modal + + + /* MODAL DATA-API + * ============== */ + + $(function () { + $('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) { + var $this = $(this), href + , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 + , option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data()) + + e.preventDefault() + $target.modal(option) + }) + }) + +}( window.jQuery ) \ No newline at end of file diff --git a/public/javascripts/vendor/bootstrap/bootstrap-transition.js b/public/javascripts/vendor/bootstrap/bootstrap-transition.js new file mode 100644 index 000000000..4b6bb0d95 --- /dev/null +++ b/public/javascripts/vendor/bootstrap/bootstrap-transition.js @@ -0,0 +1,51 @@ +/* =================================================== + * bootstrap-transition.js v2.0.0 + * http://twitter.github.com/bootstrap/javascript.html#transitions + * =================================================== + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + +!function( $ ) { + + $(function () { + + "use strict" + + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) + * ======================================================= */ + + $.support.transition = (function () { + var thisBody = document.body || document.documentElement + , thisStyle = thisBody.style + , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined + + return support && { + end: (function () { + var transitionEnd = "TransitionEnd" + if ( $.browser.webkit ) { + transitionEnd = "webkitTransitionEnd" + } else if ( $.browser.mozilla ) { + transitionEnd = "transitionend" + } else if ( $.browser.opera ) { + transitionEnd = "oTransitionEnd" + } + return transitionEnd + }()) + } + })() + + }) + +}( window.jQuery ) \ No newline at end of file