diff --git a/data/media/formular_editor/index.html b/data/media/formular_editor/index.html new file mode 100644 index 0000000..09d21ca --- /dev/null +++ b/data/media/formular_editor/index.html @@ -0,0 +1,18 @@ + + +
+Use the + onChange callback to track changes made in the table. In the example below, $.ajax is used to load + and save grid data. +
+ +Note: this is a mockup. Nothing is acually saved. You have to implement that part server-side.
+ ++ + + +
+ +Click "Load" to load data from server+ + + +
+ +
+To initialize Handsontable with predefined horizontal and vertical alignment, provide className cells
+ details
+ in form of a grid, columns
or cell
setting (see code sample below).
+
Available classNames:
+ +htLeft
, htCenter
, htRight
, htJustify
,
+ htTop
, htMiddle
, htBottom
.Alignment changes can be tracked using afterSetCellMeta
hook callback.
+ +
+This page shows how to configure Handsontable with Autocomplete cell type, which expands the + Handsontable cell type. with features typical for a combo box that + updates its options based on user input.
+ +There are three demos on this page:
+ + +This example shows the usage of the Autocomplete feature in the default lazy mode. In this mode, + user can choose one of the suggested options while typing or enter a custom value that is not included in the suggestions.
+ +In this mode, the mouse and keyboard bindings are identical as in Handsontable cell type.
+ +The options are rendered from the source
property which can be an array, or a function that returns an array.
+ +
+This is the same example as above with a difference that autocomplete now runs in strict + mode.
+ +In this mode, the autocomplete cells will only accept values that are defined in the source + array.
+ +In this mode, the mouse and keyboard bindings are identical as in Handsontable cell type with the below differences:
+ +In strict mode, the allowInvalid option determines the behaviour in case of manual user input:
+ +allowInvalid: true
(optional) - allows manual input of value that does not exist in the
+ source
. In this case, the field background highlight becomes red and the selection
+ advances to the next cell
+ allowInvalid: false
- does not allow manual input of value that does not exist in the
+ source
. In this case, the ENTER key is ignored and the editor field remains opened.+ +
+Autocomplete can be also used with Ajax data source. In the below example, suggestions for the "Car" column are + loaded from server.
+ +To load data from remote (asynchronous) source, assign a function to the 'source' property. Function should + perform the server side request and call the callback function when the result is available.
+ + + ++ +
++ Backbone.js is a client-side + MV* framework that can do some pretty smart things + with data going to and coming back from a server, and has a great + event model for keeping multiple views in sync. +
+ +
+ This little example shows how Backbone Models and Collections can
+ work with Handsontable. Below, you'll see events firing from
+ changes in the CarCollection
by Handsontable or
+ otherwise.
+
+
+
+
+
+
+
+ Please note that Backbone integration is a work in progress since Handsontable 0.8.14. + The code presented here has 2 known issues: +
+ +alter
method and
+ the context menu
+ minSpareRows
does not have effect directly after row was added from Backbone (as a
+ workaround, you would need to call loadData
instead of render
)
+ + Both issues will be addressed in future versions of HT. Contributions are welcome! +
+The following demo uses beforeKeyDown
callback to modify some key bindings:
+ +
+This page demonstrate example of using Handsontable with Twitter Bootstrap.
+ +Please note that you should reset some of Bootstrap styles. You can use file plugins/bootstrap/handsontable.bootstrap.css + for that purpose.
+ + + + + ++ +
++ +
+The alter method can be used if you want to insert or remove rows and columns using external + buttons. + The below example uses the a custom made + handsontable.removeRow.js plugin for that matter. Move your mouse over a row to see it.
+ +You can programically select a cell using the selectCell method. The below button implements it.
+ ++ + + +
+ + + ++ +
+ + ++ This page shows usage of some callbacks available in Handsontable. Full list of callbacks is available in README.md. +
+ ++ If you require a new callback to be added to Handsontable, please open an Issue. +
+ ++ Note that some checkboxes below are initially unchecked (not all callbacks are displayed on this page by default). +
+ + + ++ +
+ +Choose events to be logged:
+ +If you have cells that contains only 2 possible values, you can use checkbox
type.
+ Data in such cells will be rendered as checkbox
+ and can be easily changed by checking/unchecking the checkbox.
Checking and unchecking can be performed using mouse or by pressing SPACE. + You can change the state of multiple cells at once. + Simply select cells you want to change and press SPACE
+ + + ++ +
+In order to manually freeze a column (in another words - make it fixed), you need to set the manualColumnFreeze
+ config item to true
in Handsontable initialization.
When the Manual Column Freeze plugin is enabled, you can freeze any non-fixed column and unfreeze any + fixed column in your Handsontable instance using the Context Menu.
+ +Note: to properly use this plugin, you need to have the Context Menu plugin enabled.
+ + + ++ +
+To enable these features, use settings manualColumnMove: true
and manualRowMove: true
The draggable move handle appears:
+ +To enable these features, use settings manualColumnResize: true
and manualRowResize: true
The draggable resize handle appears:
+ +Double click on the resize handle automatically adjusts size of the row or column.
+ ++ +
+This demo shows how to use the cell type renderer feature to make some conditional formatting:
+ ++ +
+This page shows how to use and configure right-click context menu with Handsontable:
+ + +Tu run the basic configuration of the Context Menu, just set the contextMenu option to true.
+ +From version 0.11, context menu also works for row and column headers. When the context menu for the row + header is opened, the column options are disabled. Likewise, when the context menu for the column header is opened, + the row options are disabled
+ + + ++ +
+You can limit options available in the context menu using contextMenu option as an array of strings:
+ ++ +
+For greatest configurability, you use contextMenu option as a configuration object as described in jQuery contextMenu documentation.
+ +This example shows how to set custom text, how to disable + "Remove row" and "Insert row above" for the first row and how to add your own option.
+ + + ++ +
+This page shows how to use and configure the Context Menu's Copy and Paste features in Handsontable.
+ +Copy and Paste feature are available in Handsontable by default, but only as key shortcuts (Ctrl (Cmd) + C
and Ctrl (Cmd) + V
respectively).
+ This plugin makes them available also as a clickable options in the context menu. Unfortunately, due to the browser's security restrictions, Handsontable is forced to use a third-party flash-based library. We chose to use ZeroClipboard - it adds a small invisible flash clip to your website, allowing the user to click on it, and thus save data to the clipboard.
Please note, that our Copy/Paste Context Menu plugin requires some additional preparation: +
ZeroClipboard.js
must be present on your server and included in your website's script
tag.ZeroClipboard.swf
must also be present at your serverTo configure Handsontable to use this plugin you need to add a contextMenuCopyPaste
config item to your Hansontable instance.
+ It can be set to:
+
true
- if the ZeroClipboard.swf
file is placed in the same directory as the ZeroClipboard.js
, or{
+ swfPath: [path to the swf file],
+ }
+ +
+To enable the custom borders feature, set the customBorders
option.
+ It could be set as true
or initialized as an array with predefined setup.
+
To initialize Handsontable with predefined custom borders, provide cells coordinates and border styles + in form of an array:
+ +{
+ row: 2,
+ col: 2,
+ left: { /*...*/ }
+ }
+ {
+ range:{
+ from:{
+ row: 1,
+ col: 1
+ },
+ to:{
+ row: 3,
+ col: 4
+ }
+ },
+ left: { /*...*/ }
+ }
+ See full example below. +
+ + + ++ +
+This page shows how to use Handsontable with various data sources:
+ +Please take note that Handsontable will change the original data source. More about this here: Understanding binding as reference.
+When you use object data binding, Handsontable needs to know the data structure to create when you add a new + row.
+ +If your data source contains at least one row, Handsontable will figure out the data structure based on the + first row.
+ +In case you want to start with an empty data source, you will need to provide the dataSchema + option that contains the data structure for any new row added to the grid.
+ +The below example shows custom data schema with an empty data source:
+ + + ++ +
++ If your dataSchema is actually a constructor of an + object that doesn't directly expose its members, like a Backbone.js + model, you can specify functions for the data member + of each columns item. +
+ +The below example shows a small example of using such objects:
+ + + ++ +
+To trigger the Date cell type, use the option type: 'date'
in columns
array
+ or cells
function.
The Date cell uses Pikaday datepicker as + the UI control. Pikaday uses Moment.js as a date formatter. + +
Note that Date cell requires additional files in your <head>
:
+
+
demo/js/moment/moment.js
demo/js/pikaday/pikaday.js
demo/js/pikaday/css/pikaday.css
All data entered to the data-typed cells are validated agains the default date format (DD/MM/YYYY
), unless another
+ format is provided.
If you enable the correctFormat
config item, the dates will be automatically formatted to
+ match the desired format.
+ +
+Notice the little square (fill handle) in the corner of the selected cell. You can drag it + (drag-down) + to repeat the values from the cell. +
+ +Double click the fill handle in cell B4 (value "30") to fill the selection down to the last value in + neighbouring column, just like it would in LibreOffice or Google Docs.
+ + + ++ +
+This example shows the usage of the Dropdown feature.
+ +Dropdown is based on Autocomplete cell type. All options used by autocomplete
+ cell type apply to dropdown
as well.
Internally, cell {type: "dropdown"}
is equivalent to cell {type: "autocomplete", strict:
+ true, filter: false}
.
Therefore you can think of dropdown
as a searchable <select>
.
+ +
+Specify two fixed rows with fixedRowsTop: 2
and two fixed columns with fixedColumnsLeft:
+ 2
option.
Note: You'll need horizontal scrollbars, so just set a container width
and overflow:
+ hidden
in CSS.
+ +
+The following demo shows an example of data visualisation using gRaphaël's bar + charts.
+ +This page shows using Handsontable as a cell editor in Handsontable (sometimes + referred as HOT-in-HOT).
+ +HOT-in-HOT opens by any of the following:
+ +While HOT-in-HOT is opened, the text field above the HOT-in-HOT remains focused at all times.
+ +Keyboard bindings while the HOT-in-HOT is opened:
+ +enterMoves
setting)tabMoves
setting)Mouse click outside of the editor or on one of the cells in HOT-in-HOT applies change.
+ +*apply change means: The value of the cell highlighted or clicked in HOT-in-HOT is applied as new cell value in the main HOT. If no cell in HOT-in-HOT is selected, the value of the text field is used instead.
+ + + ++ +
++ The following demo shows an example of using heatmaps for the values in tha grid's columns. +
+ ++ Changing the values in the grid automatically recalculates the font color for the whole column, thereby + updating a heatmap. +
+ ++ The dynamic color scale calculation is done using the excellent Chroma.js. +
+ + + +Mobile editor and selecting modes are enabled automatically if you're viewing Handsontable on a mobile device.
+ This mode was developed using iPad 4, and currently it's the only device we support.
+ jQuery is a library, which makes DOM manipulations and event handling easier.
+ Handsontable is fully compatible with jQuery - the small example below shows that the integration
+ between the two is quick and intuitive.
+
+ In order to use Handsontable as a jQuery plugin, you need to do some preparation: +
+ <script src="handsontable/lib/jquery.min.js"></script>
+ <script src="handsontable/dist/handsontable.full.js"></script>
+ <link rel="stylesheet" media="screen" href="handsontable/dist/handsontable.full.css">
+
+ handsontable()
plugin constructor on an empty div as in the below code example:
+ ...
`
+that are traditionally used to mark up code examples. Their content is
+marked up by logical pieces with defined class names.
+
+
+### Custom initialization
+
+If you use different markup for code blocks you can initialize them manually
+with `highlightBlock(code, tabReplace)` function. It takes a DOM element
+containing the code to highlight and optionally a string with which to replace
+TAB characters.
+
+Initialization using, for example, jQuery might look like this:
+
+```javascript
+$(document).ready(function() {
+ $('pre code').each(function(i, e) {hljs.highlightBlock(e, ' ')});
+});
+```
+
+If your code container relies on ``) pass `true` into third parameter of `highlightBlock`: + +```javascript +$('div.code').each(function(i, e) {hljs.highlightBlock(e, null, true)}); +``` + +### Styling + +Elements of code marked up with classes can be styled as desired: + +```css +.comment { + color: gray; +} + +.keyword { + font-weight: bold; +} + +.python .string { + color: blue; +} + +.html .atribute .value { + color: green; +} +``` + +Highlight.js comes with several style themes located in "styles" directory that +can be used directly or as a base for your own experiments. + +**Note**: provided styles work for code defined inside `"}else{r+=M[0]}O=P.lR.lastIndex;M=P.lR.exec(L)}return r+L.substr(O)}function B(L,M){var r;if(M.sL==""){r=h(L)}else{r=e(M.sL,L)}if(M.r>0){y+=r.keyword_count;C+=r.r}return''+r.value+""}function K(r,L){if(L.sL&&f[L.sL]||L.sL==""){return B(r,L)}else{return G(r,L)}}function J(M,r){var L=M.cN?'':"";if(M.rB){z+=L;M.buffer=""}else{if(M.eB){z+=m(r)+L;M.buffer=""}else{z+=L;M.buffer=r}}p.push(M);C+=M.r}function H(N,M){var Q=p[p.length-1];if(M===undefined){z+=K(Q.buffer+N,Q);return}var P=s(M,Q);if(P){z+=K(Q.buffer+N,Q);J(P,M);return P.rB}var L=v(p.length-1,M);if(L){var O=Q.cN?"":"";if(Q.rE){z+=K(Q.buffer+N,Q)+O}else{if(Q.eE){z+=K(Q.buffer+N,Q)+O+m(M)}else{z+=K(Q.buffer+N+M,Q)+O}}while(L>1){O=p[p.length-2].cN?"":"";z+=O;L--;p.length--}var r=p[p.length-1];p.length--;p[p.length-1].buffer="";if(r.starts){J(r.starts,"")}return Q.rE}if(w(M,Q)){throw"Illegal"}}var F=f[D];g(F);var p=[F];F.buffer="";var C=0;var y=0;var z="";try{var x,u=0;while(true){x=q(E,u);if(!x){break}var t=H(E.substr(u,x.index-u),x[0]);u=x.index+(t?0:x[0].length)}H(E.substr(u),undefined);return{r:C,keyword_count:y,value:z,language:D}}catch(I){if(I=="Illegal"){return{r:0,keyword_count:0,value:m(E)}}else{throw I}}}function h(t){var p={keyword_count:0,r:0,value:m(t)};var r=p;for(var q in f){if(!f.hasOwnProperty(q)){continue}var s=e(q,t);s.language=q;if(s.keyword_count+s.r>r.keyword_count+r.r){r=s}if(s.keyword_count+s.r>p.keyword_count+p.r){r=p;p=s}}if(r.language){p.second_best=r}return p}function j(r,q,p){if(q){r=r.replace(/^((<[^>]+>|\t)+)/gm,function(t,w,v,u){return w.replace(/\t/g,q)})}if(p){r=r.replace(/\n/g,"` blocks. If you use +custom markup you should modify styles accordingly. + +For full reference list of classes see [classref.txt][cr]. + +[cr]: http://github.com/isagalaev/highlight.js/blob/master/classref.txt + + +## Export + +File export.html contains a little program that allows you to paste in a code +snippet and then copy and paste the resulting HTML code generated by the +highlighter. This is useful in situations when you can't use the script itself +on a site. + + +## Heuristics + +Autodetection of a code's language is done using a simple heuristic: +the program tries to highlight a fragment with all available languages and +counts all syntactic structures that it finds along the way. The language +with greatest count wins. + +This means that in short fragments the probability of an error is high +(and it really happens sometimes). In this cases you can set the fragment's +language explicitly by assigning a class to the `` element: + +```html +
+``` + +You can use class names recommended in HTML5: "language-html", +"language-php". Classes also can be assigned to the `...
` element. + +To disable highlighting of a fragment altogether use "no-highlight" class: + +```html ++``` + +## Meta + +- Version: 6.2 +- URL: http://softwaremaniacs.org/soft/highlight/en/ +- Author: Ivan Sagalaev (...
) + +For the license terms see LICENSE files. +For the list of contributors see AUTHORS.en.txt file. diff --git a/data/media/table_editor/handsontable/demo/js/highlight/highlight.pack.js b/data/media/table_editor/handsontable/demo/js/highlight/highlight.pack.js new file mode 100644 index 0000000..0ccf015 --- /dev/null +++ b/data/media/table_editor/handsontable/demo/js/highlight/highlight.pack.js @@ -0,0 +1 @@ +var hljs=new function(){function m(p){return p.replace(/&/gm,"&").replace(/"}while(y.length||w.length){var v=u().splice(0,1)[0];z+=m(x.substr(q,v.offset-q));q=v.offset;if(v.event=="start"){z+=t(v.node);s.push(v.node)}else{if(v.event=="stop"){var p,r=s.length;do{r--;p=s[r];z+=(""+p.nodeName.toLowerCase()+">")}while(p!=v.node);s.splice(r,1);while(r '+M[0]+"
"+y.value+"
";t=p.firstChild.firstChild;p.firstChild.cN=s.cN;s.parentNode.replaceChild(p.firstChild,s)}else{t.innerHTML=y.value}t.className=u;t.result={language:v,kw:y.keyword_count,re:y.r};if(y.second_best){t.second_best={language:y.second_best.language,kw:y.second_best.keyword_count,re:y.second_best.r}}}function o(){if(o.called){return}o.called=true;var r=document.getElementsByTagName("pre");for(var p=0;p