├── visibly.jquery.json
├── README.md
├── LICENSE
└── js
├── jquery-visibly.min.js
└── jquery-visibly.js
/visibly.jquery.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "visibly",
3 | "title": "jQuery Visibly",
4 | "description": "A jQuery Plugin designed to easily show elements based on values of other elements.",
5 | "keywords": [
6 | "Visibly",
7 | "visible",
8 | "input",
9 | "form",
10 | "forms"
11 | ],
12 | "version": "1.1.0",
13 | "author": {
14 | "name": "Daniel Rivers",
15 | "url": "http://www.danielrivers.com",
16 | "email": "me@danielrivers.com"
17 | },
18 | "licenses": [
19 | {
20 | "type": "MIT",
21 | "url": "https://github.com/jquery/jquery-color/blob/2.1.2/MIT-LICENSE.txt"
22 | }
23 | ],
24 | "bugs": "https://github.com/DanielRivers/jQuery-Visibly",
25 | "homepage": "https://github.com/DanielRivers/jQuery-Visibly",
26 | "docs": "https://github.com/DanielRivers/jQuery-Visibly",
27 | "download": "https://github.com/DanielRivers/jQuery-Visibly",
28 | "dependencies": {
29 | "jquery": ">=1.2"
30 | }
31 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | jQuery-Visibly
2 | ==============
3 |
4 | A jQuery Plugin designed to easily show elements based on values of other elements
5 |
6 | ## Documentation
7 |
8 | ### Setup
9 | ```javascript
10 | $('[visibly]').Visibly();
11 | ```
12 |
13 |
14 | ### Options
15 | ```javascript
16 | clearOnHide: false, //Clear the data from the elements on hide
17 | regularExpression: false, //This determines if regular expression is to be used for the test
18 | attr: 'visibly', //Data attribute to use for the visibly data
19 | vdelim: ',', //Delimeter used to split the values a control can hold
20 | edelim: ':', //Delimeter between the field ID and the values
21 | fdelim: ';' //Delimeter between the fields
22 | rdelim: '%' //Delimeter between the rules
23 | ```
24 |
25 | ## Examples
26 |
27 | ```
28 |
29 | ```
30 |
31 | The above rule will make the relevant element visible is the value of field1 is either 'a' or 'b' and field2 has value of '1'
32 |
33 | ## Help
34 | Full documentation can be found at: http://www.danielrivers.com/visibly
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2013 Daniel Rivers
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/js/jquery-visibly.min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Visibly jQuery Plugin v1.1
3 | *
4 | * @version 1.1 (05/03/2015)
5 | * @author Daniel Rivers
6 | * @see https://github.com/DanielRivers/jQuery-Visibly/
7 | *
8 | * Dual licensed under the MIT and GPLv3 Licenses
9 | * http://www.opensource.org/licenses/mit-license.php
10 | * http://www.gnu.org/licenses/gpl-3.0.html
11 | *
12 | */
13 | !function(e){e.fn.rVal=function(){var i;return e(this).is("select")?e(this).find("option:selected").each(function(){e(this).parent().is("select")&&(i=e(this).val())}):i=e(this).val(),i}}(jQuery),function(e){e.fn.Visibly=function(i){var t=e.extend({clearOnHide:!1,attr:"visibly",vdelim:",",edelim:":",nedelim:"!",regularExpression:!1,fdelim:";",rdelim:"%"},i),n=[];return this.each(function(){var i=e(this),l=RegExp(t.edelim+"|"+t.nedelim);e.each(e(this).attr(t.attr).split(t.fdelim),function(s,r){var a=e("#"+r.split(l)[0]);0==a.length&&(a=e('INPUT[name="'+r.split(l)[0]+'"]')),a.bind("keyup change click",function(){var n=!0;e.each(i.attr(t.attr).split(t.rdelim),function(i,s){return n=!0,e.each(s.split(t.fdelim),function(i,s){var r=e("#"+s.split(l)[0]);if(0==r.length&&(r=e("INPUT[name='"+s.split(l)[0]+"']:checked")),void 0!=r.val()){var a="";if(r.is("select")?r.find("option:selected").each(function(){e(this).parent().is("select")&&(a=e(this).rVal())}):a=r.val(),null!=s.split(t.edelim)[1])var c=e.grep(s.split(t.edelim)[1].split(t.vdelim),function(i){return-1!=e.inArray(a,s.split(t.edelim)[1].split(t.vdelim))?!0:t.regularExpression?a.match(i):!1});if(null!=s.split(t.nedelim)[1])var c=e.grep(s.split(t.nedelim)[1].split(t.vdelim),function(i){return-1!=e.inArray(a,s.split(t.nedelim)[1].split(t.vdelim))?!1:t.regularExpression?!a.match(i):!0});0==c.length&&(n=!1)}else n=!1}),!n}),n?i.is("option")?i.parent("span.hide").length&&i.unwrap():i.show():i.is("option")?0==i.parent("span.hide").length&&(i.val()==i.closest("select").val()&&i.closest("select").rVal(""),i.trigger("change"),i.wrap('')):i.hide(),!n&&t.clearOnHide&&(i.val(""),i.find("input").val(""),i.selectedIndex=0)}),-1==e.inArray(r.split(l)[0],n)&&n.push(r.split(l)[0])})}).promise().done(function(){for(var i=0;i
6 | * @see https://github.com/DanielRivers/jQuery-Visibly/
7 | *
8 | * Dual licensed under the MIT and GPLv3 Licenses
9 | * http://www.opensource.org/licenses/mit-license.php
10 | * http://www.gnu.org/licenses/gpl-3.0.html
11 | *
12 | */
13 | //rVal gets rounds issue with hidden items in drop down being selected
14 | (function($) {
15 | $.fn.rVal = function(content) {
16 | var result;
17 | if ($(this).is("select")) {
18 | $(this).find('option:selected').each(function() {
19 | if ($(this).parent().is("select")) result = $(this).val();
20 | });
21 | } else result = $(this).val();
22 | return result;
23 | };
24 | })(jQuery);
25 |
26 | ;
27 | (function($) {
28 | $.fn.Visibly = function(o) {
29 | //settings and defaults
30 | var s = $.extend({
31 | clearOnHide: false, //Clear the value from the elements on hide
32 | attr: 'visibly', //attr attribute to use for the visibly attr
33 | vdelim: ',', //Delimiter used to split the values a control can hold
34 | edelim: ':', //Equal delimiter between the field ID and the values
35 | nedelim: '!', //Not Equal delimiter between the field ID and the values
36 | regularExpression: false, //Use Regular expression for the test
37 | fdelim: ';', //Delimiter between the fields
38 | rdelim: '%' //Delimiter between rules
39 | }, o);
40 | var runitems = [];
41 |
42 | return this.each(function() {
43 | var c = $(this);
44 | var split = RegExp(s.edelim + "|" + s.nedelim);
45 | //loop through all controls related to the field to create events
46 | $.each($(this).attr(s.attr).split(s.fdelim), function(k, v2) {
47 | //Bind keyup and change events, keyup is used because if the next tab item is made visible it would not be tabbed to using change or blur
48 | var vis = $('#' + v2.split(split)[0]);
49 |
50 | if (vis.length == 0) vis = $('INPUT[name="' + v2.split(split)[0] + '"]');
51 | vis.bind("keyup change click", function() {
52 | //Parent field has changed! Check if should be made visible
53 | var visible = true;
54 | $.each(c.attr(s.attr).split(s.rdelim), function(k, rv) {
55 | visible = true;
56 | //loop through the controls related to the rules
57 | $.each(rv.split(s.fdelim), function(k, v) {
58 | //Cache the element
59 | var elem = $('#' + v.split(split)[0]);
60 | if (elem.length == 0) elem = $("INPUT[name='" + v.split(split)[0] + "']:checked");
61 | //Does the element exist?
62 | if (elem.val() != undefined) {
63 | //Cache the value, plus workaround for issue with .val on select boxes with hidden items
64 | var val = '';
65 | if (elem.is('select')) {
66 | elem.find('option:selected').each(function() {
67 | if ($(this).parent().is("select")) val = $(this).rVal();
68 | });
69 | } else val = elem.val();
70 | //If the rule doesn't match, hide control
71 | if (v.split(s.edelim)[1] != null)
72 | //work around for .val not working correctly
73 | var grep = $.grep(v.split(s.edelim)[1].split(s.vdelim), function(n, i) {
74 | if ($.inArray(val, v.split(s.edelim)[1].split(s.vdelim)) != -1)
75 | return true;
76 | //didnt match above, test if its a regular expression match
77 | return (s.regularExpression) ? (val.match(n)) : false;
78 | });
79 | if (v.split(s.nedelim)[1] != null)
80 | var grep = $.grep(v.split(s.nedelim)[1].split(s.vdelim), function(n, i) {
81 | if ($.inArray(val, v.split(s.nedelim)[1].split(s.vdelim)) != -1)
82 | return false;
83 | //didnt match above, test if its a regular expression match
84 | return (s.regularExpression) ? (!val.match(n)) : true;
85 | });
86 | if (grep.length == 0) visible = false;
87 | } else visible = false
88 | });
89 | return !visible;
90 | });
91 | //Set visibilty
92 | //setting individual items on drop down doesn't work cross browser, check to see if option and wrap in hidden span
93 | if (visible) {
94 | if (c.is("option")) {
95 | if (c.parent('span.hide').length) c.unwrap();
96 | } else c.show()
97 | } else {
98 | if (c.is("option")) {
99 | if (c.parent('span.hide').length == 0) {
100 | if (c.val() == c.closest('select').val())
101 | c.closest('select').rVal('');
102 | c.trigger('change');
103 | c.wrap('');
104 | };
105 | } else c.hide()
106 | };
107 | //Clear the element and child elements if ClearOnHide is set
108 | if ((!visible) && (s.clearOnHide)) {
109 | c.val('');
110 | c.find('input').val('');
111 | c.selectedIndex = 0;
112 | }
113 | })
114 | //Add event items to collection for initialisation
115 | if ($.inArray(v2.split(split)[0], runitems) == -1) runitems.push(v2.split(split)[0]);
116 | });
117 | }).promise().done(function() {
118 | //First load, set visibility on all fields based on rules
119 | for (var i = 0; i < runitems.length; i++) {
120 | $('INPUT[name="' + runitems[i] + '"]').trigger('change');
121 | $('#' + runitems[i]).trigger('change');
122 | }
123 | });
124 | };
125 | })(jQuery);
--------------------------------------------------------------------------------