Help Topics
Isaiah Odhner
parent
db0b1a1333
commit
e906d66917
|
|
@ -38,6 +38,7 @@ You can also install it as a Chrome app.
|
|||
* You can crop the image by making a selection while holding <kbd>Ctrl</kbd>
|
||||
* Keyboard shortcuts for rotation: <kbd>Ctrl+.</kbd> and <kbd>Ctrl+,</kbd> (<kbd><</kbd>/<kbd>></kbd>)
|
||||
* Rotate image by arbitrary angle! Available in Image > Flip/Rotate
|
||||
* In Image > Stretch/Skew, you can stretch more than 500% at once
|
||||
* Rudimentary **multiplayer** support:
|
||||
Start up a session at
|
||||
[jspaint.ml/#session:multiplayer-test](http://1j01.github.io/jspaint/#session:multiplayer-test)
|
||||
|
|
|
|||
22
classic.css
22
classic.css
|
|
@ -428,3 +428,25 @@
|
|||
outline: 1px dotted black;
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
.help-window li ul {
|
||||
padding-left: 1em;
|
||||
}
|
||||
.help-window li:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url("images/help-icons.png");
|
||||
background-position: 0 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.help-window .folder.expanded:before {
|
||||
background-position: -16px 0;
|
||||
}
|
||||
.help-window .page:before {
|
||||
background-position: -48px 0;
|
||||
}
|
||||
.help-window .page.default:before {
|
||||
background-position: -32px 0;
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<body background="flag&clouds.gif" topmargin=80 leftmargin=35>
|
||||
|
||||
<a name="default">
|
||||
<a name="default"></a>
|
||||
|
||||
<br>
|
||||
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ a:link .dectree p { color: yellow; }
|
|||
|
||||
.reltopics { line-height: .5em;
|
||||
margin-top: 2em;
|
||||
{
|
||||
}
|
||||
|
||||
div.reltopics p { margin-top: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,9 @@
|
|||
<PARAM name="Item1" value="mspaint.hlp">
|
||||
<PARAM name="Item2" value="gl_pbrush_fore">
|
||||
</OBJECT>
|
||||
<!-- @TODO: replace all these <OBJECT>s
|
||||
<a href="gl_pbrush_fore.htm does not exist" class="help-link">foreground color</a>
|
||||
-->
|
||||
by clicking, or you can draw with the
|
||||
<OBJECT id=hhctrl type="application/x-oleobject"
|
||||
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 846 B |
|
|
@ -42,6 +42,7 @@
|
|||
<script src="src/tool-options.js"></script>
|
||||
<script src="src/tools.js"></script>
|
||||
<script src="src/functions.js"></script>
|
||||
<script src="src/help.js"></script>
|
||||
<script src="src/menus.js"></script>
|
||||
<script src="src/app.js"></script>
|
||||
<script src="src/$menus.js"></script>
|
||||
|
|
|
|||
26
layout.css
26
layout.css
|
|
@ -252,6 +252,32 @@ html, body, .jspaint {
|
|||
padding: 5px;
|
||||
}
|
||||
|
||||
.help-window .jspaint-window-content {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
.help-window .contents {
|
||||
background: white;
|
||||
overflow: auto;
|
||||
}
|
||||
.help-window ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.help-window li {
|
||||
display: block;
|
||||
}
|
||||
.help-window .folder:not(.expanded) ul {
|
||||
display: none;
|
||||
}
|
||||
.help-window iframe {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dragging iframe {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
::before, ::after {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "Paint",
|
||||
"version": "0.1.2",
|
||||
"version": "1.0.0",
|
||||
"description": "An MS Paint remake.",
|
||||
"icons": {
|
||||
"16": "images/icons/16.png",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "Paint",
|
||||
"version": "0.1.2",
|
||||
"version": "1.0.0",
|
||||
"description": "An MS Paint remake.",
|
||||
"icons": {
|
||||
"16": "/jspaint/images/icons/16.png",
|
||||
|
|
|
|||
18
package.json
18
package.json
|
|
@ -1,7 +1,23 @@
|
|||
{
|
||||
"name": "jspaint",
|
||||
"version": "0.1.2",
|
||||
"version": "1.0.0",
|
||||
"description": "An MS Paint remake.",
|
||||
"keywords": [
|
||||
"paint",
|
||||
"jspaint",
|
||||
"mspaint",
|
||||
"drawing",
|
||||
"draw",
|
||||
"create",
|
||||
"image",
|
||||
"picture",
|
||||
"editor",
|
||||
"edit",
|
||||
"canvas",
|
||||
"app",
|
||||
"nw-app",
|
||||
"web-app"
|
||||
],
|
||||
"main": "index.html",
|
||||
"scripts": {
|
||||
"start": "nw"
|
||||
|
|
|
|||
|
|
@ -128,9 +128,11 @@ function $Window($component){
|
|||
drag_offset_x = e.clientX - $w[0].getBoundingClientRect().left;
|
||||
drag_offset_y = e.clientY - $w[0].getBoundingClientRect().top;
|
||||
$G.on("pointermove", drag);
|
||||
$("body").addClass("dragging");
|
||||
});
|
||||
$G.on("pointerup", function(e){
|
||||
$G.off("pointermove", drag);
|
||||
$("body").removeClass("dragging");
|
||||
});
|
||||
$w.$titlebar.on("dblclick", function(e){
|
||||
if($component){
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
|
||||
var $help_window;
|
||||
|
||||
function show_help(){
|
||||
if($help_window){
|
||||
$help_window.close();
|
||||
}
|
||||
// $help_window = $Window().title("Windows Help");
|
||||
$help_window = $Window().title("Help Topics");
|
||||
$help_window.addClass("help-window");
|
||||
// $toolbar = $(E("div")).addClass("toolbar");
|
||||
// $help_window.$content.append($toolbar);
|
||||
|
||||
$iframe = $(E("iframe"));
|
||||
$contents = $(E("ul")).addClass("contents");
|
||||
$help_window.$content.append($contents, $iframe);
|
||||
$help_window.$content.css({width: 800, height: 600});
|
||||
$iframe.attr({name: "help-frame", src: "help/default.htm"});
|
||||
// $iframe.attr({width: 400, height: 500});
|
||||
$iframe.css({backgroundColor: "white"});
|
||||
$help_window.center();
|
||||
|
||||
var parse_object = function($object){
|
||||
// parse an $(<object>) to an object
|
||||
var object = {};
|
||||
$object.children("param").each(function(i, param){
|
||||
object[$(param).attr("name")] = $(param).attr("value");
|
||||
});
|
||||
return object;
|
||||
};
|
||||
|
||||
var $default_item_li = $(E("li")).addClass("default page");
|
||||
$default_item_li.text("Welcome to Help").click(function(e){
|
||||
$iframe.attr({src: "help/default.htm"});
|
||||
});
|
||||
$contents.append($default_item_li);
|
||||
|
||||
$.get("help/mspaint.hhc", function(hhc){
|
||||
$($.parseHTML(hhc)).filter("ul").children().each(function(i, li){
|
||||
// console.log(li);
|
||||
|
||||
var object = parse_object($(li).children("object"));
|
||||
|
||||
var $folder_li = $(E("li")).addClass("folder");
|
||||
$folder_li.text(object.Name);
|
||||
$contents.append($folder_li);
|
||||
|
||||
$folder_li.on("click", function(e){
|
||||
// if(!e.isDefaultPrevented()){
|
||||
if($folder_li.is(e.target)){
|
||||
$folder_li.toggleClass("expanded");
|
||||
}
|
||||
});
|
||||
|
||||
var $folder_items_ul = $(E("ul"));
|
||||
$folder_li.append($folder_items_ul);
|
||||
|
||||
$(li).children("ul").children().each(function(i, li){
|
||||
// console.log("-->", li);
|
||||
|
||||
var object = parse_object($(li).children("object"));
|
||||
var $item_li = $(E("li")).addClass("page");
|
||||
$item_li.text(object.Name).click(function(e){
|
||||
$iframe.attr({src: "help/" + object.Local});
|
||||
// e.preventDefault();
|
||||
});
|
||||
$folder_items_ul.append($item_li);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// $.get({
|
||||
// url: "help/mspaint.hhc",
|
||||
// dataType: "xml"
|
||||
// }, function(sdf){
|
||||
// console.log(sdf);
|
||||
// });
|
||||
|
||||
}
|
||||
11
src/menus.js
11
src/menus.js
|
|
@ -347,16 +347,7 @@ var menus = {
|
|||
"&Help": [
|
||||
{
|
||||
item: "&Help Topics",
|
||||
action: function(){
|
||||
var $msgbox = new $Window();
|
||||
$msgbox.title("Help Topics");
|
||||
var a_attr = "href='https://www.google.com/search?q=ms+paint+tutorials' target='_blank'";
|
||||
$msgbox.$content.html(
|
||||
"<p>There's no help specifically for JS Paint, but you can try <a "+a_attr+">searching for tutorials</a> for MS Paint." +
|
||||
"<p>There will be differences, but most of the basics are there.</p>"
|
||||
).css({padding: "15px"});
|
||||
$msgbox.center();
|
||||
},
|
||||
action: show_help,
|
||||
description: "Displays Help for the current task or command.",
|
||||
},
|
||||
____________________________,
|
||||
|
|
|
|||
Loading…
Reference in New Issue