Recently I discovered browser-sync. Now the application I want to write requires a kind of google map functionality. I noticed that natively browser-sync only supports "scroll,click and forms". I need to hook into all events or at least when panning/interacting with a map, so that it sync's cross browsers.
I found a blog discussion that concluded to have solved this and links to browser-sync-client project https://github.com/BrowserSync/browser-sync-client
Since there is no documentation and only a small example. Can anyone tell me how to implement it within a gulp setup?
I tried to do the following but wihtout any luck:
var browserSync = require('browser-sync').create(),
client = require("browser-sync-client");
gulp.task('browser-sync', function () {
browserSync.use(client);
browserSync.init({
server: {
baseDir: "./wwwroot"
},
ghostMode: {
clicks: true,
forms: true,
scroll: true
},
logLevel: "debug",
open: true,
minify: false,
clientEvents: [
"scroll",
"input:text",
"input:toggles",
"input:keydown",
"input:keypress",
"form:submit",
"form:reset",
"click",
"contenteditable:input",
"mouseup",
"mousedown",
"select:change"
],
ghostMode: {
clicks: true,
scroll: true,
forms: {
submit: true,
inputs: true,
toggles: true,
keypress: true,
keydown: true,
contenteditable: true,
change: true
},
mouseup: true,
mousedown: true
},
capture: true
});
});
Related
I have written the following code in my project
$('[data-fancybox]').fancybox({
// Options will go here
infobar: false,
buttons : [
"zoom",
"slideShow",
//"fullScreen",
//"download",
"thumbs",
"close"
],
wheel : false,
transitionEffect: "slide",
// thumbs: false,
// hash : false,
// keyboard : true,
toolbar: true,
// animationEffect : false,
// arrows : true,
clickContent: false,
afterLoad: function() {
if (!$('.fancybox-button--play').hasClass("fancybox-button--pause")) {
$('.fancybox-button--play').trigger('click');
}
}
});
That code is not executing... however, When I execute it in console it perfectly works... What I am doing wrong?
Please try to load your script under "$( document ).ready()"
I want to make script work on every page without that these page need loaded;
I have owl caroussel script on my static folder, and i already put it in nuxt.config.js, here how i put it:
head: {
title: 'title',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
script: [{
src: process.env.BASE_URL_ROOT + "/jquery-3.3.1.min.js",
type: "text/javascript"
},
{
src: process.env.BASE_URL_ROOT + "/owl.carousel.min.js",
type: "text/javascript"
},
{
src: process.env.BASE_URL_ROOT + "/main-script.js",
type: "text/javascript"
}
]
},
And there is the script on my main-script.js:
$(document).ready(function() {
$('.owl-menu').owlCarousel({
loop: true,
responsiveClass: true,
center: true,
items: 6,
nav: true,
dots: false,
autoWidth: true,
responsive: {
600: {
items: 6,
nav: true,
autoWidth: true,
center: true,
loop: true
},
}
})
$('.owl-video').owlCarousel({
loop: true,
center: true,
items: 3,
margin: 10,
nav: true,
dots: true,
responsive: {
600: {
items: 3,
margin: 12,
},
},
navContainer: "#nav-conte",
navText: [
'<i class="far fa-arrow-alt-circle-left" aria-hidden="true" style="color: rgba(0,0,0,0.67843);"></i>',
'<i class="far fa-arrow-alt-circle-right" aria-hidden="true" style="color: rgba(0,0,0,0.67843);"></i>'
]
})
})
The caroussel work well on the page if the page is loaded, but if it come from nuxt navigation, the caroussel script not work anymore.
Solution that i used is MutationObserver that look at the change on the DOM; on my main-script.js:
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
// my owl caroussel script
});
observer.observe(document, {
subtree: true,
attributes: true
});
Here, you're using some jQuery code that relies on selecting specific parts of the DOM. Meanwhile, nowadays front-end frameworks do handle the DOM in a different manner and relying more on the state or refs than actual querySelector.
Hence, I do not recommend even trying to wire it. You should probably try and use a Vue package to make the same kind of feature.
It will be probably less heavy (bundle-size), more easy to integrate with your Nuxt app and you will not rely on buggy and hacky behavior.
Check this list of Carousels: https://github.com/vuejs/awesome-vue#carousel
I do use vue-awesome-swiper, more on a heavier side but really complete.
Also, I don't know if you really need to have jQuery in your Nuxt app on top of Vue, but if you want a clean and simple way of installing it into your Nuxt app, you follow my other answer here: https://stackoverflow.com/a/68414170/8816585
EDIT, even owl carousel deprecates itself as you can see
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
// your owl caroussel script
$('.owl-menu').owlCarousel({
loop: true,
responsiveClass: true,
center: true,
items: 6,
nav: true,
dots: false,
autoWidth: true,
responsive: {
600: {
items: 6,
nav: true,
autoWidth: true,
center: true,
loop: true
},
}
})
$('.owl-video').owlCarousel({
loop: true,
center: true,
items: 3,
margin: 10,
nav: true,
dots: true,
responsive: {
600: {
items: 3,
margin: 12,
},
},
navContainer: "#nav-conte",
navText: [
'<i class="far fa-arrow-alt-circle-left" aria-hidden="true" style="color: rgba(0,0,0,0.67843);"></i>',
'<i class="far fa-arrow-alt-circle-right" aria-hidden="true" style="color: rgba(0,0,0,0.67843);"></i>'
]
})
});
observer.observe(document, {
subtree: true,
attributes: true
});
This worked for me. You can try. enter link description here
I am using fullcalendar the non-es6 way, quite honestly because the bundled file was so large it was crashing stuff. Anyway, so I have loaded all the js files manually and all is well. Now I am trying to use Draggable. On the docs https://fullcalendar.io/docs/external-dragging it only shows you how to import Draggable from the interaction plugin. I have the interaction plugin up and running as I can drag events around on the calendar no problem, in fact I am editing bookings in Woo Bookings from them as they are dropped. I am now trying to drag resources from outside the calendar into the calendar and create bookings from them. I am getting Plugin file not loaded for draggable error in console, and of course Uncaught ReferenceError: Draggable is not defined
Here is my code
calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
plugins: [ 'resourceTimeline', 'interaction' ],
eventOverlap: false,
resourceGroupField: 'groupID',
resourceGroupText: 'groupText',
defaultView: 'resourceTimelineDay',
nowIndicator: true,
droppable: true,
defaultDate: currDate,
eventRender: function(info) {
$(info.el).find('.fc-content').attr("id", "event-" + info.event.id);
},
eventClick: function(info) {
info.jsEvent.preventDefault();
jQuery.colorbox({
href: wsccAppVars.standardajax,
data: {
action: 'fullcal_get_booking',
booking_id: info.event.id,
resource_id: info.event.resourceId
}
})
},
themeSystem: 'standard',
editable: true,
eventStartEditable: false,
eventDurationEditable: false,
resources: fcresources,
resourceColumns: [{
labelText: 'Lagoon',
field: 'lname'
}, {
labelText: 'Product',
field: 'pname'
}],
eventSources: [{
url: wsccAppVars.adminajax, // use the `url` property
color: 'yellow', // an option!
textColor: 'black' // an option!
}],
eventDrop: function(info) {
//console.log(info);
var data = {
booking_id: info.event.id,
resource_id: info.newResource.id,
protect: $("#calendar").data('cal-protect'),
action: 'wbsc_cal_booking_change'
}
//console.log(data);
$.post(wbscAppVars.standardajax, data, function(response) {
$("#calendar_messages").text(response.return_message)
if (!response.success) {
info.revert();
}
})
}
});
containerEl = document.getElementById('draggable_resources');
new Draggable(containerEl, {
itemSelector: '.draggable_resource'
});
calendar.render();```
I am working on jqgrid application. In my previous post (Update and Delete does not work in jqGrid) I am posted information about my grid. Now, I have a problem about datepicker on add/edit dialog.
I have same problem as the one person posted earlier post DateTimePicker not working inside jqGrid. But it's working outside of it. I was installed plugin http://plugins.jquery.com/datetimepicker/. In definition of my grid I wrote:
{
name: 'PostingDate', index: 'PostingDate', align: "center", editable: true, edittype: "text", formatter: "date", formatoptions: { newformat: "d-M-Y" },
editoptions: {
dataInit: function (el) {
$(el).datetimepicker({
dateFormat: 'dd-M-yy',
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
}
}
},
Also, I am added onInitializeForm in:
jQuery("#generalLedgerGrid").jqGrid('navGrid', '#generalLedgersPager',
{ edit: true, add: true, del: true },
{
closeAfterEdit: true,
onInitializeForm: function (formid) {
$("#PostingDate", formid).datetimepicker();
}
},
{
closeAfterAdd: true,
onInitializeForm: function (formid) {
$("#PostingDate", formid).datetimepicker();
}
},
...
}
When I implement this, i am not getting an error. The page loads up, but when I try to click Add or Edit, the popup window refuses to show up. How can solve that problem? Appreciate your help, Thanks.
I need to exclude from my build file ending/containing
.js.map
and
.js.uncompressed.js
I am trying using some regex with no success
ignore: function(t) {
return /\.js.map$/.test(t)
},
miniExclude: function(t) {
return /\.js.map$/.test(t)
}
I am using DOJO 1.10.
What am I doing wrong here?
var profile = function() {
return {
basePath: "../",
releaseDir: "dist",
releaseName: "build",
optimize: "closure",
action: "release",
layerOptimize: "closure",
copyTests: !1,
stripConsole: "all",
version: "ntv-0.0.0",
cssOptimize: "comments",
mini: !0,
staticHasFeatures: {
"dojo-trace-api": !1,
"dojo-log-api": !1,
"dojo-publish-privates": !1,
"dojo-sync-loader": !1,
"dojo-xhr-factory": !1,
"dojo-test-sniff": !1
},
resourceTags: {
amd: function(t) {
return /\.js$/.test(t)
},
ignore: function(t) {
return /\.js.map$/.test(t)
},
miniExclude: function(t) {
return /\.js.map$/.test(t)
}
},
packages: [{
name: "dojo",
location: "dojo"
}, {
name: "test",
location: "test"
}],
layers: {
"dojo/dojo": {
include: ["dojo/dojo"],
customBase: !0,
boot: !0
},
"test/c": {
include: ["test/c/c"],
customBase: !0,
boot: !1
},
"test/b": {
include: ["test/b/b"],
customBase: !0,
boot: !1
},
"test/a": {
include: ["test/a/a"],
customBase: !0,
boot: !1
}
}
}
}();
First of all, the word "exclude" used in the question isn't quite accurate. These are files that are generated by the build system - they're not files existing in the source to be excluded in the first place.
If you don't want the build to generate source maps, set useSourceMaps: false in your build profile.
As for the *.uncompressed.js files, the build generates these automatically for any module or layer that it minifies. If you really don't want them in the build output, you'll need to remove them afterwards with a command like frank suggested in the comments.
The reason both of these files are included ordinarily is to assist in debugging of built applications. Neither of these files will be downloaded by a browser during normal use; they will only be requested by developer tools.
"asd.js.uncompressed.js".match(/.{1,}\.(js\.map|js\.uncompressed\.js)$/g) //match
"khaslkda.js.map".match(/.{1,}\.(js\.map|js\.uncompressed\.js)$/g) //match
"khaslkda.map".match(/.{1,}\.(js\.map|js\.uncompressed\.js)$/g) // no match
"khaslkda.map.js".match(/.{1,}\.(js\.map|js\.uncompressed\.js)$/g) //no match
I don't really know dojo. But this regex might help you?
edit: I used match.. but it should work with test as well.
Just do like this
/.{1,}\.(js\.map|js\.uncompressed\.js)$/g.test("as-_d.js.uncompressed.js") //true