-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #14 from peckadesign/13-pdbox-historie
#13 Historie a pdbox
- Loading branch information
Showing
9 changed files
with
696 additions
and
95 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| (function($, undefined) { | ||
|
|
||
| /** | ||
| * @author Radek Šerý | ||
| * | ||
| * Inicializace .inp-combined elementů | ||
| */ | ||
| $.nette.ext('inpCombined', { | ||
| init: function() { | ||
| var snippetsExt = this.ext('snippets', true); | ||
| var ext = this; | ||
|
|
||
|
|
||
| snippetsExt.after(function($el) { | ||
| $el.find(ext.selector + '__input') | ||
| .trigger('focusout') | ||
| .hide().show(); | ||
| }); | ||
|
|
||
|
|
||
| var className = ext.selector.substring(1); | ||
|
|
||
| $(document) | ||
| .on('focusin', this.selector + '__input', function(e) { | ||
| $(this).closest(ext.selector).addClass(className + '--focus'); | ||
| }) | ||
| .on('focusout change', ext.selector + '__input', function(e) { | ||
| var $inpCombined = $(this).closest(ext.selector); | ||
|
|
||
| if ($inpCombined.hasClass(className + '--static')) { | ||
| return; | ||
| } | ||
|
|
||
| if ($(this).val().length) { | ||
| $inpCombined.addClass(className + '--filled'); | ||
| } else { | ||
| $inpCombined.removeClass(className + '--filled'); | ||
| } | ||
|
|
||
| if (e.type === 'focusout') { | ||
| $inpCombined.removeClass(className + '--focus'); | ||
| } | ||
| }) | ||
| .find(ext.selector + '__input') | ||
| .trigger('focusout') | ||
| .hide().show(); | ||
| } | ||
| }, { | ||
| selector: '.inp-combined' | ||
| }); | ||
|
|
||
| })(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,205 @@ | ||
| (function($, undefined) { | ||
|
|
||
| var InpNumber = function(el) { | ||
| var $el = $(el); | ||
| var _this = this; | ||
|
|
||
| this.$input = $el.find('.inp-number__input'); | ||
|
|
||
| this.$inc = $('<a href="#" class="inp-number__btn inp-number__btn--inc"><span>+</span></a>'); | ||
| this.$dec = $('<a href="#" class="inp-number__btn inp-number__btn--dec"><span>−</span></a>'); | ||
| this.$btns = this.$inc.add(this.$dec); | ||
|
|
||
| this.min = parseInt(this.$input.attr('min') || 0); | ||
| this.max = parseInt(this.$input.attr('max') || Number.MAX_SAFE_INTEGER); | ||
|
|
||
| this.timer = null; | ||
|
|
||
| $el.find('.inp-number__btn').remove(); | ||
| $el | ||
| .data('initialized', true) | ||
| .prepend(this.$dec) | ||
| .append(this.$inc); | ||
|
|
||
| // inicializace, upravení hodnoty do intervalu <min;max>, vypnutí tlačítek | ||
| this.adjustValue(); | ||
| this.setDisabledBtns(); | ||
|
|
||
| // bind handlers | ||
| this.$btns | ||
| .on('click', $.proxy(this.handleClick, this)) | ||
| .on('contextmenu', function(e) { e.preventDefault(); }) // longtap na Android zařízeních otevírá menu; pro iOS je nutné uvést v css -webkit-touch-callout: none; | ||
| .on('mousedown longtap', $.proxy(this.startRapidChange, this)) | ||
| .on('mouseup mouseleave touchend touchcancel', $.proxy(this.stopRapidChange, this)); | ||
|
|
||
| this.$input | ||
| .on('change', $.proxy(this.handleChange, this)) // mouseup není vyvoláno, pokud z tlačítka sjedeme, proto mouseleave | ||
| .on('focus', $.proxy(this.handleFocus, this)); | ||
| }; | ||
|
|
||
| InpNumber.prototype = { | ||
| getValue: function() { | ||
| return parseInt(this.$input.val()) || 0; | ||
| }, | ||
| setValue: function(value) { | ||
| this.$input.val(value); | ||
| }, | ||
| getOp: function(e) { | ||
| return e.currentTarget === this.$dec[0] ? 'getDecrement' : 'getIncrement'; | ||
| }, | ||
| isClickedBtnDisabled: function(e) { | ||
| return $(e.currentTarget).data('disabled'); | ||
| }, | ||
|
|
||
| getIncrement: function(value) { | ||
| value++; | ||
|
|
||
| return value > this.max ? this.max : value; | ||
| }, | ||
| getDecrement: function(value) { | ||
| value--; | ||
|
|
||
| return value < this.min ? this.min : value; | ||
| }, | ||
|
|
||
| valueChanged: function() { | ||
| this.$input.trigger('change'); | ||
| }, | ||
| adjustValue: function() { | ||
| var value = this.getValue(); | ||
| value = value < this.min ? this.min : (value > this.max ? this.max : value); | ||
|
|
||
| this.setValue(value); | ||
| }, | ||
| setDisabledBtns: function() { | ||
| var value = this.getValue(); | ||
|
|
||
| this.$btns | ||
| .data('disabled', false) | ||
| .removeClass('inp-number__btn--disabled'); | ||
|
|
||
| if (value === this.min) { | ||
| this.$dec | ||
| .data('disabled', true) | ||
| .addClass('inp-number__btn--disabled'); | ||
| } | ||
| if (value === this.max) { | ||
| this.$inc | ||
| .data('disabled', true) | ||
| .addClass('inp-number__btn--disabled'); | ||
| } | ||
| }, | ||
|
|
||
| handleClick: function(e) { | ||
| e.preventDefault(); | ||
|
|
||
| // rapidChangeFlag flag je nastavován v případě mousedown, tj. pokud měníme hodnotu vícenásobně | ||
| if (! this.rapidChangeFlag && ! this.isClickedBtnDisabled(e)) { | ||
| var value = this.getValue(); | ||
| var op = this.getOp(e); | ||
|
|
||
| value = this[op](value); | ||
| this.setValue(value); | ||
|
|
||
| this.valueChanged(); | ||
| } | ||
|
|
||
| // musíme nastavit zde, protože click je vyvolán až po mouseup události | ||
| this.rapidChangeFlag = false; | ||
| }, | ||
| handleChange: function() { | ||
| this.adjustValue(); | ||
| this.setDisabledBtns(); | ||
| }, | ||
| handleFocus: function() { | ||
| this.$input[0].select(); | ||
| }, | ||
|
|
||
| startRapidChange: function(e) { | ||
| e.preventDefault(); | ||
|
|
||
| // už zpracováváme z click event -> desktop, takže longtap ignorujeme | ||
| if (e.type === 'longtap' && this.rapidChangeFlag) { | ||
| return; | ||
| } | ||
|
|
||
| var _this = this; | ||
| var value = this.getValue(); | ||
| var op = this.getOp(e); | ||
| var counter = 0; | ||
|
|
||
| var rapidChange = function() { | ||
| counter++; | ||
| newValue = _this[op](value); | ||
|
|
||
| _this.rapidChangeFlag = true; | ||
|
|
||
| if (value !== newValue) { | ||
| value = newValue; | ||
|
|
||
| _this.valueChangedFlag = true; | ||
| _this.setValue(value); | ||
|
|
||
| if (counter === 1) { | ||
| _this.setDisabledBtns(); | ||
| } | ||
| } | ||
| // hodnota se v této iteraci nezměnila -> narazili jsme na min/max hodnotu, urychlíme vyvolání change eventy | ||
| else { | ||
| if (_this.valueChangedFlag) { | ||
| _this.stopRapidChange(); | ||
| } | ||
| return; | ||
| } | ||
|
|
||
| var delay = 150; | ||
| if (counter > 10) { | ||
| delay = Math.max(10, delay - 5 * counter); | ||
| } | ||
| _this.timer = setTimeout(rapidChange, delay); | ||
| }; | ||
|
|
||
| this.timer = setTimeout(rapidChange, 300); | ||
| }, | ||
| stopRapidChange: function(e) { | ||
| clearTimeout(this.timer); | ||
|
|
||
| if (this.valueChangedFlag) { | ||
| this.valueChanged(); | ||
| this.valueChangedFlag = false; | ||
| } | ||
| } | ||
| }; | ||
|
|
||
|
|
||
| /** | ||
| * @author Radek Šerý | ||
| * | ||
| * Inicializace .inp-number elementů, dynamicky vytvoří tlačítka a naváže eventy | ||
| */ | ||
| $.nette.ext('inpNumber', { | ||
| init: function() { | ||
| var snippetsExt = this.ext('snippets', true); | ||
| var ext = this; | ||
|
|
||
| snippetsExt.after(function($el) { | ||
| ext.init.call(ext, $el); | ||
| }); | ||
|
|
||
| this.init($(document)); | ||
| } | ||
| }, { | ||
| selector: '.inp-number', | ||
|
|
||
| init: function($el) { | ||
| var ext = this; | ||
|
|
||
| $el | ||
| .find(this.selector) | ||
| .each(function() { | ||
| var inpNumber = new InpNumber(this); | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| })(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| (function($, undefined) { | ||
|
|
||
| // Is History API reliably supported? (based on Modernizr & PJAX) | ||
| if (!(window.history && history.pushState && window.history.replaceState)) { | ||
| return; | ||
| } | ||
|
|
||
| /** | ||
| * @author Radek Šerý | ||
| * | ||
| * Extension pro AJAXové odkazy, které mění url, ale v historii nahrazují stávající state, tj. v historii se projeví | ||
| * pouze poslední request. Použito např. pro odkazy na varianty produktu - lze sdílet vždy aktuální variantu, ale | ||
| * klik na zpět vrací na výpis a ne na všechny proklikané varianty. | ||
| */ | ||
| $.nette.pd.ext('replaceState', { | ||
| init: function() { | ||
| this.historyExt = $.nette.ext('history'); | ||
| this.snippetsExt = $.nette.ext('snippets'); | ||
| }, | ||
| before: function (xhr, settings) { | ||
| if (! settings.nette) { | ||
| this.href = null; | ||
| } else if (! settings.nette.form) { | ||
| this.href = settings.nette.ui.href; | ||
| } else if (settings.nette.form.get(0).method === 'get') { | ||
| this.href = settings.nette.form.get(0).action || window.location.href; | ||
| } else { | ||
| this.href = null; | ||
| } | ||
| }, | ||
| success: function(payload) { | ||
| var redirect = payload.redirect || payload.url; // backwards compatibility for 'url' | ||
| if (redirect) { | ||
| var regexp = new RegExp('//' + window.location.host + '($|/)'); | ||
| if ((redirect.substring(0,4) === 'http') ? regexp.test(redirect) : true) { | ||
| this.href = redirect; | ||
| } else { | ||
| window.location.href = redirect; | ||
| } | ||
| } | ||
|
|
||
| if (this.href && this.href !== window.location.href) { | ||
| history.replaceState({ | ||
| nette: true, | ||
| href: this.href, | ||
| title: document.title, | ||
| ui: (this.historyExt && this.historyExt.cache && this.snippetsExt) ? this.snippetsExt.findSnippets() : null | ||
| }, document.title, this.href); | ||
| } | ||
|
|
||
| this.href = null; | ||
| } | ||
| }); | ||
|
|
||
| })(jQuery); |
Oops, something went wrong.