Permalink
Browse files

Trim trailing spaces and convert tabs to spaces.

  • Loading branch information...
XhmikosR committed Feb 28, 2014
1 parent 8bd0094 commit 906a62528de74fc534660d9cc286a6cc8694dcaf
@@ -51,7 +51,7 @@ pre {
border: 1px solid #ddd;
padding: 0.3em;
color: #555;
-
+
}
em {
color: #f55;
@@ -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 @@ <h4>Config object (passed as a second parameter):</h4>
</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 @@ <h4>Example</h4>
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 @@ <h4>Example</h4>
<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'
@@ -1,41 +1,41 @@
if (Object.isUndefined(Proto)) {var Proto = {}}
Proto.Lazy = Class.create({
- initialize: function(options) {
- this.options = options || {};
- $$('img').each(function(el){
- if (!this.withinViewport(el, this.options.offset || 0)) {
- el._src = el.src;
- el.src = this.options.placeHolder || '';
- if (this.options.event === 'click') {
- el.observe('click', function(){
- if (this._src) {
- this.src = this._src; delete this._src;
- }
- })
- }
- }
- }.bind(this));
- if (this.options.event !== 'click') {
- Event.observe(window, 'scroll', this.load.bind(this));
- Event.observe(window, 'resize', this.load.bind(this));
- }
- },
- load: function(el) {
- $$('img').each(function(el){
- if (el._src && this.withinViewport(el, this.options.offset || 0)) { el.src = el._src; delete el._src }
- }.bind(this))
- },
- withinViewport: function(el, offset) {
- var elOffset = el.cumulativeOffset(),
- vpOffset = document.viewport.getScrollOffsets(),
- elDim = el.getDimensions(),
- vpDim = document.viewport.getDimensions();
- if (elOffset[1] + elDim.height + offset < vpOffset[1] ||
- elOffset[1] - offset > vpOffset[1] + vpDim.height ||
- elOffset[0] + elDim.width + offset < vpOffset[0] ||
- elOffset[0] - offset > vpOffset[0] + vpDim.width) {
- return false;
- }
- return true;
- }
+ initialize: function(options) {
+ this.options = options || {};
+ $$('img').each(function(el){
+ if (!this.withinViewport(el, this.options.offset || 0)) {
+ el._src = el.src;
+ el.src = this.options.placeHolder || '';
+ if (this.options.event === 'click') {
+ el.observe('click', function(){
+ if (this._src) {
+ this.src = this._src; delete this._src;
+ }
+ })
+ }
+ }
+ }.bind(this));
+ if (this.options.event !== 'click') {
+ Event.observe(window, 'scroll', this.load.bind(this));
+ Event.observe(window, 'resize', this.load.bind(this));
+ }
+ },
+ load: function(el) {
+ $$('img').each(function(el){
+ if (el._src && this.withinViewport(el, this.options.offset || 0)) { el.src = el._src; delete el._src }
+ }.bind(this))
+ },
+ withinViewport: function(el, offset) {
+ var elOffset = el.cumulativeOffset(),
+ vpOffset = document.viewport.getScrollOffsets(),
+ elDim = el.getDimensions(),
+ vpDim = document.viewport.getDimensions();
+ if (elOffset[1] + elDim.height + offset < vpOffset[1] ||
+ elOffset[1] - offset > vpOffset[1] + vpDim.height ||
+ elOffset[0] + elDim.width + offset < vpOffset[0] ||
+ elOffset[0] - offset > vpOffset[0] + vpDim.width) {
+ return false;
+ }
+ return true;
+ }
})
Oops, something went wrong.

0 comments on commit 906a625

Please sign in to comment.