I am trying to create a firefox extension (my first extension so I am beginner).
I wanted to do this example :
But this is my result :
I can not understand why my images are not loading, why the frame on the right of the buttons is empty and if it was possible to increase the height of the toolbar.
There is my code :
index.js :
var { ActionButton } = require('sdk/ui/button/action');
var { Toolbar } = require("sdk/ui/toolbar");
var { Frame } = require("sdk/ui/frame");
var previous = ActionButton({
id: "previous",
label: "previous",
icon: {
"16": "./icons/previous.png"
},
onClick: function(state) {
console.log("button '" + state.label + "' was clicked");
}
});
var next = ActionButton({
id: "next",
label: "next",
icon: {
"16": "./icons/next.png"
},
onClick: function(state) {
console.log("button '" + state.label + "' was clicked");
}
});
var play = ActionButton({
id: "play",
label: "play",
icon: {
"16": "./icons/play.png"
},
onClick: function(state) {
console.log("button '" + state.label + "' was clicked");
}
});
var frame = new Frame({
url: "./frame-player.html"
});
var toolbar = Toolbar({
title: "Player",
items: [previous, play, next, frame]
});
frame-player.html :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
TEST
</body>
</html>
Solved by putting all the files (images, scripts, ...) in the "data" folder of my extension.
Related
)
I am using KENDO UI with IFRAME and I want to display an alert when the user clicks to close his WEB browser when the IFRAME is active with KENDO.
So I specify that I want to see the alert is triggered only if the IFRAME is active
Here is my code :
<button id="refresh" class="k-button k-primary" title="START">START</button>
<div id="messageDialog"></div>
<script>
var isClosed = false;
$("#refresh").click(function(e) {
e.preventDefault();
var id = "target_iframe";
var dialog = $("<div><iframe class='k-content-frame' name='" + id + "'></div>").kendoWindow({
title: "test",
close: function() { this.destroy() },
iframe: true,
close: function(e) {
if(!isClosed) {
$("#messageDialog").kendoDialog({
title: "test",
content: "Exit ?",
visible: false,
show: function() {
e.preventDefault();
},
actions: [{
text: "Exit",
action: function(e){
setTimeout(function() {
isClosed = true;
$("#target_iframe").data("kendoWindow").close();
}, 200);
},
primary: true
},{
text: "Cancel"
}]
}).data("kendoDialog").open();
}
},
deactivate: function() {
isClosed = false;
}
});
dialog.data("kendoWindow").center().open();
$("<form />", {
action: "https://www.mywebsite.com/",
method: "post",
target: id
})
.hide().appendTo("body")
// add any data
.append("<input name='foo' />").find("[name=foo]").val("bar").end()
.submit().remove();
});
</script>
Thank you in advance :)
I have implemented the Languages tab shown on https://mmenujs.com/documentation/addons/navbars.html BUT I would like a way to remember the position/active menu panel when going back from the Languages tab.
I am right now using the API to open both panels from icons in my visible navigation:
$(".mobile-lang").on("click", function() {
api.open().openPanel( $("#languages-panel") );
});
$(".mobile-nav").on("click", function() {
api.open().openPanel( $("#menu-panel") );
});
Plus I have my navbar set-up like this:
navbars: [{
"position": "top",
"type": "tabs",
"content": [
"<a href='#menu-panel'>" + mmenuMenu + "</a>",
"<a href='#languages-panel'>" + mmenuLanguages + "</a>"
]
}]
My solution
My html button elements in my always visible navigation:
Open current menu panel
<a class="mobile-lang">Open languages panel</a>
My JS
var currentMMStep = "menu-panel";
$("#mmenu").mmenu({
// options
pageScroll: {
scroll: true,
update: true // pageScroll options
},
extensions: [
"pagedim-black",
"position-front",
"position-right",
"shadow-panels"
],
navbars: [{
"position": "top",
"type": "tabs",
"content": [
"<a href='#menu-panel' id='the-menu-panel'>" + mmenuMenu + "</a>",
"<a href='#languages-panel'>" + mmenuLanguages + "</a>"
]
}]
}, {
// configuration
clone: false,
offCanvas: {
pageSelector: "#page-wrap"
}
});
var api = $("#mmenu").data( "mmenu" );
$(".mobile-lang").on("click", function() {
api.open().openPanel( $("#languages-panel") );
});
api.bind( "openPanel:before", function( $panel ) {
if(!$("#languages-panel").hasClass("mm-panel_opened")){
currentMMStep = $(".mm-panel_opened").attr("id");
$("#the-menu-panel").attr('href', "#" + currentMMStep);
}
});
api.bind( "openPanel:finish", function( $panel ) {
if(!$("#languages-panel").hasClass("mm-panel_opened")){
currentMMStep = $(".mm-panel_opened").attr("id");
$("#the-menu-panel").attr('href', "#" + currentMMStep);
}
});
api.bind("closeAllPanels:before", function() {
$("#the-menu-panel").data('href', "#" + currentMMStep);
});
//because we alter the #menu-panel href on the Menu tab it removes the selected class when clicking the mm-navbar__title...
$(".mm-navbar__title").on("click", function() {
setTimeout(function(){
$(".mm-navbar_tabs a:first-child").addClass("mm-navbar__tab_selected");
}, 40);
});
I would like find out, what is the field name in a template function like:
{
field: "country",
template: function(e){
var tmp = "";
var guid = kendo.guid();
$.each( e.country, function( key, value ) {
tmp += '<span class="xyz">' + value.text + '</span>';
});
return tmp;
},
}
Sample: Associative array in grid cell
I don't have the field name "country" in the template: function(e). There are only the field data in the function from template.
Is there a method, like kendo.guid(), that I have the field name "country" for sample in the function.
See if this answers your needs:
{
field: "country",
title: "Country",
template: function(e, field = "country") {
console.log("Field name:", field);
console.log(e[field]);
return e.country.reduce((prev, current) => prev + '<span class="k-button" style="line-height:1.25em; cursor:default;">' + current.text + '</span>', "");
},
}
You can see an example of how this can be used in the snippet.
<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script id="noDataTemplate" type="text/x-kendo-tmpl">
<div>
No data found. Do you want to add new item - '#: instance.input.val() #' ?
</div>
<br />
<button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.input.val() #')">Add new item</button>
</script>
<script>
function getTemplate(e, fieldName) {
if (fieldName === "country") {
return e.country.reduce((prev, current) => prev + '<span class="k-button" style="line-height:1.25em; cursor:default;">' + current.text + '</span>', "");
} else {
return e[fieldName];
}
}
$(document).ready(function () {
var data = [
{
'id':'wpErpOs_1',
'name': 'Rolf',
'country': [{ 'text':'Schweiz','id':'1'}],
'flag':false
}, {
'id':'wpErpOs_2',
'name': 'Hans',
'country': [
{ 'text':'Deutschland','id':'2'},
{ 'text':'Schweiz','id':'1'},
{ 'text':'Österreich','id':'3'}
],
'flag':false
}, {
'id':'wpErpOs_3',
'name': 'Esther',
'country': [{ 'text':'Schweiz','id':'1'}],
'flag':false
}, {
'id':'wpErpOs_4',
'name': 'Daniela',
'country': [{ 'text':'Österreich','id':'3'}],
'flag':false
}
];
var dataSource = new kendo.data.DataSource({
transport: {
read: function(e){
e.success(data);
},
update:function(e){
e.success();
},
destroy: function(e){
e.success();
},
create: function(e){
e.success();
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
pageSize: 20,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true },
name: { validation: { required: true } },
country: { type: "object" },
flag: { type: "boolean" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
toolbar: ["create"],
columns: [
{
field: "name",
title: "Name",
template: function(e) {return getTemplate(e, "name");}
}, {
field: "country",
title: "Country",
template: function(e) {return getTemplate(e, "country");}
}, {
field: "flag",
title: "Flag",
editor: wpErpOs_GridBoolean,
template: function(e) {return getTemplate(e, "flag");}
},
],
editable: "popup",
});
});
function wpErpOs_GridBoolean(container, options){
var guid = kendo.guid();
$('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
$('<label class="k-checkbox-label" for="' + guid + '"></label>').appendTo(container);
};
</script>
</div>
</body>
</html>
Since column is javascript object, could use a getter to build the template. This allows you to get values of other properties in object (e.g. field). (Self-references in object literals / initializers)
{
field: "country",
title: "Country",
get template() {
var fieldName = this.field;
return function(e) {
var tmp = "";
var guid = kendo.guid();
$.each(e[fieldName], function(key, value) {
tmp += '<span class="k-button" style="line-height:1.25em; cursor:default;">' + value.text + '</span>';
});
return tmp;
}
},
}
Since my formatting needs were simpler I just created a string template.
{
field: "Date",
get template() {
return "# if (" + this.field + ") { # #= kendo.toString(kendo.parseDate(" + this.field + ",'yyyy-MM-dd'), 'MM/dd/yyyy') # # } #"
}
}
#(
Html.Kendo().TreeView()
.Name("x")
.TemplateId("treeview-template")
.BindTo(Model.x)
)
<script id="treeview-template" type="text/kendo-ui-template">
<input type='radio' data-bind="value: textValue,checked:checkedvalue" name='y'> #:item.text #</input>
</script>
The above code is a kendo tree view which has a list of radio buttons against each item.
I need to retrieve the name and id of the radio button.
Also, i need to bind the value of the radio button to a model for retrieval.
You can use different events of treeview like select , change. Following is one of the example.
<script>
$(document).ready(function() {
function onSelect(e) {
kendoConsole.log("Selecting: " + this.text(e.node));
}
function onCheck(e) {
kendoConsole.log("Checkbox changed :: " + this.text(e.node));
}
function onChange(e) {
kendoConsole.log("Selection changed");
}
function onCollapse(e) {
kendoConsole.log("Collapsing " + this.text(e.node));
}
function onExpand(e) {
kendoConsole.log("Expanding " + this.text(e.node));
}
function onDragStart(e) {
kendoConsole.log("Started dragging " + this.text(e.sourceNode));
}
function onDrag(e) {
kendoConsole.log("Dragging " + this.text(e.sourceNode));
}
function onDrop(e) {
kendoConsole.log(
"Dropped " + this.text(e.sourceNode) +
" (" + (e.valid ? "valid" : "invalid") + ")"
);
}
function onDragEnd(e) {
kendoConsole.log("Finished dragging " + this.text(e.sourceNode));
}
function onNavigate(e) {
kendoConsole.log("Navigate " + this.text(e.node));
}
$("#treeview").kendoTreeView({
checkboxes: true,
dataSource: [
{ text: "Furniture", expanded: true, items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
] },
{ text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
] },
{ text: "Storage" }
],
select: onSelect,
check: onCheck,
change: onChange,
collapse: onCollapse,
expand: onExpand,
dragAndDrop: true,
/* drag & drop events */
dragstart: onDragStart,
drag: onDrag,
drop: onDrop,
dragend: onDragEnd,
navigate: onNavigate
});
});
</script>
I am using a Kendo UI grid, which looks like this:
function refreshGrid()
{
$(".k-pager-refresh.k-link").click();
}
var editWindow;
var fields= {FullName: {type: "string"}, Email: {type: "string"}, LogCreateDate: {type: "date"}};
var gridColumns =
[{
width: 90,
command: {
name: "edit",
text: "Edit",
click: function(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
editWindow = $("#edit").kendoWindow({
title: "Edit User",
modal: true,
visible: false,
resizable: false,
width: 800,
height: 400,
content: 'myediturl' + dataItem.ID
});
editWindow.data("kendoWindow").center().open();
return false;
}
}
},
{
width: 90,
command: {
name: "delete",
text: "Delete",
click: function(e) {
//alert(this.dataItem($(e.currentTarget).closest("tr")).ID);
var id = this.dataItem($(e.currentTarget).closest("tr")).ID;
if (confirm("Are you sure you want to delete this user?"))
{
$.ajax({
type: 'POST',
url: '#Url.Action("deleteuser","admin",null, "http")' + "/" + this.dataItem($(e.currentTarget).closest("tr")).ID,
success: function (param) { refreshGrid(); },
async: false
});
}
return false;
}
}
},
{
field: "FullName",
title: "Full Name",
type: "string"
},
{
field: "Email",
title: "Email",
type: "string"
},
{
field: "LogCreateDate",
title: "Created",
type: "date",
template: '#= kendo.toString(LogCreateDate,"MM/dd/yyyy") #'
}];
//getSorts the columns of the grid
function getColumns() {
//Parsing the set of columns into a more digestable form
var columns = "";
for (var col in gridColumns) {
if (!!gridColumns[col].field)
{
if (columns.length > 0) {
columns += ";";
}
columns += gridColumns[col].field + "," + gridColumns[col].type;
}
}
return columns;
}
function getSorts(sortObject) {
if (!(sortObject)) {
return "";
}
//Getting the row sort object
var arr = sortObject;
if ((arr) && (arr.length == 0)) {
return "";
}
//Parsing the sort object into a more digestable form
var columnSet = getColumns();
var returnValue = "";
for (var index in arr) {
var type = "";
for (var col in gridColumns) {
if (gridColumns[col].field === arr[index].field) {
type = gridColumns[col].type;
}
}
returnValue += ((returnValue.length > 0) ? (";") : ("")) + arr[index].field + "," + (arr[index].dir === "asc") + "," + type;
}
return returnValue;
}
var grid;
$(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "mydatasourceurl",
type: "POST",
},
parameterMap: function (data, type) {
data.filters = JSON.stringify(data.filter);
data.columns = JSON.stringify(getColumns());
data.sorts = JSON.stringify(getSorts(data.sort));
console.log(data);
return data;
}
},
schema: {
fields: fields,
data: "Data",
total: "Total"
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
toolbar: [{
name: "Add",
text: "Add new record",
click: function(e){console.log("foo"); return false;}
}],
height: 392,
groupable: false,
sortable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: gridColumns
});
grid = $("#grid").data("kendoGrid");
});
My create toolbar action is not triggered on click. How can I resolve this problem, is Kendo UI able to handle toolbar click events? The best solution I came up with looks like this:
$(".k-button.k-button-icontext.k-grid-add").click(function () {
//If the window doesn't exist yet, we create and initialize it
if (!grids[gridContainerID].addWindow.data("kendoWindow")) {
grids[gridContainerID].addWindow.kendoWindow({
title: "Add " + entityName,
width: "60%",
height: "60%",
close: onClose,
open: onAddOpen,
content: addUrl
});
}
//Otherwise we just open it
else {
grids[gridContainerID].addWindow.data("kendoWindow").open();
}
//Centralizing and refreshing to prepare the layout
grids[gridContainerID].addWindow.data("kendoWindow").center();
grids[gridContainerID].addWindow.data("kendoWindow").refresh();
return false;
});
Thanks in advance.
Instead of using that complex selector use the one that Kendo UI creates from name:
toolbar: [
{
name: "Add",
text: "Add new record",
click: function(e){console.log("foo"); return false;}
}
],
and then:
$(".k-grid-Add", "#grid").bind("click", function (ev) {
// your code
alert("Hello");
});
In kendogrid docs here shows that there is no click configuration for grid toolbar buttons like grid.colums.commands.
To solve this problem you can reference following steps:
create a template for toolbar
<script id="grid_toolbar" type="text/x-kendo-template">
<button class="k-button" id="grid_toolbar_queryBtn">Query</button>
</script>
apply tempate to toolbar
toolbar:[{text:"",template: kendo.template($("#grid_toolbar").html())}]
add event listener to button
$("#grid_toolbar_queryBtn").click(function(e) {
console.log("[DEBUG MESSAGE] ", "query button clicked!");
});