I am making a dependency graph of a rust project, whose documentation is emitted as pure html. I am wondering if there is a simple way to modify the html to insert an svg image in an interactive window with panning and zooming, the way it works on doxygen.
This is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="rustdoc">
<title>NeverEngine</title>
</head>
<body class="rustdoc">
<!--[if lte IE 8]>
<div class="warning">
This old browser is unsupported and will most likely display funky
things.
</div>
<![endif]-->
<h1 class="title">NeverEngine</h1>
<nav id="TOC"><ul></ul></nav><p><img src="./dep-graph.svg" alt="Dep graph" /></p>
<p>TODOs</p>
</body>
</html>
And the idea is to grab <nav id="TOC"><ul></ul></nav><p><img src="./dep-graph.svg" alt="Dep graph" /></p> and embed it into an element that allows me to zoom and pan.
Related
I am a web developer and using Atom as text editor but I always have to change some autocomplete suggestions.
For example when I type html and pres tab it gives me this
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
This result is not actually what so I manually change it like this
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=11">
<meta name="author" content="Your name">
<meta name="description" content="Brief description">
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<meta name="theme-color" content="#00FFF0">
<link href="style.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
So I did a research and everybody solves this kind of similar issues with snippets I am not asking how can I do it with snippet. I already know it. I want to change these codes from editor's current location. Possibly it locates somewhere in ~/AppData/Local/atom but I haven't found it yet. I want to reach that file and change related suggestions from there.
This is not only for html suggestion I also want to remove something from PHP suggestion and add some for JavaScript suggestion.
Any idea how this system works and how to do it ?
Thanks.
I am new to React.js.
Can someone please tell me why this is not working for me?
I created a basic html5 boilerplate and saved it as index.html. But when I open w/ browser, it says - Uncaught SyntaxError: Unexpected token <
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>TITLE</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
<script>
const Button = function () {
return (
<button>Go</button>
);
};
React.render((<Button/>), document.getElementById('example'));
</script>
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<div id="example"></div>
</body>
</html>
Getting back to your question, the problem that you are facing is that you are using wrong syntax, you are using JSX and in order to be able to actually use that you need babel to parse it.
To parse your code in the browser using Babel. Here its your code fixed with babel (also available on CodePen)
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>TITLE</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://unpkg.com/#babel/standalone/babel.js"></script>
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script type="text/babel">
const Button = function () {
return (
<button>Go</button>
);
};
ReactDOM.render((<Button />), document.getElementById('example'));
</script>
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div id="example"></div>
</body>
</html>
What I would recommend you to check the React Hello World Docs. It is a nice introduction to reactjs. The tutorial will give you plenty of information how to get started.
I have followed the following example from Nokia Here HTML5. It's not working as expected. This is my current code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- You should also add the following meta tags to support Blackberry 7.0+ devices -->
<meta name="HandheldFriendly" content="True">
<meta name="touch-event-mode" value="native">
<meta name="cursor-event-mode" value="native">
<!-- To disable address sniffing and prevent native maps from starting, use the following meta tags -->
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="address=no"/>
<!-- <link rel="stylesheet" href="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.js">-->
<link rel="stylesheet" href="http://api.maps.nokia.com/mobile/latest/lib/colors.css">
<!-- <script src="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.js"></script>-->
<script src="http://api.maps.nokia.com/mobile/latest/lib/mh5.js"></script>
</head>
<body class="mh5_hwacc_body">
<div id="app_location" style="width:320px; height:480px; position:relative;"></div>
<script>
nokia.mh5.assetsPath = "http://api.maps.nokia.com/mobile/1.0.2/lib/";
nokia.mh5.app.embed({
domNode: "#app_location",
appId: "_peU-uCkp-j8ovkzFGNU",
appCode: "gBoUkAMoxoqIWfxWA5DuMQ"
});
</script>
</body>
</html>
I don't know why only shows a white screen. Do you have any idea?
Optionally, I have another question. Does anyone know if this mobile version allows adding markers and clustering?
You need to make sure that the <script> initializing the mh5 container is called after the <body class="mh5_hwacc_body"> has been initialized. It would also help to include the doctype element as well. If you run your example in Chrome and check the error statements you can see that is attempting to append items into the body of the DOM when it is still null. The quick start example (appended below) works fine.
You'll need to substitute in your own app id and token
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet"
href="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.css">
<link rel="stylesheet"
href="http://api.maps.nokia.com/mobile/1.0.2/lib/colors.css">
</head>
<body class="mh5_hwacc_body">
<script src="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.js">
</script>
<div id="app_location"
style="width: 320px; height: 480px; position: relative;">
</div>
<script>
nokia.mh5.assetsPath =
"http://api.maps.nokia.com/mobile/1.0.2/lib/";
nokia.mh5.app.embed ({
domNode: "#app_location",
appId: "YOUR APP ID",
appCode: "YOUR TOKEN"
});
</script>
</body>
</html>
Use the addPOI() method described here to add markers to the map.
Clustering is not a standard feature of MH5 - it is a framework, not an API - works best within its own use case - i.e. rapid cross-platform mobile development for "search for X, route for X, add markers for X" and drill down to give an infobubble or new page. Where X is supplied by your data.
I'm trying to keep all the files Edge generates separate from my main files.
This is the html in the file it publishes:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="anim_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-20819118 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-20819118">
</div>
</body>
</html>
I copied the code over to an html file outside the animation folder containing all the generated files and changed the directory of the JS file it's referring to.
anim_edgePreload.js --> edgeAnimation/anim_edgePreload.js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="edgeAnimation/anim_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-20819118 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-20819118">
</div>
</body>
</html>
The animation no longer appears on the page, any idea why?
I get this error in Firebug after a few seconds:
TypeError: AdobeEdge.okToLaunchComposition is not a function
function edgeCallback(a){htFallbacks[a]&&(a=htFallbacks[a]);AdobeEdge.preload.got[a]=!0;if(a==AdobeEdge.preload.last)AdobeEdge.okToLaunchComposition(compId),AdobeEdge.preload.busy=!1,AdobeEdge.preload.q.length>0&&(a=AdobeEdge.preload.q.pop(),AdobeEdge.requestResources(a.files,a.callback))}
My issue was displaying the animation in a div on another page. Any attempt to load the animation explicitly failed. I succeeded in resolving this issue by using the HTML object tag:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Banner</title>
</head>
<body style="margin:0;padding:0;">
<object data="animations/liferay/liferay-00.html" style="height:175px; width:100%"></object>
</body>
</html>
Do note I did NOT change any of my URL paths. All I did was point to the publish folder.
So if you still encounter issues try re-publishing.
Update:
Additional solution provided by Wayne Barron:
http://youtu.be/RQKqlpCkrjs
I have some Dijit Tabs, and in those tabs I have some Dojo Text boxes and Fields. Some of my Dojo Tabs load when the page is loaded, and some load only when clicked on.
My issue is that I cant get the Tabs that load only when clicked, to work with the Dojo modules.
Its hard to explain, so I made a simple example to help. I have included as much around the code that I think may have any effect on the outcome.
Index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dojo/dojo.xd.js" djConfig="isDebug: false, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require('dijit.layout.TabContainer');
dojo.require('dijit.layout.ContentPane');
dojo.require("dijit.form.DateTextBox");
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" />
</head>
<body class="tundra">
Works Outside of a Tab: <input class="tundra" id="outsideworking" name="outsideworking" type="text" dojoType="dijit.form.DateTextBox">
<br><br><br>
<div id="tab" dojoType="dijit.layout.TabContainer" style="width:50%;height:200px" >
<div id="tab-working" dojoType="dijit.layout.ContentPane" selected="true" title="Loads on Page Load">
Test working
<input class="tundra" id="working" name="working" type="text" dojoType="dijit.form.DateTextBox">
</div>
<div id="tab-notworking" dojoType="dijit.layout.ContentPane" title="Load On Click" preload="false" parseOnLoad="false" href="loadafter.php">
</div>
<div id="tab-simplenotworking" dojoType="dijit.layout.ContentPane" title="Load On Click with Simple File" preload="false" parseOnLoad="false" href="simple.php">
</div>
</div>
</body>
</html>
loadafter.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dojo/dojo.xd.js" djConfig="isDebug: false, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" />
</head>
<body class="tundra">
Outside of a Tab
Not working here:
<input class="tundra" id="notworking" name="notworking" type="text"
dojoType="dijit.form.DateTextBox">
</body>
</html>
simple.php
<input class="tundra" id="simplenotworking" name="simplenotworking" type="text" dojoType="dijit.form.DateTextBox">
Is anyone able to help point me in the right direction?
Thanks
gggggggg
In short, if you have set parseOnLoad as false, you need to parse the html fragment by yourself. And for your tab pages, if you clicked a tab, you may need to parse the tab page manually.
For example:
<div id='a'><input id="simplenotworking" name="simplenotworking" type="text" dojoType="dijit.form.DateTextBox">
</div>
You can use dojo.parser.parse(dojo.byId("a")) to render the widget.
Btw, you do not need to attach tundra class in every places of dijit widgets, it just need to be placed at the body tag,.
Try more sophisticated selector like dojo.query to pinpoint the exact Dom you want.
if you want to select a dijit for the parser you need to do it with dijit
dojo.parser.parse(dijit.byId("a"))
if you use dojo, it will select the dom node.
if you use dijit it will select the widget