added gritter buy notification, buy delay and fixed styles for search and buy

k4ever/buyable/templates/buyables/product_list.html

@@ -9,7 +9,7 @@
 					<a href="/store/show/{{ buyable.id }}"><img src="{% thumbnail buyable.image 64x64 %}"/></a>
 				</td>
 				<td class="name"><a href="/store/show/{{ buyable.id }}">{{ buyable.name }}</a></td>
-				<td class="actions">
+				<td class="actions" data-image="{% thumbnail buyable.image 48x48 %}" data-name="{{ buyable.name }}" data-id="{{ buyable.id }}">
 					{% if buyable.hasDeposit %}
 						<a class="button buy" href="/store/buy/{{ buyable.id }}"
 							title="Kaufen (Ohne Pfand)">

k4ever/buyable/templates/buyables/showItem.html

@@ -14,7 +14,7 @@
 					<h2>{{ item.name }}</h2>
 
 					<h3>Kaufen</h3>
-					<div class="actions clearAfter">
+					<div class="actions clearAfter" data-image="{% thumbnail item.image 48x48 %}" data-name="{{ item.name }}" data-id="{{ item.id }}">
 						<a class="button buy" href="/store/buy/{{ item.id }}/">
 							<span><span>{{ item.price|floatformat:2 }}€</span></span>
 						</a>

k4ever/main/templates/base.html

@@ -11,6 +11,7 @@
 		<script type='text/javascript' src="{{ MEDIA_URL }}js/jquery-1.5.1.js"></script>
 		<script type='text/javascript' src="{{ MEDIA_URL }}js/jquery-ui-1.8.10.custom.min.js"></script>
 		<script type='text/javascript' src="{{ MEDIA_URL }}js/jquery.ui.autocomplete.html.js"></script>
+		<script type='text/javascript' src="{{ MEDIA_URL }}js/jquery.gritter.min.js"></script>
 		<script type='text/javascript' src="{{ MEDIA_URL }}js/k4ever.js"></script>
 		{% block extrahead %}{% endblock %}
 		<title>Freitagsrundenkasse{% block "title" %}{% endblock %}</title>

k4ever/main/templates/main/product_list.html

@@ -9,7 +9,7 @@
 					<a href="/store/show/{{ buyable.buyable__id }}"><img src="{% thumbnail buyable.buyable__image 64x64 %}" /></a>
 				</td>
 				<td class="name"><span>{{ buyable.buyable__name }}</span> {% if buyable.num_buys %}({{ buyable.num_buys }} mal gekauft){% endif %}</td>
-				<td class="actions">
+				<td class="actions" data-image="{% thumbnail buyable.buyable__image 48x48 %}" data-name="{{ buyable.buyable__name }}" data-id="{{ buyable.buyable__id }}">
 					{% if buyable.buyable__deposit > 0 %}
 						<a class="button buy" href="/store/buy/{{ buyable.buyable__id }}" title="Kaufen (Ohne Pfand)"><span><span>{{ buyable.buyable__price|floatformat:2 }}€</span></span></a>
 						<a class="button buy inclDeposit" href="/store/buy/{{ buyable.buyable__id }}/with/deposit" title="Kaufen (Mit Pfand)"><span><span>{{ buyable.buyable__price|floatformat:2 }}€ / {{ buyable.buyable__deposit|floatformat:2 }}€</span></span></a>

k4ever/media/css/jquery.gritter.css

