Permalink
Browse files

Merge pull request #6 from XhmikosR/gh-pages

Minor tweaks
  • Loading branch information...
2 parents 8bd0094 + 0da31e5 commit a77a5609c2722beb1a02cd845402f5a68e8a20bb @kangax committed Mar 1, 2014
Showing with 325 additions and 264 deletions.
  1. +1 −0 .gitignore
  2. +8 −6 _config.yml
  3. +2 −2 _layouts/default.html
  4. +2 −2 _layouts/post.html
  5. +3 −3 css/master.css
  6. +1 −1 demos/in-place-select/css/master.css
  7. BIN demos/in-place-select/images/stars.png
  8. +9 −9 demos/in-place-select/index.html
  9. +37 −37 demos/in-place-select/js/ips.js
  10. +4 −4 demos/in-place-select/js/master.js
  11. +38 −38 demos/lazy-load/Proto.Lazy.js
  12. +117 −117 demos/state-notifier/index.html
  13. +30 −30 demos/state-notifier/notifier.js
  14. +32 −14 feed.xml
  15. BIN images/SelectorProfile.png
  16. BIN images/btn_after.png
  17. BIN images/btn_before.png
  18. BIN images/buttons.png
  19. BIN images/decompilation.png
  20. BIN images/decompilation2.png
  21. BIN images/detect_global.png
  22. BIN images/domlint-snapshot.png
  23. BIN images/drawing_techniques/bezier.png
  24. BIN images/drawing_techniques/colored_pixels.png
  25. BIN images/drawing_techniques/edge_smoothing_extra_points.png
  26. BIN images/drawing_techniques/edge_smoothing_gradient.png
  27. BIN images/drawing_techniques/fur_nearby_connections.png
  28. BIN images/drawing_techniques/harmony.png
  29. BIN images/drawing_techniques/harmony_brush.png
  30. BIN images/drawing_techniques/harmony_customization.png
  31. BIN images/drawing_techniques/image_stroke.png
  32. BIN images/drawing_techniques/multiple_lines.png
  33. BIN images/drawing_techniques/multiple_lines_opacity.png
  34. BIN images/drawing_techniques/multiple_strokes.png
  35. BIN images/drawing_techniques/neighbor_connection.png
  36. BIN images/drawing_techniques/neighbor_connections_illustrated.png
  37. BIN images/drawing_techniques/pattern.png
  38. BIN images/drawing_techniques/pattern_double_lines.png
  39. BIN images/drawing_techniques/pattern_image.png
  40. BIN images/drawing_techniques/pattern_rainbow.png
  41. BIN images/drawing_techniques/pen_multiple_strokes.png
  42. BIN images/drawing_techniques/pencil.png
  43. BIN images/drawing_techniques/point_based.png
  44. BIN images/drawing_techniques/point_based_with_shadow.png
  45. BIN images/drawing_techniques/rotating_stroke.png
  46. BIN images/drawing_techniques/sliced_strokes.png
  47. BIN images/drawing_techniques/sliced_strokes_opacity.png
  48. BIN images/drawing_techniques/smooth_connections.png
  49. BIN images/drawing_techniques/smooth_with_shadow.png
  50. BIN images/drawing_techniques/spray.png
  51. BIN images/drawing_techniques/spray_randomized.png
  52. BIN images/drawing_techniques/spray_timed.png
  53. BIN images/drawing_techniques/spray_timed_round.png
  54. BIN images/drawing_techniques/stamp.png
  55. BIN images/drawing_techniques/stamp_random_radius.png
  56. BIN images/drawing_techniques/stamp_randomized.png
  57. BIN images/drawing_techniques/stamp_shapes.png
  58. BIN images/drawing_techniques/stamp_trail.png
  59. BIN images/drawing_techniques/thick_brush.png
  60. BIN images/drawing_techniques/variable_segment.png
  61. BIN images/ie9pre3.png
  62. BIN images/kitchensink.png
  63. BIN images/kratko_screenshot_1.png
  64. BIN images/kratko_screenshot_2.png
  65. BIN images/kratko_screenshot_3.png
  66. BIN images/kratko_screenshot_4.png
  67. BIN images/kratko_screenshot_5.png
  68. BIN images/kratko_screenshot_6.png
  69. BIN images/minifier-screenshot.png
  70. BIN images/oversight.png
  71. BIN images/profiler.png
  72. BIN images/profiler_page_reload.png
  73. BIN images/rect.png
  74. BIN images/safarify.png
  75. BIN images/screenshot_of_colored_results.png
  76. BIN images/sputniktests-webrunner.png
  77. BIN images/sputniktests_chart.png
  78. +1 −1 index.html
  79. +10 −0 robots.txt
  80. +30 −0 sitemap.xml
