Skip to content

Add rtl functionality #50

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add rtl functionality #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
725f5f2
add rtl functionality
amin3d Jan 16, 2019
ba3b8c9
add rtl functionality
amin3d Jan 16, 2019
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: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ $.toast({
hideAfter : 5000, // `false` to make it sticky or time in miliseconds to hide after
stack : 5, // `fakse` to show one stack at a time count showing the number of toasts that can be shown at once
textAlign : 'left', // Alignment of text i.e. left, right, center
isRtl : false, // Direction of text i.e. true, false
position : 'bottom-left' // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values to position the toast on page
})
```
Expand Down
12 changes: 9 additions & 3 deletions demos/css/jquery.toast.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

30 changes: 25 additions & 5 deletions demos/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ <h1>Index</h1>
<li><a href="#toasts-icons">Messages with icons</a></li>
<li><a href="#toasts-bg-color">Background &amp; text color</a></li>
<li><a href="#toasts-text-alignment">Setting the text alignment</a></li>
<li><a href="#toasts-rtl">Setting the text direction</a></li>
<li><a href="#toasts-events">Toast Events</a></li>
<li><a href="#updating-toasts">Updating Toasts</a></li>
<li><a href="#resetting-toasts">Resetting Toasts</a></li>
Expand Down Expand Up @@ -462,7 +463,26 @@ <h2 id="toasts-text-alignment"><span class="muted">10.</span> Setting the text a
})</code></pre>
</div>

<h2 id="toasts-class"><span class="muted">9.</span> Custom Classes </h2>
<h2 id="toasts-rtl"><span class="muted">11.</span> Setting the text direction</h2>
<p><span class="code">isRtl</span> property is used to set the direction of text inside the toast. Permitted values are:</p>
<ul>
<li><span class="code">false</span></li>
<li><span class="code">true</span></li>
</ul>

<div class="code-runner">
<a href="#" class="eval-js">Run Code</a>
<pre><code>$.toast({
heading: 'عملیات موفق',
text: 'عملیات بروز رسانی با موفقیت صورت گرفته است',
icon: 'info',
textAlign: 'right',
isRtl: true,
position: 'bottom-right'
})</code></pre>
</div>

<h2 id="toasts-class"><span class="muted">12.</span> Custom Classes </h2>
<p><span class="code">class</span> property is used to add custom classes to the toast element</p>
<style type="text/css">
.larger-font {
Expand All @@ -479,7 +499,7 @@ <h2 id="toasts-class"><span class="muted">9.</span> Custom Classes </h2>
})</code></pre>
</div>

<h2 id="toasts-events"><span class="muted">11.</span> Toast Events</h2>
<h2 id="toasts-events"><span class="muted">13.</span> Toast Events</h2>
<p>Toast exposes the following events for you to bind to whatever you want</p>
<ul>
<li><span class="code">beforeShow</span> will be triggered right before the toast is about to appear</li>
Expand Down Expand Up @@ -511,7 +531,7 @@ <h2 id="toasts-events"><span class="muted">11.</span> Toast Events</h2>
})</code></pre>
</div>

<h2 id="updating-toasts"><span class="muted">12.</span> Updating Toasts</h2>
<h2 id="updating-toasts"><span class="muted">14.</span> Updating Toasts</h2>
<p>If you have a reference to a toast and want to update that, you can do so by calling the <span class="code">update</span> method on the instance.</p>

<div class="code-runner">
Expand All @@ -537,7 +557,7 @@ <h2 id="updating-toasts"><span class="muted">12.</span> Updating Toasts</h2>
</code></pre>
</div>

<h2 id="resetting-toasts"><span class="muted">13.</span> Resetting Toasts</h2>
<h2 id="resetting-toasts"><span class="muted">15.</span> Resetting Toasts</h2>
<p>If you have the reference to a specific toast, you can reset that by doing the following</p>

<div class="code-runner">
Expand Down Expand Up @@ -738,7 +758,7 @@ <h1 id="toast-generator">Customize Plugin</h1>
var code = $(this).siblings('pre').find('code').text();
code.replace("<span class='hidden'>", '');
code.replace("</span");

eval( code );
};
});
Expand Down
56 changes: 43 additions & 13 deletions demos/js/jquery.toast.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,11 @@ if ( typeof Object.create !== 'function' ) {
process: function () {
this.setup();
this.addToDom();
this.toRtl();
this.position();
this.bindToast();
this.animate();

},

setup: function () {
Expand Down Expand Up @@ -99,10 +101,15 @@ if ( typeof Object.create !== 'function' ) {
this._toastEl.addClass(this.options.class)
}
},

toRtl: function () {
if ( ( typeof this.options.isRtl === 'boolean' ) ) {
if ( this.options.isRtl === true ) {
this._container.addClass( 'is-rtl' );
}
}
},
position: function () {
if ( ( typeof this.options.position === 'string' ) && ( $.inArray( this.options.position, this._positionClasses) !== -1 ) ) {

if ( this.options.position === 'bottom-center' ) {
this._container.css({
left: ( $(window).outerWidth() / 2 ) - this._container.outerWidth()/2,
Expand Down Expand Up @@ -130,7 +137,16 @@ if ( typeof Object.create !== 'function' ) {
right : this.options.position.right ? this.options.position.right : 'auto'
});
} else {
this._container.addClass( 'bottom-left' );

if ( ( typeof this.options.isRtl === 'boolean' ) ) {

if ( this.options.isRtl === true ) {
this._container.addClass( 'bottom-right' );
}
}else{
this._container.addClass( 'bottom-left' );
}

}
},

Expand Down Expand Up @@ -166,39 +182,43 @@ if ( typeof Object.create !== 'function' ) {

if ( typeof this.options.beforeShow == 'function' ) {
this._toastEl.on('beforeShow', function () {
that.options.beforeShow();
that.options.beforeShow(that._toastEl);
});
};

if ( typeof this.options.afterShown == 'function' ) {
this._toastEl.on('afterShown', function () {
that.options.afterShown();
that.options.afterShown(that._toastEl);
});
};

if ( typeof this.options.beforeHide == 'function' ) {
this._toastEl.on('beforeHide', function () {
that.options.beforeHide();
that.options.beforeHide(that._toastEl);
});
};

if ( typeof this.options.afterHidden == 'function' ) {
this._toastEl.on('afterHidden', function () {
that.options.afterHidden();
that.options.afterHidden(that._toastEl);
});
};

if ( typeof this.options.onClick == 'function' ) {
this._toastEl.on('click', function () {
that.options.onClick(that._toastEl);
});
};
};
},

addToDom: function () {

var _container = $('.jq-toast-wrap');

_container.attr('class','jq-toast-wrap');
if ( _container.length === 0 ) {

_container = $('<div></div>',{
class: "jq-toast-wrap",
role: "alert",
"aria-live": "polite"
class: "jq-toast-wrap"
});

$('body').append( _container );
Expand Down Expand Up @@ -317,6 +337,10 @@ if ( typeof Object.create !== 'function' ) {
this.prepareOptions(options, this.options);
this.setup();
this.bindToast();
},

close: function() {
this._toastEl.find('.close-jq-toast-single').click();
}
};

Expand All @@ -332,6 +356,10 @@ if ( typeof Object.create !== 'function' ) {

update: function( options ) {
toast.update( options );
},

close: function( ) {
toast.close( );
}
}
};
Expand All @@ -348,12 +376,14 @@ if ( typeof Object.create !== 'function' ) {
position: 'bottom-left',
bgColor: false,
textColor: false,
isRtl: false,
textAlign: 'left',
icon: false,
beforeShow: function () {},
afterShown: function () {},
beforeHide: function () {},
afterHidden: function () {}
afterHidden: function () {},
onClick: function () {}
};

})( jQuery, window, document );
Loading