@@ -0,0 +1,89 @@
+/* the norm */
+#gritter-notice-wrapper {
+	position:fixed;
+	top:20px;
+	right:20px;
+	width:301px;
+	z-index:9999;
+}
+#gritter-notice-wrapper.top-left {
+    left: 20px;
+    right: auto;
+}
+#gritter-notice-wrapper.bottom-right {
+    top: auto;
+    left: auto;
+    bottom: 20px;
+    right: 20px;
+}
+#gritter-notice-wrapper.bottom-left {
+    top: auto;
+    right: auto;
+    bottom: 20px;
+    left: 20px;
+}
+.gritter-item-wrapper {
+	position:relative;
+	margin:0 0 10px 0;
+	background:url('img/ie-spacer.gif'); /* ie7/8 fix */
+}
+.gritter-top {
+	background:url(img/gritter.png) no-repeat left -30px;
+	height:10px;
+}
+.hover .gritter-top {
+	background-position:right -30px;
+}
+.gritter-bottom {
+	background:url(img/gritter.png) no-repeat left bottom;
+	height:8px;
+	margin:0;
+}
+.hover .gritter-bottom {
+	background-position: bottom right;
+}
+.gritter-item {
+	display:block;
+	background:url(img/gritter.png) no-repeat left -40px;
+	color:#eee;
+	padding:2px 11px 8px 11px;
+	font-size: 11px;
+	font-family:verdana;
+}
+.hover .gritter-item {
+	background-position:right -40px;
+}
+.gritter-item p {
+	padding:0;
+	margin:0;
+}
+.gritter-close {
+	display:none;
+	position:absolute;
+	top:5px;
+	left:3px;
+	background:url(img/gritter.png) no-repeat left top;
+	cursor:pointer;
+	width:30px;
+	height:30px;
+}
+.gritter-title {
+	font-size:14px;
+	font-weight:bold;
+	padding:0 0 7px 0;
+	display:block;
+	text-shadow:1px 1px #000; /* Not supported by IE :( */
+}
+.gritter-image {
+	width:48px;
+	height:48px;
+	float:left;
+}
+.gritter-with-image,
+.gritter-without-image {
+	padding:0 0 5px 0;
+}
+.gritter-with-image {
+	width:220px;
+	float:right;
+}

k4ever/media/css/style.css

@@ -1,6 +1,8 @@
 @import "http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700.css";
 
 @import "http://fonts.googleapis.com/css?family=Ubuntu:400,700.css";
