CODEWITHSUNDEEP
javascriptrtlcss
Dot Freelancer
Dot Freelancer

Reputation: 4253

can't convert css to rtl using javascript library

I am beginner in JavaScript and I am trying to use [rtlcss library][1] to convert css files from ltr to rtl. I am using this code but it displays 2 errors:

Uncaught SyntaxError: Illegal return statement
Uncaught ReferenceError: require is not defined

My code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>convert css to rtl</title>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="js/rtlcss/src/rtlcss.js"></script>
</head>
<body>
    <textarea id="source_textarea" placeholder="place your css" ></textarea>
    <button id="convert_btn">Convert</button>
    <textarea id="result_textarea"></textarea>
    <script>
        (function myfunction() {
            rtlcss = require('rtlcss');
            var output = rtlcss.process('css/main.css');
            console.log(output);
            $("#result_textarea").val(output);
        })();
    </script>
</body>
</html>

I believe i am doing something wrong, it's not library problem.. so anyone can help? [1]: https://github.com/MohammadYounes/rtlcss

Upvotes: 2

Views: 653

Answers (2)

nzn
nzn

Reputation: 1081

You can get the author's own browser-ready library here.

Just download it and then include it with a script tag:

<script src="rtlcss/bundle.js"></script>

and you will have a global variable rtlcss with which you can do:

console.log(rtlcss.process('.mystyle{direction:ltr}'));
(output:)
'.mystyle{direction:rtl}'

Upvotes: 0

MK.
MK.

Reputation: 5149

This is a node package, as @haakym mentioned, you should be using NPM (node package manager). For more details on how to install and use NPM, follow the Getting Started guide.

If you want to use it in the browser, you can use Browserify; it lets you require('modules') in the browser by bundling up all of your dependencies.

After you have node/npm setup complete, do the following:

  • From the command line, run these commands to install RTLCSS and Browserify

    npm install rtlcss
npm install -g browserify

  • Create a file with the following contents and save it as main.js :

    rtlcss = require('rtlcss');

  • Run this command to create a browser usable bundle:

    browserify main.js -o bundle.js

  • Include the resulting script in your page:

    <script src="bundle.js"></script>

That's all, Now you'll be able to use it in the browser:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>convert css to rtl</title>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="bundle.js"></script>   
</head>
<body>
    <textarea id="source_textarea" placeholder="place your css" ></textarea>
    <button id="convert_btn">Convert</button>
    <textarea id="result_textarea"></textarea>
    <script>
    $('button').click(function(){
      var output = rtlcss.process($('#source_textarea').val());
      $("#result_textarea").val(output);
    });
    </script>
</body>
</html>

Online Demo

Upvotes: 1

Related Questions