Item14454 (#16)

* Created lib/Foswiki/Plugins/JQueryPlugin/VIEW.pm * Created pub/System/JQueryPlugin/plugins/view * Created data/System/JQueryView.txt
foswiki · Aug 2, 2017 · f23d1f0 · f23d1f0
1 parent bda2450
commit f23d1f0
Show file tree

Hide file tree

Showing 122 changed files with 213,187 additions and 0 deletions.
diff --git a/JQueryPlugin/data/System/JQueryView.txt b/JQueryPlugin/data/System/JQueryView.txt
@@ -0,0 +1,131 @@
+%META:TOPICINFO{author="ProjectContributor" comment="" date="1496325739" format="1.1" version="3"}%
+%META:TOPICPARENT{name="JQueryPlugin"}%
+---+!! %TOPIC%
+
+%JQPLUGINS{"view"
+  format="
+    Homepage: $homepage <br />
+    Author(s): $author <br />
+    Version: $version
+  "
+}%
+
+%TOC%
+
+%STARTSECTION{"summary"}%
+This plugin adds JsViews functionality to the JsRender plugin. JsViews builds off of standard JsRender templates, but adds
+two-way declarative data-binding, MVVM, and MVP.
+
+See System.JQueryRender and https://www.jsviews.com/#jsviews for more details.
+%ENDSECTION{"summary"}%
+
+---++ Usage
+
+%JQREQUIRE{"view"}%
+
+---+++ In the SCRIPT head
+<verbatim>
+var data = [
+  {
+    "name": "Robert",
+    "nickname": "Bob",
+    "showNickname": true
+  },
+  {
+    "name": "Susan",
+    "nickname": "Sue",
+    "showNickname": false
+  }
+];
+
+var template = $.templates("#theTmpl");
+
+template.link("#result", data);
+</verbatim>
+
+---+++ In the BODY
+<verbatim>
+<div id="result"></div>
+
+<script id="theTmpl" type="text/x-jsrender">
+<div>
+  Edit: <input type="checkbox" data-link="editable"/>
+  <em>Name:</em> {^{:name}}
+  {^{if showNickname && nickname}}
+    (Goes by <em data-link="nickname"></em>)
+  {{/if}}
+  {^{if editable}}
+    <div>
+      <input data-link="name"/>
+      <input data-link="nickname"/>
+      Show nickname: <input type="checkbox" data-link="showNickname"/>
+    </div>
+  {{/if}}
+</div>
+</script>
+</verbatim>
+
+---+++ See the demo
+<div id="result"></div>
+
+<script id="theTmpl" type="text/x-jsrender">
+<div>
+  Edit: <input type="checkbox" data-link="editable"/>
+  <em>Name:</em> {^{:name}}
+  {^{if showNickname && nickname}}
+    (Goes by <em data-link="nickname"></em>)
+  {{/if}}
+  {^{if editable}}
+    <div>
+      <input data-link="name"/>
+      <input data-link="nickname"/>
+      Show nickname: <input type="checkbox" data-link="showNickname"/>
+    </div>
+  {{/if}}
+</div>
+</script>
+
+<script type="text/javascript">
+(function($) {
+  var data = [
+    {
+      "name": "Robert",
+      "nickname": "Bob",
+      "showNickname": true
+    },
+    {
+      "name": "Susan",
+      "nickname": "Sue",
+      "showNickname": false
+    }
+  ];
+
+  $(function() {
+    var template = $.templates("#theTmpl");
+    template.link("#result", data);
+  });
+})(jQuery);
+</script>
+
+Pretty cool!
+
+---++ Further reading
+   * http://www.jsviews.com
+   * [[http://borismoore.github.io/jsviews/demos/][JsViews Demos]]
+
+---++ Syntax 
+
+!JsViews templates are very similar to !JsRender templates, but with minor changes to the tag structure.
+   * For data-dependent linking, <code>{{:name}}</code> becomes this <code>{^{:name}}</code>
+   * For two-way linking, <code>{{:name}}</code> becomes this <code></code>
+   * Tag attributes can also be data-linked: <code><button data-link="disabled{:disableButton} title{:theTitle} data-myvalue{:myVal} class{:disableButton ? 'class2' : 'class1'}"></code>
+   * If you are data-linking tags, you might be interested in two-way binding: <code><input data-link="{:name}" /></code> becomes this <code><input data-link="{:name:}" /></code>
+      * (Actually, the default for <input> elements is two-way binding, so you can just use the shorthand <code><input data-link="name" /></code>. The more explicit form is only necessary if you want to force it to one-way binding.)
+   * You can also use this for contenteditable elements: <code><span data-link="name" contenteditable="true"></span></code>
+   * As with !JsRender, there is support for converters and helpers as well.
+
+ Other functionality includes the <code>$.observe()</code> method for assigning callback functions to respond to observable 
+ changes, and the <code>$.view()</code> method for retrieving the data slice associated with a particular View object.
+
+ (see http://www.jsviews.com/#jsvapi for lots of details and examples)
+
diff --git a/JQueryPlugin/lib/Foswiki/Plugins/JQueryPlugin/VIEW.pm b/JQueryPlugin/lib/Foswiki/Plugins/JQueryPlugin/VIEW.pm
@@ -0,0 +1,49 @@
+# See bottom of file for license and copyright information
+
+package Foswiki::Plugins::JQueryPlugin::VIEW;
+use strict;
+use warnings;
+
+use Foswiki                                ();
+use Foswiki::Plugins::JQueryPlugin::Plugin ();
+our @ISA = qw( Foswiki::Plugins::JQueryPlugin::Plugin );
+
+sub new {
+    my $class = shift;
+    my $session = shift || $Foswiki::Plugins::SESSION;
+
+    my $this = bless(
+        $class->SUPER::new(
+            $session,
+            name       => 'View',
+            version    => '0.9.83',
+            author     => 'Boris Moore',
+            homepage   => 'http://www.jsviews.com',
+            dependencies => [ 'render' ],
+            javascript => [ 'jquery.observable.uncompressed.js', 'jquery.views.uncompressed.js' ],
+        ),
+        $class
+    );
+
+    return $this;
+}
+
+
+1;
+
+__END__
+Foswiki - The Free and Open Source Wiki, http://foswiki.org/
+
+Copyright (C) 2010-2016 Foswiki Contributors. Foswiki Contributors
+
+This program is free software; you can redistribute it and/or
+modify it under the terms of the GNU General Public License
+as published by the Free Software Foundation; either version 2
+of the License, or (at your option) any later version. For
+more details read LICENSE in the root of this distribution.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+
+As per the GPL, removal of this notice is prohibited.
diff --git a/JQueryPlugin/pub/System/JQueryPlugin/plugins/view/jquery.observable.uncompressed.js b/JQueryPlugin/pub/System/JQueryPlugin/plugins/view/jquery.observable.uncompressed.js
@@ -0,0 +1 @@
+jsviews-0.9.83/jquery.observable.js
diff --git a/JQueryPlugin/pub/System/JQueryPlugin/plugins/view/jquery.views.uncompressed.js b/JQueryPlugin/pub/System/JQueryPlugin/plugins/view/jquery.views.uncompressed.js
@@ -0,0 +1 @@
+jsviews-0.9.83/jquery.views.js
diff --git a/JQueryPlugin/pub/System/JQueryPlugin/plugins/view/jsviews-0.9.83/MIT-LICENSE.txt b/JQueryPlugin/pub/System/JQueryPlugin/plugins/view/jsviews-0.9.83/MIT-LICENSE.txt
@@ -0,0 +1,20 @@
+Copyright (c) 2015 Boris Moore https://github.com/BorisMoore/jsviews
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.