+
+@import "jquery.gritter.css";
 /* IF IM NOT A .LESS FILE DO NOT EDIT ME, BUT EDIT THE LESS FILE INSTEAD :)
    @see http://lesscss.org/ */
 /*
@@ -217,7 +219,6 @@ p {
   display: table-row;
 }
 #header .search ul.ui-autocomplete li.ui-menu-item:hover, #header .search ul.ui-autocomplete li.ui-menu-item.focus {
-  color: white;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#32bbef), to(#3398cc));
   background-image: -webkit-linear-gradient(top, #32bbef, #3398cc);
   background-image: -moz-linear-gradient(top, #32bbef, #3398cc);
@@ -229,6 +230,9 @@ p {
   -webkit-box-shadow: 0 0 5px #666666;
   box-shadow: 0 0 5px #666666;
 }
+#header .search ul.ui-autocomplete li.ui-menu-item:hover a, #header .search ul.ui-autocomplete li.ui-menu-item.focus a {
+  color: white !important;
+}
 #header .search ul.ui-autocomplete li.ui-menu-item a span {
   line-height: 1;
   vertical-align: top;
@@ -534,6 +538,9 @@ table.itemListContainer > tbody > tr:first-child ~ tr > td {
   background-image: url("img/payment_deposit.png");
   min-width: 65px;
 }
+.button.buy.locked > span {
+  background: url("img/locked.png") no-repeat center 0;
+}
 .button:hover {
   background-color: #000000 !important;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#000000));

k4ever/media/css/style.less

@@ -14,6 +14,8 @@
 @import "http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700.css";
 @import "http://fonts.googleapis.com/css?family=Ubuntu:400,700.css";
 
+@import "jquery.gritter.css";
+
 
 /* this is a css style reset. there’s much discussion if something like this
    is helpful and appropriate. well... it’s here for now, so please don’t
@@ -226,9 +228,12 @@ p {
 				display: table-row;
 
 				&:hover, &.focus {
-					color: white;
 					.vertical-linear-gradient(@clrLightBlue, @clrMediumBlue);
 					.box-shadow(0 0 5px @clrMediumGrey);
+
+					a {
+						color: white !important;
+					}
 				}
 
 				a {
@@ -540,6 +545,10 @@ table.itemListContainer {
 			background-image: url("@{fldImages}/payment_deposit.png");
 			min-width: 65px;
 		}
+
+		&.locked > span {
+			background: url("@{fldImages}/locked.png") no-repeat center 0;
+		}
 	}
 
 	&:hover {

k4ever/media/js/jquery.gritter.min.js

@@ -0,0 +1,11 @@
+/*
+ * Gritter for jQuery
+ * http://www.boedesign.com/
+ *
+ * Copyright (c) 2011 Jordan Boesch
+ * Dual licensed under the MIT and GPL licenses.
+ *
+ * Date: July 9, 2011
+ * Version: 1.7.1
+ */
+(function(b){b.gritter={};b.gritter.options={position:"",fade_in_speed:"medium",fade_out_speed:1000,time:6000};b.gritter.add=function(f){try{return a.add(f||{})}catch(d){var c="Gritter Error: "+d;(typeof(console)!="undefined"&&console.error)?console.error(c,f):alert(c)}};b.gritter.remove=function(d,c){a.removeSpecific(d,c||{})};b.gritter.removeAll=function(c){a.stop(c||{})};var a={position:"",fade_in_speed:"",fade_out_speed:"",time:"",_custom_timer:0,_item_count:0,_is_setup:0,_tpl_close:'<div class="gritter-close"></div>',_tpl_item:'<div id="gritter-item-[[number]]" class="gritter-item-wrapper [[item_class]]" style="display:none"><div class="gritter-top"></div><div class="gritter-item">[[close]][[image]]<div class="[[class_name]]"><span class="gritter-title">[[username]]</span><p>[[text]]</p></div><div style="clear:both"></div></div><div class="gritter-bottom"></div></div>',_tpl_wrap:'<div id="gritter-notice-wrapper"></div>',add:function(g){if(!g.title||!g.text){throw'You need to fill out the first 2 params: "title" and "text"'}if(!this._is_setup){this._runSetup()}var i=g.title,n=g.text,e=g.image||"",l=g.sticky||false,m=g.class_name||"",k=b.gritter.options.position,d=g.time||"";this._verifyWrapper();this._item_count++;var f=this._item_count,j=this._tpl_item;b(["before_open","after_open","before_close","after_close"]).each(function(p,q){a["_"+q+"_"+f]=(b.isFunction(g[q]))?g[q]:function(){}});this._custom_timer=0;if(d){this._custom_timer=d}var c=(e!="")?'<img src="'+e+'" class="gritter-image" />':"",h=(e!="")?"gritter-with-image":"gritter-without-image";j=this._str_replace(["[[username]]","[[text]]","[[close]]","[[image]]","[[number]]","[[class_name]]","[[item_class]]"],[i,n,this._tpl_close,c,this._item_count,h,m],j);this["_before_open_"+f]();b("#gritter-notice-wrapper").addClass(k).append(j);var o=b("#gritter-item-"+this._item_count);o.fadeIn(this.fade_in_speed,function(){a["_after_open_"+f](b(this))});if(!l){this._setFadeTimer(o,f)}b(o).bind("mouseenter mouseleave",function(p){if(p.type=="mouseenter"){if(!l){a._restoreItemIfFading(b(this),f)}}else{if(!l){a._setFadeTimer(b(this),f)}}a._hoverState(b(this),p.type)});return f},_countRemoveWrapper:function(c,d,f){d.remove();this["_after_close_"+c](d,f);if(b(".gritter-item-wrapper").length==0){b("#gritter-notice-wrapper").remove()}},_fade:function(f,c,h,d){var h=h||{},g=(typeof(h.fade)!="undefined")?h.fade:true;fade_out_speed=h.speed||this.fade_out_speed,manual_close=d;this["_before_close_"+c](f,manual_close);if(d){f.unbind("mouseenter mouseleave")}if(g){f.animate({opacity:0},fade_out_speed,function(){f.animate({height:0},300,function(){a._countRemoveWrapper(c,f,manual_close)})})}else{this._countRemoveWrapper(c,f)}},_hoverState:function(d,c){if(c=="mouseenter"){d.addClass("hover");d.find(".gritter-close").show();d.find(".gritter-close").click(function(){var e=d.attr("id").split("-")[2];a.removeSpecific(e,{},d,true)})}else{d.removeClass("hover");d.find(".gritter-close").hide()}},removeSpecific:function(c,g,f,d){if(!f){var f=b("#gritter-item-"+c)}this._fade(f,c,g||{},d)},_restoreItemIfFading:function(d,c){clearTimeout(this["_int_id_"+c]);d.stop().css({opacity:""})},_runSetup:function(){for(opt in b.gritter.options){this[opt]=b.gritter.options[opt]}this._is_setup=1},_setFadeTimer:function(f,d){var c=(this._custom_timer)?this._custom_timer:this.time;this["_int_id_"+d]=setTimeout(function(){a._fade(f,d)},c)},stop:function(e){var c=(b.isFunction(e.before_close))?e.before_close:function(){};var f=(b.isFunction(e.after_close))?e.after_close:function(){};var d=b("#gritter-notice-wrapper");c(d);d.fadeOut(function(){b(this).remove();f()})},_str_replace:function(v,e,o,n){var k=0,h=0,t="",m="",g=0,q=0,l=[].concat(v),c=[].concat(e),u=o,d=c instanceof Array,p=u instanceof Array;u=[].concat(u);if(n){this.window[n]=0}for(k=0,g=u.length;k<g;k++){if(u[k]===""){continue}for(h=0,q=l.length;h<q;h++){t=u[k]+"";m=d?(c[h]!==undefined?c[h]:""):c[0];u[k]=(t).split(l[h]).join(m);if(n&&u[k]!==t){this.window[n]+=(t.length-u[k].length)/l[h].length}}}return p?u:u[0]},_verifyWrapper:function(){if(b("#gritter-notice-wrapper").length==0){b("body").append(this._tpl_wrap)}}}})(jQuery);

