Refactor

This commit is contained in:
Mahdi Dibaiee 2014-09-06 19:38:42 +04:30
parent 32c533f3ff
commit 0ea887ea7b
23 changed files with 742 additions and 61 deletions

512
client/css/main.css Normal file
View File

@ -0,0 +1,512 @@
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* Correct `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9.
* Hide the `template` element in IE, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent;
}
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Correct font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre-wrap;
}
/**
* Set consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9.
*/
img {
border: 0;
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
}
/**
* 1. Correct font family not being inherited in all browsers.
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
*/
button,
input,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 2 */
margin: 0;
/* 3 */
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
@font-face {
font-family: 'Zobeir';
src: url(../fonts/Mj_Zobeir.ttf), url(../fonts/Mj_Zobeir.), url(../fonts/Mj_Zobeir.woff), url(../fonts/Mj_Zobeir.svg);
font-weight: normal;
}
@font-face {
font-family: 'Roya';
src: url(../fonts/BRoya.ttf), url(../fonts/BRoya.eot), url(../fonts/BRoya.woff);
}
body,
html {
margin: 0;
font-size: 10px;
direction: rtl;
}
body {
background: #ff6e64;
color: white;
font-size: 1.6rem;
font-family: 'Roya';
text-align: center;
}
*:focus,
*:focus:after,
*:focus:before {
outline: none !important;
}
*::-moz-focus-inner {
border: none;
}
h1 {
margin-top: 0;
font-family: 'Zobeir';
font-size: 7.5rem;
font-weight: normal;
transition: 0.6s ease;
-webkit-transition: 0.6s ease;
}
h3 {
margin-top: 0;
font-weight: normal;
font-size: 2rem;
transition: 0.6s ease;
-webkit-transition: 0.6s ease;
}
p {
font-size: 2.8rem;
}
.options {
margin-top: 0;
margin-bottom: 5rem;
transition: 0.6s ease;
-webkit-transition: 0.6s ease;
}
.options div {
display: inline-block;
margin: 0 5%;
vertical-align: top;
}
ul {
list-style: none;
padding: 0;
font-size: 1.9rem;
}
li {
display: block;
cursor: pointer;
opacity: 0.6;
transition: 0.2s ease;
-webkit-transition: 0.2s ease;
}
li.active {
opacity: 1;
}
li:hover {
opacity: 1;
transition: 0.2s ease;
-webkit-transition: 0.2s ease;
}
a[href="#"] {
position: relative;
padding: 0.7rem 4rem;
color: white;
text-decoration: none;
font-size: 2rem;
border: 2px solid white;
border-radius: 3px;
transition: 0.4s ease;
-webkit-transition: 0.4s ease;
}
a[href="#"]:before {
content: '';
background: white;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 3px;
transform: scale(1.2, 1.4);
-webkit-transform: scale(1.2, 1.4);
opacity: 0;
z-index: -1;
transition: 0.4s ease;
-webkit-transition: 0.4s ease;
}
a[href="#"]:not(.running):hover:before {
border-radius: 0;
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
opacity: 1;
z-index: -1;
transition: 0.4s ease;
-webkit-transition: 0.4s ease;
}
a[href="#"]:not(.running):hover {
color: #464646;
}
a[href="#"].running {
pointer-events: none;
animation: loading 1.5s ease infinite;
-webkit-animation: loading 1.5s ease infinite;
}
@keyframes loading {
0% {
box-shadow: 0 0 0 0 white inset;
}
50% {
box-shadow: 0 5.5rem 0 0 white inset;
color: #464646;
}
51% {
box-shadow: 0 -5.5rem 0 0 #ffffff inset;
color: #464646;
}
100% {
box-shadow: 0 0 0 0 white inset;
}
}
@-webkit-keyframes loading {
0% {
box-shadow: 0 0 0 0 white inset;
}
50% {
box-shadow: 0 5.5rem 0 0 white inset;
color: #464646;
}
51% {
box-shadow: 0 -5.5rem 0 0 #ffffff inset;
color: #464646;
}
100% {
box-shadow: 0 0 0 0 white inset;
}
}
.runaway {
margin-top: -16.5rem;
transition: 0.6s ease;
-webkit-transition: 0.6s ease;
}
.modal {
width: 60%;
margin: 5rem auto;
padding: 2rem 3rem;
text-align: right;
font-size: 1.8rem;
text-indent: 2rem;
}
*::-moz-selection {
background-color: rgba(255, 255, 255, 0.2);
color: white;
}

View File

@ -169,7 +169,7 @@ a[href="#"].running {
} }
.runaway { .runaway {
margin-top: -15rem; margin-top: -16.5rem;
transition: 0.6s ease; transition: 0.6s ease;
-webkit-transition: 0.6s ease; -webkit-transition: 0.6s ease;

34
client/design.json Normal file
View File

@ -0,0 +1,34 @@
["طراحی",
"گرافیک",
"نقش",
"ساخت",
"کشیدن",
"نماد",
"الگو",
"نام",
"لوگو",
"الحام",
"ایده",
"ناب",
"حقوق",
"خط",
"نرم‌افزار",
"اثر",
"کاغذ",
"قلم",
"مداد",
"ساختمان",
"اولیه",
"خودکار",
"شکل",
"دایره",
"هندسی",
"نقاط",
"جوهر",
"رنگ",
"منحنی",
"سه‌بعدی",
"خط‌کش",
"لایه",
"منظره",
"نور"]

View File

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View File

@ -1,39 +1,39 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Demo Mj_Zobeir</title> <title>Demo Mj_Zobeir</title>
<style> <style>
@font-face { @font-face {
font-family: "Mj_Zobeir"; font-family: "Mj_Zobeir";
src: url('612213135-Mj_Zobeir.eot'); src: url('612213135-Mj_Zobeir.eot');
src: url('612213135-Mj_Zobeir.eot?#iefix') format('embedded-opentype'), src: url('612213135-Mj_Zobeir.eot?#iefix') format('embedded-opentype'),
url('612213135-Mj_Zobeir.svg#Mj_Zobeir') format('svg'), url('612213135-Mj_Zobeir.svg#Mj_Zobeir') format('svg'),
url('612213135-Mj_Zobeir.woff') format('woff'), url('612213135-Mj_Zobeir.woff') format('woff'),
url('612213135-Mj_Zobeir.ttf') format('truetype'); url('612213135-Mj_Zobeir.ttf') format('truetype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
body{ body{
font-family: "Mj_Zobeir"; font-family: "Mj_Zobeir";
direction: ltr; direction: ltr;
} }
</style> </style>
</head> </head>
<body> <body>
<p> <p>
Ea fore firmissimum ab ubi ea illustriora. Qui nisi deserunt cohaerescant. Nam Ea fore firmissimum ab ubi ea illustriora. Qui nisi deserunt cohaerescant. Nam
legam domesticarum o illum aliquip excepteur et mandaremus e fore litteris ut do legam domesticarum o illum aliquip excepteur et mandaremus e fore litteris ut do
enim tempor proident. Ullamco quis amet pariatur minim, offendit despicationes enim tempor proident. Ullamco quis amet pariatur minim, offendit despicationes
in fabulas se aut quem tempor, aut mandaremus ad quamquam. Ut velit laboris in fabulas se aut quem tempor, aut mandaremus ad quamquam. Ut velit laboris
exercitation iis a te dolore sunt quorum. Quamquam philosophari ad ullamco. exercitation iis a te dolore sunt quorum. Quamquam philosophari ad ullamco.
Veniam laboris eruditionem id id velit occaecat eu probant eram varias e duis, Veniam laboris eruditionem id id velit occaecat eu probant eram varias e duis,
ut e firmissimum. ut e firmissimum.
</p> </p>
<hr /> <hr />
Generated using the @font-face Generator at <a href="http://www.font-face-generator.com">font-face-generator.com</a> Generated using the @font-face Generator at <a href="http://www.font-face-generator.com">font-face-generator.com</a>
<hr /> <hr />
<!-- Web Font generated by Web Font gerenator at www.font-face-generator.com --> <!-- Web Font generated by Web Font gerenator at www.font-face-generator.com -->
</body> </body>
</html> </html>

View File

Before

Width:  |  Height:  |  Size: 116 KiB

After

Width:  |  Height:  |  Size: 116 KiB

View File

@ -17,27 +17,29 @@
<p>دسته بندی</p> <p>دسته بندی</p>
<ul> <ul>
<li data-val='design' class='active'>طراحی</li> <li data-val='design' class='active'>طراحی</li>
<li data-val='economy'>اقتصادی</li> <li data-val='normal'>ساده</li>
<!-- <li data-val='economy'>اقتصادی</li>
<li data-val='news'>اخبار</li> <li data-val='news'>اخبار</li>
<li data-val='info'>اطلاعات</li> <li data-val='info'>اطلاعات</li> -->
</ul> </ul>
</div> </div>
<div> <div>
<p>واحد</p> <p>واحد</p>
<ul> <ul>
<li data-val='c' class='active'>کاراکتر</li> <li data-val='p' class='active'>پاراگرف</li>
<li data-val='w'>کلمه</li> <li data-val='w'>کلمه</li>
<li data-val='p'>پاراگرف</li> <li data-val='c'>کاراکتر</li>
</ul> </ul>
</div> </div>
<div> <div>
<p>مقدار</p> <p>مقدار</p>
<ul> <ul>
<li contenteditable class='active'>عدد وارد کنید</li> <li class='active' data-val='1'>۱</li>
<li data-val='5'>۵</li> <li data-val='5'>۵</li>
<li data-val='10'>۱۰</li> <li data-val='10'>۱۰</li>
<li data-val='15'>۱۵</li> <li data-val='15'>۱۵</li>
<li data-val='20'>۲۰</li> <li data-val='20'>۲۰</li>
<li contenteditable>عدد وارد کنید</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -46,7 +48,7 @@
<a href='#'>بساز!</a> <a href='#'>بساز!</a>
<div class='modal' contenteditable> <div class='modal' contenteditable>
</div> </div>
<script src='less.js'></script> <script src='less.js'></script>

View File

@ -15,13 +15,8 @@ $('a').click(function(e) {
e.preventDefault(); e.preventDefault();
var $this = $(this); var $this = $(this);
if($this.hasClass('runaway')) {
$this.text('بساز!');
$run.removeClass('runaway');
return;
}
$this.addClass('running'); $this.addClass('running');
var url = '/' + $('.options div:first-child li.active').data('val') + '/' + $('.options div:nth-child(2) li.active').data('val') + '/' + $('.options div:last-child li.active').data('val'); var url = '/' + $('.options div:first-child li.active').data('val') + '/' + $('.options div:nth-child(2) li.active').data('val') + '/' + ($('.options div:last-child li.active').data('val') || 1);
$.ajax({ $.ajax({
url: url, url: url,
@ -35,14 +30,12 @@ $('li').click(function() {
}) })
function success(ipsum) { function success(ipsum) {
$('a').removeClass('running').text('بازگشت'); $('a').removeClass('running');
$run.addClass('runaway'); $('.modal').html(ipsum);
$('.modal').text(ipsum); var range = document.createRange();
range.selectNodeContents($('.modal')[0]);
var range = document.createRange(); var selection = window.getSelection();
range.selectNodeContents($('.modal')[0]); selection.removeAllRanges();
var selection = window.getSelection(); selection.addRange(range);
selection.removeAllRanges();
selection.addRange(range);
} }

34
design.json Normal file
View File

@ -0,0 +1,34 @@
["طراحی",
"گرافیک",
"نقش",
"ساخت",
"کشیدن",
"نماد",
"الگو",
"نام",
"لوگو",
"الحام",
"ایده",
"ناب",
"حقوق",
"خط",
"نرم‌افزار",
"اثر",
"کاغذ",
"قلم",
"مداد",
"ساختمان",
"اولیه",
"خودکار",
"شکل",
"دایره",
"هندسی",
"نقاط",
"جوهر",
"رنگ",
"منحنی",
"سه‌بعدی",
"خط‌کش",
"لایه",
"منظره",
"نور"]

16
general.json Normal file
View File

@ -0,0 +1,16 @@
["و",
"در",
"با",
"از",
"کی",
"پیش",
"همواره",
"بیش",
"همراه",
"چگونه",
"است",
"باشد",
"آن",
"این",
"اینگونه",
"معمولا"]

90
ipsum.js Normal file
View File

@ -0,0 +1,90 @@
var express = require('express'),
app = express();
app.use(express.static(__dirname + '/ipsum', {maxAge: 60*60*24*7}));
module.exports.app = app;
app.get(/.*\/.*\/.*/, function(req, res) {
res.end('<head><meta charset="UTF-8"></head><p dir="rtl">' + go(req.url) + '</p>');
})
if(!String.prototype.repeat) {
String.prototype.repeat = function(n) {
return new Array(n+1).join(this);
}
}
/* IPSUM GENERATOR */
var general = require('./general.json');
var dictionary = {
'design': require('./design.json')
}
var normal = 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیستری را برای طراحان رایانه ای و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.';
function randomAlamat() {
if(Math.floor(Math.random() * 4) > 0) return ' ';
else {
if(Math.floor(Math.random() * 4) > 0) return ' ';
else return '، ';
}
}
function loremipsum(data) {
var method = data[0],
unit = data[1],
amount = +data[2];
if(method == 'normal') {
switch(unit) {
case 'c':
return normal.slice(0, amount);
case 'p':
return normal.repeat(amount);
case 'w':
return normal.split(' ').slice(0, amount).join(' ');
}
}
var d = dictionary[method].concat(general),
r = d.sort(function(a, b) {
return Math.random() > 0.5;
});
var stretch = function stretch(a, n) {
var d = a;
while(d.length < n) {
d = d.concat(a);
}
return d;
}
switch(unit) {
case 'c':
r = stretch(r, amount/2);
return r.slice(0, amount/2).join(' ').slice(0, amount + (amount/4-1));
case 'w':
r = stretch(r, amount);
return r.slice(0, amount).join(' ');
case 'p':
r = stretch(r, 15*(Math.random()+1));
var s = r.join(' ') + '. <br>';
for(var i = 1; i < amount; i++) {
r = r.sort(function() { return Math.random() > 0.5; });
r = stretch(r, 15*(Math.random()*3+2));
s += r.join(' ') + '. <br>';
}
return s;
}
}
function go(url) {
var req = url.split('/'),
data = {};
req.splice(0, 1);
for(var i = 0, len = req.length; i < len; i++) {
data[i] = req[i];
}
return loremipsum(data);
}