iqvoc 4.8.1 → 4.8.2

data/vendor/assets/bower_components/jqtree/_examples/02_load_json_data_from_server.html

@@ -0,0 +1,31 @@
+---
+title: Load json data from the server in javascript tree
+layout: page
+js: examples/load_json_data_from_server.js
+css: example.css
+---
+
+<p id="nav">
+    <a href="01_load_json_data.html">&laquo; Example 1</a>
+    <a href="03_drag_and_drop.html" class="next">Example 3 &raquo;</a>
+</p>
+
+<h1>Example 2 - load json data from the server</h1>
+
+<div id="tree1" data-url="/example_data/"></div>
+
+<p>
+    In this example we load the data from the server using the <strong>data-url</strong> property on the dom element.
+</p>
+
+<h3>html</h3>
+
+{% highlight html %}
+<div id="tree1" data-url="/example_data/"></div>
+{% endhighlight %}
+
+<h3>javascript</h3>
+
+{% highlight js %}
+$('#tree1').tree();
+{% endhighlight %}

data/vendor/assets/bower_components/jqtree/_examples/03_drag_and_drop.html

@@ -0,0 +1,45 @@
+---
+title: Javascript tree with drag and drop
+layout: page
+js: examples/drag_and_drop.js
+css: example.css
+---
+
+<p id="nav">
+    <a href="02_load_json_data_from_server.html">&laquo; Example 2</a>
+    <a href="04_save_state.html" class="next">Example 4 &raquo;</a>    
+</p>
+
+<h1>Example 3 - Drag and drop</h1>
+
+<div id="tree1" data-url="/example_data/"></div>
+
+<p>
+   Let's add drag-and-drop support by setting the option <strong>dragAndDrop</strong> to true.
+   You can now drag tree nodes to another position.
+</p>
+
+<p>
+    Other options:
+</p>
+
+<ul>
+    <li>The option <strong>autoOpen</strong> is set to 0 to open the first level of nodes.</li>
+</ul>
+
+<h3>html</h3>
+
+{% highlight html %}
+<div id="tree1" data-url="/example_data/"></div>
+{% endhighlight %}
+
+<h3>javascript</h3>
+
+{% highlight js %}
+var $tree = $('#tree1');
+$tree.tree({
+  dragAndDrop: true,
+  autoOpen: 0
+});
+{% endhighlight %}
+

data/vendor/assets/bower_components/jqtree/_examples/04_save_state.html

@@ -0,0 +1,52 @@
+---
+title: Save the state in javascript tree
+layout: page
+js: examples/save_state.js
+css: example.css
+---
+
+<p id="nav">
+    <a href="03_drag_and_drop.html">&laquo; Example 3</a>
+    <a href="05_load_on_demand.html" class="next">Example 5 &raquo;</a>    
+</p>
+
+<h1>Example 4 - Save the state</h1>
+
+<div id="tree1" data-url="/example_data/"></div>
+
+<p>
+   If you set the option <strong>saveState</strong> to true, then jqtree remembers the tree state after a page reload.
+</p>
+<ul>
+    <li>
+        JqTree save the state into localStorage.
+        If the browser does not support localStorage, then jqTree saves the state in a cookie.
+    </li>
+    <li>
+        You must include the <a href="https://github.com/carhartl/jquery-cookie">jquery-cookie</a> plugin for cookie support.
+    </li>
+</ul>
+
+<h3>html</h3>
+
+{% highlight html %}
+<div id="tree1" data-url="/example_data/"></div>
+{% endhighlight %}
+
+<h3>javascript</h3>
+
+{% highlight js %}
+$('#tree1').tree({
+    saveState: true
+});
+{% endhighlight %}
+
+<p>
+    Giving the <strong>saveState</strong> a string value sets the storage key. The default key is 'tree'.
+</p>
+
+{% highlight js %}
+$('#tree1').tree({
+    saveState: 'my-tree'
+});    
+{% endhighlight %}

data/vendor/assets/bower_components/jqtree/_examples/05_load_on_demand.html

