can3p (can3p) wrote in changelog,
can3p
can3p
changelog

[ljcom] r11513: LJSUP-11099: LJ Shop. Change LJ Tokens m...

Committer: dpetrov
LJSUP-11099: LJ Shop. Change LJ Tokens mechanics
U   trunk/cgi-bin/LJ/Widget/Shop.pm
A   trunk/htdocs/js/jquery/jquery.lj.range.js
U   trunk/templates/Shop/Wallet.tmpl
Modified: trunk/cgi-bin/LJ/Widget/Shop.pm
===================================================================
--- trunk/cgi-bin/LJ/Widget/Shop.pm	2012-02-22 09:08:51 UTC (rev 11512)
+++ trunk/cgi-bin/LJ/Widget/Shop.pm	2012-02-22 09:14:54 UTC (rev 11513)
@@ -423,6 +423,12 @@
         stc/framework/layout.css
         stc/framework/modules.css
         stc/shop/shop.css
+        stc/widgets/range.css
+        js/jquery/jquery.hotkeys.js
+        js/jquery/jquery.ui.mouse.min.js
+        js/jquery/jquery.ui.draggable.min.js
+        js/jquery/jquery.lj.range.js
+        js/jquery/shop/jquery.lj.tokenSelect.js
     ));
     LJ::need_res( {condition => 'IE'}, 'stc/shop/ie.css');
 }