View
@@ -0,0 +1 @@
+/_site
View
@@ -1,6 +1,8 @@
-markdown: rdiscount
-pygments: true
-permalink: ./:title
-name: Perfection Kills
-description: "Javascript rants and findings, by kangax"
-url: http://perfectionkills.com
+markdown: rdiscount
+pygments: true
+permalink: ./:title
+name: Perfection Kills
+description: "Javascript rants and findings, by kangax"
+url: http://perfectionkills.com
+
+exclude: ["README"]
View
@@ -6,7 +6,7 @@
<title>{{ site.name }}</title>
- <link rel="stylesheet" href="./css/master.css">
+ <link rel="stylesheet" href="/css/master.css">
<link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="{{ site.url }}/feed.xml">
<meta name="viewport" content="width=device-width,initial-scale=1">
@@ -28,6 +28,6 @@
{% include footer.html %}
- <script src="./js/master.js"></script>
+ <script src="/js/master.js"></script>
</body>
</html>
View
@@ -6,7 +6,7 @@
<title>{{ page.title }} — {{ site.name }}</title>
- <link rel="stylesheet" href="../css/master.css">
+ <link rel="stylesheet" href="/css/master.css">
<link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="{{ site.url }}/feed.xml">
<meta name="viewport" content="width=device-width,initial-scale=1">
@@ -66,7 +66,7 @@
{% include footer.html %}
- <script src="../js/master.js"></script>
+ <script src="/js/master.js"></script>
</body>
</html>
View
@@ -6,12 +6,12 @@ body {
}
#outer-wrapper { border-top: 7px solid #ddd; }
-#wrapper { width: 860px; margin: 10px auto; padding: 10px; }
+#wrapper { width: 860px; margin: 10px auto; padding: 10px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box}
-.blog-title { margin: 0; padding-bottom: 0; margin-right: 8px; display: inline; }
+.blog-title { padding-bottom: 0; margin-right: 8px; display: inline; }
.blog-title a { color: #333; text-decoration: none; }
.blog-title a:hover, .blog-title a:focus { text-shadow: #FFC8C8 0 0 1px; }
-.blog-author { margin: 0; display: inline; vertical-align: baseline; font-style: italic; }
+.blog-author { display: inline; vertical-align: baseline; font-style: italic; }
.blog-slogan { clear: both; margin-top: 0; font-size: 0.9em; text-transform: lowercase; font-variant: small-caps; color: #f06; margin-left: 2px; margin-bottom: 60px; }
h2, h3, h4, h5 { position: relative; }
@@ -51,7 +51,7 @@ pre {
border: 1px solid #ddd;
padding: 0.3em;
color: #555;
-
+
}
em {
color: #f55;
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -4,21 +4,21 @@
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Proto.IPS :: In-place-select controls made easy</title>
-
+
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
-
+
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/ips.js" type="text/javascript"></script>
<script src="js/master.js" type="text/javascript"></script>
-
+
<link rel="stylesheet" href="css/master.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/ips.css" type="text/css" media="all" />
</head>
<body>
<h2>Proto.IPS :: Unobtrusive in-place-select widget</h2>
- <div id="status"></div>
+ <div id="status"></div>
<div>
<p>Proto.IPS is a nice little widget which can be used for in place selection.</p>
<p>The idea is shamelessly stolen from gmail chat control (for setting user status) behavior.</p>
@@ -50,7 +50,7 @@
</dd>
<dt><code>afterUpdate(String value)</code></dt>
<dd>
- called <strong>after</strong> element is updated.
+ called <strong>after</strong> element is updated.
new value is passed as a first parameter
</dd>
<dt><code>afterCreate</code></dt>
@@ -66,16 +66,16 @@
new Proto.IPS(element, {
options: [
{text: 'Available', className: 'on'},
- {text: 'Free for chat', className: 'on'},
+ {text: 'Free for chat', className: 'on'},
{text: 'Away', className: 'half'},
{text: 'Lunch', className: 'half'},
- {text: 'Not available', className: 'off'},
+ {text: 'Not available', className: 'off'},
{text: 'Occupied', className: 'off'}
]
});
</pre>
<div>
- All callbacks are bounded to the actual instance.
+ All callbacks are bounded to the actual instance.
Here's what you might want to access:
<dl>
<dt><code>this.element</code></dt>
@@ -87,7 +87,7 @@
<dt><code>this.input</code></dt>
<dd>input field (<em>ips_input</em> className)</dd>
<dt><code>this.wrapper</code></dt>
- <dd>div which is wrapped around original element and is assigned an <em>ips_wrapper</em> className.
+ <dd>div which is wrapped around original element and is assigned an <em>ips_wrapper</em> className.
This element holds all of the control structures (options list, input field, original element and arrow trigger) </dd>
<dt><code>this.options</code></dt>
<dd>array of options (with last added being on top)</dd>
@@ -9,33 +9,33 @@
if (Object.isUndefined(Proto)) { var Proto = { } };
Proto.IPS = Class.create({
-
+
initialize: function(container) {
-
+
var e = Prototype.emptyFunction;
-
+
this.config = Object.extend({
beforeShow: e, afterShow: e, beforeUpdate: e,
afterUpdate: e, afterCreate: e
}, arguments[1] || { });
-
+
this.container = $(container);
this.options = [];
this.active = false;
-
+
this.build();
this.buildList();
-
+
this.element.update(this.options[0].text);
-
+
this.config.afterCreate.call(this);
-
+
this.initMouseEvents();
this.initKeyEvents();
},
-
+
build: function() {
-
+
this.container.insert(
this.wrapper = new Element('div', {className: 'ips_wrapper'})
.insert(this.element = new Element('div', {
@@ -49,33 +49,33 @@ Proto.IPS = Class.create({
className: 'ips_input hidden'
}))
)
-
+
/*
<div class="ips_wrapper">
<div class="ips_text"></div>
<div class="ips_trigger">▼</div>
<input type="text" class="ips_input" style="display:none"></input>
</div>
-
+
*/
},
-
+
buildList: function() {
-
+
this.optionsEl = new Element('ul', {className: 'ips_options_list'});
-
+
this.config.options.each(function(option) {
this.optionsEl.insert(new Element('li', {
className: option.className || ''
}).update(option.text));
this.options.push(option);
}.bind(this));
-
+
this.wrapper.insert(this.optionsEl.hide());
},
-
+
initMouseEvents: function() {
-
+
this.wrapper
.observe('mouseover', Element.addClassName.bind(this, this.wrapper, 'over'))
.observe('mouseout', function() {
@@ -85,21 +85,21 @@ Proto.IPS = Class.create({
.observe('click', function(e) {
this[e.findElement('.ips_trigger') ? 'showOptions' : 'showInput']();
}.bind(this))
-
+
this.trigger
.observe('mouseover', Element.addClassName.bind(this, this.trigger, 'over'))
.observe('mouseout', function() {
if (this.active) return;
this.trigger.removeClassName('over');
}.bind(this))
-
+
document.observe('click', function(e) {
if (this.active && !e.findElement('.ips_wrapper'))
this.save($F(this.input));
}.bind(this))
-
+
if (!this.optionsEl) return;
-
+
this.optionsEl
.observe('click', function(e) {
e.stop();
@@ -110,12 +110,12 @@ Proto.IPS = Class.create({
this.optionsEl.select('li').invoke('removeClassName', 'over');
e.target.addClassName('over');
}.bind(this))
-
+
this.input
.observe('focus', this.showInput.bind(this))
.observe('blur', this.hide.bind(this))
},
-
+
initKeyEvents: function() {
var selected, next, prev;
document.observe('keyup', function(e) {
@@ -125,7 +125,7 @@ Proto.IPS = Class.create({
this.save($F(this.input));
/*if (e.keyCode == Event.KEY_DOWN) {
selected = this.optionsEl.down('.over');
-
+
this.optionsEl.select('li').invoke('removeClassName', 'over');
if (var next = selected.next()) {
next.addClassName('over');
@@ -136,24 +136,24 @@ Proto.IPS = Class.create({
}*/
}.bind(this))
},
-
+
showInput: function() {
if (!this.input.hasClassName('hidden')) return;
this.input.setValue(this.element.innerHTML).removeClassName('hidden').activate();
this.active = true;
},
-
+
hide: function() {
this.input.addClassName('hidden');
this.optionsEl.hide();
this.active = false;
this.wrapper.removeClassName('over');
this.trigger.removeClassName('over');
},
-
+
save: function(value) {
this.config.beforeUpdate.call(this, value);
- var exists = this.options.any(function(option){
+ var exists = this.options.any(function(option){
return option.text == value;
})
if (!exists && !value.blank()) {
@@ -165,25 +165,25 @@ Proto.IPS = Class.create({
}
this.hide();
},
-
+
showOptions: function() {
-
+
if (!this.optionsEl) return;
-
+
if (this.optionsEl.visible()) {
this.optionsEl.hide();
this.active = false;
return;
- }
-
+ }
+
this.config.beforeShow.call(this);
-
+
this.optionsEl.show();
this.active = true;
-
+
this.config.afterShow.call(this);
},
-
+
addOption: function(option) {
this.options.push(option);
this.optionsEl.insert({
@@ -2,10 +2,10 @@ document.observe('dom:loaded', function() {
new Proto.IPS('status', {
options: [
{text: 'Available', className: 'on'},
- {text: 'Free for chat', className: 'on'},
+ {text: 'Free for chat', className: 'on'},
{text: 'Gone fishing...', className: 'half'},
{text: 'Away', className: 'half'},
- {text: 'Not available', className: 'off'},
+ {text: 'Not available', className: 'off'},
{text: 'Occupied', className: 'off'}
],
afterCreate: function() {
@@ -18,9 +18,9 @@ document.observe('dom:loaded', function() {
var origWidth = parseInt(this.input.getStyle('width')),
calcWidth = this.input.getWidth(),
dx = calcWidth - origWidth;
-
+
alert([this.input.getStyle('padding'), this.input.getStyle('paddingLeft')]);
-
+
// make sure padding/borders don't break input element's width
this.input.setStyle({
width: origWidth - dx - 2 + 'px'
Oops, something went wrong.

0 comments on commit a77a560

Please sign in to comment.