We use AngularJS to override the Browser Context Menu (https://github.com/Templarian/ui.bootstrap.contextMenu).
Here is the some example code
$scope.menuOptions = [
{
text: \'Cut\',
click: function () {
alert(\'Cut\');
}
},
{
text: \'Copy\',
click: function () {
alert(\'Copy\');
}
},
{
text: \'Pase\',
click: function () {
alert(\'Paste\');
}
}
' . $showDebugMenu . '
];
The showDebugMenu var gets a further function to show the source code of the website if the setting in the database is set to on.
My question: Is there a function to show the source code or to call the browser to show source code function?
Related
I am using the django-autocomplete-light library to have a ModelSelect2 field in my form. I need to externally change the currently selected item. The library has a following code to handle the select2:selecting event.
document.addEventListener('dal-init-function', function () {
...
yl.registerFunction( 'select2', function ($, element) {
$element.on('select2:selecting', function (e) {
var data = e.params.args.data;
if (data.create_id !== true)
return;
e.preventDefault();
...
I have developed the following line to trigger the event:
params = {
"params": {
"args": {
"data": {
id: "324856",
selected_text: "ABERTAMY (Karlovy Vary)",
text: "ABERTAMY (Karlovy Vary)"
}
}
}
};
$( "#id_hlavni_katastr" ).trigger( "select2:selecting", params )
However, the params are not passed and I have searched the whole e variable without finding the data. How to update the trigger event so it passes on the params correctly.
Instead of $element.on('select2:selecting', function (e) { ... }, you can replace it with $element.on('select2:selecting', function (e, customParrams) { ... }. The parameters you passed when using the trigger method will be populated in the customParrams variable. Here's an example:
$('input').on('click', function (e, customParams) {
console.log(customParams.params.args.data);
});
var params = {
"params": {
"args": {
"data": {
id: "324856",
selected_text: "ABERTAMY (Karlovy Vary)",
text: "ABERTAMY (Karlovy Vary)"
}
}
}
};
$('input').trigger('click', params);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden">
For more examples you can visit the jQuery documentation on the following page.
I'm creting a jquery context menu, using https://swisnl.github.io/jQuery-contextMenu/ .
I've sucessfully done the creation part of the submenu.
I had to use build, in order to have some data that is only available on runtime.
This data appears on a submenu, and I need to have a title on each of those submenu items, as well as click funtion on each of them.
I cant seem to make it work, both the title and the function on those submenu items.
Here is my code:
$.contextMenu({
selector: '.gridRelatorioCursorMorada',
build: function ($triggerElement, e) {
var coords = $triggerElement[0].attributes['data-coord'].nodeValue;
var coordsArray = coords.split(',');
return {
callback: function (key) {
if (key === 'get') {
getdata();
}
},
items: {
get: {
name: "Get data"
},
see: {
name: "See data",
items: {
normal: { name: coords },
graus: { name: dd2dms(coordsArray[0], coordsArray[1]) },
siresp: { name: decimalToSIRESPCoordinates(coordsArray[0], coordsArray[1]) }
}
}
}
};
}
});
Since the events part of contextMenu doesnt work with build, I dont know what else to do.
I've also added the following code:
$(document).on('contextmenu', function () {
$('.context-menu-submenu > ul > li').attr('title', 'tituro');
});
But it also doesnt work.
My mistake.
Event does work on build.
This got me to get the title on each of the submenu items.
The click function I got it working with the callback function.
I want to show a popUp in ionic, which does not allow the user to exit when he hasn't entered some input. Right now I'm using this here:
public showOwnIdentifierPrompt() {
// Prompt popup code
var promptPopup = this.$ionicPopup.prompt({
title: this.floor_name,
template: `<input ng-model="$ctrl.customFloorName"></input>`,
scope: this.$scope,
buttons: [
{
text: this.cancel,
type: 'button-clear button-balanced',
onTap: function(e) {
// Cancel creation
return false;
}
},
{
text: this.save,
type: 'button-clear button-balanced',
onTap: () => {
// Create new floor
return true;
}
}
]
});
promptPopup.then((res) => {
if (res) {
this.addNewFloor(this.customFloorName);
}
})
}
In the save onTap() event handler, I would like to access this.customFloorName from my class, to decide whether the user entered input. But it is always undefined. What can I do?
You can get value on Save with below code :
var value = this.scope.$ctrl.customFloorName;
I am using ChartJS to create a chart on a page in angular. I am running into the issue of when I navigate to a new page, and back to the original page, the JS is not called again.
Is there a way to call a javascript function or file every time an angular page navigates? I guess I'd then just see if my selector exists on the page and then call the function.
$(document).ready(function () {
//Call on every page:
(function ($) {
$(window).load(function () {
$(".bubbleScrollbar").mCustomScrollbar({
theme: "rounded-dots"
});
$(".hBubbleScrollbar").mCustomScrollbar({
//theme: "minimal-dark",
theme: "rounded-dots-dark",
axis: "x",
advanced: {autoExpandHorizontalScroll: true},
mouseWheelPixels: 150
});
});
})(jQuery);
// on all chart pages:
var ctx = $('#chart-TicketsResolved').get(0).getContext("2d");
var data = [
{
value: 300,
color: "#50AD7E",
label: "Resolved"
},
{
value: 200,
color: "#d9d9d9",
label: "Open"
}
];
var myDoughnutChart = new Chart(ctx).Gauge(data);
});
You can call your function by listenning to window.hashchanged event.
window.onhashchange = function () {
console.log('my function runs every time the # hash changes');
}
See more here: How to detect URL change in JavaScript
I'm slowly trying to slug my way through learning OOJS by building an accordion toggle and I'm having a hard time.
EDIT: Slowly getting there. I've got the toggle functioning how I want to. Unfortunately I'm calling the add / remove class incorrectly(?).
I'm currently calling it like:
accordion.ELEMENTS.TRIGGER.click(function() {
if ($(this).parent().hasClass(accordion.CLASSES.OPEN)){
$(this).parent().removeClass('open')
}
else {
$(this).parent().addClass('open');
}
});
And I would rather call it via the EVENTS.OPEN & EVENTS.CLOSE or even throw both of this into the EVENTS.BIND and have BIND sort out whether or not if it is open or not :
Here's a JSFiddle, I'm trying to bind the EVENTS.OPEN and EVENTS.CLOSE instead of trying to find the parents.
var accordion = {
ELEMENTS: {
HOME: $('.js-accordion-toggle'),
TRIGGER: $('.js-accordion-trigger'),
PANEL: $('.js-accordion-panel')
},
CLASSES: {
OPEN: 'open'
},
EVENTS: {
OPEN: function() {
if (ELEMENTS.HOME.hasClass(accordion.CLASSES.OPEN)) {
console.log(this + "open");
ELEMENTS.HOME.addClass(accordion.CLASSES.OPEN);
}
else {
console.log("this should close");
this.close();
}
},
CLOSE: function() {
accordion.ELEMENTS.HOME.removeClass(accordion.CLASSES.OPEN);
},
//BIND: function() {
// accordion.ELEMENTS.HOME.each(function() {
// accordion.EVENTS.OPEN();
// });
//}
},
fn: {
attachEvents: function() {
accordion.ELEMENTS.TRIGGER.click(function() {
console.log(this);
if ($(this).parent().hasClass(accordion.CLASSES.OPEN)){
$(this).parent().removeClass('open')
}
else {
$(this).parent().addClass('open');
}
});
}
},
init: function() {
accordion.fn.attachEvents();
}
}
accordion.init();
I managed to get your original fiddle to work by invoking accordion.init() after your object definition. I also had to replace your line 37 with accordion.ELEMENTS.PANEL.addClass(accordion.CLASSES.OPEN); to get rid of some undefined object error.
As for your new codes, you can simplify your codes by removing the if..else statement in line 19 and 22 with jQuery.toggleClass, to make it looks like:
$(this).closest(toggleHome).toggleClass(toggleClass);