Skip to content

Commit fda8908

Browse files
L0stSoulL0stSoul
L0stSoul
authored and
L0stSoul
committed
-added observer javascritp sample
1 parent 6b005e2 commit fda8908

12 files changed

+330
-6
lines changed

‎Backboneapp/Scripts/Backboneapp.js

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
/// <reference path="Shared/underscore.js" />
2-
/// <reference path="Shared/backbone.js" />
3-
/// <reference path="Shared/jquery-1.6.2.min.js" />
4-
/// <reference path="Shared/Jquery.tmpl.min.js" />
5-
6-
$(document).ready(function ()
1+
$(document).ready(function ()
72
{
83
var Item = Backbone.Model.extend({
94
});

‎JsObserver/ObserverSample.htm

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<title></title>
5+
<script src="Scripts/Event.js" type="text/javascript"></script>
6+
<script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
7+
<script src="Scripts/sample.js" type="text/javascript"></script>
8+
9+
<link href="Styles/Css-reset.css" rel="stylesheet" type="text/css" />
10+
<link href="Styles/ObserverSample.css" rel="stylesheet" type="text/css" />
11+
</head>
12+
<body>
13+
<div id="content">
14+
<div class="wrapper">
15+
<h2>Change something in box below:</h2>
16+
<textarea rows="5" cols="100" id="textbox">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
17+
Ut interdum lectus nunc. Nulla at dui tortor, eu feugiat odio. Nam semper hendrerit magna at semper.
18+
Ut convallis, purus quis mollis rhoncus, eros diam tincidunt purus, vel accumsan arcu mauris nec tortor.
19+
Proin bibendum elementum egestas. Quisque sagittis scelerisque lobortis. Mauris rutrum eros nisl.
20+
Maecenas gravida metus sit amet ante blandit sit amet fringilla augue rutrum. Nunc vitae faucibus purus.
21+
</textarea>
22+
</div>
23+
<div class="preview" id="preview1">
24+
<div class="text"></div>
25+
<button class="updating_control">Unsubscribe!</button>
26+
</div>
27+
<div class="preview" id="preview2">
28+
<div class="text"></div>
29+
<button class="updating_control">Unbscribe!</button>
30+
</div>
31+
</div>
32+
</body>
33+
</html>

‎JsObserver/README

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
Not so bad Observer pattern implementation on javascript. sample included :)
2+
3+
notes for myself:
4+
5+
#Event.Js
6+
Observer implementation. work fine stand-alone.
7+
8+
#jQuery (jquery-1.6.2.min.js)
9+
- http://jquery.com/
10+
11+
#css-reset.css
12+
- http://yuilibrary.com/yui/docs/cssreset/
13+
14+
#sample.js
15+
- sample script which uses Observers

‎JsObserver/Scripts/Event.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
Event = function()
2+
{
3+
this._observers = [];
4+
}
5+
6+
Event.prototype =
7+
{
8+
raise: function (data)
9+
{
10+
for (var i in this._observers)
11+
{
12+
var item = this._observers[i];
13+
item.observer.call(item.context, data);
14+
}
15+
},
16+
subscribe: function (observer, context)
17+
{
18+
var ctx = context || this;
19+
this._observers.push({ observer: observer, context: ctx });
20+
},
21+
unsubscribe: function (observer, context )
22+
{
23+
for (var i in this._observers)
24+
if ( this._observers[i].observer == observer &&
25+
this._observers[i].context == context )
26+
delete this._observers[i];
27+
}
28+
}

‎JsObserver/Scripts/jquery-1.6.2.min.js

+18
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎JsObserver/Scripts/sample.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/// <reference path="Event.js" />
2+
/// <reference path="jquery-1.6.2.min.js" />
3+
4+
5+
//Simple Sample
6+
$(document).ready(function ()
7+
{
8+
var event_textUpdated = new Event();
9+
10+
function Preview(jQuery)
11+
{
12+
this._root = jQuery;
13+
this._text = this._root.find(".text");
14+
this._button = this._root.find(".updating_control");
15+
this._isSubscribed = false;
16+
17+
this.init();
18+
}
19+
Preview.prototype =
20+
{
21+
_on_button_click: function ()
22+
{
23+
if (this._isSubscribed)
24+
{
25+
this.unsubscribe();
26+
this._button.text("Subscribe!");
27+
return;
28+
}
29+
30+
this.subscribe();
31+
this._button.text("Unsubscribe!");
32+
},
33+
init: function ()
34+
{
35+
this._button.click($.proxy(this._on_button_click, this));
36+
this.subscribe();
37+
},
38+
update: function (data)
39+
{
40+
this._text.text(data);
41+
},
42+
subscribe: function ()
43+
{
44+
event_textUpdated.subscribe(this.update, this);
45+
this._isSubscribed = true;
46+
},
47+
unsubscribe: function ()
48+
{
49+
event_textUpdated.unsubscribe(this.update, this);
50+
this._isSubscribed = false;
51+
}
52+
}
53+
54+
var preview1 = new Preview($("#preview1"));
55+
var preview2 = new Preview($("#preview2"));
56+
57+
preview1.update($("#textbox").val());
58+
preview2.update($("#textbox").val());
59+
$("#textbox").keyup(function () { event_textUpdated.raise($(this).val()); });
60+
});

‎JsObserver/Styles/Css-reset.css

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/* http://meyerweb.com/eric/tools/css/reset/
2+
v2.0 | 20110126
3+
License: none (public domain)
4+
*/
5+
6+
html, body, div, span, applet, object, iframe,
7+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8+
a, abbr, acronym, address, big, cite, code,
9+
del, dfn, em, img, ins, kbd, q, s, samp,
10+
small, strike, strong, sub, sup, tt, var,
11+
b, u, i, center,
12+
dl, dt, dd, ol, ul, li,
13+
fieldset, form, label, legend,
14+
table, caption, tbody, tfoot, thead, tr, th, td,
15+
article, aside, canvas, details, embed,
16+
figure, figcaption, footer, header, hgroup,
17+
menu, nav, output, ruby, section, summary,
18+
time, mark, audio, video {
19+
margin: 0;
20+
padding: 0;
21+
border: 0;
22+
font-size: 100%;
23+
font: inherit;
24+
vertical-align: baseline;
25+
}
26+
/* HTML5 display-role reset for older browsers */
27+
article, aside, details, figcaption, figure,
28+
footer, header, hgroup, menu, nav, section {
29+
display: block;
30+
}
31+
body {
32+
line-height: 1;
33+
}
34+
ol, ul {
35+
list-style: none;
36+
}
37+
blockquote, q {
38+
quotes: none;
39+
}
40+
blockquote:before, blockquote:after,
41+
q:before, q:after {
42+
content: '';
43+
content: none;
44+
}
45+
table {
46+
border-collapse: collapse;
47+
border-spacing: 0;
48+
}

‎JsObserver/Styles/ObserverSample.css

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
#content
2+
{
3+
width: 600px;
4+
margin: 50px auto;
5+
font-family: arial,helvetica,sans-serif;
6+
color: #858585;
7+
}
8+
9+
/* Text box */
10+
h2{ margin-bottom: 5px; }
11+
.wrapper{ padding-right: 6px; margin-bottom: 10px; }
12+
#textbox{display: block; max-width: 100%; }
13+
14+
/* Preview */
15+
.preview
16+
{
17+
float: left;
18+
text-align: justify;
19+
padding: 5px 10px;
20+
overflow: hidden;
21+
}
22+
.text{ height: 300px; }
23+
24+
.updating_control
25+
{
26+
border: 1px #858585 solid;
27+
color: #858585;
28+
width: 100%;
29+
}
30+
31+
#preview1
32+
{
33+
color: #468966;
34+
width: 279px;
35+
border-right: 1px black solid;
36+
}
37+
#preview2
38+
{
39+
width: 280px;
40+
color: #8E2800;
41+
font-family: serif;
42+
}

‎jQueryPlugin/README

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
learned how to create simple jquery plugins
2+
3+
notes for myself:
4+
5+
-Always wrap your plugin in (function( $ ){ // plugin goes here })( jQuery );
6+
7+
-Don't redundantly wrap the this keyword in the immediate scope of your plugin's function
8+
9+
-Unless you're returning an intrinsic value from your plugin,
10+
always have your plugin's function return the this keyword to maintain chainability.
11+
12+
-Rather than requiring a lengthy amount of arguments,
13+
pass your plugin settings in an object literal that can be extended over the plugin's defaults.
14+
15+
-Don't clutter the jQuery.fn object with more than one namespace per plugin.
16+
17+
-Always namespace your methods, events and data.
18+
19+
-jQuery.fn is pronounced jQuery effin'

‎jQueryPlugin/Scripts/Jquery.move.test-plugin.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/// <reference path="jquery-1.6.2.min.js" />
2+
3+
(function ($)
4+
{
5+
$.fn.move = function (x, y)
6+
{
7+
this.css({ position: "absolute", left: x, top: y })
8+
return this;
9+
};
10+
11+
})(jQuery);

‎jQueryPlugin/Scripts/jquery-1.6.2.min.js

+18
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jQueryPlugin/jquery-plugin-sample.htm

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
3+
<html xmlns="http://www.w3.org/1999/xhtml">
4+
<head>
5+
<title></title>
6+
<script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
7+
<script src="Scripts/Jquery.move.test-plugin.js" type="text/javascript"></script>
8+
<script type="text/javascript">
9+
$(document).ready(function ()
10+
{
11+
function rand(max) { return Math.floor(Math.random() * max); }
12+
13+
$(".moveable").click(function ()
14+
{
15+
$(this).move(rand(500), rand(500))
16+
});
17+
18+
});
19+
</script>
20+
<style type="text/css">
21+
.moveable
22+
{
23+
font-family: arial,helvetica,sans-serif;
24+
color: White;
25+
background-color: #5C832F;
26+
padding: 45px 10px 10px 30px;
27+
height: 65px;
28+
width: 80px;
29+
}
30+
</style>
31+
</head>
32+
<body>
33+
<div class="moveable">
34+
click.me
35+
</div>
36+
</body>
37+
</html>

0 commit comments

Comments
 (0)