k4ever/media/js/k4ever.js

@@ -9,6 +9,48 @@ jQuery(document).ready(function($) {
 	var lock = false;
 	var items = [false];
 
+	var buyItem = function(id, callback) {
+		$.post("/api2/buyable/item/" + id, {
+			"POSTDATA": "Y U NO CANT BE EMPTY"
+		}, callback);
+	};
+
+	$.extend($.gritter.options, {
+		position: "top-right",
+		fade_in_speed: 100,
+		fade_out_speed: 100,
+		time: 3000
+	});
+
+	$("a.buy").click(function(evt) {
+		var button = $(this);
+		evt.preventDefault();
+
+		if(button.hasClass("locked"))
+			return;
+
+		dataContainer = button.parent();
+		dataContainer.children().addClass("locked");
+
+		var id = dataContainer.attr("data-id");
+		var name = dataContainer.attr("data-name");
+		var image = dataContainer.attr("data-image");
+
+		buyItem(id, function(data, status) {
+			$.gritter.add({
+				title: name + " gekauft",
+				text: "Der Artikel wurde erfolgreich gebucht",
+				image: image
+			});
+
+			dataContainer.children().removeClass("locked");
+		});
+
+
+	});
+
+
+
 	$.getJSON("/api2/buyable/item", function(data) {
 		if(data.error === undefined) {
 			source = [];
@@ -61,9 +103,7 @@ jQuery(document).ready(function($) {
 				if(lock && event.keyCode === 39) {
 					selected_item.addClass("load");
 
-					$.post("/api2/buyable/item/" + selection.value, {
+					buyItem(selection.value, function(data, status) {
-						"POSTDATA": "YUNOCANTBEEMPTY"
-					}, function(data, status) {
 						selected_item.removeClass("load");
 
 						if(status === "success") {