Skip to content

Commit

Permalink
Added confirmation message before deleting a beer from the scratchpad.
Browse files Browse the repository at this point in the history
  • Loading branch information
jdlayman committed Aug 21, 2012
1 parent aae6d85 commit 8370c29
Show file tree
Hide file tree
Showing 3 changed files with 247 additions and 26 deletions.
57 changes: 31 additions & 26 deletions application/views/pages/scratchpad.php
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@

<h2>My Scratchpad&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo anchor( base_url( "log/scratch/" ), "+ Add" ); ?></h2>
<div class="page-header">
<h1>My Scratchpad</h1>
</div>
<div class="btn-group">
<?php echo anchor( base_url( 'log/scratch/' ), '<i class="icon-plus"></i> Add', array( 'class' => 'btn' ) ); ?>
</div>
<p>
<?php
if( count( $scratches ) > 0 ) {
Expand All @@ -9,28 +13,18 @@
$this->table->set_template( $tmpl );
$this->table->set_heading( '', '', '', 'Date', 'Brewery', 'Beer', 'Size', 'Rating', 'Notes' );
foreach( $scratches as $scratch ) {
$edit_props = array(
'src' => 'img/pencil.png',
'alt' => 'Edit',
);
$edit = anchor( base_url( 'log/scratch/' . $scratch[ 'scratchpad_id' ] ), img( $edit_props ), array( 'title' => 'Edit' ) );
$convert_props = array(
'src' => 'img/checkmark-green.png',
'alt' => 'Convert',
);
$convert = anchor( base_url( 'log/scratch/' . $scratch[ 'scratchpad_id' ] . "/c/" ), img( $convert_props ), array( 'title' => 'Convert' ) );
$delete_props = array(
'src' => 'img/red-x.png',
'alt' => 'Delete',
);
$delete = anchor( base_url( 'log/scratch/' . $scratch[ 'scratchpad_id' ] . "/x/" ), img( $delete_props ), array( 'title' => 'Delete' ) );
$date = $scratch[ 'date' ];
$brewery = $scratch[ 'brewer' ];
$beer = $scratch[ 'beer' ];
$sstyle = $scratch[ 'substyle' ];
$size = $scratch[ 'size' ];
$rating = $scratch[ 'rating' ];
$notes = $scratch[ 'notes' ];
$date = $scratch[ 'date' ];
$brewery = $scratch[ 'brewer' ];
$beer = $scratch[ 'beer' ];
$sstyle = $scratch[ 'substyle' ];
$size = $scratch[ 'size' ];
$rating = $scratch[ 'rating' ];
$notes = $scratch[ 'notes' ];
$message = 'Are you sure you want to delete ' . $beer . ' from your scratchpad?';
$deleteUrl = base_url( 'log/scratch/' . $scratch[ 'scratchpad_id' ] . '/x/' );
$edit = anchor( base_url( 'log/scratch/' . $scratch[ 'scratchpad_id' ] ), '<i class="icon-pencil"></i>', array( 'title' => 'Edit' ) );
$convert = anchor( base_url( 'log/scratch/' . $scratch[ 'scratchpad_id' ] . "/c/" ), '<i class="icon-ok"></i>', array( 'title' => 'Convert' ) );
$delete = anchor( '#confirmationModal', '<i class="icon-remove"></i>', array( 'title' => 'Delete', 'onClick' => 'confirmMessage( \'Confirm Delete\', \'' . $message . '\', \'' . $deleteUrl .'\', \'Delete\');', 'data-toggle' => 'modal'));
$this->table->add_row( $edit, $convert, $delete, $date, $brewery, $beer, $size, $rating, $notes );
}
echo $this->table->generate();
Expand All @@ -39,7 +33,18 @@
}
?>
</p>
<div id="confirmationModal" class="modal hide fade">
<div class="modal-header"><h3>Test</h3></div>
<div class="modal-body">blah</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal">Close</a>
<a class="btn btn-primary" id="modal-link" href="#">Confirm</a>
</div>
</div>
<?php
$source = base_url( "/js/" );
echo '<script type="text/javascript" src="' . $source . '/sorttable.js"></script>' ;
?>
echo '<script type="text/javascript" src="' . $source . '/sorttable.js"></script>';
?>
<script type="text/javascript" src="<?php echo $source . '/jquery.js' ?>"></script>
<script type="text/javascript" src="<?php echo $source . '/bootstrap-modal.js' ?>"></script>
<script type="text/javascript" src="<?php echo $source . '/confirmation.js' ?>"></script></head>
210 changes: 210 additions & 0 deletions beer366.shraps.net/js/bootstrap-modal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
/* =========================================================
* bootstrap-modal.js v2.0.1
* 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 = 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 = $('<div class="modal-backdrop ' + animate + '" />')
.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 = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
if (!data) $this.data('modal', (data = new Modal(this, options)))
if (typeof option == 'string') data[option]()
else if (options.show) data.show()
})
}

$.fn.modal.defaults = {
backdrop: true
, keyboard: true
, show: 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 );
6 changes: 6 additions & 0 deletions beer366.shraps.net/js/confirmation.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
confirmMessage = function( title, body, link, linkText ) {
$('.modal-header h3').html(title);
$('.modal-body').html(body);
$('#modal-link').attr('href', link);
$('#modal-link').html(linkText);
};

0 comments on commit 8370c29

Please sign in to comment.