-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
217 lines (212 loc) · 9.44 KB
/
index.html
1
<!DOCTYPE html><html> <head> <!-- title --> <title>simpleNote</title> <!-- meta data --> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewport" content="width=device-width"> <!-- favicon --> <link rel="icon" type="image/ico" href="favicon.ico"> <!-- libraries' stylesheets --> <link rel="stylesheet" href="lib/normalize/normalize.min.css" /> <link rel="stylesheet" href="lib/jqueryui/jquery-ui-1.10.2.custom.min.css" /> <link rel="stylesheet" href="lib/jqueryplugins/jquery.fancybox.min.css" /> <link rel="stylesheet" href="lib/fontawesome/font-awesome.min.css" /> <!-- libraries' scripts --> <script src="lib/jquery/jquery-1.9.1.js"></script> <script src="lib/jqueryui/jquery-ui-1.10.2.custom.min.js"></script> <script src="lib/jqueryplugins/jquery.fancybox.fix.js"></script> <script src="lib/jqueryplugins/jquery.fancybox.js"></script> <script src="lib/knockout/knockout.js"></script> <script src="lib/dropbox/dropbox.js"></script> <script src="lib/moment/moment.js"></script> <!-- own stylesheets --> <link rel="stylesheet" href="css/note.css" /> <!-- own scripts --> <script src="js/wre.date.js"></script> <script src="js/wre.hotKeyHandler.js"></script> <script src="js/wre.findNextAll.js"></script> <script src="js/note.hotkeys.js"></script> <script src="js/note.extensions.js"></script> <script src="js/note.js"></script> <!-- kockout templates --> <!-- action bar template --> <script id="actionsTmpl" type="text/html"> <span class="actionsBar"> <span class="info"> <span class="tags" data-bind="visible: $data.tags, foreach: $data.tags"> <i class="icon-tag" data-bind="style:{'color' : $data.color }"></i> <span data-bind="text: $data.name"></span> </span> <span class="files" data-bind="visible: $data.files, foreach: $data.files"> <i class="icon-file"></i> <span data-bind="text: $data.name"></span> </span> <span class="time" data-bind="visible: $data.deadline"> <i class="icon-time"></i> <span data-bind="text: $data.deadlineDisplay"></span> </span> </span> <span class="actions"> <i class="icon-edit" title="details" data-bind="click:$data.open"></i> <i class="icon-list-ol" title="list" data-bind="click:$data.editListStyleType"></i> <i class="icon-tags" title="tags" data-bind="click:$data.editTags"></i> <i class="icon-time" title="deadline" data-bind="click:$data.editDeadline"></i> <i class="icon-paper-clip" title="files" data-bind="click:$data.editFiles"></i> <i class="icon-trash" title="delete" data-bind="click:$data.remove"></i> </span> <span> <i title="select" data-bind="attr:{class : $data.selected()?'icon-check':'icon-check-empty'}, click: $data.toggleSelected"></i> </span> </span> </script> <!-- sheet template --> <script id="sheetTmpl" type="text/html"> <div class="" data-bind="if: $root.current()!==$root.root"> <div class="headline"> <span class="actions"> <i class="icon-tags" title="tags" data-bind="click:$data.editTags"></i> <i class="icon-time" title="deadline" data-bind="click:$data.editDeadline"></i> <i class="icon-paper-clip" title="files" data-bind="click:$data.editFiles"></i> <i class="icon-trash" title="delete" data-bind="click:$data.remove"></i> <i class="icon-star" title="bookmark" data-bind="css:{'icon-star-empty':$data.bookmarked},click:$data.toggleBookmarked"></i> </span> <span class="additional"> <span class="tags" data-bind="visible: $data.tags, foreach: $data.tags"> <i class="icon-tag" data-bind="css:{'color' : color }"></i> <span data-bind="text: $data.name"></span> </span> <span class="files" data-bind="visible: $data.files, foreach: $data.files"> <i class="icon-file"></i> <span data-bind="text: $data.name"></span> </span> <span class="time" data-bind="visible: $data.deadline"> <i class="icon-time"></i> <span data-bind="text: $data.deadlineDisplay"></span> </span> </span> </div> <div class="notes" data-bind="editable: $data.note, hasfocus: $data.activeNote"></div> </div> <div class="children"> <!-- ko template:{ name: 'nodeTmpl', foreach: $data.children, afterRender: $root.attachElement } --><!-- /ko --> <div id="addNode" class="node" data-bind="click: $root.addNodeHere"> <div class="headline"> <span class="bullet"><i class="icon-plus"></i></span> <span class="title"> add an item </span> </div> </div> </div> </script> <!-- node template --> <script id="nodeTmpl" type="text/html"> <div data-bind="css: $data.listStyleType().concat('node').filter(Boolean).join(' ')"> <div class="node-body" data-bind="css:{'active' : $data.active() || $data.activeNote() }, dblclick: $data.open"> <div class="headline" data-bind="click:function(){$data.active(true)}"> <table><tr><td> <span class="bullet" title="(un)fold|move" data-bind="html: $data.bullet, click: $data.toggleExpanded">•</span> </td><td> <span class="listType" title="change type" data-bind="click: $data.editListStyleType"></span> </td><td> <span class="title" data-bind="hasfocus: $data.active, editable: $data.title"></span> </td><td> <!-- ko template: 'actionsTmpl' --><!-- /ko --> </td></tr></table> </div> <div class="notes" data-bind="editable: $data.note, visible: $data.expanded() && $data.hasNote() || $data.activeNote(), hasfocus: $data.activeNote"></div> </div> <div class="children" data-bind="visible: $data.expanded() && $data.hasChildren(), template:{ name:'nodeTmpl', foreach:children, afterRender: $root.attachElement}"></div> </div> </script> <!-- tags template --> <script id="tagsTmpl" type="text/html"> <a href="javascript:;" data-bind="click:$data.toggleThisInFilter,css:{'active':$data.inFilter}"> <i class="icon-tag" data-bind="style:{'color':$data.color}"></i> <span data-bind="html: $data.name"></span> (<span data-bind="html:$data.count"></span>) </a> </script> <!-- tagsMenu template --> <script id="tagsMenuTmpl" type="text/html"> <a href="javascript:;"> <i class="icon-tag" data-bind="style:{'color':$data.color}"></i> <span data-bind="html: $data.name"></span> </a> </script> <!-- bookmarks template --> <script id="bookmarksTmpl" type="text/html"> <a href="javascript:;" data-bind="click:$data.open,css:{'active':$data.isCurrent}"> <i class="icon-star"></i> <span data-bind="html:$data.title()"></span> </a> </script> <!-- breadcrumbs template --> <script id="breadcrumbsTmpl" type="text/html"> <a href="" data-bind="click:$data.open, html:$data.title()"></a> </script> <!-- group actions template --> <script id="groupActionsTmpl" type="text/html"> <div data-bind="visible: $root.selected().length"> <span data-bind="text:$root.selected().length"></span> node<span data-bind="visible:$root.selected().length>1">s</span> selected. <span class="actions"> <i class="icon-remove" title="unselect all" data-bind="click:$root.selection.unselect"></i> <i class="icon-refresh" title="invert selection" data-bind="click:$root.selection.invert"></i> <i class="icon-folder-open" title="archive all" data-bind="click:$root.selection.archive"></i> <i class="icon-tags" title="edit tags" data-bind="click:$root.selection.editTags"></i> <i class="icon-trash" title="delete all" data-bind="click:$root.selection.remove"></i> </span> </div> <div data-bind="visible: !$root.selected().length"> <span> </span> <span class="actions"> <i class="icon-bold" title="bold" data-bind="click:$root.text.bold"></i> <i class="icon-italic" title="italic" data-bind="click:$root.text.italic"></i> <i class="icon-underline" title="underline" data-bind="click:$root.text.underline"></i> <i class="icon-link" title="link" data-bind="click:$root.text.link"></i> <i class="icon-paper-clip" title="embed" data-bind="click:$root.text.embed"></i> </span> </div> </script> </head> <!-- HTML BODY --> <body> <div id="body"> <div id="head"> </div> <div id="torso"> <table> <tr> <td id="tagslist"> <!--<i class="icon-tags" title="your tags will appear here"></i>--> <div id="tags" data-bind="template: { name:'tagsTmpl', foreach :$data.tags }"></div> </td> <td id="notebook"> <div id="groupActions" data-bind="template:'groupActionsTmpl' "></div> <div id="breadcrumbs" data-bind="template: { name:'breadcrumbsTmpl', foreach: $data.breadcrumbs, if: $data.current()!==$data.root }"></div> <div id="sheet" data-bind="template:{ name:'sheetTmpl', data : $data.current, if : $data.current }"></div> </td> <td id="bookmarkslist"> <!-- <i class='icon-star' title="your bookmarked notes will appear here"></i> --> <div id="bookmarks" data-bind="template: { name:'bookmarksTmpl', foreach : $data.bookmarks }"></div> </td> </tr> </table> </div> <div id="feet"> </div> <div id="menus"> <div class="menu" id="tagsMenu" data-bind="template: { name:'tagsMenuTmpl', foreach : $data.tags }, menu:'a'"></div> <div class="menu" id="listStyleTypeMenu" data-bind="foreach: liststyletypes, menu:'a'"> <a href="javascript:;" data-bind="html:$data.name"></a> </div> </div> </div> </body></html>