@@ -0,0 +1,70 @@
+---
+title: Load nodes on demand from the server in javascript tree
+layout: page
+js: examples/load_on_demand.js
+css: example.css
+---
+
+<p id="nav">
+    <a href="04_save_state.html">&laquo; Example 4</a>
+    <a href="06_autoescape.html" class="next">Example 6 &raquo;</a>    
+</p>
+
+<h1>Example 5 - Load nodes on demand from the server</h1>
+
+        
+<div id="tree1" data-url="/nodes/"></div>
+
+<p>
+    In this example, the data is loaded on demand from the server.
+    <br>
+    To use load on demand, you must do the following:
+</p>
+
+<ul>
+    <li>
+        You must specify a <strong>data url</strong>. In this example this is done using the <strong>data-url</strong> 
+        html data attribute.
+    </li>
+    <li>
+        Folders that must be loaded on demand must have the <strong>load_on_demand</strong> property. You can specify this in the data.
+    </li>
+    <li>
+        In this example, the url <strong>/nodes/</strong> returns the first level of data (Saurischia and Ornithischians).
+    </li>
+    <li>
+        The url for the load on demand data is <strong>&lt;data-url&gt;?node=&lt;node-id&gt;</strong>. So, for node 23  this would be
+        <strong>/nodes/?node=23</strong>.
+    </li>
+</ul>
+
+<h3>first level of data</h3>
+
+{% highlight js %}
+[
+    {
+        "label": "Saurischia",
+        "id": 1,
+        "load_on_demand": true
+    },
+    {
+        "label": "Ornithischians",
+        "id": 23,
+        "load_on_demand": true
+    }
+]
+{% endhighlight %}
+
+<h3>html</h3>
+
+{% highlight html %}
+<div id="tree1" data-url="/nodes/"></div>
+{% endhighlight %}
+
+<h3>javascript</h3>
+
+{% highlight js %}
+$('#tree1').tree({
+    dragAndDrop: true
+});
+{% endhighlight %}

data/vendor/assets/bower_components/jqtree/_examples/06_autoescape.html

@@ -0,0 +1,47 @@
+---
+title: Javascript tree with autoescape
+layout: page
+js: examples/autoescape.js
+css: example.css
+---
+
+<p id="nav">
+    <a href="05_load_on_demand.html">&laquo; Example 5</a>    
+    <a href="07_autoscroll.html" class="next">Example 7 &raquo;</a>
+</p>
+
+<h1>Example 6 - autoEscape</h1>
+
+<p>
+    You can put html in the node titles setting the <a href="../index.html#tree-options-autoescape">autoEscape</a> option to <strong>false</strong>.
+</p>
+
+<div id="tree1"></div>
+
+<h3>html</h3>
+
+{% highlight html %}
+<div id="tree1"></div>
+{% endhighlight %}
+
+<h3>javascript</h3>
+
+{% highlight js %}
+var data = [
+  {
+    label: 'examples',
+      children: [
+        { label: '<a href="example1.html">Example 1</a>' },
+        { label: '<a href="example2.html">Example 2</a>' },
+        '<a href="example3.html">Example </a>'
+      ]
+  }
+];
+
+// set autoEscape to false
+$('#tree1').tree({
+  data: data,
+  autoEscape: false,
+  autoOpen: true
+});
+{% endhighlight %}

data/vendor/assets/bower_components/jqtree/_examples/07_autoscroll.html

@@ -0,0 +1,23 @@
+---
+title: Javascript tree with autoscroll
+layout: page
+js: examples/autoscroll.js
+css: example.css
+---
+
+<p id="nav">
+    <a href="06_autoescape.html">&laquo; Example 6</a>
+    <a href="08_multiple_select.html" class="next">Example 8 &raquo;</a>
+</p>
+
+<h1>Example 7 - autoscroll</h1>
+    
+<div id="scroll-container">
+    <div id="tree1"></div>
+</div>
+
+<p>
+    This is an example of autoscroll. The tree will scroll automatically if you drag an item outside of the tree.
+    <br />
+    Autoscroll will work automatically. There is no option for it.
+</p>

data/vendor/assets/bower_components/jqtree/_examples/08_multiple_select.html

@@ -0,0 +1,72 @@
+---
+title: Javascript tree with multiple select
+layout: page
+js: examples/multiple_select.js
+css: example.css
+---
+
+<p id="nav">
+    <a href="07_autoscroll.html">&laquo; Example 7</a>
+    <a href="09_custom_html.html" class="next">Example 9 &raquo;</a>    
+</p>
+
+<h1>Example 8 - multiple select</h1>
+
+
+<p>
+    This example implements multiple select using the following functions and events:
+</p>
+<ul>
+    <li>
+        <strong>addToSelection</strong>: add node to selections
+    </li>
+    <li>
+        <strong>isNodeSelected</strong>: is this node selected?
+    </li>
+    <li>
+        <strong>removeFromSelection</strong>: unselect this node
+    </li>
+    <li>
+        <strong>tree.click event</strong>: this event is fired when a user clicks on a node
+    </li>
+</ul>
+
+<div id="tree1"></div>
+
+<h3>html</h3>
+
+{% highlight html %}
+<div id="tree1" data-url="/nodes/"></div>
+{% endhighlight %}
+
+<h3>javascript</h3>
+
+{% highlight js %}
+$(function() {
+    var $tree = $('#tree1');
+    $tree.tree({
+        data: ExampleData.example_data,
+        autoOpen: true,
+    });
+    $tree.bind(
+        'tree.click',
+        function(e) {
+            // Disable single selection
+            e.preventDefault();
+
+            var selected_node = e.node;
+
+            if (selected_node.id == undefined) {
+                console.log('The multiple selection functions require that nodes have an id');
+            }
+
+            if ($tree.tree('isNodeSelected', selected_node)) {
+                $tree.tree('removeFromSelection', selected_node);
+            }
+            else {
+                $tree.tree('addToSelection', selected_node);
+            }
+        }
+    );
+});
+{% endhighlight %}