Added: trunk/htdocs/js/jquery/jquery.lj.range.js
===================================================================
--- trunk/htdocs/js/jquery/jquery.lj.range.js	                        (rev 0)
+++ trunk/htdocs/js/jquery/jquery.lj.range.js	2012-02-22 09:14:54 UTC (rev 11513)
@@ -0,0 +1,236 @@
+ /**
+ * @author dmitry.petrov@sup.com (Dmitry Petrov)
+ * @fileoverview LiveJournal widget for range input element
+ */
+
+/**
+ * @name $.lj.range
+ * @requires $.ui.core, $.ui.widget, $.lj.basicWidget
+ * @class Widget represents custom input element of type range
+ *
+ */
+(function($,window) {
+
+	/** @lends $.lj.range.prototype */
+	$.widget('lj.range', $.lj.basicWidget, {
+		options: {
+			classNames: {
+			},
+
+			selectors: {
+				delimeters: '.b-range-item:not(.b-range-item-last)',
+				exceedMax: '.b-range-item-last',
+				handle: '.b-range-handle',
+				input: '.b-range-input'
+			},
+
+			valueInput: null,
+			min: 500,
+			max: 99999900,
+			step: 100,
+			defValue: 500,
+			delims: [500, 600, 700, 800, 900, 1000, 2000, 3000]
+		},
+
+		// private methods
+		_create: function() {
+			$.lj.basicWidget.prototype._create.apply(this);
+			this._input = this.options.valueInput || this._el('input');
+			this._input.val(this.options.defValue);
+
+			this._shift = (this._el('delimeters').slice(0).width() - this._el('handle').width()) /2;
+			this._offsets = this._precalcOffsets();
+			this._exceedOffset = this._el('exceedMax').offset().left + (this._el('exceedMax').width()) /2;
+			this._dx = 0;
+
+			this._startValue = 0;
+			this._updateHandle(this.options.defValue);
+			this._bindControls();
+		},
+
+		_bindControls: function() {
+			var self = this;
+
+			$.lj.basicWidget.prototype._bindControls.apply(this);
+
+			var firstDelim = this._el('delimeters').slice(0),
+				lastDelim = this._el('delimeters').slice(-1),
+				shift = (firstDelim.width() - this._el('handle').width()) /2;
+
+			this._el('handle').draggable({
+					axis: 'x',
+					containment: [ firstDelim.offset().left + shift, 0, lastDelim.offset().left + shift, 0 ],
+					drag: this._onChange.bind(this),
+					stop: this._dragStop.bind(this)
+				})
+				.mousedown(this._dragStart.bind(this))
+				.keydown('left', this._onKeyPress.bind(this, -this.options.step, true))
+				.keydown('right', this._onKeyPress.bind(this, this.options.step, true))
+				.keydown('home', this._onKeyPress.bind(this, this.options.min, false))
+				.keydown('end', this._onKeyPress.bind(this, this.options.max, false))
+				.keyup(this._onKeyUp.bind(this));
+
+			this._input
+				.keydown('down', this._onKeyPress.bind(this, -this.options.step, true))
+				.keydown('up', this._onKeyPress.bind(this, this.options.step, true))
+				.keyup(this._onKeyUp.bind(this));
+
+			this.element
+				.bind('mousedown touchstart', this._onChange.bind(this))
+
+			this._input
+				.input(this._onInput.bind(this))
+				.blur(this._onBlur.bind(this));
+
+			var form = this._input.get(0).form;
+			if (form) {
+				jQuery(form).bind('submit', this._onBlur.bind(this));
+			}
+
+			this._el('handle').mousedown(function(ev) {
+				this._el('handle').focus();
+			}.bind(this));
+		},
+
+		_onKeyPress: function(change, relative, ev) {
+			if (!this._startValue) {
+				this._startValue = this._input.val();
+			} else {
+				var diff = Math.abs(this._input.val() - this._startValue);
+
+				if (diff > 3000) {
+					change *= 3;
+				} else if (diff > 6000) {
+					change *= 8;
+				} else if (diff > 10000) {
+					change *= 15;
+				}
+			}
+
+			this.val(change, relative);
+			ev.preventDefault();
+		},
+
+		_onKeyUp: function(ev) {
+			this._startValue = 0;
+		},
+
+		_onBlur: function(ev) {
+			this.val(this._input.val());
+		},
+
+		_onInput: function(ev) {
+			var value = this._correctValue(this._input.val());
+			this._updateHandle(value);
+			//we do not update the value here, because users still types
+			//and we can still update the value on blur and submit events
+			this._trigger('change', 0, value);
+			
+		},
+
+		_onChange: function(ev) {
+			var val = this._getHandleValue(ev.pageX);
+			if (val !== this._input.val()) {
+				this.val(val);
+			}
+		},
+
+		_precalcOffsets: function() {
+			var delims = this._el('delimeters'),
+				offsets = [],
+				shift = this._shift;
+
+			delims.each(function() {
+				offsets.push(jQuery(this).offset().left + shift * 2);
+			});
+
+			return offsets;
+		},
+
+		_correctValue: function(value) {
+			var value, reminder;
+
+			reminder = value % this.options.step;
+			value -= reminder;
+
+			if (reminder / this.options.step > 0.5) {
+				value += this.options.step;
+			}
+
+			if (value < this.options.min) { value = this.options.min; }
+			if (value > this.options.max) { value = this.options.max; }
+
+			return value;
+		},
+
+		_getHandleValue: function(pageX) {
+			var delims = this.options.delims,
+				idx = 0,
+				shift = 0,
+				x = pageX + this._dx,
+				value;
+
+			if (x <= this._offsets[0]) { return delims[0]; }
+			if (x >= this._offsets[this._offsets.length - 1]) {
+				console.log(delims[delims.length - 1]);
+				return delims[delims.length - 1];
+			} 
+
+			while (x > this._offsets[idx]) { idx++; }
+			shift = (x - this._offsets[idx-1]) / (this._offsets[idx] - this._offsets[idx-1]);
+			value = delims[idx - 1] + shift * (delims[idx] - delims[idx-1]);
+
+			return this._correctValue(value);
+		},
+
+		_dragStart: function(ev) {
+			this._dx = this._el('handle').offset().left + this._shift - ev.pageX;
+		},
+
+		_dragStop: function(ev) {
+			this._dx = 0;
+			this._updateHandle();
+		},
+
+		_updateHandle: function(val) {
+			var delims = this.options.delims,
+				idx = 0,
+				position;
+
+			val = val || this._input.val();
+
+			if (val <= delims[0]) {
+				position = this._offsets[0];
+			} else if (val > delims[delims.length - 1]) {
+				position = this._exceedOffset;
+			} else if (val === delims[delims.length - 1]) {
+				position = delims[delims.length - 1];
+			} else {
+				while (val > delims[idx]) { idx++; }
+				shift = (val - delims[idx-1]) / (delims[idx] - delims[idx-1]);
+				position = this._offsets[idx - 1] + shift * (this._offsets[idx] - this._offsets[idx-1]);
+			}
+
+			this._el('handle').css('left', position - this._offsets[0]);
+		},
+
+		val: function(value, relative) {
+			if (arguments.length === 0) {
+				return this._value;
+			} else {
+				value = parseInt(value, 10) || 0;
+				if (relative) {
+					value += +this._input.val();
+				}
+				value = this._correctValue(value);
+				this._input.val(value);
+				this._updateHandle();
+				this._trigger('change', 0, value);
+			}
+		}
+	});
+
+})(jQuery, window);
+
+
+

