Skip to content

Commit

Permalink
Right to Left initialization option (#1510)
Browse files Browse the repository at this point in the history 
* added rtl as initializer option, fixes #1485

* moved class test to abstract chosen

* Right to left option. Documentation updated to note deprecation of
classname approach.

* Doc updates

* no need to specify false when setting @is_rtl
  • Loading branch information
@koenpunt
Ken Earley authored and koenpunt committed Sep 19, 2016
1 parent 35979c1 commit 2ea2b46
Show file tree
Hide file tree
Showing 6 changed files with 28 additions and 16 deletions.
1 change: 0 additions & 1 deletion coffee/chosen.jquery.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ class Chosen extends AbstractChosen
setup: ->
@form_field_jq = $ @form_field
@current_selectedIndex = @form_field.selectedIndex
@is_rtl = @form_field_jq.hasClass "chosen-rtl"

set_up_html: ->
container_classes = ["chosen-container"]
Expand Down
1 change: 0 additions & 1 deletion coffee/chosen.proto.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ class @Chosen extends AbstractChosen

setup: ->
@current_selectedIndex = @form_field.selectedIndex
@is_rtl = @form_field.hasClassName "chosen-rtl"

set_default_values: ->
super()
Expand Down
1 change: 1 addition & 0 deletions coffee/lib/abstract-chosen.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ class AbstractChosen
@mouse_on_container = false
@results_showing = false
@result_highlighted = null
@is_rtl = @options.rtl || /\bchosen-rtl\b/.test(@form_field.className)
@allow_single_deselect = if @options.allow_single_deselect? and @form_field.options[0]? and @form_field.options[0].text is "" then @options.allow_single_deselect else false
@disable_search_threshold = @options.disable_search_threshold || 0
@disable_search = @options.disable_search || false
Expand Down
16 changes: 9 additions & 7 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1296,13 +1296,14 @@ <h2><a name="allow-deselect-on-single-selects" class="anchor" href="#allow-desel
</div>
</div>

<h2><a name="right-to-left-support" class="anchor" href="#right-to-left-support">Right to Left Support</a></h2>
<h2><a name="right-to-left-support" class="anchor" href="#right-to-left-support">Right-to-Left Support</a></h2>
<div class="side-by-side clearfix">
<p>Chosen supports right to left select boxes too. just add <code class="language-javascript">"chosen-rtl"</code> in addition to <code class="language-javascript">"chosen-select"</code> to your select tags and you are good to go.</p>
<pre><code class="language-markup">&lt;select class="chosen-select <strong>chosen-rtl</strong>"&gt;</code></pre>
<p>You can set right-to-left text by setting <code class="language-javascript">rtl: true</code></p>
<pre><code class="language-javascript"> $(".chosen-select").chosen({rtl: true}); </code></pre>

<div>
<em>Single right to left select</em>
<select data-placeholder="Your Favorite Type of Bear" style="width:350px;" class="chosen-select chosen-rtl" tabindex="13">
<em>Single Right-to-Left Select</em>
<select data-placeholder="Your Favorite Type of Bear" style="width:350px;" class="chosen-select-rtl" tabindex="13">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
Expand All @@ -1313,8 +1314,8 @@ <h2><a name="right-to-left-support" class="anchor" href="#right-to-left-support"
</select>
</div>
<div>
<em>Multiple right to left select</em>
<select data-placeholder="Your Favorite Types of Bear" style="width:350px;" multiple class="chosen-select chosen-rtl" tabindex="14">
<em>Multiple Right-to-Left Select</em>
<select data-placeholder="Your Favorite Types of Bear" style="width:350px;" multiple class="chosen-select-rtl" tabindex="14">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
Expand Down Expand Up @@ -1467,6 +1468,7 @@ <h2><a name="credits" class="anchor" href="#credits">Credits</a></h2>
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-rtl' : {rtl: true},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
Expand Down
15 changes: 8 additions & 7 deletions public/index.proto.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1297,13 +1297,13 @@ <h2><a name="allow-deselect-on-single-selects" class="anchor" href="#allow-desel
</div>
</div>

<h2><a name="right-to-left-support" class="anchor" href="#right-to-left-support">Right to Left Support</a></h2>
<h2><a name="right-to-left-support" class="anchor" href="#right-to-left-support">Right-to-Left Support</a></h2>
<div class="side-by-side clearfix">
<p>Chosen supports right to left select boxes too. just add <code class="language-markup">"chosen-rtl"</code> in addition to <code class="language-markup">"chosen-select"</code> to your select tags and you are good to go.</p>
<pre><code class="language-markup">&lt;select class="chosen-select <strong>chosen-rtl</strong>"&gt;</code></pre>
<p>You can set right-to-left text by setting <code class="language-javascript">rtl: true</code></p>
<pre><code class="language-javascript"> $(".chosen-select").chosen({rtl: true}); </code></pre>
<div>
<em>Single right to left select</em>
<select data-placeholder="Your Favorite Type of Bear" style="width:350px;" class="chosen-select chosen-rtl" tabindex="13">
<em>Single Right-to-Left Select</em>
<select data-placeholder="Your Favorite Type of Bear" style="width:350px;" class="chosen-select-rtl" tabindex="13">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
Expand All @@ -1314,8 +1314,8 @@ <h2><a name="right-to-left-support" class="anchor" href="#right-to-left-support"
</select>
</div>
<div>
<em>Multiple right to left select</em>
<select data-placeholder="Your Favorite Types of Bear" style="width:350px;" multiple class="chosen-select chosen-rtl" tabindex="14">
<em>Multiple Right-to-Left Select</em>
<select data-placeholder="Your Favorite Types of Bear" style="width:350px;" multiple class="chosen-select-rtl" tabindex="14">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
Expand Down Expand Up @@ -1469,6 +1469,7 @@ <h2><a name="credits" class="anchor" href="#credits">Credits</a></h2>
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text: "Oops, nothing found!"},
'.chosen-select-rtl' : {rtl: true},
'.chosen-select-width' : {width: "95%"}
}
var results = [];
Expand Down
10 changes: 10 additions & 0 deletions public/options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ <h3>Example:</h3>
</td>
</tr>
<tr>
<<<<<<< HEAD
<td>include_group_label_in_selected</td>
<td>false</td>
<td>
Expand Down Expand Up @@ -137,6 +138,14 @@ <h3>Example:</h3>
<p>By default Chosen's results are hidden after a option is selected. Setting this option to <code class="language-javascript">false</code> will keep the results open after selection. This only applies to multiple selects.</p>
</td>
</tr>
<tr>
<td>rtl</td>
<td>false</td>
<td>
<p>Chosen supports right-to-left text in select boxes. Set this option to <code class="language-javascript">true</code> to support right-to-left text options.</p>
<p><strong>Note:</strong> <a href="#classes">the <code class="language-javascript">chosen-rtl</code> class</a> on the select has precedence over this option. However, the classname approach is deprecated and will be removed in future versions of Chosen.</p>
</td>
</tr>
</table>

<h2><a name="attributes" class="anchor" href="#attributes">Attributes</a></h2>
Expand Down Expand Up @@ -196,6 +205,7 @@ <h3>Example:</h3>
<td>
<p>Chosen supports right-to-left text in select boxes. Add the class <code class="language-html">chosen-rtl</code> to your select tag to support right-to-left text options.</p>
<p><strong>Note:</strong> The <code class="language-html">chosen-rtl</code> class will pass through to the Chosen select even when the <code class="language-javascript">inherit_select_classes</code> option is set to <code class="language-javascript">false</code>.</p>
<p><strong>Note:</strong> This is deprecated in favor of using the <code class="language-javascript">rtl: true</code> option (see the <a href="#options">Options section</a>).
</td>
</tr>
</table>
Expand Down

0 comments on commit 2ea2b46

Please sign in to comment.