Skip to content

Y
ygopro-images-generator
Commit 231fc59f authored by Jingqin Lynn's avatar Jingqin Lynn
Browse files
Options

Drop jQuery.editable in favor of [contenteditable] and other changes. 

Add level editing.
Do various style tweaks.
Untested on Firefox / IE.
parent 09462cd6
Show whitespace changes
Inline Side-by-side
Showing with 102 additions and 65 deletions
index.html
View file @ 231fc59f
...@@ -11,26 +11,26 @@ ...@@ -11,26 +11,26 @@
<link rel="stylesheet" href="style.css"/> <link rel="stylesheet" href="style.css"/>
<script id="card_template" type="text/x-jquery-tmpl"> <script id="card_template" type="text/x-jquery-tmpl">
<div class="card ${category} ${card_type}"> <div class="card ${category} ${card_type}">
<span class="name">${name}</span> <span class="name editable">${name}</span>
<span class="attribute" data-attribute="${attribute}"></span> <span class="attribute editable" data-attribute="${attribute}"></span>
<div class="level" data-level="${level}"></div> <div class="level editable" data-level="${level}"></div>
<img class="image" <img class="image"
src="${image_url}"/> src="${image_url}"/>
<span class="monster_type">【${$.i18n.prop('type.'+type)}·${$.i18n.prop('card_type.'+card_type)}】</span> <span class="monster_type editable">【${$.i18n.prop('type.'+type)}·${$.i18n.prop('card_type.'+card_type)}】</span>
<span class="number">TH07-ZH998</span> <span class="number editable">TH07-ZH998</span>
<span class="edition">DUEL TERMINAL</span> <span class="edition editable">DUEL TERMINAL</span>
<div class="rule_text">${description}</div> <div class="rule_text editable">${description}</div>
<hr class="hr"/> <hr class="hr"/>
<span class="gamecode">${id}</span> <span class="gamecode editable">${id}</span>
<div class="rarity2"></div> <div class="rarity2"></div>
<span class="copyright">©1996 KAZUKI TAKAHASHI</span> <span class="copyright editable">©1996 KAZUKI TAKAHASHI</span>
<span class="atk_title">ATK/ </span> <span class="atk_title">ATK/ </span>
<span class="def_title">DEF/ </span> <span class="def_title">DEF/ </span>
<span class="atk">${atk}</span> <span class="atk editable">${atk}</span>
<span class="def">${def}</span> <span class="def editable">${def}</span>
</div> </div>
</script> </script>
</head> </head>
......
js/main.coffee
View file @ 231fc59f
...@@ -21,12 +21,13 @@ $(document).ready -> ...@@ -21,12 +21,13 @@ $(document).ready ->
#submit #submit
$('#card_form').submit -> $('#card_form').submit ->
$('.editable').each (_, element) ->
element.contentEditable = 'false'
$(element).removeAttr 'contentEditable'
$(element).removeClass 'editable'
@document.value = $('.card')[0].outerHTML @document.value = $('.card')[0].outerHTML
#editable #editable
$('.name').editable (value, settings) ->
value
$('.attribute').editable (value, settings) -> $('.attribute').editable (value, settings) ->
$(this).attr 'data-attribute', value $(this).attr 'data-attribute', value
, { , {
...@@ -37,26 +38,35 @@ $(document).ready -> ...@@ -37,26 +38,35 @@ $(document).ready ->
} }
$('.monster_type').editable (value, settings) -> $('.editable').each (_, element) ->
value if element.classList.contains('attribute')
$('.number').editable (value, settings) -> # TODO(lynn): Improve Attribute editing.
value else if element.classList.contains('level')
$('.edition').editable (value, settings) -> $(element).click (e) ->
value delta = 0
$('.rule_text').editable (value, settings) -> if e.offsetX < 0
value delta = 1
, { else if e.offsetX > element.getClientRects()[0].width
type: 'textarea', delta = -1
submit: 'OK'
} old_level = parseInt(element.dataset['level'])
$('.name').editable (value, settings) -> new_level = old_level + delta
value if new_level != old_level && new_level > 0 && new_level <= 12
$('.gamecode').editable (value, settings) -> element.dataset['level'] = new_level
value false
$('.atk').editable (value, settings) ->
value # Level
$('.def').editable (value, settings) -> else
value element.contentEditable = "plaintext-only"
if element.contentEditable != "plaintext-only"
element.contentEditable = "true"
#$('.rule_text').editable (value, settings) ->
#value
#, {
#type: 'textarea',
#submit: 'OK'
#}
#batch #batch
$('#all_button').click -> $('#all_button').click ->
......
js/main.js
View file @ 231fc59f
// Generated by CoffeeScript 1.6.2 // Generated by CoffeeScript 1.6.1
(function() { (function() {
$(document).ready(function() { $(document).ready(function() {
return $.i18n.properties({ return $.i18n.properties({
name: 'card', name: 'card',
...@@ -20,10 +21,12 @@ ...@@ -20,10 +21,12 @@
def: 1000 def: 1000
})); }));
$('#card_form').submit(function() { $('#card_form').submit(function() {
return this.document.value = $('.card')[0].outerHTML; $('.editable').each(function(_, element) {
element.contentEditable = 'false';
$(element).removeAttr('contentEditable');
return $(element).removeClass('editable');
}); });
$('.name').editable(function(value, settings) { return this.document.value = $('.card')[0].outerHTML;
return value;
}); });
$('.attribute').editable(function(value, settings) { $('.attribute').editable(function(value, settings) {
return $(this).attr('data-attribute', value); return $(this).attr('data-attribute', value);
...@@ -41,37 +44,35 @@ ...@@ -41,37 +44,35 @@
type: 'select', type: 'select',
submit: 'OK' submit: 'OK'
}); });
$('.monster_type').editable(function(value, settings) { $('.editable').each(function(_, element) {
return value; if (element.classList.contains('attribute')) {
});
$('.number').editable(function(value, settings) { } else if (element.classList.contains('level')) {
return value; return $(element).click(function(e) {
}); var delta, new_level, old_level;
$('.edition').editable(function(value, settings) { delta = 0;
return value; if (e.offsetX < 0) {
}); delta = 1;
$('.rule_text').editable(function(value, settings) { } else if (e.offsetX > element.getClientRects()[0].width) {
return value; delta = -1;
}, { }
type: 'textarea', old_level = parseInt(element.dataset['level']);
submit: 'OK' new_level = old_level + delta;
}); if (new_level !== old_level && new_level > 0 && new_level <= 12) {
$('.name').editable(function(value, settings) { element.dataset['level'] = new_level;
return value; }
}); return false;
$('.gamecode').editable(function(value, settings) {
return value;
});
$('.atk').editable(function(value, settings) {
return value;
}); });
$('.def').editable(function(value, settings) { } else {
return value; element.contentEditable = "plaintext-only";
if (element.contentEditable !== "plaintext-only") {
return element.contentEditable = "true";
}
}
}); });
return $('#all_button').click(function() { return $('#all_button').click(function() {
return mycard.fetch_cards(function(cards) { return mycard.fetch_cards(function(cards) {
var card, i, result, _i, _len; var card, i, result, _i, _len;
result = "mkdir result\n"; result = "mkdir result\n";
i = 1; i = 1;
for (_i = 0, _len = cards.length; _i < _len; _i++) { for (_i = 0, _len = cards.length; _i < _len; _i++) {
......
style.css
View file @ 231fc59f
...@@ -77,6 +77,7 @@ ...@@ -77,6 +77,7 @@
height: 25px; height: 25px;
background: url(mse/data/yugioh-caicai-levels.mse-symbol-font/star.png) repeat-x; background: url(mse/data/yugioh-caicai-levels.mse-symbol-font/star.png) repeat-x;
background-size: 25px 25px; background-size: 25px 25px;
white-space: nowrap;
} }
.level[data-level="1"]{width: 25px} .level[data-level="1"]{width: 25px}
.level[data-level="2"]{width: 50px} .level[data-level="2"]{width: 50px}
...@@ -91,6 +92,31 @@ ...@@ -91,6 +92,31 @@
.level[data-level="11"]{width: 275px} .level[data-level="11"]{width: 275px}
.level[data-level="12"]{width: 300px} .level[data-level="12"]{width: 300px}
.level.editable:hover::before,
.level.editable:hover::after {
position: relative;
width: 25px;
height: 100%;
left: -25px;
display: inline-block;
font-size: 25px;
line-height: 25px;
text-align: center;
background: rgba(200, 200, 200, 0.3);
content: "+";
}
.level.editable:hover::after {
content: "-";
left: 100%;
margin-left: -25px;
}
[contenteditable]:active,
[contenteditable]:hover {
background: rgba(255,255,255,0.3);
}
.image { .image {
position: absolute; position: absolute;
left: 59.5px; left: 59.5px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment