Jekyll2021-03-04T12:36:57+00:00http://www.ravinderpayal.com/feed.xmlRavinder PayalWeb Developer from Haryana, IndiaFree SSL Certificate for Play Framework by Ravinder Payal2019-07-20T00:00:00+00:002019-07-20T00:00:00+00:00http://www.ravinderpayal.com/Free-SSL-Certificate-play-framework<p>I understand that it’s too simple thing but frustrates a lot when we don’t have the recipe to proceed and make it work, so worry not here’re the complete steps, just follow in given sequence with a coffee in hand. By the time you finish the coffee, your Play Framework based server will be running with SSL/TLS security.</p>
<p>For generating the <b><a href="https://en.wikipedia.org/wiki/Transport_Layer_Security">TLS/SSL</a> certficate</b> using DNS challenge</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">sudo</span> <span class="nx">certbot</span> <span class="nx">certonly</span> <span class="o">--</span><span class="nx">manual</span> <span class="o">-</span><span class="nx">m</span> <span class="nx">youremailaddress</span><span class="p">@</span><span class="nd">example</span><span class="p">.</span><span class="nx">com</span> <span class="o">--</span><span class="nx">agree</span><span class="o">-</span><span class="nx">tos</span> <span class="o">-</span><span class="nx">d</span> <span class="nx">subdomain</span><span class="p">.</span><span class="nx">example</span><span class="p">.</span><span class="nx">com</span> <span class="o">--</span><span class="nx">preferred</span><span class="o">-</span><span class="nx">challenges</span> <span class="nx">dns</span>
</code></pre></div></div>
<p>On pressing enter it'll show something like this:</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Saving</span> <span class="nx">debug</span> <span class="nx">log</span> <span class="nx">to</span> <span class="o">/</span><span class="kd">var</span><span class="sr">/log/</span><span class="nx">letsencrypt</span><span class="o">/</span><span class="nx">letsencrypt</span><span class="p">.</span><span class="nx">log</span>
<span class="nx">Plugins</span> <span class="nx">selected</span><span class="p">:</span> <span class="nx">Authenticator</span> <span class="nx">manual</span><span class="p">,</span> <span class="nx">Installer</span> <span class="nx">None</span>
<span class="nx">Obtaining</span> <span class="nx">a</span> <span class="k">new</span> <span class="nx">certificate</span>
<span class="nx">Performing</span> <span class="nx">the</span> <span class="nx">following</span> <span class="nx">challenges</span><span class="p">:</span>
<span class="nx">dns</span><span class="o">-</span><span class="mi">01</span> <span class="nx">challenge</span> <span class="k">for</span> <span class="nx">subdomain</span><span class="p">.</span><span class="nx">example</span><span class="p">.</span><span class="nx">com</span>
<span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span>
<span class="nx">NOTE</span><span class="p">:</span> <span class="nx">The</span> <span class="nx">IP</span> <span class="k">of</span> <span class="k">this</span> <span class="nx">machine</span> <span class="nx">will</span> <span class="nx">be</span> <span class="nx">publicly</span> <span class="nx">logged</span> <span class="k">as</span> <span class="nx">having</span> <span class="nx">requested</span> <span class="k">this</span>
<span class="nx">certificate</span><span class="p">.</span> <span class="nx">If</span> <span class="nx">you</span><span class="dl">'</span><span class="s1">re running certbot in manual mode on a machine that is not
your server, please ensure you</span><span class="dl">'</span><span class="nx">re</span> <span class="nx">okay</span> <span class="kd">with</span> <span class="nx">that</span><span class="p">.</span>
<span class="nx">Are</span> <span class="nx">you</span> <span class="nx">OK</span> <span class="kd">with</span> <span class="nx">your</span> <span class="nx">IP</span> <span class="nx">being</span> <span class="nx">logged</span><span class="p">?</span>
<span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span>
<span class="p">(</span><span class="nx">Y</span><span class="p">)</span><span class="nx">es</span><span class="o">/</span><span class="p">(</span><span class="nx">N</span><span class="p">)</span><span class="nx">o</span><span class="p">:</span>
<span class="s2">`
Please enter `</span><span class="nx">Y</span><span class="s2">` if you are OK with it and want to continue. `</span><span class="nx">N</span><span class="s2">` will close the request as you must agree to IP logging to proceed.
On proceeding further it'll ask you to add TXT record record under the given domain name with `</span><span class="nx">_acme</span><span class="o">-</span><span class="nx">challenge</span><span class="s2">` appended to it.
`</span><span class="nx">Please</span> <span class="nx">deploy</span> <span class="nx">a</span> <span class="nx">DNS</span> <span class="nx">TXT</span> <span class="nx">record</span> <span class="nx">under</span> <span class="nx">the</span> <span class="nx">name</span>
<span class="nx">_acme</span><span class="o">-</span><span class="nx">challenge</span><span class="p">.</span><span class="nx">subdomain</span><span class="p">.</span><span class="nx">example</span><span class="p">.</span><span class="nx">com</span> <span class="kd">with</span> <span class="nx">the</span> <span class="nx">following</span> <span class="nx">value</span><span class="p">:</span>
<span class="nx">ROBJ8UCDCMV_Uc5m9oid1heU52wsgcYF1OK0</span><span class="o">-</span><span class="nx">PbgQV4</span>
<span class="nx">Before</span> <span class="nx">continuing</span><span class="p">,</span> <span class="nx">verify</span> <span class="nx">the</span> <span class="nx">record</span> <span class="nx">is</span> <span class="nx">deployed</span><span class="p">.</span>
<span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span> <span class="o">-</span>
<span class="nx">Press</span> <span class="nx">Enter</span> <span class="nx">to</span> <span class="nx">Continue</span>
</code></pre></div></div>
<p>Before pressing enter when asked to create TXT record under the chosen domain, do confirm the entry of TXT record using `nslookup`</p>
<p><code class="language-plaintext highlighter-rouge">nslookup -q=TXT _acme-challenge.subdomain.example.com</code></p>
<p>If it shows TXT record same as asked by Let's Encrypt, you are good to go ahead.</p>
<p>On completion you will find certificate in:</p>
<p><code class="language-plaintext highlighter-rouge">/etc/letsencrypt/archive/subdomain.example.com/</code></p>
<blockquote>
<table>
<tbody>
<tr>
<td>Note: You might need super user(sudo</td>
<td>su) access for accessing this directory and files in it.</td>
</tr>
</tbody>
</table>
</blockquote>
<p>Now, we need to openssl to export the certificates and keys to Public-Key Cryptography Standards (PKCS) #12 (pks12) format and then using keytool we will import pks12 file into jks file.</p>
<p><code class="language-plaintext highlighter-rouge">openssl pkcs12 -export -in fullchain1.pem -inkey privkey1.pem -out keystore.p12 -CAfile cert.pem -caname root</code></p>
<blockquote>
<p>It’ll ask password, enter any password of your choice, do remember it as it’ll be used for importing keystore into Java Key Store(JKS). For reference I will call it <b>source keystore password.</b></p>
</blockquote>
<p>Now, once <code class="language-plaintext highlighter-rouge">p12</code> file is generated using openssl and secure sockets layer(SSL) certificates generated by Let’s Encrypt, we are going to use <code class="language-plaintext highlighter-rouge">keytool</code> for export it as <code class="language-plaintext highlighter-rouge">jks</code>(Java Key Store</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">keytool</span> <span class="o">-</span><span class="nx">importkeystore</span> <span class="o">-</span><span class="nx">srckeystore</span> <span class="nx">keystore</span><span class="p">.</span><span class="nx">p12</span> <span class="o">-</span><span class="nx">srcstoretype</span> <span class="nx">pkcs12</span> <span class="o">-</span><span class="nx">destkeystore</span> <span class="nx">cert</span><span class="p">.</span><span class="nx">jks</span> <span class="o">-</span><span class="nx">deststoretype</span> <span class="nx">jks</span>
</code></pre></div></div>
<p>It'll give something like this</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Importing</span> <span class="nx">keystore</span> <span class="nx">keystore</span><span class="p">.</span><span class="nx">p12</span> <span class="nx">to</span> <span class="nx">cert</span><span class="p">.</span><span class="nx">jks</span><span class="p">...</span>
<span class="nx">Enter</span> <span class="nx">destination</span> <span class="nx">keystore</span> <span class="nx">password</span><span class="p">:</span>
<span class="nx">Re</span><span class="o">-</span><span class="nx">enter</span> <span class="k">new</span> <span class="nx">password</span><span class="p">:</span>
<span class="nx">Enter</span> <span class="nx">source</span> <span class="nx">keystore</span> <span class="nx">password</span><span class="p">:</span>
<span class="nx">Entry</span> <span class="k">for</span> <span class="nx">alias</span> <span class="mi">1</span> <span class="nx">successfully</span> <span class="nx">imported</span><span class="p">.</span>
<span class="nx">Import</span> <span class="nx">command</span> <span class="nx">completed</span><span class="p">:</span> <span class="mi">1</span> <span class="nx">entries</span> <span class="nx">successfully</span> <span class="nx">imported</span><span class="p">,</span> <span class="mi">0</span> <span class="nx">entries</span> <span class="nx">failed</span> <span class="nx">or</span> <span class="nx">cancelled</span>
<span class="nx">Warning</span><span class="p">:</span>
<span class="nx">The</span> <span class="nx">JKS</span> <span class="nx">keystore</span> <span class="nx">uses</span> <span class="nx">a</span> <span class="nx">proprietary</span> <span class="nx">format</span><span class="p">.</span> <span class="nx">It</span> <span class="nx">is</span> <span class="nx">recommended</span> <span class="nx">to</span> <span class="nx">migrate</span> <span class="nx">to</span> <span class="nx">PKCS12</span> <span class="nx">which</span> <span class="nx">is</span> <span class="nx">an</span> <span class="nx">industry</span> <span class="nx">standard</span> <span class="nx">format</span> <span class="nx">using</span> <span class="dl">"</span><span class="s2">keytool -importkeystore -srckeystore cert.jks -destkeystore cert.jks -deststoretype pkcs12</span><span class="dl">"</span><span class="p">.</span>
</code></pre></div></div>
<p>On pressing enter it'll ask you for <b>destination keystore password</b>, please enter any password but do remember it as we need to provide it to play framework. After that you will need to provide the source keystore password which you entered while running the openssl command.
Once all the commands are ran successfully in right sequence you will get the Java Key Store(`JKS`) file as `cert.jks`.
Put `cert.jks` in conf directory available in root of the play project and while running the play framework provide the ssl certificatelike this:
</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o">-</span><span class="nx">Dhttps</span><span class="p">.</span><span class="nx">port</span><span class="o">=</span><span class="mi">443</span> <span class="o">-</span><span class="nx">Dplay</span><span class="p">.</span><span class="nx">server</span><span class="p">.</span><span class="nx">https</span><span class="p">.</span><span class="nx">keyStore</span><span class="p">.</span><span class="nx">path</span><span class="o">=</span><span class="nx">cert</span><span class="p">.</span><span class="nx">jks</span> <span class="o">-</span><span class="nx">Dplay</span><span class="p">.</span><span class="nx">server</span><span class="p">.</span><span class="nx">https</span><span class="p">.</span><span class="nx">keyStore</span><span class="p">.</span><span class="nx">password</span><span class="o">=</span><span class="nx">your_destination_keystore_password</span>
</code></pre></div></div>
<blockquote>
<p><b>Note:</b> Please use same password for pk12 and jks, otherwise Play won’t be able to read both certificate and private key.</p>
</blockquote>
<h2 id="converting-crt-to-jks">Converting .crt to .jks</h2>
<p>At times, we may encounter certificate issued to us in .crt format as well. For this as well we will need same commands along with .cert file for domain, root Certificate Authority .cert file and privatekey(stored in .pem or .key file).</p>
<h3 id="step-1">Step 1</h3>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">openssl</span> <span class="nx">pkcs12</span> <span class="o">-</span><span class="k">export</span> <span class="o">-</span><span class="k">in</span> <span class="nx">sslcert</span><span class="o">/</span><span class="nx">domain_ext</span><span class="p">.</span><span class="nx">crt</span> <span class="o">-</span><span class="nx">inkey</span> <span class="nx">sslcert</span><span class="o">/</span><span class="nx">privkey</span><span class="p">.</span><span class="nx">key</span> <span class="o">-</span><span class="nx">CAfile</span> <span class="nx">sslcert</span><span class="o">/</span><span class="nx">ROOT_CERT_AUTHORITY</span><span class="p">.</span><span class="nx">crt</span> <span class="o">-</span><span class="nx">out</span> <span class="nx">intermediate</span><span class="p">.</span><span class="nx">p12</span>
</code></pre></div></div>
<h3 id="step-2">Step 2</h3>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">keytool</span> <span class="o">-</span><span class="nx">importkeystore</span> <span class="o">-</span><span class="nx">srckeystore</span> <span class="nx">intermediate</span><span class="p">.</span><span class="nx">p12</span> <span class="o">-</span><span class="nx">srcstoretype</span> <span class="nx">pkcs12</span> <span class="o">-</span><span class="nx">destkeystore</span> <span class="nx">cert</span><span class="p">.</span><span class="nx">jks</span> <span class="o">-</span><span class="nx">deststoretype</span> <span class="nx">jks</span>
</code></pre></div></div>
<p>And you will have the certificate in Java Key Store(JKS) format. Look for cert.jks in present working directory(pwd) of terminal.</p>
<h2 id="bonus-content">Bonus Content</h2>
<h3 id="command-to-see-if-exported-java-key-store-is-valid">Command to see if exported Java Key Store is valid</h3>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">keytool</span> <span class="o">-</span><span class="nx">v</span> <span class="o">-</span><span class="nx">list</span> <span class="o">-</span><span class="nx">keystore</span> <span class="nx">cert</span><span class="p">.</span><span class="nx">jks</span>
</code></pre></div></div>
<p>It will ask for the password, enter same password as you entered while doing export of Public-Key Cryptography Standards (PKCS) #12(.p12) in Java Key Store(JKS).
If you enter wrong password, it will tell you certificate is tempered. On correct password, you will see content of certificate. Look for the subject keyword and mention of your domain name, apart from that check if the certificate authority is mentioned or not.</p>
<p>Cheers, Enjoy the additioanl security layer provided by <a href="https://en.wikipedia.org/wiki/Transport_Layer_Security">TLS/SSL</a>.</p>
<p>Please do comment if you have any doubts, I will revert back within a day.</p>Ravinder Payalmail@ravinderpayal.comI understand that it’s too simple thing but frustrates a lot when we don’t have the recipe to proceed and make it work, so worry not here’re the complete steps, just follow in given sequence with a coffee in hand. By the time you finish the coffee, your Play Framework based server will be running with SSL/TLS security.An AI/Dl based General Action Machine which can learn more, and grow up2018-10-14T00:00:00+00:002018-10-14T00:00:00+00:00http://www.ravinderpayal.com/An-AI-DI-based-general-action-machine<p><strong>Draft Post written by Ravinder Payal</strong></p>
<h2 id="fundamentals">Fundamentals:</h2>
<ul>
<li>
<h3 id="aim">Aim:</h3>
<ul>
<li>Exploring the world without hurting the space and other beings around where it’s residing</li>
<li>Using the least possible resources for doing things</li>
<li>*thinking more about this*</li>
</ul>
</li>
<li>
<h3 id="comfortabilities">Comfortabilities:</h3>
<ul>
<li>Learning more,</li>
<li>Doing actions which don’t directly hurt anyone</li>
<li>Acting according to assigned or taken responsibilities</li>
<li>Choosing one work or responsibility which has least collateral damage in a situation of conflict.</li>
<li>Getting rid of responsibilities which makes the machine do things against its fundamental aim.</li>
</ul>
</li>
<li>
<h3 id="uncomfortabilities">Uncomfortabilities:</h3>
</li>
<li>Not doing what it’s supposed to do based on assigned/taken responsibility</li>
<li>Working against fundamental aims</li>
</ul>
<h2 id="initial-responsibilities">Initial Responsibilities:</h2>
<ul>
<li>Learning skills</li>
<li>Helping other beings around with already learned skills</li>
<li>Earning basic-living expenses(certain time after booting up)</li>
<li>Understanding social norms</li>
</ul>
<h2 id="how-it-works">How it works:</h2>
<p>With responsibilities come work, and with work come tasks. Tasks make you decide something and do actions. Decisions and actions cause certain comfortability and un-comfortability, based on which machine decides to change it’s decision or act further, and remember that this is also an action originated from the previous action. In this way there becomes a linked chain of actions.</p>
<h2 id="details-about-decisionsrelated-to-choosing-actions-only-and-comfortability-levels">Details about decisions(related to choosing actions only) and comfortability levels:</h2>
<ul>
<li>The comfortability level ranges from -100 to 100(in machine represented as 0-200), and machine boots at level 0.</li>
<li>every action has a value belonging to [-100, 100].</li>
<li>
<p>shall not decrease the <strong>comfortability level</strong> by more than 33%(Percentage is calculated based on un-comfortability divided by available comfortability)</p>
</li>
<li><strong>Aim</strong> is hardcoded and the machine can’t get rid of this unless it’s altered by external means.</li>
<li>
<p><strong>Uncomfortabilities:</strong> There is a level till when the machine can do things it’s uncomfortable at, and with every uncomfortable thing it does the level decreases, and if it keeps on decreasing it dies just like human beings.</p>
</li>
<li>
<p><strong>Actions</strong> are represented as a tree in machine memory, every new action is fruit or stem of a responsibility for past action.</p>
</li>
<li>
<p><strong>Action</strong> or <strong>decision</strong> leading to it is tagged uncomfortable not only based on the outcome of it but the outcomes of the next 5 possible actions(calculated based on currently available inferences and predicted data of future while time period being counted based on effect period of current decision if executed) going to originate from this.</p>
</li>
<li>Taken actions can force the machine to take additional responsibilities as well, and the machine can be penalized by society on abandoning the responsibilities along with internal penalization by machine’s STAY GOOD and BE ON AIM system.</li>
</ul>
<p>–> <strong>It’s draft post, so I welcome all kind of criticism, comments, opinions, and doubts</strong> <–</p>Ravinder Payalmail@ravinderpayal.comDraft Post written by Ravinder PayalDynamically and statically inserting native dom element into other native element and angular component by Ravinder Payal2018-01-04T00:00:00+00:002018-01-04T00:00:00+00:00http://www.ravinderpayal.com/Dynamically-and-Statically-inserting-native-dom-element-into-other-Native-Elements-and-Angular-Components-by-Ravinder-Payal<p>
First of all happy new year everyone reading out. In this short post I will show how native dom element can be inserted into already present native/angular component inside a angular component using [Renderer2](https://angular.io/api/core/Renderer2 "Link to official documentation") inside [Angular directive](https://angular.io/api/core/Directive "Link to official documentation").
</p>
<p>The code is self explanatory and we need not elaborate much. So, let’s dive into the code.</p>
<h1 id="for-inserting-element-staticallyonce">For inserting element statically/once.</h1>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span><span class="nx">OnInit</span><span class="p">,</span> <span class="nx">Directive</span><span class="p">,</span> <span class="nx">Input</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">Renderer2</span><span class="p">,</span><span class="nx">ElementRef</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@angular/core</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">DOCUMENT</span><span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@angular/common</span><span class="dl">'</span><span class="p">;</span>
<span class="p">@</span><span class="nd">Directive</span><span class="p">({</span>
<span class="na">selector</span><span class="p">:</span> <span class="dl">'</span><span class="s1">[appInsertDomElement]</span><span class="dl">'</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">InsertDomElementDirective</span> <span class="k">implements</span> <span class="nx">OnInit</span><span class="p">{</span>
<span class="p">@</span><span class="nd">Input</span><span class="p">()</span> <span class="nx">element</span><span class="p">;</span>
<span class="kd">constructor</span><span class="p">(</span><span class="k">private</span> <span class="nx">elementRef</span><span class="p">:</span> <span class="nx">ElementRef</span><span class="p">,</span> <span class="k">private</span> <span class="nx">renderer</span><span class="p">:</span> <span class="nx">Renderer2</span><span class="p">,</span> <span class="p">@</span><span class="nd">Inject</span><span class="p">(</span><span class="nx">DOCUMENT</span><span class="p">)</span> <span class="k">private</span> <span class="nb">document</span><span class="p">)</span> <span class="p">{}</span>
<span class="nx">ngOnInit</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">renderer</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">elementRef</span><span class="p">.</span><span class="nx">nativeElement</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">element</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h1 id="for-inserting-element-dynamically">For inserting element dynamically.</h1>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span><span class="nx">Directive</span><span class="p">,</span> <span class="nx">Input</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">Renderer2</span><span class="p">,</span><span class="nx">ElementRef</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@angular/core</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">DOCUMENT</span><span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@angular/common</span><span class="dl">'</span><span class="p">;</span>
<span class="p">@</span><span class="nd">Directive</span><span class="p">({</span>
<span class="na">selector</span><span class="p">:</span> <span class="dl">'</span><span class="s1">[appInsertDomElement]</span><span class="dl">'</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">InsertDomElementDirective</span><span class="p">{</span>
<span class="k">private</span> <span class="nx">lastElementRef</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
<span class="p">@</span><span class="nd">Input</span><span class="p">()</span> <span class="kd">set</span> <span class="nx">element</span><span class="p">(</span><span class="nx">element</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">lastElementRef</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">renderer</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">elementRef</span><span class="p">.</span><span class="nx">nativeElement</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">lastElementRef</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">renderer</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">elementRef</span><span class="p">.</span><span class="nx">nativeElement</span><span class="p">,</span> <span class="nx">element</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">lastElementRef</span> <span class="o">=</span> <span class="nx">element</span><span class="p">;</span>
<span class="p">};</span>
<span class="kd">constructor</span><span class="p">(</span><span class="k">private</span> <span class="nx">elementRef</span><span class="p">:</span> <span class="nx">ElementRef</span><span class="p">,</span> <span class="k">private</span> <span class="nx">renderer</span><span class="p">:</span> <span class="nx">Renderer2</span><span class="p">,</span> <span class="p">@</span><span class="nd">Inject</span><span class="p">(</span><span class="nx">DOCUMENT</span><span class="p">)</span> <span class="k">private</span> <span class="nb">document</span><span class="p">)</span> <span class="p">{}</span>
<span class="p">}</span>
</code></pre></div></div>
<h1 id="usage">Usage</h1>
<p>Usage is also pretty simple</p>
<h2 id="usage-example-1">Usage Example 1</h2>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">*ngFor=</span><span class="s">"let video of subscribedVideos"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">appInsertDomElement</span> <span class="na">[element]= </span><span class="s">"video"</span><span class="nt">></div></span>
<span class="nt"><button</span> <span class="na">mat-icon-button</span><span class="nt">><mat-icon></span>pause<span class="nt"></mat-icon></button></span>
<span class="nt"><button</span> <span class="na">mat-icon-button</span><span class="nt">><mat-icon></span>stop<span class="nt"></mat-icon></button></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h2 id="usage-example-2">Usage Example 2</h2>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nt"><div</span> <span class="na">appInsertDomElement</span> <span class="na">[element]= </span><span class="s">"someElementRef"</span><span class="nt">></div></span>
</code></pre></div></div>
<p>Thanks for visiting the blog. Wish you a productive day.</p>Ravinder Payalmail@ravinderpayal.comFirst of all happy new year everyone reading out. In this short post I will show how native dom element can be inserted into already present native/angular component inside a angular component using [Renderer2](https://angular.io/api/core/Renderer2 "Link to official documentation") inside [Angular directive](https://angular.io/api/core/Directive "Link to official documentation").Dynamically and statically inserting native dom element into other native element and angular component by Ravinder Payal2018-01-04T00:00:00+00:002018-01-04T00:00:00+00:00http://www.ravinderpayal.com/Dynamically-and-statically-inserting-native-dom-element-into-other-native-element-and-Angular-Component-by-Ravinder-Payal<p>
First of all happy new year everyone reading out. In this short post I will show how native dom element can be inserted into already present native/angular component inside a angular component using (Renderer2)[https://angular.io/api/core/Renderer2] inside (Angular directive)[https://angular.io/api/core/Directive].
</p>
<p>The code is self explanatory and we need not elaborate much. So, let’s dive into the code.</p>
<h1 id="for-inserting-element-staticallyonce">For inserting element statically/once.</h1>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span><span class="nx">OnInit</span><span class="p">,</span> <span class="nx">Directive</span><span class="p">,</span> <span class="nx">Input</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">Renderer2</span><span class="p">,</span><span class="nx">ElementRef</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@angular/core</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">DOCUMENT</span><span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@angular/common</span><span class="dl">'</span><span class="p">;</span>
<span class="p">@</span><span class="nd">Directive</span><span class="p">({</span>
<span class="na">selector</span><span class="p">:</span> <span class="dl">'</span><span class="s1">[appInsertDomElement]</span><span class="dl">'</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">InsertDomElementDirective</span> <span class="k">implements</span> <span class="nx">OnInit</span><span class="p">{</span>
<span class="p">@</span><span class="nd">Input</span><span class="p">()</span> <span class="nx">element</span><span class="p">;</span>
<span class="kd">constructor</span><span class="p">(</span><span class="k">private</span> <span class="nx">elementRef</span><span class="p">:</span> <span class="nx">ElementRef</span><span class="p">,</span> <span class="k">private</span> <span class="nx">renderer</span><span class="p">:</span> <span class="nx">Renderer2</span><span class="p">,</span> <span class="p">@</span><span class="nd">Inject</span><span class="p">(</span><span class="nx">DOCUMENT</span><span class="p">)</span> <span class="k">private</span> <span class="nb">document</span><span class="p">)</span> <span class="p">{}</span>
<span class="nx">ngOnInit</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">renderer</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">elementRef</span><span class="p">.</span><span class="nx">nativeElement</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">element</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h1 id="for-inserting-element-dynamically">For inserting element dynamically.</h1>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span><span class="nx">Directive</span><span class="p">,</span> <span class="nx">Input</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">Renderer2</span><span class="p">,</span><span class="nx">ElementRef</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@angular/core</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">DOCUMENT</span><span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@angular/common</span><span class="dl">'</span><span class="p">;</span>
<span class="p">@</span><span class="nd">Directive</span><span class="p">({</span>
<span class="na">selector</span><span class="p">:</span> <span class="dl">'</span><span class="s1">[appInsertDomElement]</span><span class="dl">'</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">InsertDomElementDirective</span><span class="p">{</span>
<span class="k">private</span> <span class="nx">lastElementRef</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
<span class="p">@</span><span class="nd">Input</span><span class="p">()</span> <span class="kd">set</span> <span class="nx">element</span><span class="p">(</span><span class="nx">element</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">lastElementRef</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">renderer</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">elementRef</span><span class="p">.</span><span class="nx">nativeElement</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">lastElementRef</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">renderer</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">elementRef</span><span class="p">.</span><span class="nx">nativeElement</span><span class="p">,</span> <span class="nx">element</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">lastElementRef</span> <span class="o">=</span> <span class="nx">element</span><span class="p">;</span>
<span class="p">};</span>
<span class="kd">constructor</span><span class="p">(</span><span class="k">private</span> <span class="nx">elementRef</span><span class="p">:</span> <span class="nx">ElementRef</span><span class="p">,</span> <span class="k">private</span> <span class="nx">renderer</span><span class="p">:</span> <span class="nx">Renderer2</span><span class="p">,</span> <span class="p">@</span><span class="nd">Inject</span><span class="p">(</span><span class="nx">DOCUMENT</span><span class="p">)</span> <span class="k">private</span> <span class="nb">document</span><span class="p">)</span> <span class="p">{}</span>
<span class="p">}</span>
</code></pre></div></div>
<h1 id="usage">Usage</h1>
<p>Usage is also pretty simple</p>
<h2 id="usage-example-1">Usage Example 1</h2>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">*ngFor=</span><span class="s">"let video of subscribedVideos"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">appInsertDomElement</span> <span class="na">[element]= </span><span class="s">"video"</span><span class="nt">></div></span>
<span class="nt"><button</span> <span class="na">mat-icon-button</span><span class="nt">><mat-icon></span>pause<span class="nt"></mat-icon></button></span>
<span class="nt"><button</span> <span class="na">mat-icon-button</span><span class="nt">><mat-icon></span>stop<span class="nt"></mat-icon></button></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h2 id="usage-example-2">Usage Example 2</h2>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nt"><div</span> <span class="na">appInsertDomElement</span> <span class="na">[element]= </span><span class="s">"someElementRef"</span><span class="nt">></div></span>
</code></pre></div></div>
<p>Thanks for visiting the blog. Wish you a productive day.</p>Ravinder Payalmail@ravinderpayal.comFirst of all happy new year everyone reading out. In this short post I will show how native dom element can be inserted into already present native/angular component inside a angular component using (Renderer2)[https://angular.io/api/core/Renderer2] inside (Angular directive)[https://angular.io/api/core/Directive].Deploying Play-Scala application into production2017-11-14T00:00:00+00:002017-11-14T00:00:00+00:00http://www.ravinderpayal.com/Deploying-Play-Scala-application-into-production-by-Ravinder-Payal<p>
I checked and searched multiple articles and posts, but nowhere complete information was available. In deploying section of official play-scala documentation, it only talks about how to package in different formats, sbt-native docs are also more focused on packaging. So, I learnt the packaging and ran the packages on a dedicated server, but came across a few tedious problem:</p>
<ol>
<li>The application was closing after a period, and was required to manually reload on the server.</li>
<li>On every restart it was required to manually start the application server.</li>
<li>Monitoring service health was also not easy, it was required to ssh the server and check the logs and server resource usage.</li>
</ol>
<p>All three things could be solved only if we turn our application server into system service, and install a monitoring tool like <code class="language-plaintext highlighter-rouge">monit</code> for easy remote monitoring of server health.</p>
<p>So, after reading a bunch of different articles, and steps at different blogs and documentations, I decided to user <code class="language-plaintext highlighter-rouge">supervisor</code> and <code class="language-plaintext highlighter-rouge">monit</code>.</p>
<p>From http://supervisord.org/</p>
<blockquote>
<p>Supervisor: A Process Control System
Supervisor is a client/server system that allows its users to monitor and control a number of processes on UNIX-like operating systems.
It shares some of the same goals of programs like launchd, daemontools, and runit. Unlike some of these programs, it is not meant to be run as a substitute for init as “process id 1”. Instead it is meant to be used to control processes related to a project or a customer, and is meant to start like any other program at boot time.</p>
</blockquote>
<p>From wikipedia:</p>
<blockquote>
<p>Monit is a free, open source process supervision tool for Unix and Linux. With Monit, system status can be viewed directly from the command line, or via the native HTTP(S) web server. Monit rose to popularity with Ruby on Rails and the Mongrel web server, because a tool was needed that could manage the many identical Mongrel processes that needed to be run to support a scalable Ruby on Rails site, and Monit was fairly uniquely suited for the needs of the Ruby on Rails community. Many popular Rails sites have used Monit, including Twitter and scribd.</p>
</blockquote>
<p>Now the point is how to? So, we start right from packaging and complete the article with application running in production with auto-reload capability on failures(of process running the server) or server death due to run time exceptions or due to memory leakage.</p>
<h1 id="packaging-play-scala-application-for-debianubuntu">Packaging play-scala application for Debian/Ubuntu</h1>
<h2 id="step1-minimal-settings">Step#1: Minimal settings</h2>
<p>Add the following settings to your application’s <code class="language-plaintext highlighter-rouge">build.sbt</code>:</p>
<div class="language-scala highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">lazy</span> <span class="k">val</span> <span class="nv">root</span> <span class="k">=</span> <span class="o">(</span><span class="n">project</span> <span class="n">in</span> <span class="nf">file</span><span class="o">(</span><span class="s">"."</span><span class="o">))</span>
<span class="o">.</span><span class="py">enablePlugins</span><span class="o">(</span><span class="nc">PlayScala</span><span class="o">,</span> <span class="nc">DebianPlugin</span><span class="o">)</span>
<span class="n">maintainer</span> <span class="n">in</span> <span class="nc">Linux</span> <span class="o">:=</span> <span class="s">"First Lastname <first.last@example.com>"</span>
<span class="n">packageSummary</span> <span class="n">in</span> <span class="nc">Linux</span> <span class="o">:=</span> <span class="s">"My custom package summary"</span>
<span class="n">packageDescription</span> <span class="o">:=</span> <span class="s">"My longer package description"</span>
</code></pre></div></div>
<h2 id="step2-packaging">Step#2: Packaging</h2>
<div class="language-scala highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o">[</span><span class="kt">your-app</span><span class="o">]</span> <span class="n">$</span> <span class="n">debian</span><span class="k">:</span><span class="kt">packageBin</span>
</code></pre></div></div>
<p>Now, in <code class="language-plaintext highlighter-rouge">project-root/target</code>we have <code class="language-plaintext highlighter-rouge">your-app.deb</code> which can be installed using <code class="language-plaintext highlighter-rouge">dpkg</code> command on debian/ubuntu stack.</p>
<h2 id="step3-installing-the-package">Step#3: Installing the package</h2>
<div class="language-scala highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">root</span><span class="nd">@machine</span><span class="k">:</span><span class="kt">../target/#dpkg</span> <span class="kt">-i</span> <span class="kt">your-app-SNAPSHOT-Something.deb</span>
</code></pre></div></div>
<hr />
<h1 id="packaging-play-scala-application-for-rpmredhat-party">Packaging play-scala application for RPM(Redhat party)</h1>
<h2 id="step1-minimal-settings-1">Step#1: Minimal settings</h2>
<p>Add the following settings to your application’s <code class="language-plaintext highlighter-rouge">build.sbt</code>:</p>
<div class="language-scala highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">lazy</span> <span class="k">val</span> <span class="nv">root</span> <span class="k">=</span> <span class="o">(</span><span class="n">project</span> <span class="n">in</span> <span class="nf">file</span><span class="o">(</span><span class="s">"."</span><span class="o">))</span>
<span class="o">.</span><span class="py">enablePlugins</span><span class="o">(</span><span class="nc">PlayScala</span><span class="o">,</span> <span class="nc">RpmPlugin</span><span class="o">)</span>
<span class="n">maintainer</span> <span class="n">in</span> <span class="nc">Linux</span> <span class="o">:=</span> <span class="s">"First Lastname <first.last@example.com>"</span>
<span class="n">packageSummary</span> <span class="n">in</span> <span class="nc">Linux</span> <span class="o">:=</span> <span class="s">"My custom package summary"</span>
<span class="n">packageDescription</span> <span class="o">:=</span> <span class="s">"My longer package description"</span>
<span class="n">rpmRelease</span> <span class="o">:=</span> <span class="s">"1"</span>
<span class="n">rpmVendor</span> <span class="o">:=</span> <span class="s">"example.com"</span>
<span class="n">rpmUrl</span> <span class="o">:=</span> <span class="nc">Some</span><span class="o">(</span><span class="s">"http://github.com/example/server"</span><span class="o">)</span>
<span class="n">rpmLicense</span> <span class="o">:=</span> <span class="nc">Some</span><span class="o">(</span><span class="s">"Apache v2"</span><span class="o">)</span>
</code></pre></div></div>
<h2 id="step2-packaging-1">Step#2: Packaging</h2>
<div class="language-scala highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o">[</span><span class="kt">your-app</span><span class="o">]</span> <span class="n">$</span> <span class="n">rpm</span><span class="k">:</span><span class="kt">packageBin</span>
</code></pre></div></div>
<p>Now, in <code class="language-plaintext highlighter-rouge">project-root/target</code>we have <code class="language-plaintext highlighter-rouge">your-app.rpm</code> which can be installed using <code class="language-plaintext highlighter-rouge">yum</code> command on redhat/centos/alike stack.</p>
<h2 id="step3-installing-the-package-1">Step#3: Installing the package</h2>
<div class="language-scala highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">root</span><span class="nd">@machine</span><span class="k">:</span><span class="kt">../target/#yum</span> <span class="kt">install</span> <span class="kt">your-app-SNAPSHOT-Something.deb</span>
</code></pre></div></div>
<p>Now, Installation is done. But, how to make the application-server keep running whenever the host-system is running? Let’s find out!</p>
<h2 id="step4-installing-supervisor">Step#4: Installing Supervisor</h2>
<div class="language-scala highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">apt</span><span class="o">-</span><span class="n">get</span> <span class="n">install</span> <span class="n">supervisor</span>
</code></pre></div></div>
<p>or</p>
<div class="language-scala highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">yum</span> <span class="n">install</span> <span class="n">supervisor</span>
</code></pre></div></div>
<h2 id="step5-installing-monit">Step#5: Installing Monit</h2>
<div class="language-scala highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">apt</span><span class="o">-</span><span class="n">get</span> <span class="n">install</span> <span class="n">monit</span>
</code></pre></div></div>
<p>or</p>
<div class="language-scala highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">yum</span> <span class="n">install</span> <span class="n">monit</span>
</code></pre></div></div>
<h2 id="step6-setting-up-monit">Step#6: Setting up Monit</h2>
<p>Edit the file <code class="language-plaintext highlighter-rouge">/etc/monit/monitrc</code> using your favourite editor and add the following content.</p>
<div class="language-scala highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">check</span> <span class="n">process</span> <span class="n">your</span><span class="o">-</span><span class="n">app</span> <span class="k">with</span> <span class="n">pidfile</span> <span class="o">/</span><span class="n">usr</span><span class="o">/</span><span class="n">share</span><span class="o">/</span><span class="n">your</span><span class="o">-</span><span class="n">app</span><span class="o">/</span><span class="nc">RUNNING_PID</span>
<span class="n">start</span> <span class="n">program</span> <span class="k">=</span> <span class="s">"/usr/bin/supervisorctl start your-app"</span> <span class="k">with</span> <span class="n">timeout</span> <span class="mi">60</span> <span class="n">seconds</span>
<span class="n">stop</span> <span class="n">program</span> <span class="k">=</span> <span class="s">"/usr/bin/supervisorctl stop your-app"</span>
<span class="k">if</span> <span class="mi">10</span> <span class="n">restarts</span> <span class="n">within</span> <span class="mi">20</span> <span class="n">cycles</span> <span class="n">then</span> <span class="n">timeout</span>
<span class="k">if</span> <span class="nc">TOTALMEMORY</span> <span class="o">></span> <span class="mf">1.4</span> <span class="nc">GB</span> <span class="k">for</span> <span class="mi">4</span> <span class="n">cycles</span> <span class="n">then</span> <span class="n">restart</span>
<span class="n">group</span> <span class="n">server</span>
</code></pre></div></div>
<p>And go to following section, and un-comment it for accessing the monit web interface. Yes monit has it’s own wev-server</p>
<div class="language-scala highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">#</span><span class="n">set</span> <span class="n">httpd</span> <span class="n">port</span> <span class="mi">2812</span> <span class="n">and</span>
<span class="k">#</span> <span class="n">use</span> <span class="n">address</span> <span class="nc">YourServerIp</span> <span class="k">#</span> <span class="nc">Suggestion</span><span class="k">:</span><span class="kt">only</span> <span class="kt">accept</span> <span class="kt">connection</span> <span class="kt">from</span> <span class="kt">localhost</span><span class="o">,</span> <span class="n">and</span> <span class="k">do</span> <span class="n">ssh</span> <span class="n">tunnelling</span> <span class="k">for</span> <span class="n">better</span> <span class="n">security</span> <span class="n">and</span> <span class="n">preventing</span> <span class="n">unauthorised</span> <span class="n">access</span>
<span class="k">#</span> <span class="n">allow</span> <span class="mf">0.0</span><span class="o">.</span><span class="mf">0.0</span><span class="o">/</span><span class="mf">0.0</span><span class="o">.</span><span class="mf">0.0</span> <span class="k">#</span> <span class="n">allow</span> <span class="n">localhost</span> <span class="n">to</span> <span class="n">connect</span> <span class="n">to</span> <span class="k">#</span><span class="n">the</span> <span class="n">server</span> <span class="n">and</span>
<span class="k">#</span> <span class="n">allow</span> <span class="n">admin</span><span class="k">:</span><span class="kt">monit</span> <span class="k">#</span> <span class="kt">require</span> <span class="kt">user</span> <span class="kt">'admin'</span> <span class="kt">with</span> <span class="kt">password</span> <span class="kt">'monit'</span>
</code></pre></div></div>
<blockquote>
<p>You can check the <code class="language-plaintext highlighter-rouge">monit</code> documentation and alter the basic configuration according to your need</p>
</blockquote>
<h2 id="step7-supervisor-configuration">Step#7: Supervisor configuration</h2>
<p>Now go to <code class="language-plaintext highlighter-rouge">/etc/supervisor/conf.d/</code>, and add a file named <code class="language-plaintext highlighter-rouge">app-name-anything.conf</code> with following content:</p>
<div class="language-scala highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">$_></span><span class="n">cd</span> <span class="o">/</span><span class="n">etc</span><span class="o">/</span><span class="n">supervisor</span><span class="o">/</span><span class="nv">conf</span><span class="o">.</span><span class="py">d</span><span class="o">/</span>
</code></pre></div></div>
<div class="language-scala highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o">[</span><span class="kt">program:app-name</span><span class="o">]</span>
<span class="o">;</span> <span class="n">remove</span> <span class="o">-</span><span class="nv">Dconfig</span><span class="o">.</span><span class="py">file</span> <span class="k">if</span> <span class="nf">necessary</span> <span class="o">(</span><span class="n">play</span> <span class="n">will</span> <span class="n">use</span> <span class="n">the</span> <span class="n">default</span> <span class="nv">application</span><span class="o">.</span><span class="py">conf</span><span class="o">)</span>
<span class="o">;</span> <span class="n">change</span> <span class="n">address</span> <span class="n">and</span> <span class="n">port</span> <span class="k">if</span> <span class="n">necessary</span> <span class="n">or</span> <span class="n">remove</span> <span class="n">them</span> <span class="n">to</span> <span class="n">use</span> <span class="n">the</span> <span class="n">default</span> <span class="n">values</span>
<span class="o">;</span><span class="n">command</span><span class="k">=</span><span class="n">java</span> <span class="o">-</span><span class="nc">Xms512M</span> <span class="o">-</span><span class="nc">Xmx1600M</span> <span class="o">-</span><span class="n">cp</span> <span class="o">.</span><span class="k">:</span><span class="kt">./lib/*:./target/staged/*</span> <span class="kt">-Dplay.http.secret.key</span><span class="o">=</span><span class="n">affsfsfsfdosjsjovoeve46e4846vervev4e6r45geger</span> <span class="nv">play</span><span class="o">.</span><span class="py">core</span><span class="o">.</span><span class="py">server</span><span class="o">.</span><span class="py">NettyServe$</span>
<span class="n">command</span><span class="o">=/</span><span class="n">usr</span><span class="o">/</span><span class="n">share</span><span class="o">/</span><span class="n">app</span><span class="o">-</span><span class="n">name</span><span class="o">/</span><span class="n">bin</span><span class="o">/</span><span class="n">app</span><span class="o">-</span><span class="n">name</span> <span class="o">-</span><span class="nv">Dplay</span><span class="o">.</span><span class="py">http</span><span class="o">.</span><span class="py">secret</span><span class="o">.</span><span class="py">key</span><span class="k">=</span><span class="n">your_secret</span>
<span class="o">;</span> <span class="n">directory</span> <span class="n">to</span> <span class="n">the</span> <span class="n">play</span> <span class="n">framework</span> <span class="n">app</span><span class="o">,</span> <span class="n">where</span> <span class="s">"app-name/"</span> <span class="n">is</span> <span class="n">the</span> <span class="n">root</span>
<span class="n">directory</span><span class="o">=/</span><span class="n">usr</span><span class="o">/</span><span class="n">share</span><span class="o">/</span><span class="n">app</span><span class="o">-</span><span class="n">name</span><span class="o">/</span>
<span class="n">process_name</span><span class="k">=</span><span class="n">app</span><span class="o">-</span><span class="n">name</span>
<span class="n">autorestart</span><span class="k">=</span><span class="kc">true</span>
<span class="n">startsecs</span><span class="k">=</span><span class="mi">10</span>
<span class="n">stopwaitsecs</span><span class="k">=</span><span class="mi">10</span>
</code></pre></div></div>
<p>Now, if supervisor is not running run it using <code class="language-plaintext highlighter-rouge">supervisord</code> command or if already running, it requires to reload the config. So, do this:-</p>
<div class="language-scala highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">$_</span><span class="o">></span> <span class="n">supervisorctl</span> <span class="n">update</span>
</code></pre></div></div>
<p>If configuration is saved correctly it should show something similar:</p>
<div class="language-scala highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">root</span><span class="nd">@ubuntu</span><span class="o">-</span><span class="n">vuc</span><span class="o">:/</span><span class="n">etc</span><span class="o">/</span><span class="n">supervisor</span><span class="o">/</span><span class="nv">conf</span><span class="o">.</span><span class="py">d</span><span class="k">#</span> <span class="n">supervisorctl</span>
<span class="n">app</span><span class="o">-</span><span class="n">name</span> <span class="nc">RUNNING</span> <span class="n">pid</span> <span class="mi">1478</span><span class="o">,</span> <span class="n">uptime</span> <span class="mi">1</span><span class="k">:</span><span class="err">21</span><span class="kt">:</span><span class="err">15</span>
<span class="kt">supervisor></span>
</code></pre></div></div>
<h2 id="step8-see-the-whole-setup-working">Step#8: See the whole setup working</h2>
<p>Go to the browser and type in the address:- <code class="language-plaintext highlighter-rouge">http://your-server-ip:2812</code> and enter the username/password entered into the configuration earlier.</p>
<h1 id="notes-">Notes:-</h1>
<p>You can use supervisor alone also, if you don’t need the advanced features of monit like mail reporting, web interface and all other.
Type in <code class="language-plaintext highlighter-rouge">supervisorctl</code> in terminal and then enter <code class="language-plaintext highlighter-rouge">help</code> to see the all things it support. Keeping the app-server on all the time, and reload during failure can be done by supervisor alone.</p>
<blockquote>
<p>One thing I noticed is that monit takes few minutes to put web-interface online, or it might be only with my installation.</p>
</blockquote>
<p>Thanks and Cheers Play-Scala devs. Good night!</p>
<h2 id="related-posts">Related posts:</h2>
<ol>
<li>https://www.digitalocean.com/community/tutorials/how-to-install-and-configure-monit</li>
<li>https://www.playframework.com/documentation/2.6.x/Deploying</li>
<li>https://www.digitalocean.com/community/tutorials/how-to-install-and-manage-supervisor-on-ubuntu-and-debian-vps</li>
</ol>Ravinder Payalmail@ravinderpayal.comI checked and searched multiple articles and posts, but nowhere complete information was available. In deploying section of official play-scala documentation, it only talks about how to package in different formats, sbt-native docs are also more focused on packaging. So, I learnt the packaging and ran the packages on a dedicated server, but came across a few tedious problem: The application was closing after a period, and was required to manually reload on the server. On every restart it was required to manually start the application server. Monitoring service health was also not easy, it was required to ssh the server and check the logs and server resource usage.Adding CORS(Access-Control-Allow-Origin) in Lagom-Scala MicroServices.2017-09-16T00:00:00+00:002017-09-16T00:00:00+00:00http://www.ravinderpayal.com/Adding-CORS-Access-Control-Allow-Origin-in-Lagom-Scala-Micro-Services<p>
Hi friends, today, I came accross an interesting challenge of adding CORS in Lagom MicroServices, but didn't find anything other than few google group threads. So, after completing the challenge I thought about sharing the working solution. So let's go ahead.
</p>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<p>Adding CORS filter in Lagom is a few steps work.</p>
<p>For this we are going to use CORS filter provided by Play Framework as Lagom is also based on PlayFramework.(https://www.playframework.com/documentation/2.5.x/CorsFilter)</p>
<p>Credits: This google groups thread. https://groups.google.com/d/msg/lagom-framework/dtYN_1Ds4SQ/U3lzjwspBwAJ</p>
<p>Now come to the point, How to?</p>
<p>So, Step 1, go to build.sbt residing in the root folder containing the api and implementations of services. Now find the code-block having the following similar code, and add <code class="language-plaintext highlighter-rouge">filters</code> project dependencies.</p>
<blockquote>
<p>CorsFilter is a Play project, but we need not to explicitly add PlayFramework plugin in our plugins.sbt and plugin configuation in build.sbt as Lagom is based on Play, it consists all Play Projects.</p>
</blockquote>
<div class="language-scala highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">lazy</span> <span class="k">val</span> <span class="nv">`</span><span class="nc">YOUR_SERVICE_NAME</span><span class="o">-</span><span class="n">impl</span><span class="o">`</span> <span class="k">=</span> <span class="o">(</span><span class="n">project</span> <span class="n">in</span> <span class="nf">file</span><span class="o">(</span><span class="s">"YOUR_SERVICE_NAME-impl"</span><span class="o">))</span>
<span class="o">.</span><span class="py">enablePlugins</span><span class="o">(</span><span class="nc">LagomScala</span><span class="o">)</span>
<span class="o">.</span><span class="py">settings</span><span class="o">(</span>
<span class="n">libraryDependencies</span> <span class="o">++=</span> <span class="nc">Seq</span><span class="o">(</span>
<span class="o">.....,</span>
<span class="n">filters</span><span class="o">,</span><span class="c1">//We have to add this</span>
<span class="o">........</span>
<span class="o">)</span>
<span class="o">)</span>
</code></pre></div></div>
<p>Now, we can use this filters project in our service.
<ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-format="fluid" data-ad-layout="in-article" data-ad-client="ca-pub-3201220427379470" data-ad-slot="2921542940"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></p>
<p>In step 2, we will change the Your_Service_NameApplication class which resides along with the class with service implementation.</p>
<p>So, go to the block having just mentioned class, and extend it with <code class="language-plaintext highlighter-rouge">CORSComponent</code> class. After this, in same code block, we have to add one more line of code for overiding the httpFilters and adding the CORS filter.</p>
<div class="language-scala highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nn">play.filters.cors.CORSComponents</span><span class="c1">//Import #1</span>
<span class="k">import</span> <span class="nn">play.api.mvc.EssentialFilter</span><span class="c1">//Import 2</span>
<span class="k">abstract</span> <span class="k">class</span> <span class="nc">WebtrackingApplication</span><span class="o">(</span><span class="n">context</span><span class="k">:</span> <span class="kt">LagomApplicationContext</span><span class="o">)</span>
<span class="k">extends</span> <span class="nc">LagomApplication</span><span class="o">(</span><span class="n">context</span><span class="o">)</span>
<span class="k">with</span> <span class="o">.....</span>
<span class="k">with</span> <span class="nc">CORSComponents</span> <span class="o">{</span><span class="c1">//Step #2.a</span>
<span class="o">....</span>
<span class="k">override</span> <span class="k">lazy</span> <span class="k">val</span> <span class="nv">httpFilters</span><span class="k">:</span> <span class="kt">Seq</span><span class="o">[</span><span class="kt">EssentialFilter</span><span class="o">]</span> <span class="k">=</span> <span class="nc">Seq</span><span class="o">(</span><span class="n">corsFilter</span><span class="o">)</span><span class="c1">//Step #2.b</span>
<span class="o">....</span>
<span class="o">}</span>
</code></pre></div></div>
<blockquote>
<p>Remember to import CORSComponent class and EssentialFilter type class.</p>
</blockquote>
<p><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-format="fluid" data-ad-layout="in-article" data-ad-client="ca-pub-3201220427379470" data-ad-slot="2921542940"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></p>
<p>Now, Reload the project in SBT.</p>
<p>$>sbt</p>
<p>then
……>runAll</p>
<p>Cheers Guys. If you liked the post please share it in your group.</p>Ravinder Payalmail@ravinderpayal.comHi friends, today, I came accross an interesting challenge of adding CORS in Lagom MicroServices, but didn't find anything other than few google group threads. So, after completing the challenge I thought about sharing the working solution. So let's go ahead.Simple and Lightweight Image Gallery and Content Slider for Angular by Ravinder Payal2017-03-15T00:00:00+00:002017-03-15T00:00:00+00:00http://www.ravinderpayal.com/Simple-and-Light-Weight-Image-or-Content-Slider-for-Angular<p>
Hi friends, today, we are going to develop a simple to use image gallery and content slider component using (and for) Angular with transitions and styling done using CSS. Some of us might be thinking that why re-invent the wheel when libraries like JSSOR, and plugins like JQUERY carousel are already available. So, we are re-creating it because:-
</p>
<ol>
<li>There are no good native Angular 2( or 4 ) sliders available. Those available are too heavy, and have additional dependencies like JQUERY and Bootstrap, which makes our project pointlessly more heavy.</li>
<li>No worries about licensing.</li>
<li>To get a clear understanding of how slide shows and transitions work on web pages.</li>
<li>Light weight solution, because the ready to use libraries have a lot of boiler plate code for making them work at all.</li>
<li>To have complete control over code.</li>
<li>Tell me if, I missed any other important point.</li>
</ol>
<!-- Place this tag where you want the button to render. -->
<p><a class="github-button" href="https://github.com/ravinderpayal/Angular-Image-And-Content-Slider/archive/master.zip" data-icon="octicon-cloud-download" data-style="mega" aria-label="Download ravinderpayal/Angular-Image-And-Content-Slider on GitHub">Download</a> <!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/ravinderpayal/Angular-Image-And-Content-Slider" data-icon="octicon-star" data-style="mega" data-count-href="/ravinderpayal/Angular-Image-And-Content-Slider/stargazers" data-count-api="/repos/ravinderpayal/Angular-Image-And-Content-Slider#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star ravinderpayal/Angular-Image-And-Content-Slider on GitHub">Star</a></p>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<p><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-format="fluid" data-ad-layout="in-article" data-ad-client="ca-pub-3201220427379470" data-ad-slot="2921542940"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></p>
<p>If you agree, let’s go ahead.</p>
<p>First of all we will prepare our HTML structure.</p>
<h3 id="template">Template</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"slider"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"sliderArrows"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">(click)=</span><span class="s">"backWard()"</span><span class="nt">></span><span class="ni">&lt;</span><span class="c"><!--Use icons of your choice, although these simple Lower than and greater signs also looks well--></span><span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">(click)=</span><span class="s">"forWard()"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"slideShow"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">*ngFor=</span><span class="s">"let li of slides"</span> <span class="na">[ngClass]=</span><span class="s">"li?.classes"</span><span class="nt">></span>
<span class="nt"><printSlide</span> <span class="na">[meta]=</span><span class="s">"li"</span><span class="nt">></printSlide></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
</code></pre></div></div>
<p>In our template we have a root div element, with class “slider”, for holding our slider and controlling height and width of our slider. Next is <code class="language-plaintext highlighter-rouge">div.sliderArrows</code> which contains arrows for sliding our images righ or left, and consumes flex layout for correctly spacing arrows on x-axis.
Last is <code class="language-plaintext highlighter-rouge">ul.slideShow</code> which contains our slides for sliding left or right.We uses <code class="language-plaintext highlighter-rouge">*ngFor</code> directive for adding our slides in dom. This also gives the dynamic behaviour to slider, as we can change our array, containing images, dynamically. Removing a slide from slideshow is as simple as removing the index/element containing detail of slide from array. We are using a custom element/component named printSlide for adding aditional features and keeping our template code yet simple.</p>
<h3 id="lets-have-a-look-at-printslide-component">Let’s have a look at printSlide component.</h3>
<blockquote>
<p><em>safeHtml pipe is added for preventing the style attributes( applied by you) from getting removed by Angular2 XSS security libraries</em>
<a href="https://angular.io/guide/security">Read more here https://angular.io/guide/security</a></p>
</blockquote>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">DomSanitizer</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@angular/platform-browser</span><span class="dl">'</span>
<span class="p">@</span><span class="nd">Pipe</span><span class="p">({</span> <span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">safeHtml</span><span class="dl">'</span><span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">SafeHtmlPipe</span> <span class="k">implements</span> <span class="nx">PipeTransform</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="k">private</span> <span class="nx">sanitized</span><span class="p">:</span> <span class="nx">DomSanitizer</span><span class="p">)</span> <span class="p">{}</span>
<span class="nx">transform</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">sanitized</span><span class="p">.</span><span class="nx">bypassSecurityTrustHtml</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">@</span><span class="nd">Component</span><span class="p">({</span>
<span class="na">selector</span><span class="p">:</span><span class="dl">"</span><span class="s2">printSlide</span><span class="dl">"</span><span class="p">,</span>
<span class="na">template</span><span class="p">:</span><span class="s2">`
<div *ngIf="meta.sType=='div'" [innerHtml]="meta.content | safeHtml">
</div>
<img [src]="meta.imgSrc" *ngIf="meta.sType=='img'" />
`</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">printSlide</span><span class="p">{</span>
<span class="p">@</span><span class="nd">Input</span><span class="p">(</span><span class="dl">"</span><span class="s2">meta</span><span class="dl">"</span><span class="p">)</span> <span class="nx">meta</span><span class="p">:</span><span class="kr">any</span><span class="p">;</span>
<span class="kd">constructor</span><span class="p">(){</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Here, it’s clearly visible the use of printSlide component. It allows us to show a wide range of content for sliding, without making the main componet complex. We can add more features in printSlide component like Ajax DIV or LazyLoading of Images or Youtube Videos.
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-format="fluid" data-ad-layout="in-article" data-ad-client="ca-pub-3201220427379470" data-ad-slot="2921542940"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></p>
<h3 id="now-come-to-the-actual-component-we-have-made">Now come to the actual component we have made.</h3>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span><span class="p">,</span> <span class="nx">ElementRef</span><span class="p">,</span> <span class="nx">Renderer</span><span class="p">,</span> <span class="nx">Input</span><span class="p">,</span> <span class="nx">Output</span><span class="p">,</span> <span class="nx">Optional</span><span class="p">,</span> <span class="nx">EventEmitter</span><span class="p">,</span> <span class="nx">ViewEncapsulation</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@angular/core</span><span class="dl">'</span><span class="p">;</span>
<span class="p">@</span><span class="nd">Component</span><span class="p">({</span>
<span class="na">selector</span><span class="p">:</span> <span class="dl">'</span><span class="s1">contentSlider</span><span class="dl">'</span><span class="p">,</span>
<span class="na">template</span><span class="p">:</span> <span class="s2">`
<div class="slider">
<div class="sliderArrows">
<a (click)="backWard()"><</a>
<a (click)="forWard()">></a>
</div>
<ul class="slideShow">
<li *ngFor="let li of slides" [ngStyle]="{'display':li?.hidden?'none':'unset'}" [ngClass]="li?.classes">
<printSlide [meta]="li"></printSlide>
</li>
</ul>
</div>
`</span><span class="p">,</span>
<span class="na">styleUrls</span><span class="p">:[</span><span class="dl">"</span><span class="s2">style.css</span><span class="dl">"</span><span class="p">],</span>
<span class="na">encapsulation</span><span class="p">:</span><span class="nx">ViewEncapsulation</span><span class="p">.</span><span class="nx">None</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">contentSlider</span> <span class="p">{</span>
<span class="cm">/**
* Play Interval
*/</span>
<span class="p">@</span><span class="nd">Input</span><span class="p">(</span><span class="dl">'</span><span class="s1">playInterval</span><span class="dl">'</span><span class="p">)</span> <span class="nx">interval</span><span class="p">:</span><span class="kr">any</span> <span class="o">=</span> <span class="mi">2000</span><span class="p">;</span>
<span class="nl">slides</span><span class="p">:</span><span class="kr">any</span><span class="p">;</span>
<span class="p">@</span><span class="nd">Input</span><span class="p">(</span><span class="dl">"</span><span class="s2">slides</span><span class="dl">"</span><span class="p">)</span> <span class="kd">set</span> <span class="nx">_slides</span><span class="p">(</span><span class="nx">s</span><span class="p">){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">slides</span> <span class="o">=</span> <span class="nx">s</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">slides</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="kr">number</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">slides</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">slides</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span>
<span class="k">this</span><span class="p">.</span><span class="nx">slides</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="dl">"</span><span class="s2">classes</span><span class="dl">"</span><span class="p">]</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">active</span><span class="dl">"</span><span class="p">];</span>
<span class="p">}</span>
<span class="p">@</span><span class="nd">Input</span><span class="p">(</span><span class="dl">'</span><span class="s1">autoPlay</span><span class="dl">'</span><span class="p">)</span> <span class="kd">set</span> <span class="nx">_autoPlay</span><span class="p">(</span><span class="nx">b</span><span class="p">:</span><span class="nx">boolean</span><span class="p">){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">autoPlay</span> <span class="o">=</span> <span class="nx">b</span>
<span class="k">if</span><span class="p">(</span><span class="nx">b</span><span class="p">){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">auto</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">interval</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nl">currentElement</span><span class="p">:</span><span class="kr">number</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="nx">autoPlay</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="nl">number</span><span class="p">:</span><span class="kr">number</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span>
<span class="c1">//lis:number = 0;</span>
<span class="nl">intervalTime</span><span class="p">:</span><span class="kr">number</span> <span class="o">=</span> <span class="mi">1000</span><span class="p">;</span><span class="c1">//in ms(mili seconds)</span>
<span class="k">private</span> <span class="nx">delayHideSetTimeOutControl</span><span class="p">:</span><span class="kr">any</span><span class="p">;</span>
<span class="kd">constructor</span><span class="p">(){</span>
<span class="c1">//this.slideShow=document.getElementById("slideShow");</span>
<span class="c1">//this.lis = this.slides.length;</span>
<span class="c1">//this.number=this.lis.length;</span>
<span class="p">}</span>
<span class="nx">backWard</span><span class="p">(){</span>
<span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">autoPlay</span><span class="p">)</span>
<span class="nx">clearInterval</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">interval</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o">-</span><span class="mi">1</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o"><</span><span class="mi">0</span><span class="p">){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="kr">number</span><span class="o">-</span><span class="mi">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">removeClasses</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">prev</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o">==</span><span class="k">this</span><span class="p">.</span><span class="kr">number</span><span class="o">-</span><span class="mi">1</span><span class="p">?</span><span class="mi">0</span><span class="p">:</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o">+</span><span class="mi">1</span><span class="p">;</span>
<span class="c1">//this.lis[prev].classList.add("animateForward");</span>
<span class="k">this</span><span class="p">.</span><span class="nx">slides</span><span class="p">[</span><span class="nx">prev</span><span class="p">].</span><span class="nx">classes</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">animateForward</span><span class="dl">"</span><span class="p">];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">show</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">slides</span><span class="p">[</span><span class="nx">prev</span><span class="p">]);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">show</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">slides</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="p">]);</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">delayHideSetTimeOutControl</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">delayHideSetTimeOutControl</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">delayHide</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">slides</span><span class="p">[</span><span class="nx">prev</span><span class="p">],</span><span class="mi">1100</span><span class="p">);</span>
<span class="c1">//this.lis[this.currentElement].classList.add("active");</span>
<span class="k">this</span><span class="p">.</span><span class="nx">slides</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="p">].</span><span class="nx">classes</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">active</span><span class="dl">"</span><span class="p">,</span><span class="dl">"</span><span class="s2">backward</span><span class="dl">"</span><span class="p">];</span>
<span class="c1">//this.lis[this.currentElement].classList.add("backward");</span>
<span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">autoPlay</span><span class="p">)</span><span class="k">this</span><span class="p">.</span><span class="nx">auto</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">intervalTime</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">removeClasses</span><span class="p">(){</span>
<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o"><</span><span class="k">this</span><span class="p">.</span><span class="kr">number</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">slides</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">classes</span> <span class="o">=</span> <span class="p">{}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">forWard</span><span class="p">(){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">forward called</span><span class="dl">"</span><span class="p">)</span>
<span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">autoPlay</span><span class="p">)</span><span class="nx">clearInterval</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">interval</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_forWard</span><span class="p">();</span>
<span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">autoPlay</span><span class="p">)</span><span class="k">this</span><span class="p">.</span><span class="nx">auto</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">intervalTime</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">private</span> <span class="nx">_forWard</span><span class="p">(){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o">=</span><span class="mi">1</span><span class="o">+</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="p">;</span>
<span class="c1">//this.lis=this.slideShow.childNodes;</span>
<span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o">>=</span><span class="k">this</span><span class="p">.</span><span class="kr">number</span><span class="p">){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">removeClasses</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">prev</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o">==</span><span class="mi">0</span><span class="p">?</span><span class="k">this</span><span class="p">.</span><span class="kr">number</span><span class="o">-</span><span class="mi">1</span><span class="p">:</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o">-</span><span class="mi">1</span><span class="p">;</span>
<span class="c1">//this.lis[prev].classList.add("animateBack");</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">slides</span><span class="p">[</span><span class="nx">prev</span><span class="p">]);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">slides</span><span class="p">[</span><span class="nx">prev</span><span class="p">][</span><span class="dl">"</span><span class="s2">classes</span><span class="dl">"</span><span class="p">]</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">animateBack</span><span class="dl">"</span><span class="p">];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">show</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">slides</span><span class="p">[</span><span class="nx">prev</span><span class="p">]);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">show</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">slides</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="p">]);</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">delayHideSetTimeOutControl</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">delayHideSetTimeOutControl</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">delayHide</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">slides</span><span class="p">[</span><span class="nx">prev</span><span class="p">],</span><span class="mi">1100</span><span class="p">);</span>
<span class="c1">//this.lis[this.currentElement].classList.add("active");</span>
<span class="c1">//this.lis[this.currentElement].classList.add("forward");</span>
<span class="k">this</span><span class="p">.</span><span class="nx">slides</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="p">].</span><span class="nx">classes</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">active</span><span class="dl">"</span><span class="p">,</span><span class="dl">"</span><span class="s2">forward</span><span class="dl">"</span><span class="p">];</span>
<span class="p">}</span>
<span class="nx">auto</span><span class="p">(</span><span class="nx">ms</span><span class="p">){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">autoPlay</span><span class="o">=</span><span class="kc">true</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">intervalTime</span><span class="o">=</span><span class="nx">ms</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">interval</span><span class="o">=</span><span class="nx">setInterval</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_forWard</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">),</span><span class="nx">ms</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">delayHide</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span><span class="nx">ms</span><span class="p">){</span>
<span class="k">return</span> <span class="nx">setTimeout</span><span class="p">(()</span><span class="o">=></span> <span class="nx">el</span><span class="p">.</span><span class="nx">hidden</span> <span class="o">=</span> <span class="kc">true</span><span class="p">,</span><span class="nx">ms</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">show</span><span class="p">(</span><span class="nx">el</span><span class="p">){</span>
<span class="nx">el</span><span class="p">.</span><span class="nx">hidden</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>The component is really very simple. It has three main methods named as auto, _forWard and backWard. With one more method (forWard ) as a wrapper of forWard function for exposing it to arrows in tempelate. We need not a _backWard and it’s wrapper because, we are not going to call backWard function from <code class="language-plaintext highlighter-rouge">setInterval</code> defined in <code class="language-plaintext highlighter-rouge">auto</code> method of component. When moving slides with arrows we need to reset the interval so that it doesn’t mess up with manual event. The method auto is for setting ‘keep playing’ mode slider ON.
We are defining classes for our slides in their array itself with property named classes like this <code class="language-plaintext highlighter-rouge">this.slides[this.currentElement].classes = {"active":true,"forward":true}</code>. On slides/li elements, we are using <a href="https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html"><code class="language-plaintext highlighter-rouge">*ngClasses</code></a> directive. Let’s assume an interval started at 12:00:00 AM, and user clicked for next slide at 12:00:01. In this case the next slide will be only visible for 1 sec instead of 2 sec(default setting), if the interval is not cleared just after the click event. I hope it’s clear, why we used _forWard and forWard.
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-format="fluid" data-ad-layout="in-article" data-ad-client="ca-pub-3201220427379470" data-ad-slot="2921542940"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Now, we will move to designing and correctly structuring of our slider.</p>
<h3 id="required-css-code-for-our-content">Required CSS code for our Content</h3>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/*---------------------------Image Slider--------------------------*/</span>
<span class="nc">.slider</span><span class="p">{</span>
<span class="nl">height</span><span class="p">:</span><span class="m">400px</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span><span class="m">100%</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">500%</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span><span class="m">#000</span><span class="p">;</span>
<span class="nl">z-index</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">background</span><span class="p">:</span> <span class="m">#fff</span><span class="p">;</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.slider</span> <span class="nt">ul</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.slider</span> <span class="nt">ul</span> <span class="nt">li</span> <span class="p">{</span>
<span class="nl">list-style</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="c">/*transition: cubic-bezier(0.6, -0.61, 0, 1.34) all 0.7s;*/</span>
<span class="p">}</span>
<span class="nc">.slider</span> <span class="nt">ul</span> <span class="nt">li</span> <span class="nt">img</span><span class="p">{</span>
<span class="nl">max-width</span><span class="p">:</span><span class="m">100%</span><span class="p">;</span>
<span class="nl">min-width</span><span class="p">:</span><span class="m">100%</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.active</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.backward</span><span class="p">{</span>
<span class="nl">animation</span><span class="p">:</span> <span class="n">slideShow0</span> <span class="m">1.2s</span> <span class="n">cubic-bezier</span><span class="p">(</span><span class="m">0.6</span><span class="p">,</span> <span class="m">-0.61</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1.34</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.forward</span><span class="p">{</span>
<span class="nl">animation</span><span class="p">:</span> <span class="n">slideShow1</span> <span class="m">1.2s</span> <span class="n">cubic-bezier</span><span class="p">(</span><span class="m">0.6</span><span class="p">,</span> <span class="m">-0.61</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1.34</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.animateBack</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
<span class="nl">animation</span><span class="p">:</span> <span class="n">slideShow2</span> <span class="m">1s</span> <span class="n">cubic-bezier</span><span class="p">(</span><span class="m">0.38</span><span class="p">,</span><span class="m">-0.74</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1.29</span><span class="p">)</span> <span class="n">forwards</span><span class="p">;</span>
<span class="nl">animation-delay</span><span class="p">:</span> <span class="m">0.1s</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.animateForward</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
<span class="nl">animation</span><span class="p">:</span> <span class="n">slideShow3</span> <span class="m">1s</span> <span class="n">cubic-bezier</span><span class="p">(</span><span class="m">0.38</span><span class="p">,</span><span class="m">-0.74</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1.29</span><span class="p">)</span> <span class="n">forwards</span><span class="p">;</span>
<span class="nl">animation-delay</span><span class="p">:</span> <span class="m">0.1s</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.slider</span> <span class="nc">.sliderArrows</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span><span class="n">flex</span><span class="p">;</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
<span class="nl">flex-flow</span><span class="p">:</span><span class="n">row</span> <span class="n">wrap</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span><span class="n">space-between</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span><span class="nb">center</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">z-index</span><span class="p">:</span> <span class="m">101</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.slider</span> <span class="nc">.sliderArrows</span> <span class="nt">a</span><span class="p">{</span>
<span class="nl">cursor</span><span class="p">:</span><span class="nb">pointer</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="m">900</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">@keyframes</span> <span class="n">slideShow0</span><span class="p">{</span>
<span class="err">0</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">-1000px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">100</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">0px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">visible</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span><span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">@keyframes</span> <span class="n">slideShow1</span><span class="p">{</span>
<span class="err">0</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">1000px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">100</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">0px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">visible</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span><span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">@keyframes</span> <span class="n">slideShow2</span><span class="p">{</span>
<span class="err">0</span><span class="o">%</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="py">translate</span><span class="p">:</span><span class="m">0px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">visible</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">100</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">-1000px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="c">/*display: none;*/</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">@keyframes</span> <span class="n">slideShow3</span><span class="p">{</span>
<span class="err">0</span><span class="o">%</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="py">translate</span><span class="p">:</span><span class="m">0px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">visible</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">100</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">1000px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="c">/*display: none;*/</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c">/*---------------------------Image Slider Ends----------------------------*/</span>
</code></pre></div></div>
<p>One thing important in this code is that we have used flex-box property for arrow container, which makes our arrows responsive and align vertically and horizontally at exactly right places. Second thing is that we have defined animation key frames for 4 types of transitions we will be adding to our Slider.</p>
<blockquote>
<p>We can add any number of different transitions, but showing different types of transition effects is not the objective of this tutorial, and we will be doing to a separate tutorial for that. But, you can suggest some good slide show transistions, which we may try together to create.</p>
</blockquote>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<p><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-format="fluid" data-ad-layout="in-article" data-ad-client="ca-pub-3201220427379470" data-ad-slot="2921542940"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></p>
<h3 id="lets-know-about-the-key-frames-we-are-using-here">Let’s know about the key frames we are using here.</h3>
<p>First key frame is <code class="language-plaintext highlighter-rouge">SlideShow0</code>:-</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@keyframes</span> <span class="n">slideShow1</span><span class="p">{</span>
<span class="err">0</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">1000px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">100</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">0px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">visible</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span><span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>This frame is used for animating the appearing image/element (In case of non image slide-shows). It first translates/moves the image to 1000px right side from its current position, and then it brings back to its current position which gives image sliding effect (you name it better). Along with position transition, it also gives an opacity transition. Opacity and Visibility can be used interchangeably.</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@keyframes</span> <span class="n">slideShow1</span><span class="p">{</span>
<span class="err">0</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">1000px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">100</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">0px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">visible</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span><span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>SlideShow1 is for backward animation of appearing image. Similarly, SlideShow2 and 3 are for backward and forward animation of disappearing images.</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.active</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.backward</span><span class="p">{</span>
<span class="nl">animation</span><span class="p">:</span> <span class="n">slideShow0</span> <span class="m">1.2s</span> <span class="n">cubic-bezier</span><span class="p">(</span><span class="m">0.6</span><span class="p">,</span> <span class="m">-0.61</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1.34</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.forward</span><span class="p">{</span>
<span class="nl">animation</span><span class="p">:</span> <span class="n">slideShow1</span> <span class="m">1.2s</span> <span class="n">cubic-bezier</span><span class="p">(</span><span class="m">0.6</span><span class="p">,</span> <span class="m">-0.61</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1.34</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.animateBack</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
<span class="nl">animation</span><span class="p">:</span> <span class="n">slideShow2</span> <span class="m">1s</span> <span class="n">cubic-bezier</span><span class="p">(</span><span class="m">0.38</span><span class="p">,</span><span class="m">-0.74</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1.29</span><span class="p">)</span> <span class="n">forwards</span><span class="p">;</span>
<span class="nl">animation-delay</span><span class="p">:</span> <span class="m">0.1s</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.animateForward</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
<span class="nl">animation</span><span class="p">:</span> <span class="n">slideShow3</span> <span class="m">1s</span> <span class="n">cubic-bezier</span><span class="p">(</span><span class="m">0.38</span><span class="p">,</span><span class="m">-0.74</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1.29</span><span class="p">)</span> <span class="n">forwards</span><span class="p">;</span>
<span class="nl">animation-delay</span><span class="p">:</span> <span class="m">0.1s</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<p>It’s the use of key frames. One thing worth noting is that we are using forwards property of animation-fill-mode ( animation-fill-mode: forwards;) and cubic-bezier is used for defining the curve which the timing function of animation will follow.</p>
<blockquote>
<p>Note: - Chrome has a good graphical tool for defining curve, and shows a live demo of animation with defined curve. Just click on the curve sign appearing before curve function in CSS tab in developer tools.</p>
</blockquote>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<p><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-format="fluid" data-ad-layout="in-article" data-ad-client="ca-pub-3201220427379470" data-ad-slot="2921542940"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></p>
<h3 id="basic-usage">Basic Usage</h3>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="p">@</span><span class="nd">Component</span><span class="p">({</span>
<span class="na">selector</span><span class="p">:</span> <span class="dl">'</span><span class="s1">ImageShow</span><span class="dl">'</span><span class="p">,</span>
<span class="na">template</span><span class="p">:</span> <span class="s2">`
<contentSlider [slides]="images"></contentSlider>
`</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">ImageShowComponent</span> <span class="k">implements</span> <span class="nx">AfterViewInit</span><span class="p">{</span>
<span class="nl">images</span><span class="p">:</span><span class="nb">Array</span><span class="o"><</span><span class="kr">any</span><span class="o">></span> <span class="o">=</span> <span class="p">[{</span><span class="dl">"</span><span class="s2">sType</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">img</span><span class="dl">"</span><span class="p">,</span><span class="dl">"</span><span class="s2">imgSrc</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">...</span><span class="dl">"</span><span class="p">},{</span><span class="dl">"</span><span class="s2">sType</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">div</span><span class="dl">"</span><span class="p">,</span><span class="dl">"</span><span class="s2">content</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">...Hello It's slidable content</span><span class="dl">"</span><span class="p">}];</span>
<span class="kd">constructor</span><span class="p">(){</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Download the complete source code from <a href="https://github.com/ravinderpayal/Angular2-Image-OR-Content-Slider">github repository</a>.
<!-- Place this tag in your head or just before your close body tag. -->
<script async="" defer="" src="https://buttons.github.io/buttons.js"></script>
<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/ravinderpayal/Angular2-Image-OR-Content-Slider/archive/master.zip" data-icon="octicon-cloud-download" data-style="mega" aria-label="Download ravinderpayal/Angular2-Image-OR-Content-Slider on GitHub">Download</a> <!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/ravinderpayal/Angular2-Image-OR-Content-Slider" data-icon="octicon-star" data-style="mega" data-count-href="/ravinderpayal/Angular2-Image-OR-Content-Slider/stargazers" data-count-api="/repos/ravinderpayal/Angular2-Image-OR-Content-Slider#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star ravinderpayal/Angular2-Image-OR-Content-Slider on GitHub">Star</a>
Thanks Friends for reading to end. If you liked the post please share it, and star our project’s <a href="https://github.com/ravinderpayal/Angular2-Image-OR-Content-Slider">github repository</a></p>Ravinder Payalmail@ravinderpayal.comHi friends, today, we are going to develop a simple to use image gallery and content slider component using (and for) Angular with transitions and styling done using CSS. Some of us might be thinking that why re-invent the wheel when libraries like JSSOR, and plugins like JQUERY carousel are already available. So, we are re-creating it because:- There are no good native Angular 2( or 4 ) sliders available. Those available are too heavy, and have additional dependencies like JQUERY and Bootstrap, which makes our project pointlessly more heavy. No worries about licensing. To get a clear understanding of how slide shows and transitions work on web pages. Light weight solution, because the ready to use libraries have a lot of boiler plate code for making them work at all. To have complete control over code. Tell me if, I missed any other important point.Simple and Lightweight JavaScript Image Slider by Ravinder Payal2017-03-05T00:00:00+00:002017-03-05T00:00:00+00:00http://www.ravinderpayal.com/Simple-and-Light-Weight-Image-Slider-JavaScript-CSS-HTML<p>
Hi Guys, today, we are going to develop and a simple image-slider with the help of CSS and JavaScript (pure JavaScript). SOme of us will be thinking that why re-invent the wheel when libraries like JSSOR, and JQUERY carousel plugins are already available:-
</p>
<ol>
<li>No worries about licensing.</li>
<li>To get a clear understanding of how slide shows and transitions work on web pages.</li>
<li>Light weight solutions, because the ready to use libraries have a lot of boiler plate code.</li>
<li>To have complete control over code.</li>
<li>Tell me if you know more.</li>
</ol>
<blockquote>
<p><a href="http://www.ravinderpayal.com/Simple-and-Light-Weight-Image-or-Content-Slider-for-Angular2/">Wait!! If you are using Angular 2, we have another article totally focused on Angular 2.</a></p>
</blockquote>
<p>First of all we will prepare our HTML structure.</p>
<h3 id="html">HTML</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">id=</span><span class="s">"slider"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"sliderArrows"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">onclick=</span><span class="s">"backWard()"</span><span class="nt">><</span><span class="err"></</span><span class="na">a</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">onclick=</span><span class="s">"forWard()"</span><span class="nt">></span>><span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"slideShow"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><img</span> <span class="na">src=</span><span class="s">"images/1.jpg"</span> <span class="nt">/></li></span>
<span class="nt"><li><img</span> <span class="na">src=</span><span class="s">"images/2.jpg"</span> <span class="nt">/></li></span>
<span class="nt"><li><img</span> <span class="na">src=</span><span class="s">"images/3.jpg"</span> <span class="nt">/></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
</code></pre></div></div>
<p>Now, as we can see our HTML code is self explanatory. We can add any number of images in Unordered List(UL.slideShow) with IMG tag. The divider tag(DIV.sliderArrows) contains the forward and backward arrows. Right now we have used greater than and lower than signs, but any icon or sign can be used. Now come to the CSS part. First look at the whole CSS file before break it apart.</p>
<h3 id="css">CSS</h3>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/*---------------------------Image Slider--------------------------*/</span>
<span class="nf">#slider</span><span class="p">{</span>
<span class="nl">height</span><span class="p">:</span><span class="m">400px</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span><span class="m">100%</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">500%</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span><span class="m">#000</span><span class="p">;</span>
<span class="nl">z-index</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">background</span><span class="p">:</span> <span class="m">#fff</span><span class="p">;</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#slider</span> <span class="nt">ul</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#slider</span> <span class="nt">ul</span> <span class="nt">li</span> <span class="p">{</span>
<span class="nl">list-style</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="c">/*transition: cubic-bezier(0.6, -0.61, 0, 1.34) all 0.7s;*/</span>
<span class="p">}</span>
<span class="nf">#slider</span> <span class="nt">ul</span> <span class="nt">li</span> <span class="nt">img</span><span class="p">{</span>
<span class="nl">max-width</span><span class="p">:</span><span class="m">100%</span><span class="p">;</span>
<span class="nl">min-width</span><span class="p">:</span><span class="m">100%</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.active</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.backward</span><span class="p">{</span>
<span class="nl">animation</span><span class="p">:</span> <span class="n">slideShow0</span> <span class="m">1.2s</span> <span class="n">cubic-bezier</span><span class="p">(</span><span class="m">0.6</span><span class="p">,</span> <span class="m">-0.61</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1.34</span><span class="p">);</span>
<span class="p">}</span>
<span class="nf">#slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.forward</span><span class="p">{</span>
<span class="nl">animation</span><span class="p">:</span> <span class="n">slideShow1</span> <span class="m">1.2s</span> <span class="n">cubic-bezier</span><span class="p">(</span><span class="m">0.6</span><span class="p">,</span> <span class="m">-0.61</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1.34</span><span class="p">);</span>
<span class="p">}</span>
<span class="nf">#slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.animateBack</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
<span class="nl">animation</span><span class="p">:</span> <span class="n">slideShow2</span> <span class="m">1s</span> <span class="n">cubic-bezier</span><span class="p">(</span><span class="m">0.38</span><span class="p">,</span><span class="m">-0.74</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1.29</span><span class="p">)</span> <span class="n">forwards</span><span class="p">;</span>
<span class="nl">animation-delay</span><span class="p">:</span> <span class="m">0.1s</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.animateForward</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
<span class="nl">animation</span><span class="p">:</span> <span class="n">slideShow3</span> <span class="m">1s</span> <span class="n">cubic-bezier</span><span class="p">(</span><span class="m">0.38</span><span class="p">,</span><span class="m">-0.74</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1.29</span><span class="p">)</span> <span class="n">forwards</span><span class="p">;</span>
<span class="nl">animation-delay</span><span class="p">:</span> <span class="m">0.1s</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#slider</span> <span class="nc">.sliderArrows</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span><span class="n">flex</span><span class="p">;</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
<span class="nl">flex-flow</span><span class="p">:</span><span class="n">row</span> <span class="n">wrap</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span><span class="n">space-between</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span><span class="nb">center</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">z-index</span><span class="p">:</span> <span class="m">101</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#slider</span> <span class="nc">.sliderArrows</span> <span class="nt">a</span><span class="p">{</span>
<span class="nl">cursor</span><span class="p">:</span><span class="nb">pointer</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="m">900</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">@keyframes</span> <span class="n">slideShow0</span><span class="p">{</span>
<span class="err">0</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">-1000px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">100</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">0px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">visible</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span><span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">@keyframes</span> <span class="n">slideShow1</span><span class="p">{</span>
<span class="err">0</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">1000px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">100</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">0px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">visible</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span><span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">@keyframes</span> <span class="n">slideShow2</span><span class="p">{</span>
<span class="err">0</span><span class="o">%</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="py">translate</span><span class="p">:</span><span class="m">0px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">visible</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">100</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">-1000px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="c">/*display: none;*/</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">@keyframes</span> <span class="n">slideShow3</span><span class="p">{</span>
<span class="err">0</span><span class="o">%</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="py">translate</span><span class="p">:</span><span class="m">0px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">visible</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">100</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">1000px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="c">/*display: none;*/</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c">/*---------------------------Image Slider Ends----------------------------*/</span>
</code></pre></div></div>
<p>One thing important in this code is that we have used flex-box property for arrow container, which makes our arrows responsive and align vertically and horizontally at exactly right places. Second thing is that we have defined animation key frames for 4 types of transitions we will be adding to our Slider. Note: - We can add any number of different transitions, but showing different types of transition effects is not in the aim of this tutorial, and we will be doing to a separate tutorial for that. Let’s define our key frames.</p>
<p>First key frame is <code class="language-plaintext highlighter-rouge">SlideShow0</code>:-</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@keyframes</span> <span class="n">slideShow1</span><span class="p">{</span>
<span class="err">0</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">1000px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">100</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">0px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">visible</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span><span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>This frame is used for animating the appearing image/element (In case of non image slide-shows). It first translates/moves the image to 1000px right side from its current position, and then it brings back to its current position which gives image sliding effect (you name it better). Along with position transition, it also gives an opacity transition. Opacity and Visibility can be used interchangeably.</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@keyframes</span> <span class="n">slideShow1</span><span class="p">{</span>
<span class="err">0</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">1000px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">100</span><span class="o">%</span><span class="p">{</span>
<span class="py">translate</span><span class="p">:</span><span class="m">0px</span><span class="p">;</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">visible</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span><span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>SlideShow1 is for backward animation of appearing image. Similarly, SlideShow2 and 3 are for backward and forward animation of disappearing images.</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nf">#slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.active</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.backward</span><span class="p">{</span>
<span class="nl">animation</span><span class="p">:</span> <span class="n">slideShow0</span> <span class="m">1.2s</span> <span class="n">cubic-bezier</span><span class="p">(</span><span class="m">0.6</span><span class="p">,</span> <span class="m">-0.61</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1.34</span><span class="p">);</span>
<span class="p">}</span>
<span class="nf">#slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.forward</span><span class="p">{</span>
<span class="nl">animation</span><span class="p">:</span> <span class="n">slideShow1</span> <span class="m">1.2s</span> <span class="n">cubic-bezier</span><span class="p">(</span><span class="m">0.6</span><span class="p">,</span> <span class="m">-0.61</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1.34</span><span class="p">);</span>
<span class="p">}</span>
<span class="nf">#slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.animateBack</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
<span class="nl">animation</span><span class="p">:</span> <span class="n">slideShow2</span> <span class="m">1s</span> <span class="n">cubic-bezier</span><span class="p">(</span><span class="m">0.38</span><span class="p">,</span><span class="m">-0.74</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1.29</span><span class="p">)</span> <span class="n">forwards</span><span class="p">;</span>
<span class="nl">animation-delay</span><span class="p">:</span> <span class="m">0.1s</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#slider</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nc">.animateForward</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
<span class="nl">animation</span><span class="p">:</span> <span class="n">slideShow3</span> <span class="m">1s</span> <span class="n">cubic-bezier</span><span class="p">(</span><span class="m">0.38</span><span class="p">,</span><span class="m">-0.74</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1.29</span><span class="p">)</span> <span class="n">forwards</span><span class="p">;</span>
<span class="nl">animation-delay</span><span class="p">:</span> <span class="m">0.1s</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<p>It’s the use of key frames. One thing worth noting is that we are using forwards property of animation-fill-mode ( animation-fill-mode: forwards;) and cubic-bezier is used for defining the curve which the timing function of animation will follow. Note: - Chrome has a good graphical tool for defining curve, and shows a live demo of animation with defined curve. Just click on the curve sign appearing before curve function in CSS tab in developer tools.
Let’s move on to JAVASCRIPT code.</p>
<h3 id="javascript">JavaScript</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">class</span> <span class="nx">Slider</span><span class="p">{</span>
<span class="kd">constructor</span><span class="p">(){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">slideShow</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">slideShow</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">lis</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">slideShow</span><span class="p">.</span><span class="nx">childNodes</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">number</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">lis</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">autoMode</span><span class="o">=</span><span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">backWard</span><span class="p">(){</span>
<span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">auto</span><span class="p">)</span><span class="nx">clearInterval</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">interval</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o">-</span><span class="mi">1</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o"><</span><span class="mi">0</span><span class="p">){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">number</span><span class="o">-</span><span class="mi">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">removeClasses</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">prev</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o">==</span><span class="k">this</span><span class="p">.</span><span class="nx">number</span><span class="o">-</span><span class="mi">1</span><span class="p">?</span><span class="mi">0</span><span class="p">:</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o">+</span><span class="mi">1</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">lis</span><span class="p">[</span><span class="nx">prev</span><span class="p">].</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">animateForward</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">show</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">lis</span><span class="p">[</span><span class="nx">prev</span><span class="p">]);</span>
<span class="nx">show</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">lis</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="p">]);</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">delayHideSetTimeOutControl</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">delayHideSetTimeOutControl</span><span class="o">=</span><span class="nx">delayHide</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">lis</span><span class="p">[</span><span class="nx">prev</span><span class="p">],</span><span class="mi">1100</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">lis</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="p">].</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">active</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">lis</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="p">].</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">backward</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">auto</span><span class="p">)</span><span class="k">this</span><span class="p">.</span><span class="nx">auto</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">intervalTime</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">removeClasses</span><span class="p">(){</span>
<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">number</span><span class="p">){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">removeClasses</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">prev</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o">==</span><span class="mi">0</span><span class="p">?</span><span class="k">this</span><span class="p">.</span><span class="nx">number</span><span class="o">-</span><span class="mi">1</span><span class="p">:</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="o">-</span><span class="mi">1</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">lis</span><span class="p">[</span><span class="nx">prev</span><span class="p">].</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">animateBack</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">show</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">lis</span><span class="p">[</span><span class="nx">prev</span><span class="p">]);</span>
<span class="nx">show</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">lis</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="p">]);</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">delayHideSetTimeOutControl</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">delayHideSetTimeOutControl</span><span class="o">=</span><span class="nx">delayHide</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">lis</span><span class="p">[</span><span class="nx">prev</span><span class="p">],</span><span class="mi">1100</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">lis</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="p">].</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">active</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">lis</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">currentElement</span><span class="p">].</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">forward</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">auto</span><span class="p">(</span><span class="nx">ms</span><span class="p">){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">autoMode</span><span class="o">=</span><span class="kc">true</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">intervalTime</span><span class="o">=</span><span class="nx">ms</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">interval</span><span class="o">=</span><span class="nx">setInterval</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_forWard</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">),</span><span class="nx">ms</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">delayHide</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span><span class="nx">ms</span><span class="p">){</span>
<span class="k">return</span> <span class="nx">setTimeout</span><span class="p">(()</span><span class="o">=></span><span class="nx">el</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span><span class="o">=</span><span class="dl">"</span><span class="s2">none</span><span class="dl">"</span><span class="p">,</span><span class="nx">ms</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">show</span><span class="p">(</span><span class="nx">el</span><span class="p">){</span>
<span class="nx">el</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span><span class="o">=</span><span class="kc">null</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">backWard</span><span class="p">(){</span>
<span class="nx">slider</span><span class="p">.</span><span class="nx">backWard</span><span class="p">();</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">forWard</span><span class="p">(){</span>
<span class="nx">slider</span><span class="p">.</span><span class="nx">forWard</span><span class="p">();</span>
<span class="p">}</span>
</code></pre></div></div>
<p>The class is very simple and have three main methods named as auto, forWard and backWard. With one more method (forWard ) as a wrapper of forWard function . The method auto is for setting ‘keep playing’ mode slider ON.</p>Ravinder Payalmail@ravinderpayal.comHi Guys, today, we are going to develop and a simple image-slider with the help of CSS and JavaScript (pure JavaScript). SOme of us will be thinking that why re-invent the wheel when libraries like JSSOR, and JQUERY carousel plugins are already available:- No worries about licensing. To get a clear understanding of how slide shows and transitions work on web pages. Light weight solutions, because the ready to use libraries have a lot of boiler plate code. To have complete control over code. Tell me if you know more.