Forum - ToDo Liste mit neuen Features zum Einbauen

<style type="text/css">
/*ToDo-Liste*/
#notesbox {margin: 0 0 30px 5% !important; width:500px;}
#notesbox .notesheader2 {display:none;color: {{global_nav_fontcolor}};background:{{global_nav_background|rgb_lightness(95)}};text-align: left;border-radius: 4px 40px 0px 0px !important;padding: 10px 5px 5px 30px;margin-top:30px;}
#notesbox .notesheader2,#notesbox .notescontent,#notesbox #bxbutton button, #notesbox #bsbutton button {font-family: "Open Sans",sans-serif; border: 1px solid {{global_nav_background|rgb_lightness(85)}};border-radius:5px;}
#notesbox .notescontent {display: none;background: {{global_boxcontent_background|rgb_lightness(95)}}; color: {{global_text_fontcolor}}; border-radius: 0px 0px 4px 40px;}
#notesbox #editor {font-size: 14px;min-height: 200px !important;margin: 10px 10px 10px 30px;text-align: left;outline:none;}
#notesbox #bxbutton {position:relative;right:25px;}
#notesbox #bsbutton {position:relative;right:140px;}
#notesbox #bxbutton button, #notesbox #bsbutton button{position: absolute;top: -13px;right: 0px;background:{{global_nav_background|rgb_lightness(95)}} !important; color: {{global_nav_fontcolor}}; cursor: pointer;width: auto;padding: 0px 10px 0px 10px;height:26px;outline:none;}
 
.todo_x,.todo_f,.todo_m {float:right; cursor:pointer;font-size:14px;border:1px solid {{global_nav_background|rgb_lightness(85)}};border-radius:50px;background: {{global_nav_background|rgb_lightness(75)}};margin:-4px 20px 0 0;color: {{global_nav_fontcolor}};outline:none;}
.todo_x {padding:1px 7px 5px 7px;}
.todo_f {padding:3px 7px 3px 7px;}
.todo_m {padding:0px 6px 4px 6px;}
.todo_x:hover,.todo_f:hover,.todo_m:hover,#bxbutton button:hover,#bsbutton button:hover {color: {{global_link_fontcolor|rgb_lightness(85)}} !important;}
</style>
 
 
<script>
//Auslösung über Navi-Leiste
$('li.menu_item:last').after('<li class="menu_item" style="padding: 0px;"><a class="notesheader" href="#"><span style="padding:0px 6px">Notizen</span></a></li>')
 
// ToDo wird unter der Navileiste platziert!
$('#obere_leiste').after('<div id="notesbox"><div class="notesheader2 notesheader"> \
Meine ToDo-Liste<span class="todo_xx"><button onclick="parent.location=\'#anfang\';" class="todo_x">x</button></span><span class="todo_m">[]</span><button onclick="parent.location=\'/faq.php\';" title="FAQ" class="todo_f">?</button> \
</div> \
<div class="notescontent"><div id="editor" contenteditable="true" spellcheck="true"><ul><li></li></ul></div> \
<div id="bxbutton" onclick="parent.location=\'#anfang\';"> \
<button>Liste löschen</button> \
</div> \
<div id="bsbutton" onclick="parent.location=\'#anfang\';"> \
<button>Speichern</button> \
</div> \
</div></div>');
 

//ToDo-Liste
$(document).ready(function(){
// Key-Namen für Localstorage:
var NOTES_TEXT = 'todoData', VISIBILITY_STATUS = 'notescontentDisplay';
// HTML-Liste und Local-Storage:
var edit = $('#editor'); // bearbeitbare Liste
var localStorage = xobor.plugin('foxtodox').localstorage;
edit.focusout(function(){
localStorage.set(NOTES_TEXT, $(this).html());
});
if (localStorage.get(NOTES_TEXT)) {
edit.html(localStorage.get(NOTES_TEXT));
}
 
// Button zum Löschen geklickt:
$('#bxbutton').find('button').click(function(e){
edit.html('<ul><li></li></ul>');
localStorage.set(NOTES_TEXT, edit.html());
});
 
// Button zum Speichern und Schließen:
$('#bsbutton,.todo_xx').find('button').click(function(e){
//$('.notescontent,.notesheader2').stop().slideToggle(1000, function(e){
localStorage.set(VISIBILITY_STATUS, $(this).is(':visible'));
//});
});
 
// Startzustand prüfen und ausführen:
if (localStorage.get(VISIBILITY_STATUS)) {
$('.notescontent,.notesheader2').slideDown(1000, function(e){
localStorage.set(VISIBILITY_STATUS, $(this).is(':visible'));
});
}
 
// Klicken auf notescontent:
$('.notesheader').on('click', 'span', function(){
$('.notescontent,.notesheader2').stop().slideToggle(1000, function(e){
localStorage.set(VISIBILITY_STATUS, $(this).is(':visible'));
});
});
 
//Fenster maximieren
$('.todo_m').toggle(function () {
$('#notesbox').animate({width: "90%"}, 1000);
$(this).html("_");
}, function () {
$('#notesbox').animate({width: "500px"}, 400); 
$(this).html("[]");
});
 
});
</script>
 
<a name="anfang" style="position:absolute;top:-500px !important"></a>
 

<a href="#" class="notesheader"><span><img class="start_header" src="https://files.homepagemodules.de/b104774/f46t1197p2704n3_CHVXDbdR.png" border="0" alt="ToDo-Liste"></span></a>
 

<a href="#" class="notesheader"><span>Dieser Link öffnet die ToDo-Liste</span></a>