хранилище виджета в кде написанного в html5
Форум — Development
Не подскажите, на сколько хорошо widget в KDE поддерживает HTML5?
здесь написано, что якобы поддерживается много, потому что WebKit, в частности sql web storage. Но у меня нет подключения строкой
openDatabase(«ToDo», "", «A list of to do items.», 200000);
хотя это работает в хроме.
storage, который ключ-значение, к сожалению, очищается при перезагрузке, но на всякий случай приложу то, что хотел сделать(можно сохранить в *.html и посмотреть в браузере). Вообще, хотел сделать что-то типа
комментариев нет, к сожалению
<!-- GPL -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=620" />
<style>
.schedule
{
width: 63%;
min-height: 300px;
float: left;
}
.tasks
{
width: 37%;
float: right;
}
</style>
<script>
var scheduleList = Array();
var tasksList = Array();
// save schedule and tasks
function save()
{
window.localStorage.clear();
for (var i = 0; i < scheduleList.length; ++i)
{
var id = scheduleList[i];
var startTimeValue = document.getElementById('startTime'+id).value;
var endTimeValue = document.getElementById('endTime'+id).value;
var summaryOut = document.getElementById('schedule'+id).cells[4].innerHTML;
var scheduleText = document.getElementById('scheduleText'+id).value;
var value = 'schedule|' + id + '|' + startTimeValue + '|' + endTimeValue + '|' +
summaryOut + '|' + scheduleText;
window.localStorage[window.localStorage.length] = value;
}
for (var i = 0; i < tasksList.length; ++i)
{
var id = tasksList[i];
var bgColor = document.getElementById('task'+id).bgColor;
var taskText = document.getElementById('taskText'+id).value;
var value = 'task|' + id + '|' + bgColor + '|' + taskText;
window.localStorage[window.localStorage.length] = value;
}
}
function load()
{
var myTable = document.getElementById('scheduleTable');
var tBodySchedule = myTable.getElementsByTagName('tbody')[0];
var myTable = document.getElementById('TasksTable');
var tBodyTasks = myTable.getElementsByTagName('tbody')[0];
for (var i = 0; i < localStorage.length; ++i)
{
var value = localStorage[i];
var reg = /^([^\|]+)\|([^\|]+)\|([^\|]+)\|([^\|]+)\|([^\|]+)\|(.+)$/
var data = reg.exec(value);
if ( data && data[1] == 'schedule' )
{
_addSch(tBodySchedule, data[2], data[3], data[4], data[5], data[6]);
scheduleList[scheduleList.length] = data[2];
}else
{
var reg = /^([^\|]+)\|([^\|]+)\|([^\|]+)\|(.+)$/
var data = reg.exec(value);
if ( data && data[1] == 'task' )
{
_addTsk(tBodyTasks, data[2], data[3], data[4]);
tasksList[tasksList.length] = data[2];
}
}
}
}
function changeTime(id)
{
var startTimeValue = document.getElementById('startTime'+id).value;
var endTimeValue = document.getElementById('endTime'+id).value;
var summaryOut = document.getElementById('schedule'+id).cells[4];
var reg = /(\d{1,2})\:(\d{1,2})/
var startTime= reg.exec(startTimeValue);
var endTime= reg.exec(endTimeValue);
var diff = (parseInt(endTime[1]) * 60 + parseInt(endTime[2])) -
(parseInt(startTime[1]) * 60 + parseInt(startTime[2]));
var m = (diff % 60);
var h = (diff - m) / 60;
summaryOut.innerHTML = '' + h + ':' + m;
save();
}
function deleteSchedule(id)
{
var schedule = document.getElementById('schedule'+id);
schedule.parentNode.removeChild(schedule);
for (var i = 0; i < scheduleList.length; ++i)
{
if ( scheduleList[i] == id )
{
scheduleList.splice(i, 1);
}
}
save();
}
function addNewSchedule()
{
var myTable = document.getElementById('scheduleTable');
var tBody = myTable.getElementsByTagName('tbody')[0];
var currDate = new Date();
var currID = currDate.getTime();
_addSch(tBody, currID);
changeTime(currID);
scheduleList[scheduleList.length] = currID;
save();
}
function _addSch(tBody, currID, startTime, endTime, summaryOut, scheduleText)
{
var currDate = new Date();
var newTR = document.createElement('tr');
newTR.id = 'schedule' + currID;
var newTD = document.createElement('td');
newTD.innerHTML = '<button onclick="deleteSchedule('+currID+')">del</button>';
newTR.appendChild (newTD);
var newTD = document.createElement('td');
var startTime = startTime || '' + currDate.getHours() + ':' + currDate.getMinutes();
newTD.innerHTML = '<input type="text" value="' + startTime + '" size="1" ' +
'onchange="changeTime('+currID+')" id="startTime'+currID+'">';
newTR.appendChild (newTD);
var newTD = document.createElement('td');
var scheduleText = scheduleText || 'IDLE';
newTD.innerHTML = '<input type="text" value="'+scheduleText+
'" size="10" id="scheduleText'+currID+
'" onchange="save()">';
newTR.appendChild (newTD);
var newTD = document.createElement('td');
var endTime = endTime || '' + currDate.getHours() + ':' + currDate.getMinutes();
newTD.innerHTML = '<input type="text" value="' + endTime + '" size="1" ' +
'onchange="changeTime('+currID+')" id="endTime'+currID+'">';
newTR.appendChild (newTD);
var newTD = document.createElement('td');
var summaryOut = summaryOut || '00:00';
newTD.innerHTML = summaryOut;
newTR.appendChild (newTD);
tBody.appendChild(newTR);
}
function addNewTask()
{
var myTable = document.getElementById('TasksTable');
var tBody = myTable.getElementsByTagName('tbody')[0];
var currDate = new Date();
var currID = currDate.getTime();
_addTsk(tBody, currID);
tasksList[tasksList.length] = currID;
save();
}
function _addTsk(tBody, currID, bgColor, taskText)
{
var taskText = taskText || 'JUST DO IT';
var bgColor = bgColor || 'white';
var newTR = document.createElement('tr');
var newTD = document.createElement('td');
newTR.id = 'task' + currID;
newTR.bgColor = bgColor;
newTD.innerHTML = '<input type="text" value="'+taskText+'" size="10" ' +
' id="taskText'+currID+'" onchange="save()"> ' +
'<button onclick="doneTask('+currID+')">+</button> ' +
'<button onclick="deleteTask('+currID+')">X</button> ' +
'<button onclick="importantTask('+currID+')">^</button>' +
'<button onclick="clearTask('+currID+')">.</button>';
newTR.appendChild(newTD);
tBody.appendChild(newTR);
}
function deleteTask(id)
{
var task = document.getElementById('task'+id);
task.parentNode.removeChild(task);
for (var i = 0; i < tasksList.length; ++i)
{
if ( tasksList[i] == id )
{
tasksList.splice(i, 1);
}
}
save();
}
function clearTask(id)
{
_paintTask(id, 'white');
}
function doneTask(id)
{
_paintTask(id, 'gray');
}
function importantTask(id)
{
_paintTask(id, 'yellow');
}
function _paintTask(id, color)
{
var task = document.getElementById('task'+id);
task.bgColor = color;
save();
}
</script>
</head>
<body>
<div class="schedule">
<table border="1" id="scheduleTable">
<tr>
<td>
action
</td>
<td>
start
</td>
<td>
description
</td>
<td>
stop
</td>
<td>
summary
</td>
</tr>
</table>
<button onclick="addNewSchedule()">add in schedule</button>
</div>
<div>
<table border="1" class="tasks" id="TasksTable">
<tr>
<td>
tasks
</td>
</tr>
</table>
<button onclick="addNewTask()">add in tasks</button>
</div>
<script>load();</script>
</body>
</html>
интерес к html5 в виджете был академическим, да и показалось, что напишу быстрее и дизайн красивым можно будет сделать. Теперь уж накатаю на Python'е.
p.s не знаю, может в ветку веб-разработки это нужно?