Skip to content

Latest commit

 

History

History
148 lines (95 loc) · 4.58 KB

README.md

File metadata and controls

148 lines (95 loc) · 4.58 KB
Raw

Please Send Me Your Feedback parsa32569@gmail.com . thanks a lot

What is this

this is a lorem generator for designers . this library can generate lorem for two languages : Persian and English :D

What is new ?

1.5.8 : Enhance Generators Move (with mouse)

1.5.0 : some changes in code

1.4.4 : added CDN

1.4.2 : highlight text when you are moving that Generator.

Installation

npm i EzLorem

CDN

https://cdn.jsdelivr.net/npm/ezlorem/lib/lorem.min.js

https://cdn.jsdelivr.net/npm/ezlorem/css/ezlorem-Regulators.css

How to use

first we need to add lorem.js file to our document

<scritp src="lorem.js"></script>
<script>
    ElSelect('p').AddLorem({
        options ...
    });
</script>

For select an element for add lorem we have to use ElSelect() method to select object.

Many ways to use of ElSelect() :

var el = document.querySelectorAll('p.text'); //or querySelector or get...

ElSelect(el).AddLorem({
	options ...
});

ElSelect('p').AddLorem({
	options ...
});

After select the element you can add your lorem text with AddLorem() and the options

Another Functions :

ElSelect('h2').EnLorem(); //this will add a full lorem ipsum 'english language'

ElSelect('.text').FaLorem(); //this will add a full lorem ipsum 'Persian language'

New Feature in 1.2.0 :

We can Generate lorem with Attributes . first we have to set ezlorem class for element then set the attributes.

<p class="ezlorem" data-ezlang="fa" data-EzAsHtml="true" data-EzHtmlTag="" data-EzHtmlClasses=" " data-EzAddText=" " data-EzLetters=" " data-EzWords=" " data-EzParagraph=" "></p>

New Feature in 1.3.0 :

Generator in new feature in 1.3 that is real-time generator for make easy to generate as desired . just with add ezlorem-Regulators class to our target element.

<link rel="stylesheet" href="../css/ezlorem-Regulators.css"> // first add css file
<p class="ezlorem ezlorem-Regulators" data-ezlang="en" data-ezwords="25" data-EzAsHtml="true" data-EzHtmlTag="a"></p>

One of the remarkable points is that if the text is made with a tag, it will be placed in the same tag.

After accessing the desired text, you can put unit value in the options :D.

New Feature in 1.3.3 :

Now we can have generate Generator with code : (with AddGenerator() methode)

var element =  ElSelect('.a').AddLorem();
element.AddGenerator();

// Or (another way to use :)

ElSelect('.a').AddLorem().AddGenerator();

New Feature in 1.4.0 :

it's possible to change regulator position with cursor.

for add this feature to generators you have to use class or add with method :

we have to use ezlorem-regulator-dynamic class.

or pass a parameter to AddGenerator(moveable : true or false) To determine that the Generator can move or not

<p class="ezlorem ezlorem-regulators ezlorem-regulator-dynamic"></p>

// or

<script>
    var testElement = ElSelect('.test').AddLorem();
    testElement.AddGenerator(true);
</script>

The Attributes And Options Are Optional But One Of Generate Units Should Be Fill (letters,words,paragraph)

Options

there is many options to use :

  • lang : 'en' - string - | 'en' , 'fa' | the default of lang is fa
  • letters : 50 - number - | any | this is for generate lorem by letter
  • words : 10 - number - | any | this is for generate lorem by letter
  • paragraph : 1 - number - | any | and with this options you can generate by paragraph
  • asHTML : true - boolean - | true , false | for generate as a html tag
  • HtmlTag : 'span' - string - | Html TagName | generate as this html Tag and default is p tag
  • HtmlClasses: 'class' - string - | Html class | add some html Class to the tag
  • addText : 'hello' - string - | any | if you want text start with something else use this one

Versions

1.4.0 : now it's possible to change regulator position with cursor (documents added)

1.3.6 : Some minor changes on code

1.3.3 : added AddGenerator()

1.3.2 : fixed some bugs

1.3.0 : Added Lorem Generator (preview) , To get the desired text, it is very difficult to go to the code and change it and see the result. With the Generator, you can increase or decrease the text (real-time), and see the result, and take the options (units value).

1.2.0 : New Feature , generate lorem with html attributes

1.1.6 : added .min file