A JavaScript library that adds support for typing Unicode Nepali(नेपाली) input on HTML and . (both in romanized and traditional layout)</p> </div> </div> </div> </div> <div class="py-3 border-bottom border-light-dark"> <div class="container"> <ul class="d-flex list-unstyled p-0 position-relative mb-0 mx-n2"> <li class="px-2"> <a class="fw-bold text-primary" href="https://www.opensourceagenda.com/projects/nepalify">Overview</a> </li> <li class="px-2"> <a class="fw-bold text-black" href="https://www.opensourceagenda.com/projects/nepalify/versions">Versions</a> </li> <li class="px-2"> <a class="fw-bold text-black" href="https://www.opensourceagenda.com/projects/nepalify/reviews">Reviews</a> </li> <li class="px-2"> <a class="fw-bold text-black" href="https://www.opensourceagenda.com/projects/nepalify/resources">Resources</a> </li> </ul> </div> </div> <div class="container my-5"> <div class="row g-4"> <div class="col-12 col-lg-8 order-2 order-lg-1"> <div> <div class="px-2 mb-3 bg-primary text-white d-inline-block position-relative">Project README</div> <div id="readme" class="section-l" data-base="https://github.com/suvash/nepalify/blob/main/" class="readme mb-4"> <div> <h1>Nepalify</h1> <p><a href="https://github.com/suvash/nepalify/actions/workflows/run-tests.yml"><img src="https://github.com/suvash/nepalify/actions/workflows/.github/workflows/run-tests.yml/badge.svg" alt="Build Status"></a></p> <p>A JavaScript library that adds support for typing Unicode Nepali(नेपाली) input on HTML <code><input></code> and <code><textarea></code> (using both traditional and romanized layouts).</p> <a href="#supported-browsers"></a><h2 id="supported-browsers">Supported Browsers</h2> <p>This library has been tested to work most modern browsers, the oldest ones being Internet Explorer 9, 10 and 11. If you are running an even older browser, you might want to look into the <a href="#legacy-version">legacy version</a>.</p> <a href="#live-demo-playground"></a><h2 id="live-demo-playground">Live Demo / Playground</h2> <p>Official Demo : <a href="https://www.thapaliya.com/en/writings/practice-romanized-nepali-unicode-in-your-browser/">https://www.thapaliya.com/en/writings/practice-romanized-nepali-unicode-in-your-browser/</a></p> <a href="#more-examples"></a><h3 id="more-examples">More Examples</h3> <p>If you've used Nepalify in a project and would like to include it in this list, feel free to reach out or open an issue.</p> <ul> <li> <a href="https://enrollment.donidcr.gov.np/PreEnrollment/">NID Pre-Enrollment System, Government of Nepal</a>: On the NID New Enrollment Form</li> <li> <a href="http://samajik.glitch.me/">Samajik/सामाजिक</a>: View the source at <a href="https://glitch.com/edit/#!/samajik">https://glitch.com/edit/#!/samajik</a> </li> </ul> <a href="#installation"></a><h2 id="installation">Installation</h2> <p>Nepalify is available in CommonJS2, ES6 as well as UMD formats for all different needs.<br> It can be consumed directly via Unpkg CDN into your pages, or installed via NPM to include in your application bundle.</p> <a href="#unpkg-cdn-installation"></a><h3 id="unpkg-cdn-installation">Unpkg CDN installation</h3> <p>Via <a href="https://unpkg.com/">Unpkg</a>, you can directly use the bare url for the latest version.</p> <pre><code class="language-html"><script src="https://unpkg.com/nepalify" /> </code></pre> <p>Or, include the full fixed url.</p> <pre><code class="language-html"><script src="https://unpkg.com/nepalify@0.5.0/umd/nepalify.production.min.js" /> </code></pre> <p>Also, add an input/textarea element with a unique id, if you want to follow along.</p> <pre><code class="language-html"><input id="unique-input" /> <textarea id="unique-textarea"></textarea> </code></pre> <p>Optionally the following attributes can be used on the elements above.</p> <pre><code class="language-html">autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" </code></pre> <a href="#via-npm"></a><h3 id="via-npm">Via NPM</h3> <p>The library is available on NPM as <code>nepalify</code>.</p> <pre><code class="language-bash">npm install nepalify </code></pre> <p>Afterwards, you can use CommonJS imports</p> <pre><code class="language-javascript">const nepalify = require('nepalify'); </code></pre> <p>Or, you can use ES6 imports</p> <pre><code class="language-javascript">import nepalify from "nepalify"; </code></pre> <a href="#documentation"></a><h2 id="documentation">Documentation</h2> <p>The default exports from the library consists of a handful of functions, as explained below.</p> <a href="#availablelayouts"></a><h3 id="availablelayouts">availableLayouts()</h3> <p>This method returns all available layouts, currently <code>romanized</code> and <code>traditional</code>. These layout names can be provided as options to other functions.</p> <pre><code class="language-javascript">console.log(nepalify.availableLayouts()); // ["romanized", "traditional"] </code></pre> <a href="#interceptelementbyidunique-id"></a><h3 id="interceptelementbyidunique-id">interceptElementByID("unique-id")</h3> <p>This method allows the library code to intercept the keypress events on <code><input></code> and <code><textarea></code> html elements, given an <code>id</code> selector. This can only be used in a browser.</p> <p>The argument to this function is the same as you'd provide to the standard <code>getElementById</code></p> <pre><code class="language-javascript">var inputEl = nepalify.interceptElementById("unique-input-1"); var textareaEl = nepalify.interceptElementById("unique-textarea-1"); // Further options can be provided as a second argument const options = { layout: "traditional", enable: false, }; nepalify.interceptElementById("unique-input-2", options); // When the options are not provided, the following defaults are used const defaultOptions = { layout: "romanized", enable: true, }; </code></pre> <p>At this point, the library should already be intercepting the keypresses. Go ahead and give it a try.</p> <p>The object returned by the function above has more methods that can be used to control the interception.</p> <a href="#isenabled"></a><h4 id="isenabled">isEnabled()</h4> <p>Returns a boolean value indicating whether the interception is turned on or not.</p> <a href="#enable"></a><h4 id="enable">enable()</h4> <p>Enable the interception on the element. Already done by default.</p> <a href="#disable"></a><h4 id="disable">disable()</h4> <p>Disable the interception on the element. Useful for clean up or building toggle behaviour.</p> <a href="#formatsome-ascii-text"></a><h3 id="formatsome-ascii-text">format("some-ascii-text")</h3> <p>This method allows you to format the text to Unicode nepali. Also usable in Node or any other non-browser javascript code.</p> <pre><code class="language-javascript">var text = "kiMkr/tv/ybimuX/"; console.log(nepalify.format(text)); // किंकर्तव्यबिमुढ् // Further options can be provided as a second argument var text = "asdfghjkl"; const options = { layout: "traditional", }; console.log(nepalify.format(text, options)); // बकमानजवपि // When the options are not provided, the following defaults are used const defaultOptions = { layout: "romanized", }; </code></pre> <a href="#development"></a><h2 id="development">Development</h2> <p>While the library is intended to run in the browser, you'll need to have <code>node</code> (and <code>npm</code>) installed locally for development.</p> <p>Most of the npm targets are explained in the <code>package.json</code> file itself. The following flow is preferred for contribution.</p> <ul> <li> <code>npm install</code> for installing all the dependencies.</li> <li> <code>npm run test</code> for running the test suite.</li> <li> <code>npm run dev</code> to run a local server, serves an html page with the library injected for manual testing.</li> <li> <code>npm run format</code> to format all the changes before making a PR.</li> </ul> <a href="#changelog"></a><h2 id="changelog">Changelog</h2> <p>Please check the <a href="https://github.com/suvash/nepalify/blob/main/CHANGELOG.md">CHANGELOG.md</a> for details.</p> <a href="#contributors"></a><h2 id="contributors">Contributors</h2> <p>Please check the <a href="https://github.com/suvash/nepalify/graphs/contributors">contribution graph</a> graph for now.</p> <a href="#legacy-version"></a><h2 id="legacy-version">Legacy version</h2> <p>The legacy version of this package supported ancient browsers such as IE6, used jQuery as a dependency and relied on a bunch of hacks. It's still preserved on the <a href="https://github.com/suvash/nepalify/tree/legacy-jquery">legacy-jquery branch</a></p> <a href="#license"></a><h2 id="license">License</h2> <p>Copyright © 2020, Suvash Thapaliya</p> <p>Distributed under the <a href="https://github.com/suvash/nepalify/blob/main/LICENSE">ISC License</a>.</p> </div> </div> <div class="text-xs">Open Source Agenda is not affiliated with "Nepalify" Project. README Source: <a href="https://github.com/suvash/nepalify" target="_blank">suvash/nepalify</a></div> </div> </div> <div class="col-12 col-lg-4 order-1 order-lg-2"> <div> <div class="d-flex justify-content-center mb-5"> </div> <div class="mb-3"> <div class="row pb-3"> <div class="col-6"> <span class="fw-bold">Stars</span> </div> <div class="col-6 text-end"> <span class="fw-bold">45</span> </div> </div> <div class="row pb-3"> <div class="col-6"> <span class="fw-bold">Open Issues</span> </div> <div class="col-6 text-end"> <span class="fw-bold">4</span> </div> </div> <div class="row pb-3"> <div class="col-6"> <span class="fw-bold">Last Commit</span> </div> <div class="col-6 text-end"> <span class="fw-bold">4 months ago</span> </div> </div> <div class="row pb-3"> <div class="col-12"> <span class="fw-bold">Repository</span> </div> <div class="col-12"> <a href="https://github.com/suvash/nepalify" target="_blank" class="fw-bold text-primary">suvash/nepalify</a> </div> </div> <div class="row pb-3"> <div class="col-6"> <span class="fw-bold">License</span> </div> <div class="col-6 text-end"> <a href="https://www.opensourceagenda.com/tags/isc" class="font-bold text-primary">ISC</a> </div> </div> <div class="row pb-3"> <div class="col-12"> <span class="fw-bold">Tags</span> </div> <div class="col-12"> <a href="https://www.opensourceagenda.com/tags/browser" class="fw-bold text-primary me-3">Browser</a> <a href="https://www.opensourceagenda.com/tags/html" class="fw-bold text-primary me-3">HTML</a> <a href="https://www.opensourceagenda.com/tags/input" class="fw-bold text-primary me-3">Input</a> <a href="https://www.opensourceagenda.com/tags/javascript" class="fw-bold text-primary me-3">JavaScript</a> <a href="https://www.opensourceagenda.com/tags/javascript-library" class="fw-bold text-primary me-3">Javascript Library</a> <a href="https://www.opensourceagenda.com/tags/nepali" class="fw-bold text-primary me-3">Nepali</a> <a href="https://www.opensourceagenda.com/tags/romanized" class="fw-bold text-primary me-3">Romanized</a> <a href="https://www.opensourceagenda.com/tags/textarea" class="fw-bold text-primary me-3">Textarea</a> <a href="https://www.opensourceagenda.com/tags/traditional" class="fw-bold text-primary me-3">Traditional</a> <a href="https://www.opensourceagenda.com/tags/unicode" class="fw-bold text-primary me-3">Unicode</a> <a href="https://www.opensourceagenda.com/tags/unicode-nepali" class="fw-bold text-primary me-3">Unicode Nepali</a> </div> </div> </div> <div class="mb-4"> <div class="card bg-light p-3"> <h4>Open Source Agenda Badge</h4> <div class="mb-3"> <img src="https://www.opensourceagenda.com/projects/nepalify/reviews/badge.svg" alt="Open Source Agenda Rating" /> </div> <div> <textarea class="w-100 p-2 border-white bg-light text-dark" readonly style="height:115px;word-break:break-all;"><a href="https://www.opensourceagenda.com/projects/nepalify"><img src="https://www.opensourceagenda.com/projects/nepalify/reviews/badge.svg" alt="Open Source Agenda"></a>
