Related
I am evaluating mxgraph library to create and modify diagrams on web page. Looking at the API documentation, I am not able to figure out if it is possible to achieve accessibility using mxgraph library. For e.x, is it possible to use keyboard tab navigation to select objects/elements and then drag them on the drawing area? is it possible to tab navigate on diagram elements/shapes on the drawing area and use keyboard events handlers(like launch properties panel on enter/space key press)?
There is several key handlers that you can use on the mxgraph. In this case i will use the Grapheditor as an example.
This is the EditorUI.js file and you can see some of the key handlers that he have
keyHandler.bindAction(8, false, 'delete'); // Backspace
keyHandler.bindAction(8, true, 'deleteAll'); // Backspace
keyHandler.bindAction(46, false, 'delete'); // Delete
keyHandler.bindAction(46, true, 'deleteAll'); // Ctrl+Delete
keyHandler.bindAction(72, true, 'resetView'); // Ctrl+H
keyHandler.bindAction(72, true, 'fitWindow', true); // Ctrl+Shift+H
keyHandler.bindAction(74, true, 'fitPage'); // Ctrl+J
keyHandler.bindAction(74, true, 'fitTwoPages', true); // Ctrl+Shift+J
keyHandler.bindAction(48, true, 'customZoom'); // Ctrl+0
keyHandler.bindAction(82, true, 'turn'); // Ctrl+R
keyHandler.bindAction(82, true, 'clearDefaultStyle', true); // Ctrl+Shift+R
keyHandler.bindAction(83, true, 'save'); // Ctrl+S
keyHandler.bindAction(83, true, 'saveAs', true); // Ctrl+Shift+S
keyHandler.bindAction(65, true, 'selectAll'); // Ctrl+A
keyHandler.bindAction(65, true, 'selectNone', true); // Ctrl+A
keyHandler.bindAction(73, true, 'selectVertices', true); // Ctrl+Shift+I
keyHandler.bindAction(69, true, 'selectEdges', true); // Ctrl+Shift+E
keyHandler.bindAction(69, true, 'editStyle'); // Ctrl+E
keyHandler.bindAction(66, true, 'bold'); // Ctrl+B
keyHandler.bindAction(66, true, 'toBack', true); // Ctrl+Shift+B
keyHandler.bindAction(70, true, 'toFront', true); // Ctrl+Shift+F
keyHandler.bindAction(68, true, 'duplicate'); // Ctrl+D
keyHandler.bindAction(68, true, 'setAsDefaultStyle', true); // Ctrl+Shift+D
keyHandler.bindAction(90, true, 'undo'); // Ctrl+Z
keyHandler.bindAction(89, true, 'autosize', true); // Ctrl+Shift+Y
keyHandler.bindAction(88, true, 'cut'); // Ctrl+X
keyHandler.bindAction(67, true, 'copy'); // Ctrl+C
keyHandler.bindAction(86, true, 'paste'); // Ctrl+V
keyHandler.bindAction(71, true, 'group'); // Ctrl+G
keyHandler.bindAction(77, true, 'editData'); // Ctrl+M
keyHandler.bindAction(71, true, 'grid', true); // Ctrl+Shift+G
keyHandler.bindAction(73, true, 'italic'); // Ctrl+I
keyHandler.bindAction(76, true, 'lockUnlock'); // Ctrl+L
keyHandler.bindAction(76, true, 'layers', true); // Ctrl+Shift+L
keyHandler.bindAction(80, true, 'formatPanel', true); // Ctrl+Shift+P
keyHandler.bindAction(85, true, 'underline'); // Ctrl+U
keyHandler.bindAction(85, true, 'ungroup', true); // Ctrl+Shift+U
keyHandler.bindAction(190, true, 'superscript'); // Ctrl+.
keyHandler.bindAction(188, true, 'subscript'); // Ctrl+,
keyHandler.bindKey(13, function () {
Of course you can create new key handlers using the EditorUi.prototype.createKeyHandler
You should access the grapheditor and see if that works for you
You can also take a look at the docs here
I have a docusaurus as front for my company website.
And I'm wondering, how to track clicks on the link to the login form in the administrator's page.
This link is in the siteconfig.js:
headerLinks: [
{href: 'https://demo.multifactor.ru', label: 'Demo'},
{doc: 'intro', label: 'Documentation'},
{doc: 'api', label: 'API'},
{href: '/login', label: 'Login'}
],
I've tried to add custom tag, like in the example below, but docusaurus ignore this construction
headerLinks: [
{href: 'https://demo.multifactor.ru', label: 'Demo'},
{doc: 'intro', label: 'Documentation'},
{doc: 'api', label: 'API'},
{href: '/login', label: 'Login', onClick: 'ga (‘send’, ‘event’, ‘submit’, ‘login_link’);'}
],
does anybody has ideas about how to do this?
which version of Docusaurus you are using? I only know how to config the google-analytics on Docusaurus.v2.
If you are using Docusaurus.v2, you can easily config the google-analytics by:
// docusaurus.config.js
module.exports = {
plugins: ['#docusaurus/plugin-google-analytics'],
themeConfig: {
googleAnalytics: {
trackingID: 'UA-141789564-1',
// Optional fields.
anonymizeIP: true, // Should IPs be anonymized?
},
},
};
or by:
// docusaurus.config.js
module.exports = {
presets: [
[
'#docusaurus/preset-classic',
{
// Will be passed to #docusaurus/plugin-google-analytics.
googleAnalytics: {
trackingID: 'UA-141789564-1',
// Optional fields.
anonymizeIP: true, // Should IPs be anonymized?
},
},
],
],
};
If you are using Docusarurus.v1, highly recommand you to migrate your website from v1 to v2 following instructions.
Also, how to migrate the google-analytics plugin is also mentioned in the doc.
No way at the moment. You can swizzle the components or just look at the number of page views for that page within Google Analytics.
There are two solutions from official page
plugin-google-analytics
plugin-google-gtag
That working great but i faced an issue when i cannot install these packages properly because one of my projects behind corporate firewall, so i decided to place my analytics snippet into Head component (docs)
<Head>
<script
src={ANALYTICS.SCRIPT_URL}
async={true}
></script>
<script>
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', ${ANALYTICS.G_TAG});
ga('send', 'pageview');
`}
</script>
</Head>
I have a Ruby on Rails project that i'm currently working on that will schedule assigned work tickets for Technicians based on their availability and daily schedule using Full Calendar. I currently have several technicians schedules (start/stop times) saved in my Postgres database ready to be pulled and hopefully displayed into FullCalendar. The plan is for the Calendar to render the imported schedule and for the available times that a technician is working will be where I would like an event to only be placed and for the other areas in which they're not available to work I would like them to be greyed/darkened out.
So Far I have setup in an initial basic calendar and have been playing around with the eventConstraint option but that does not give the user any visual feedback on where events are allowed to be placed. This is what my current set up and technician schedules table looks like.
create_table "technician_schedules", force: :cascade do |t|
t.datetime "start_time"
t.datetime "end_time"
t.string "work_type"
t.integer "technician_id"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
end
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction', 'bootstrap' ],
themeSystem: 'bootstrap',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultView: 'timeGridWeek',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
businessHours: true,
eventConstraint: {
startTime: '2019-09-04T10:00:00',
endTime: '2019-09-05T20:00:00'
},
events: [
{
id: 999,
title: 'event',
start: new Date(2019, 9, 1)
},
],
windowResize: function(view) {
var current_view = view['name'];
var expected_view = $(window).width() > 576 ? 'timeGridWeek' : 'timeGridDay';
if (current_view !== expected_view) {
calendar.changeView(expected_view);
}
}
});
calendar.render();
});
I am still very new to FullCalendar and learning and I am not sure if eventConstraint would be the best option, nor am I familiar with how best to render pre planned schedules from my database. How do I best display a an imported work schedule with unavailable technician times greyed/darkened out with the other times being available for event assignment? Any help would be greatly appreciated. Thanks
I have fullcalendar on Joomla 3.72. site along with bootstrap.
The select event is not triggering
MY configuration is v1.12.4, bootstrap 3.2 and moment 2.18.1
You can see it here http://pedy.dextera.gr/index.php?option=com_elgpedy&view=personelscommittees&layout=personelscommittees&Itemid=118
by using the following credentials
user: test
password: 1234
Bellow is my code:
jQuery('#personelsComittees').fullCalendar({
locale: 'el',
selectable: true,
editable: true,
eventStartEditable : false,
selectHelper: true,
allDayDefault: true,
eventLimit: false,
select: function(start, end) {
elgInitCommitteeModal();
jQuery('#StartDateCommittee').val(start.format('YYYY-MM-DD' ));
jQuery('#EndDateCommittee').val(end.subtract(1, 'seconds').format('YYYY-MM-DD' ));
jQuery('#PersonelScheduleId').val('');
jQuery('#personelsCommitteesForm').modal({});
},
eventClick: function(calEvent, jsEvent, view) {
elgInitCommitteeModal();
if(calEvent.end === null ) calEvent.end = calEvent.start;
jQuery('#StartDateCommittee').val(calEvent.start.format('YYYY-MM-DD'));
jQuery('#EndDateCommittee').val( calEvent.end.format('YYYY-MM-DD') );
jQuery('#PersonelScheduleId').val(calEvent.PersonelScheduleId);
if(calEvent.PersonelScheduleId != '') {
elgCEFD[calEvent.PersonelScheduleId] = calEvent._id;
}
jQuery('#HealthCommitteeId').val(calEvent.HealthCommitteeId);
jQuery('#PersonelId').val(calEvent.PersonelId);
jQuery('#delTitle').text(calEvent.title);
jQuery('#delDates').text(calEvent.start.format('dddd DD/M/YYYY') + ' - ' + calEvent.end.format('dddd DD/M/YYYY'));
jQuery('#committeAskDel').show();
jQuery('#personelsCommitteesForm').modal({});
},
now: [jQuery('#RefYear').val(), jQuery('#RefMonth').val() -1, 1],
events: function(start, end, timezone, callback) {
jQuery.ajax({
url: 'index.php?option=com_elgpedy&view=' + elgview + '&format=json&Itemid=' + elgItemid,
dataType: 'json',
data: {
HealthUnitId : document.getElementById('HealthUnitId').value,
start: start.format('YYYY-MM-DD'),
end: end.subtract(1, 'seconds').format('YYYY-MM-DD')
},
success: function(response) {
showDataArea();
callback(response);
}
});
}
});
thanks in advance
Finally it was a problem with jQuery versions, as ADyson mentioned. Unfortunelly by downgrading fullcallendar did not solve my problem, because calendar needed and older jQuery version from joomla's current version.
So I make a copy of my template and I customize it so as it loads JQuery version I needed. I guess I was lucky cause no conflict rised up with other modules.
I have being trying to populate list of data in a grid for this purpose I have used JqGrid. I have installed jqGrid plugin from nuget manager and from online tutorial I have been trying to implement the same.
This is what I have done so far:-
View:-
<h2>Search</h2>
<div class="container">
<div class="row">
<table id="tblRecruiterGrid"></table>
<div id="dvPagination"></div>
</div>
</div>
<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/jquery-grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.js"></script>
<script src="~/Scripts/recruiter.js"></script>
Controller:-
public ActionResult RecruiterGridData(string sidx = "", string sord = "", int page = 1, int rows = 10)
{
var vData = recruiterRepo.GetAllByRelation();
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = vData.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
switch (sidx)
{
case "RID":
vData = sord == "desc"
? vData.OrderByDescending(x => x.RecruiterID).ToList()
: vData.OrderBy(x => x.RecruiterID).ToList();
break;
default:
vData = sord == "desc"
? vData.OrderByDescending(x => x.RecruiterID).ToList()
: vData.OrderBy(x => x.RecruiterID).ToList();
break;
}
var vResult = vData.Skip(pageIndex * pageSize).Take(pageSize);
var jsonData = new
{
total = totalPages,
page = page,
records = totalRecords,
rows = vResult.Select(x => new
{
RID = x.RecruiterID,
RecruiterName = x.RecruiterName,
Email = x.Email,
CompanyName = x.CompanyName,
Designation = x.Designation,
Mobile = x.Mobile
}).ToList()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Javascript:-
$(function () {
$('#tblRecruiterGrid').jqGrid({
url: "/Recruiter/RecruiterGridData/",
datatype: 'json',
mtype: 'get',
colNames: ['RID', 'Recruiter Name', 'Email', 'Company Name', 'Designation', 'Mobile'],
colModel: [{ key: true, hidden: true, name: 'RID' },
{ key: false, hidden: false, name: 'RecruiterName' },
{ key: false, hidden: false, name: 'Email' },
{ key: false, hidden: false, name: 'CompanyName' },
{ key: false, hidden: false, name: 'Designation' },
{ key: false, hidden: false, name: 'Mobile' }],
pager: '#dvPagination',
rowNum: 10,
rowList: [5, 10, 25, 50, 100],
sortname: 'RID',
sortorder: "asc",
height: 'auto',
gridview: true,
autoencode: true,
viewrecords: true,
caption: '',
emptyrecords: 'No records to display',
jsonReader: { repeatitems: false, id: 'RID' },
autowidth: true,
multiselect: false,
});
});
I'm being able to populate data in jqGrid but the paging is causing a problem. In browser developer console I'm getting a undefined error because of which the paging is not loading properly. I tried to search the problem in google but every result section pointed to include missing jqGrid file grid.locale-en.js which I have already included in my view some suggested to check if grid.locale-en.js is loaded before jquery.jqGrid.js so when I tracked down in network I got following result.
After doing lots of R&D I'm still not been able to resolve following error:-
Uncaught TypeError: Cannot read property 'integer' of undefined
Note:- Jquery libraries has already been defined in layout head section.
Please include always the exact version number of jqGrid, which you use, and the information about the fork of jqGrid (free jqGrid, Guriddo jqGrid JS or an old jqGrid in version <=4.7), which you use.
I suppose that you use some old version of jqGrid and you just used wrong name for locale (localization) file. The file name jquery-grid.locale-en.js is very suspected. The distribution of jqGrid have i18n with the file grid.locale-en.js. The usage of old jqGrid without locale file can produce the error Cannot read property 'integer' of undefined during filling the pager of jqGrid.
Another important error in your code is the usage of key: true property for more as one column. The column have to have unique values in every row. The property key: true informs jqGrid to use the contains from the column instead of the id property. You used already the option jsonReader: { repeatitems: false, id: 'RID' } which informs to use RID property of items as the rowid. This I would recommend you to remove unneeded hidden RID column from colModel and remove key: true, hidden: false from all other columns. You can remove options with default values: mtype: 'get', sortorder: "asc", caption: '' and multiselect: false.
I would recommend you to try to use free jqGrid, it's the fork of jqGrid, which I develop after Tony Tomov have changed the licence agreement of jqGrid and it's name to Guriddo jqGrid JS (see the post). Many new features, which
I implemented in free jqGrid are described in the wiki and readmes to all versions currently published.