Modified: trunk/templates/Shop/Wallet.tmpl
===================================================================
--- trunk/templates/Shop/Wallet.tmpl	2012-02-22 09:08:51 UTC (rev 11512)
+++ trunk/templates/Shop/Wallet.tmpl	2012-02-22 09:14:54 UTC (rev 11513)
@@ -45,7 +45,7 @@
 	</ul>
 
 	<ul class="b-buy-goods">
-		<li class="b-buy-goods-item
+		<li id="buytokens" class="b-buy-goods-item
 					<TMPL_IF tab_buy_active> current</TMPL_IF>
 					">
 			<form action="<TMPL_VAR self_uri>" method="post">
@@ -56,13 +56,13 @@
 					<div class="b-wallet2">
 						<TMPL_INCLUDE templates/Widgets/range.tmpl>
 						<label for="buy_select" class="b-wallet2-tokens">
-							<input type="text" name="buy_select" id="buy_select" value="100" maxlength="10" tabindex="50" class="b-wallet2-amount">
+							<input type="text" name="buy_select" id="buy_select" value="100" maxlength="8" tabindex="55" class="b-wallet2-amount">
 							<span><TMPL_VAR expr="ml('shop.view.wallet.buy.tokens')"></span>
 						</label>
 					</div>
 
 					<div class="b-buy-total canyon">
-						<p class="canyon-section"><TMPL_VAR EXPR="ml('/shop/paidaccount.bml.total')">: <strong>$<span class="i-total"></span></strong></p>
+						<p class="canyon-section"><TMPL_VAR EXPR="ml('/shop/paidaccount.bml.total')">: <strong><span class="i-total"></span></strong></p>
 						<p class="canyon-side">
 							<a href="<TMPL_VAR siteroot>/shop/history.bml?tab=tokens"><TMPL_VAR EXPR="ml('wallet.bml.langing.text.history.link')"></a>
 							<TMPL_VAR proceed_buy_btn>
@@ -89,17 +89,18 @@
 				<fieldset>
 					<TMPL_VAR form_auth>
 					<input type="hidden" name="act" value="send">
+					<div class="b-wallet-send">
+						<p>
+							<TMPL_VAR amt_input>
+							<label for="send_to"><TMPL_VAR expr="ml('wallet.bml.landing.label.send_tokens.to')"></label>
+							<TMPL_VAR to_input>
+						</p>
 					
-					<p>
-						<TMPL_VAR amt_input>
-						<label for="send_to"><TMPL_VAR expr="ml('wallet.bml.landing.label.send_tokens.to')"></label>
-						<TMPL_VAR to_input>
-					</p>
+						<p class="b-shop-desc"><TMPL_VAR expr="ml('shop.view.wallet.send.desc')"></p>
 					
-					<p class="b-shop-desc"><TMPL_VAR expr="ml('shop.view.wallet.send.desc')"></p>
+						<p><input type="checkbox" name="wallet_gift_anon" id="wallet_gift_anon" value="1" class="checkbox" /><label for="wallet_gift_anon"><TMPL_VAR expr="ml('shop.view.wallet.anon')"></label></p>
+					</div>
 					
-					<p><input type="checkbox" name="wallet_gift_anon" id="wallet_gift_anon" value="1" class="checkbox" /><label for="wallet_gift_anon"><TMPL_VAR expr="ml('shop.view.wallet.anon')"></label></p>
-					
 					<div class="b-buy-total canyon">
 						<p class="canyon-section">Total: <strong>$<span class="i-total"></span></strong></p>
 						<p class="canyon-side"><TMPL_VAR proceed_xfer_btn></p>
@@ -133,6 +134,12 @@
 			</script>
 		</li>
 	</ul>
+			<script>
+				setTimeout(function() {
+					jQuery('#buytokens').tokenSelect();
+				}, 0);
+
+			</script>
 </div>
 
 <script type="text/javascript">

Tags: can3p, dpetrov, js, ljcom, pm, tmpl
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 0 comments