-
Notifications
You must be signed in to change notification settings - Fork 33
/
Copy pathindex.html
68 lines (62 loc) · 3.02 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html land="en">
<head>
<title>SVG Input Elements, an SVG textarea</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="description" content="SVG Input Elements, a javascript implementation of a textarea in SVG">
<meta name="author" content="Josef Engelfrost">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="gh/svg-input-elements.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>SVG Input Elements </h1>
<p>An SVG textarea implemented in JavaScript. This is a work in progress.</p>
<a class="btn btn-primary btn-lg" href="https://github.com/engelfrost/svg-input-elements">View the project on GitHub</a>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- <h2>Example <small>Not working at the moment...</small></h2> -->
<svg id="svg" version="1.1" width="400px" height="200px" xmlns="http://www.w3.org/2000/svg"></svg>
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Rough roadmap to v 1.0</h2>
<dl class="dl-horizontal">
<dt class="text-warning">Basic text input</dt>
<dd>Get the basic structures in place and get line wrapping, the cursor and basic text input working.</dd>
<dt class="text-danger">Advanced text input</dt>
<dd>Select text and copy, cut, delete and replace it. Select text with keyboard. </dd>
<dt class="text-danger">Horizontal scrolling</dt>
<dd>Vertical scrolling and other necessary features to manage area constraints.</dd>
<dt class="text-danger">Touch compatible</dt>
<dd>Make sure text input, selection, scrolling etc. works on touch devices.</dd>
</dl>
</div>
</div>
<hr>
<footer>
<p class="text-center"><a href="https://github.com/engelfrost/svg-input-elements">View the source on GitHub</a></p>
</footer>
</div>
<script type="text/javascript">
var svg = document.getElementById("svg")
var textarea = SVGIE.textarea(svg, { width: 600 }, "This is a textarea in SVG.\nIt supports line breaks. \rEven line breaks for different systems. \r\n\tIt supposts tabs. It even supports keyboard input, but currently places characters on the wrong side of the cursor...");
</script>
</body>
</html>