data/vendor/assets/bower_components/jqtree/_examples/09_custom_html.html

@@ -0,0 +1,68 @@
+---
+title: Javascript tree with custom html
+layout: page
+js: examples/custom_html.js
+css: example.css
+---
+
+<p id="nav">
+    <a href="08_multiple_select.html">&laquo; Example 8</a>
+    <a href="10_icon_buttons.html" class="next">Example 10 &raquo;</a>    
+</p>
+
+<h1>Example 9 - custom html</h1>
+
+<style>
+    .jqtree-tree .edit {
+        margin-left: 8px;
+        vertical-align: middle;
+    }
+</style>
+<p>
+    This example uses the <strong>onCreateLi</strong> option to create an edit link next to the tree node.
+</p>
+<div id="tree1"></div>
+
+<h3>html</h3>
+
+{% highlight html %}
+<div id="tree1"></div>
+{% endhighlight %}
+
+<h3>javascript</h3>
+
+{% highlight js %}
+$(function() {
+    var $tree = $('#tree1');
+
+    $tree.tree({
+        data: ExampleData.example_data,
+        autoOpen: 1,
+        onCreateLi: function(node, $li) {
+            // Append a link to the jqtree-element div.
+            // The link has an url '#node-[id]' and a data property 'node-id'.
+            $li.find('.jqtree-element').append(
+                '&lt;a href="#node-'+ node.id +'" class="edit" data-node-id="'+
+                node.id +'"&gt;edit&lt;/a&gt;'
+            );
+        }
+    });
+
+    // Handle a click on the edit link
+    $tree.on(
+        'click', '.edit',
+        function(e) {
+            // Get the id from the 'node-id' data property
+            var node_id = $(e.target).data('node-id');
+
+            // Get the node from the tree
+            var node = $tree.tree('getNodeById', node_id);
+
+            if (node) {
+                // Display the node name
+                alert(node.name);
+            }
+        }
+    );
+});
+{% endhighlight %}

data/vendor/assets/bower_components/jqtree/_examples/10_icon_buttons.html

@@ -0,0 +1,27 @@
+---
+title: Use icon toggle buttons
+layout: page
+js: examples/icon_buttons.js
+css: example.css
+---
+
+<p id="nav">
+    <a href="custom_html.html">&laquo; Example 9</a>
+</p>
+
+<h1>Example 10 - use icon toggle buttons</h1>
+
+<p>
+    You can use the <strong>openedIcon</strong> and <strong>closedIcon</strong> options to use html for
+    the toggle buttons. You can for example use <a href="http://fortawesome.github.io/Font-Awesome/">Fontawesome icons</a>.
+</p>
+<div id="tree1" data-url="/example_data/"></div>
+
+<h3>javascript</h3>
+
+{% highlight js %}
+$('#tree1').tree({
+    closedIcon: $('&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;'),
+    openedIcon: $('&lt;i class="fa fa-arrow-circle-down"&gt;&lt;/i&gt;')
+});
+{% endhighlight %}

data/vendor/assets/bower_components/jqtree/_layouts/base.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="JqTree is a jQuery widget for displaying a tree structure in html">
+        <link rel="stylesheet" href="{{ site.baseurl }}/static/bower_components/bootstrap/dist/css/bootstrap.min.css">
+        <link rel="stylesheet" href="{{ site.baseurl }}/static/bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
+        <link rel="stylesheet" href="{{ site.baseurl }}/jqtree.css">
+        <link rel="stylesheet" href="{{ site.baseurl }}/static/bower_components/pygments/css/monokai.css">
+        <link rel="stylesheet" href="{{ site.baseurl }}/static/bower_components/fontawesome/css/font-awesome.min.css">
+
+        <script>
+          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+          })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+          ga('create', 'UA-33742133-1', 'auto');
+          ga('require', 'linkid', 'linkid.js');
+          ga('send', 'pageview');
+        </script>
+
+        {% if page.css %}
+        <link rel="stylesheet" href="{{ site.baseurl }}/static/{{ page.css }}">
+        {% endif %}
+    </head>
+<body>
+{{ content }}
+</body>
+
+<!--[if lt IE 9]>
+    <script src="{{ site.baseurl }}/static/jquery-1.11.2.min.js"></script>
+<![endif]-->
+<!--[if gte IE 9]><!-->
+    <script src="{{ site.baseurl }}/static/bower_components/jquery/dist/jquery.min.js"></script>
+<!--<![endif]-->
+<script src="{{ site.baseurl }}/tree.jquery.js"></script>
+<script src="{{ site.baseurl }}/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+<script src="{{ site.baseurl }}/static/bower_components/jquery-mockjax/jquery.mockjax.js"></script>
+<script src="{{ site.baseurl }}/static/example_data.js"></script>
+
+{% if page.js %}
+<script src="{{ site.baseurl }}/static/{{ page.js }}"></script>
+{% endif %}
+
+</html>