Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Right to Left initialization option #1510

Merged
merged 6 commits into from
Sep 19, 2016
Merged

Right to Left initialization option #1510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
150cbd9
added rtl as initializer option, fixes #1485
koenpunt Aug 20, 2013
5e6243c
moved class test to abstract chosen
koenpunt Aug 20, 2013
328221d
Right to left option. Documentation updated to note deprecation of
Aug 26, 2013
066d64d
Doc updates
tjschuck Aug 26, 2013
7310b86
no need to specify false when setting @is_rtl
Aug 27, 2013
7bf19e4
fixup! Right to left option. Documentation updated to note deprecatio…
koenpunt Sep 19, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion coffee/chosen.jquery.coffee
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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