Develop Reference

blur event handler not working when using runOutsideAngular method (Angular 2+)

I am using this Tiny Date Picker library to implement a range datepicker, I am using the NgZone, to run it outside the angular, using the runOutsideAngular() method, now I want to implement a blur event handler, so that when I click outside the calender the picker closes, but the angular is not firing the function when the div is blured because it is not detecting any changes as it is running outside the angular, any ideas for this?
my html
<div type="text" class="sp-datepicker-input" tabindex="1" (blur)='closeDatePicker()' [class.sp-datepicker-inputopen]="modalRangeOpen">
<div class="sp-datepicker-calendar"></div>
</div>
my ts.
ngAfterViewInit() {
this.zone.runOutsideAngular(() => {
const input = document.querySelector('sp-datepicker .sp-datepicker-input');
let eventType = 'select';
if (this.range) {
this.datePicker = DateRangePicker(input, {
startOpts: this.options,
endOpts: this.to_options
});
eventType = 'statechange';
} else {
this.datePicker = TinyDatePicker(input, this.options);
}
this.datePicker.on(eventType, (_, picker) => {
let date = picker.state.selectedDate;
if (this.range) {
date = {
start: picker.state.start,
end: picker.state.end
};
}
// here i am using the .run() method to capture the values,
this.zone.run(() => {
this.start_value = date.start;
this.end_value = date.end;
this.onChange(date);
});
return date;
});
});
}
closeDatePicker() {
this.modalRangeOpen = false;
}

This workaround did the trick
body.addEventListener('click', event => {
let isDatepicker = false;
event['path'].forEach(item => {
if (item.nodeName === 'SP-DATEPICKER') {
isDatepicker = true;
}
});
if (!isDatepicker) {
this.zone.run(() => {
this.closeDatePicker();
});
}
});

Remove javascript function override

I have a java script function override that occurs when certain condition is met. How can I reset these functions to its original state if I don't need it anymore.
function setProductFields() {
if (shouldShow == 'true') {
selectField = function() {
//override
}
} else {
selectField() <--- //return to its original state
}
}

Save a reference to the old selectField in a variable, prior to changing it:
var oldSelectField = selectField;
// ... other code ...
function setProductFields() {
if (shouldShow == 'true') {
selectField = function() {
//override
}
} else {
selectField = oldSelectField;
}
}

How to keep toogleClass() state on page refresh or moving to another HTML subsite?

I have a page with couple subpages in .html. On every page there is two "buttons" for language change. Is there any solution, that help me keep currently selected language after a page refresh or moving to another subsite?
This is my code:
// Language icons //
var polIco = $('.language_ico_container').find('img').first();
var engIco = $('.language_ico_container').find('img').last();
engIco.toggleClass('transparency');
function checkTransparency() {
engIco.click(function () {
$(this).toggleClass('transparency');
if (engIco.hasClass('transparency')) {
polIco.removeClass('transparency');
} else {
polIco.addClass('transparency');
}
});
polIco.click(function () {
$(this).toggleClass('transparency');
if (polIco.hasClass('transparency')) {
engIco.removeClass('transparency');
} else {
engIco.addClass('transparency');
}
});
};
// Call function checking transparency in language icons //
checkTransparency();
// English & Polish content selection //
var languagePL = $('.pl');
var languageEN = $('.eng');
languageEN.toggleClass('hidden');
function changeLanguage() {
engIco.click(function () {
languageEN.toggleClass('hidden');
languagePL.toggleClass('hidden');
});
polIco.click(function () {
languageEN.toggleClass('hidden');
languagePL.toggleClass('hidden');
});
};
// Call function changing content language
changeLanguage();
And CSS classes:
.hidden {
display: none;
}
.transparency {
opacity: 0.5;
}

LocalStorage can be a solution is used to save data across browser sessions..
You can implement your classes with session storage, every time you set transparency class you can add it to the local storage.
localStorage.setItem('class','transparency');
when you remove the class you can also remove it from the local storage
localStorage.removeItem('class');
And when the page is refreshed you can set the class from the localStorage
localStorage.getItem('class');

Its just an instant idea on which you can build own solution:
$.fn.toggleTransparency = function () {
if (localStorage[this] === undefined) {
localStorage[this] = true
} else {
localStorage[this] = !localStorage[this]
}
localStorage[this]
? this.addClass('transparency')
: this.removeClass('transparency')
}
// Usage:
$(selector).toggleTransparency()

