Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
324 lines (313 sloc) 11.2 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Chewy|Dosis|Raleway:400,700|Roboto:300,400,900," rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">
<link rel="stylesheet" href="../base/reset.css">
<link rel="stylesheet" href="../base/mobileui.css">
<link rel="stylesheet" href="../base/colors.css">
<link rel="stylesheet" href="../base/icons.css">
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../button/style.css">
<link rel="stylesheet" href="../mobileuijs/style.css">
<link rel="stylesheet" href="../input/style.css">
<link rel="stylesheet" href="../list/style.css">
<link rel="stylesheet" href="../assets/css/master.css">
<style>
.content-land { margin-left:50px}
</style>
<script type="text/javascript" src="../base/base.js"></script>
<script type="text/javascript" src="../input/script.js"></script>
</head>
<body class="content-land">
<!-- BEGIN -->
<h2 class="title-doc" id="_DOC_GENERATE_SPACE_">MobileUI.JS</h2>
<p>
This component is a simple library for manipulating data, states of elements and Ajax request in JavaScript.
</p>
<p>
To use this component you need install with the command:
</p>
<pre>mobileui install mobileuijs</pre>
<p>
The most important functionality is the observation in objects and arrays.
For use you need add attribute <code>data</code> in your HTML element with the name of a <code>object</code> or <code>array</code>.
This causes an element to be changed if the object or array is modified and you can display using a escape expression <code>${}</code>
</p>
<p>
MobileUI.js embed the lib <a href="http://visionmedia.github.io/superagent/" target="_blank">SuperAgent</a> for call ajax request, because it is light-weight progressive
ajax API crafted for flexibility, readability, and a low learning curve.
</p>
<p>
In this example a have a <code>object</code> with attributes of user:
</p>
<textarea class="bind-just-code" mode="text/javascript">
var user = {
name: 'Fábio Rogério',
email: 'fabio@rogerio.com'
}</textarea>
<p>
And in my HTML I have an element that uses this created object as data:
</p>
<textarea class="bind-just-code" mode="text/html">
<p data="user">
Your name is ${name} and your email is ${email}
</p></textarea>
<p>
In this example a have a <code>array</code> with objects of user:
</p>
<textarea class="bind-just-code" mode="text/javascript">
var users = [
{
name: 'Fábio Rogério',
email: 'fabio@rogerio.com'
},
{
name: 'Steve Jobs',
email: 'steve@jobs.com'
}
]</textarea>
<p>
And in my HTML I have an element that uses this created array as data:
</p>
<textarea class="bind-just-code" mode="text/html">
<ul>
<li data="users">
Name: ${name}, Email: ${email}
</li>
</ul></textarea>
<p>
If you add another object in array, the HTML elements will update. Check this feature in action:
</p>
<textarea class="bind-code" mode="text/html" header-absolute="true" replace="body,div|grey-200,grey-200 body" height-preview="600px" border="true" exec-mobileui-bind="true">
<body class="has-header grey-200">
<div class="header red">
<h1>Example MobileUI.js</h1>
</div>
<div class="list white" id="formCadaster">
<div class="item">
<input type="text" id="name" placeholder="Name">
</div>
<div class="item">
<input type="email" id="email" placeholder="Email">
</div>
<div class="item">
<button class="blue full" onclick="addUser()">SAVE USER</button>
</div>
<div class="item text-red hidden" id="messageValidation">
<p>
<i class="icon ion-alert-circled"></i> Enter the name and email of user.
</p>
</div>
</div>
<div class="list">
<div class="item" data="users">
<h2>${name}</h2>
<p>${email}</p>
<div class="right">
<button class="icon ion-trash-b red" onclick="deleteUser($$$index)"></button>
<button class="icon ion-edit blue" onclick="editUser($$$index)"></button>
</div>
</div>
</div>
<script type="text/javascript">
var users = [
{
name: 'Fábio Rogério',
email: 'fabio@rogerio.com'
},
{
name: 'Steve Jobs',
email: 'steve@jobs.com'
}
];
var indexEdit=-1; //Just example in memory
function addUser(){
var obj = MobileUI.objectByForm('formCadaster');
MobileUI.hide('messageValidation');
if(!obj.name || !obj.email) {
MobileUI.show('messageValidation');
return false;
}
if(indexEdit>=0){
users[indexEdit] = obj;
indexEdit=-1;
} else {
users.push(obj);
}
MobileUI.clearForm('formCadaster');
}
function editUser(index){
indexEdit = index;
MobileUI.formByObject('formCadaster', users[index]);
}
function deleteUser(index){
delete users[index];
}
</script>
</body></textarea>
<p>The features of this component are:</p>
<div class="content-table">
<table class="tableDoc">
<tbody>
<tr>
<th>Function</th>
<th>Description</th>
</tr>
<tr>
<td><code>MobileUI.objectByForm('idElement')</code></td>
<td>Returns an object with the values of the inputs found within the given element.</td>
</tr>
<tr>
<td><code>MobileUI.formByObject('idElement', object)</code></td>
<td>Set the input values from an informed object.</td>
</tr>
<tr>
<td><code>MobileUI.clearForm('idElement')</code></td>
<td>Clear and reset inputs within the entered element.</td>
</tr>
<tr>
<td><code>MobileUI.ajax</code></td>
<td>Ajax request flexibility, readability, and a low learning curve using <a href="http://visionmedia.github.io/superagent/" target="_blank">SuperAgent</a>.</td>
</tr>
<tr>
<td><code>MobileUI.show('idElement')</code></td>
<td>Display an element that is hidden.</td>
</tr>
<tr>
<td><code>MobileUI.hide('idElement')</code></td>
<td>Hidden an element.</td>
</tr>
<tr>
<td><code>MobileUI.showHide('idElement')</code></td>
<td>Display an element that is hidden or hides an element if it is visible.</td>
</tr>
<tr>
<td><code>MobileUI.focus('idElement')</code></td>
<td>Focus on an element, if input to keyboard is displayed.</td>
</tr>
<tr>
<td><code>MobileUI.disable('idElement')</code></td>
<td>Disable an element and your children's.</td>
</tr>
<tr>
<td><code>MobileUI.enable('idElement')</code></td>
<td>Enable an element and your children's.</td>
</tr>
<tr>
<td><code>document.addEventListener('dataUpdated')</code></td>
<td>
Fire event when data is updated, you can check whats is data in the event.detail, ex:<br>
<code>
document.addEventListener('dataUpdated', function(event){
//event.detail.dataKey
//event.detail.dataValue
})
</code>
</td>
</tr>
<tr>
<td><code>MobileUI.formatMoney(number)</code></td>
<td>
Returns a string formatted in money, you can pass the number of decimal places, the decimal separator, and the thousands separator.
<br>
Example: <br><br>
<code>MobileUI.formatMoney(256)</code> <br>
<code>MobileUI.formatMoney(1256, 2, ',','.')</code>
</td>
</tr>
<tr>
<td><code>MobileUI.myFunction = function(params){}</code></td>
<td>
You can create a custom function for use in data list HTML validation, example <code>$$$myFunction{par1}</code>
</td>
</tr>
</tbody>
</table>
</div>
<p>
See this example using ajax request.
</p>
<textarea class="bind-code" mode="text/html" header-absolute="true" replace="body,div|grey-200,grey-200 body" height-preview="600px" border="true" exec-mobileui-bind="true">
<body class="padding grey-200">
<div class="list white" id="formUserGitHub">
<div class="item icon ion-at">
<input type="text" id="github_username" placeholder="Enter GitHub username">
</div>
<div class="item">
<button class="blue full" onclick="getProfile()">GET PROFILE</button>
</div>
</div>
<p class="text-red" data="infos">${message}</p>
<div class="hidden" id="listProfileGitHub">
<div class="list" data="userGitHub">
<div class="item">
<div class="left">
<img class="avatar circle" src="${avatar_url}">
</div>
<h2>${name}</h2>
<p>@${login}</p>
</div>
<div class="item">
<p>${bio}</p>
</div>
</div>
</div>
<div class="hidden" id="listRepositoriesGitHub">
<div class="list">
<div class="item grey-900">
REPOSITORIES
<span class="black radius padding right" data="infos">
${totalRepositories}
</span>
</div>
<a href="${html_url}" target="_blank" class="item" data="repositoriesGitHub">
<h2 class="text-strong">${name}</h2>
<p>${html_url}</p>
</a>
</div>
</div>
<script type="text/javascript">
var userGitHub = {};
var repositoriesGitHub = [];
var infos = {};
function getProfile(){
var obj = MobileUI.objectByForm('formUserGitHub');
MobileUI.disable('formUserGitHub');
MobileUI.ajax.get('https://api.github.com/users/' + obj.github_username).end(resultAjaxProfile)
}
function getRepositories(repoUrl){
MobileUI.ajax.get(repoUrl).end(resultAjaxRepositories)
}
function resultAjaxProfile(err, res){
MobileUI.enable('formUserGitHub');
if(err) {
infos.message = "Sorry, get profile not work now :(";
} else {
userGitHub = JSON.parse(res.text);
MobileUI.show('listProfileGitHub');
if(userGitHub.repos_url){
getRepositories(userGitHub.repos_url);
}
}
}
function resultAjaxRepositories(err, res){
if(!err) {
repositoriesGitHub = JSON.parse(res.text);
MobileUI.show('listRepositoriesGitHub');
infos.totalRepositories = repositoriesGitHub.length;
}
}
</script>
</body></textarea>
<!-- DONE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="../assets/js/main.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>