├── .editorconfig
├── .gitattributes
├── .gitignore
├── README.md
├── examples
└── index.html
├── gulpfile.js
├── index.html
├── package.json
├── source
├── cursor.coffee
├── helpers.coffee
├── keyboard.coffee
├── textarea.coffee
└── word.coffee
└── spec
└── textareaSpec.coffee
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 |
8 | [*]
9 |
10 | # Change these settings to your own preference
11 | indent_style = space
12 | indent_size = 2
13 |
14 | # We recommend you to keep these unchanged
15 | end_of_line = lf
16 | charset = utf-8
17 | trim_trailing_whitespace = true
18 | insert_final_newline = true
19 |
20 | [*.md]
21 | trim_trailing_whitespace = false
22 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .tmp
4 | .sass-cache
5 | bower_components
6 | test/bower_components
7 |
8 | *.sublime-project
9 | *.sublime-workspace
10 |
11 | # Windows image file caches
12 | Thumbs.db
13 | ehthumbs.db
14 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | SVG Input Elements
2 | ==================
3 |
4 | Work in progress with the aim of creating a simple editable textarea in SVG.
5 |
6 | Examples can be found the example folder.
7 |
8 | To set up the development environment you need npm. Then run
9 |
10 | `npm install`
11 |
12 | from the command line.
13 |
14 | To start the tests and build the project, just run this in the command line:
15 |
16 | `gulp`
17 |
18 | How to use
19 | ----------
20 |
21 | The features documented here are fairly stable and I will try not to change their behaviour (unless it is incorrect).
22 |
23 | Create a textarea:
24 |
25 | var textarea = SVGIE.textarea(svg, {width: 600});
26 |
27 | Createa a textarea with initial text:
28 |
29 | var textarea = SVGIE.textarea(svg, {width: 600}, "This is a textarea.");
30 |
31 | Get the width of the textarea:
32 |
33 | textarea("width");
34 |
35 | Change the width of the textarea:
36 |
37 | textarea("width", 600);
38 |
39 | Get the value of the textarea:
40 |
41 | textarea("val");
42 |
43 | Change the value of the textarea:
44 |
45 | textarea("val", "Some new text for the textarea.");
46 |
47 | Goals and limits for the new version
48 | ------------------------------------
49 |
50 | * Faster rendering!
51 | * No jQuery dependency
52 | * No dependencies at all
53 | * Fewer features (No CSS subset, no lists and no image boxes. Just a textarea.)
54 | * Modern browsers only (no IE9)
55 | * Tests!
56 |
57 | Old README
58 | ==========
59 |
60 | _This readme is outdated. Work is being done on rewriting this library. Only
61 | the future will tell if the rewrite is successful or not... _
62 |
63 | ~~_We are soon ready for a 1.0 version. Help coding a better and more general
64 | 2.0 version would be greatly appreciated!_~~
65 |
66 | The current state can be considered an alpha or beta version of 1.0. It is
67 | feature complete but buggy.
68 |
69 | Better documentation will be included in the 1.0 release. For now, use the
70 | instructions in [Getting Started](#getting-started). A demo (updated 5 June
71 | 2012) can be found at
72 | [josf.se/svg-input-elements/](http://josf.se/svg-input-elements/).
73 |
74 | This project started out as a sub-project to a master thesis project,
75 | [Personas in Real Life](http://personasinreallife.tumblr.com).
76 |
77 | __Go to:__ [Features](#features-), [Requirements](#requirements),
78 | [Getting Started](#getting-started), [Events](#events), [Versions](#versions)
79 | or [Development](#development)
80 |
81 | Features
82 | --------
83 | * Line wrapping
84 | * Word wrapping of long words
85 | * Copy/cut/paste
86 | * Text selection with mouse and keyboard
87 | * Change cursor position with left/right/up/down/home/end etc
88 | * Handles both paragraphs (_enter_) and manual line breaks (_shift+enter_)
89 | * Undo/redo
90 | * ...
91 |
92 | Requirements
93 | ------------
94 | This project requires [jQuery](http://docs.jquery.com/Downloading_jQuery)
95 | (we're using 1.7.2) and the
96 | [jQuery SVG plugin](http://keith-wood.name/svg.html)
97 |
98 | Getting Started
99 | ---------------
100 | You can download the latest examples and test yourself, just change the path
101 | "../tools/build.js" to "../jquery.svg.input.js" unless you're on an Apache
102 | server with PHP.
103 |
104 | _Note:_ In Chrome (and Safari?) the script will fail if you
105 | run it from your local file system
106 | [because of a bug](http://code.google.com/p/chromium/issues/detail?id=49001).
107 |
108 | _Note:_ The generated files in the root might not always be 100% up to date.
109 |
110 | [Download jQuery](http://jquery.com/) (we've tested on version 1.7.2) and
111 | [jQuery SVG](http://keith-wood.name/svg.html) (tested on version 1.4.5) and
112 | include these libraries, and SVG Input Elements:
113 | ```
114 |
115 |
116 |
117 | ```
118 | Also include some styles (apologies for bad documentation and coding on this
119 | part, SVG Input Elements doesn't behave as expected if certain styles aren't
120 | defined. Also, in a futur version all SVG Input Elements classes and IDs will
121 | have a special prefix.):
122 | ```
123 |
124 | ```
125 | Create an inline SVG element with the following attributes (the ID is optional
126 | but useful, especially if you have more than one SVG element):
127 | ```
128 |
129 | ```
130 | Make sure that the document is loaded before we start manipulating it, see the
131 | [jQuery SVG documentation](http://keith-wood.name/svgRef.html) for more
132 | information on this:
133 | ```
134 | $(document).ready(function(){
135 | $('#svg').svg({onLoad: init, settings: {}});
136 | });
137 | ```
138 |
139 | You can now create a textarea, text, list and image using the following code:
140 | ```
141 | function init(svg) {
142 | var parent = $('#svg')[0];
143 | var x = 10;
144 | var y = 10;
145 | var settings = {width: '200'};
146 |
147 | var textArea = svg.input.textArea(parent, x, y, "text with \nparagraphs", settings);
148 | var text = svg.input.text(parent, x, y, "text with \nno line \nbreaks", settings);
149 | var list = svg.input.list(parent, x, y, "list\nof\nitems", settings);
150 | var image = svg.input.image(parent, x, y, "path/to/image.jpg", settings);
151 | }
152 | ```
153 | the `parent` parameter is optional. The properties of the `settings` object
154 | corresponds to the attributes of an SVG `` tag, plus an additional `width`
155 | parameter.
156 |
157 | You should now have a working text area!
158 |
159 | ###Binding Events
160 | SVG Input Elements trigger events that you can bind:
161 | ```
162 | textArea.bind("change", function(e, text) {
163 | console.log("text changed: " + text);
164 | });
165 |
166 | textArea.bind("changeSize", function(e, width, height) {
167 | console.log("dimensions changed: " + width + " x " + height);
168 | });
169 | ```
170 |
171 | The changeSize event is useful because the textArea is contained within a
172 | group element, and thus it is not possible to stack them in the same way you
173 | would stack div elements in HTML.
174 |
175 | Events
176 | ------
177 | __change__: Triggered when the SVG Input Element has changed in some way, i.e. for
178 | a textbox it is triggered every time a character is removed or added. Returns
179 | one parameter:
180 | * _param1_: The new text
181 |
182 | __changeSize__: Triggered when the size of the SVG Input Element changes. Returns
183 | two parameters:
184 | * _param1_: The new width
185 | * _param2_: The new height
186 |
187 | Versions
188 | --------
189 | ###v1.0
190 | __Scheduled early June.__ This release will provide several text related input
191 | elements and should be stable on all major browsers except perhaps for
192 | Internet Explorer, which seems to have very poor SVG support even in verion 9.
193 |
194 | ###v0.3
195 | __Released 30 May 2012.__ Features a list item. It places bullets in front of
196 | each new paragraph, styling the textbox like a list. Nothing fancy, but
197 | convenient.
198 |
199 | ###v0.2.2
200 | __Released 30 May 2012.__ Minor enhancements, bugfixes and useable events.
201 |
202 | ###v0.2.1
203 | __Released 16 May 2012.__ Minor enhancements, bugfixes and support for
204 | @import. No longer requires support for the xml:space attribute.
205 |
206 | ###v0.2
207 | __Released 15 May 2012.__ This release provides bugfixes and several
208 | improvements and should also work on Firefox. Additional input elements are
209 | postponed to the next release. The documentation is still lacking, contact us
210 | if you want help.
211 |
212 | ###v0.1
213 | __Released 9 May 2012.__ This is a rather limited release which is only
214 | properly tested in Chrome/Chromium. It should not be seen as something that is
215 | ready to be put in use.
216 |
217 | Development
218 | -----------
219 | Feel free to join in and develop, if you want to contact us please e-mail
220 | Tim (@timbrandin) at [info@sypreme.se](mailto:info@sypreme.se) or Josef (@engelfrost) at
221 | [josef.ottosson@josf.se](mailto:josef.ottosson@josf.se).
222 |
--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | SVG Input Elements
5 |
6 |
7 |
13 |
14 |
15 |
17 |
19 |
25 |
26 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var concat = require('gulp-concat');
3 | var coffee = require('gulp-coffee');
4 | var karma = require('karma').server;
5 | var uglify = require('gulp-uglify');
6 | var rename = require('gulp-rename');
7 | var browserSync = require('browser-sync');
8 |
9 | var karmaConf = {
10 | browsers: ['PhantomJS'],
11 | //browsers: ['Chrome'],
12 | preprocessors: {
13 | '**/*.coffee': ['coffee'],
14 | },
15 | frameworks: ['jasmine'],
16 | coffeePreprocessor: {
17 | // options passed to the coffee compiler
18 | options: {
19 | bare: true,
20 | sourceMap: true
21 | },
22 | // transforming the filenames
23 | transformPath: function(path) {
24 | return path.replace(/\.coffee$/, '.js');
25 | }
26 | },
27 | files: [
28 | 'gh/*.js',
29 | 'spec/*.coffee'
30 | ]
31 | };
32 |
33 | var sourceGlob = [
34 | 'source/*.coffee'
35 | ];
36 |
37 | gulp.task('browser-sync', function() {
38 | browserSync.init(null, {
39 | server: {
40 | baseDir: './'
41 | }
42 | });
43 | });
44 |
45 | gulp.task('watch', ['browser-sync'], function(done) {
46 | karma.start(karmaConf, done);
47 | gulp.watch(sourceGlob, ['gh']);
48 | });
49 |
50 | gulp.task('gh', function() {
51 | return gulp.src(sourceGlob)
52 | .pipe(coffee())
53 | .pipe(concat('svg-input-elements.js'))
54 | .pipe(gulp.dest('gh/'));
55 | });
56 |
57 | gulp.task('default', ['watch']);
58 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | SVG Input Elements, an SVG textarea
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
18 |
19 |
20 |
21 |
22 |
23 |
SVG Input Elements
24 |
An SVG textarea implemented in JavaScript. This is a work in progress.