I was able to find this solution:
var polIco = $('.language_ico_container').find('img').first();
var engIco = $('.language_ico_container').find('img').last();
// English content hidden on load //
engIco.addClass(localStorage.added);
engIco.on('click', function() {
switchEngTransparency();
});
function switchEngTransparency() {
if (localStorage.added != 'transparency') {
engIco.addClass('transparency', true);
localStorage.added = 'transparency';
} else {
engIco.addClass('transparency', false);
localStorage.added = '';
}
};
function deactivateOppositeIcon() {
if (!engIco.hasClass('transparency')) {
polIco.addClass('transparency');
} else {
polIco.removeClass('transparency');
}
};
deactivateOppositeIcon();
.transparency {
opacity: 0.5;
}
But the problem is - when i click on engIco the transparency is changing only after refreshing site or moving to another subsite. It's not changing immediately. Any ideas how to fix it?

Bind value attribute from input field to JsViews Observables

I am trying to bind the value=".."-attribute from an <input>-field to a JsViews observable, so that changes made from a JS datepicker will get detected by the JsView framework.
Example
On initial rendering, the data-linked observedDate parameter is displayed in the <input>-field:
<input class="flatpickr-calendar" type="text" data-link="observedDate">
Then, selecting a new date using the flatpickr javascript tool, the new date will be stored in the value=".."-field:
<input class="flatpickr-calendar" type="text" data-link="observedDate" value="2017-05-09">
The problem
There is now a divergence between the date handled by observedDate and the value-attribute:
JsViews does not detect the change in the value-attribute.
Does anyone have some suggestion as of how to handle this situation? Thanks.

You need an event onChange update value observedDate.
For example, you can do so:
$(".flatpickr").flatpickr({
onChange: function(selectedDates, dateStr, instance) {
$.observable($.view(this.input).data).setProperty("observedDate", dateStr);
},
});
full code.
Update
Or you can create custom tag:
$.views.tags({
flatpickr: {
template: "<input/>",
onUpdate: false,
dataBoundOnly: true,
flatpickr: null,
isChange: false,
changeEvent: function (selectedDates, dateStr, instance) {
this.isChange = true;
this.update(dateStr);
this.isChange = false;
},
onDispose: function () {
if (this.flatpickr) {
this.flatpickr.destroy();
}
},
onAfterLink: function (tagCtx, linkCtx) {
var tag = this;
var props = tagCtx.props;
var options = {
defaultDate: tagCtx.args[0]
};
if (tag._.unlinked) {
if (!tag.linkedElem) {
tag.linkedElem = tag._.inline ? tag.contents("*").first() : $(linkCtx.elem);
}
$.each(props, function (key, prop) {
var option;
if (key.charAt(0) === "_") {
key = key.slice(1);
options[key] = prop;
}
});
options.onChange = $.proxy(tag.changeEvent, tag);
this.flatpickr = tag.linkedElem.flatpickr(options);
} else {
if (!this.isChange) {
this.flatpickr.setDate(options.defaultDate)
}
}
}
}
});
And use:
{^{flatpickr observedDate /}}
full code
Support flatpickr options:
{^{flatpickr observedDate _inline=true _maxDate='2018-05-01' _minDate='2017-05-01'/}}
full code

Vuejs - On input, run a function (but with a delay)

I have an input field, and v-on:input it runs a method called activate that looks like this:
export default: {
data() {
return {
isHidden: true
}
},
methods: {
activate() {
this.isHidden = false;
}
}
}
isHidden turns on/off some icon (it doesn't really matter what this data property is; I'm just using it for example purposes).
So currently, when a user does an input it immediately turns on the activate function. Is there a way to, perhaps, put it on a delay via setTimeout? I've tried doing the following but it doesn't work:
methods: {
setTimeout(function() {
activate() {
this.isHidden = false;
}
}, 500)
}

Try this:
methods: {
activate() {
setTimeout(() => this.isHidden = false, 500);
}
}

Or without arrow function:
methods: {
activate() {
var that = this;
setTimeout(function() { that.isHidden = false; }, 500);
}
}

First, set a var in your data:
data() {
return {
typing: Date.now()
}
}
then in your methods, create a function that will fire on keyup:
pendingSave(val){
let saving = setTimeout(() => {
this.saveItem(val) // method to call when user is done typing
},1203)
if(val){
saving
if(Date.now() - this.typing < 1200) clearTimeout(saving)
this.typing = Date.now();
}
}
In your HTML, you would have something like this:
<input v-model="title" v-on:keyup="pendingSave(title)" type="text" placeholder="Title" />
What happens is that when the user clicks inside the input, and types a character, it will call 'pendingSave()'. This will get the function ready to call via setTimeout() in 1203ms. If the user types another character, and the time is 'less' than 1200ms, it will cancel setTimeout()... otherwise it will fire the function saveItem() as intended.