custom inettuts-like javascript
This is a slightly modified version of a javascript used in this tutorial:
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
1 var iNettuts = {
2
3 jQuery : $,
4
5 settings : {
6 columns : '.column',
7 widgetSelector: '.widget',
8 handleSelector: '.widget-head',
9 contentSelector: '.widget-content',
10 iconDiv: '.alinderecha',
11 /* If you don't want preferences to be saved change this value to
12 false, otherwise change it to the name of the cookie: */
13 saveToCookie: 'inettuts-widget-preferences',
14
15 widgetDefault : {
16 movable: true,
17 removable: true,
18 collapsible: true,
19 editable: false,
20 colorClasses : ['color-yellow', 'color-red', 'color-blue', 'color-white', 'color-orange', 'color-green']
21 },
22 widgetIndividual : {
23 widgetparao : {
24 movable: false,
25 removable: false,
26 collapsible: false,
27 editable: false
28 }
29 }
30 },
31
32 init : function () {
33 this.attachStylesheet('/media/lex/js/jquery.lex.ui.js.css');
34 this.sortWidgets();
35 this.addWidgetControls();
36 this.makeSortable();
37 },
38
39 getWidgetSettings : function (id) {
40 var $ = this.jQuery,
41 settings = this.settings;
42 return (id&&settings.widgetIndividual[id]) ? $.extend({},settings.widgetDefault,settings.widgetIndividual[id]) : settings.widgetDefault;
43 },
44
45 addWidgetControls : function () {
46 var iNettuts = this,
47 $ = this.jQuery,
48 settings = this.settings;
49
50 $(settings.widgetSelector, $(settings.columns)).each(function () {
51 var thisWidgetSettings = iNettuts.getWidgetSettings(this.id);
52 if (thisWidgetSettings.collapsible) {
53 $('<a href="#" class="collapse"><img src="/media/lex/view/skin2/img/move.gif" alt="recoger" title="Recoger widget" class="margen6" width="12" height="12"/></a>').mousedown(function (e) {
54 /* STOP event bubbling */
55 e.stopPropagation();
56 }).click(function(){
57 $(this).parents(settings.widgetSelector).toggleClass('collapsed');
58 /* Save prefs to cookie: */
59 iNettuts.savePreferences();
60 return false;
61 }).appendTo($(settings.iconDiv,this));
62 }
63 if (thisWidgetSettings.removable) {
64 $('<a href="#" class="remove"><img src="/media/lex/view/skin2/img/close.gif" alt="eliminar" title="Eliminar widget" width="12" height="12"/></a>').mousedown(function (e) {
65 /* STOP event bubbling */
66 e.stopPropagation();
67 }).click(function () {
68 removed_widget_id = $(this).parents(settings.widgetSelector).attr('id');
69 if(confirm('¿ Seguro que quiere eliminar este Widget ?')) {
70 $(this).parents(settings.widgetSelector).animate({
71 opacity: 0
72 },function () {
73 $(this).wrap('<div/>').parent().slideUp(function () {
74 /* Send the ajax call that will remove the widget from the db */
75 $.ajax({
76 url: "/widgets/ajax/remove/" + removed_widget_id,
77 cache: false,
78 success: function(result){
79 $(this).remove();
80 },
81 error: function(){
82 alert("No se ha podido eliminar el widget" + result.id);
83 }
84 });
85 });
86 });
87 }
88 return false;
89 }).appendTo($(settings.iconDiv, this));
90 }
91
92 if (thisWidgetSettings.editable) {
93 $('<a href="#" class="edit">Pref.</a>').mousedown(function (e) {
94 /* STOP event bubbling */
95 e.stopPropagation();
96 }).toggle(function () {
97 $(this).css({backgroundPosition: '-66px 0', width: '55px'})
98 .parents(settings.widgetSelector)
99 .find('.edit-box').show().find('input').focus();
100 return false;
101 },function () {
102 $(this).css({backgroundPosition: '', width: '24px'})
103 .parents(settings.widgetSelector)
104 .find('.edit-box').hide();
105 return false;
106 }).appendTo($(settings.handleSelector,this));
107 $('<div class="edit-box" style="display:none;"/>')
108 .append('<ul><li class="item"><label>Nuevo tÃtulo:</label><input value="' + $('h3',this).text() + '"/></li>')
109 .append((function(){
110 var colorList = '<li class="item"><label>Nuevo color:</label><ul class="colors">';
111 $(thisWidgetSettings.colorClasses).each(function () {
112 colorList += '<li class="' + this + '"/>';
113 });
114 return colorList + '</ul>';
115 })())
116 .append('</ul>')
117 .insertAfter($(settings.handleSelector,this));
118 }
119
120 });
121
122 $('.edit-box').each(function () {
123 $('input',this).keyup(function () {
124 $(this).parents(settings.widgetSelector).find('h3').text( $(this).val().length>20 ? $(this).val().substr(0,20)+'...' : $(this).val() );
125 iNettuts.savePreferences();
126 });
127 $('ul.colors li',this).click(function () {
128
129 var colorStylePattern = /\bcolor-[\w]{1,}\b/,
130 thisWidgetColorClass = $(this).parents(settings.widgetSelector).attr('class').match(colorStylePattern)
131 if (thisWidgetColorClass) {
132 $(this).parents(settings.widgetSelector)
133 .removeClass(thisWidgetColorClass[0])
134 .addClass($(this).attr('class').match(colorStylePattern)[0]);
135 /* Save prefs to cookie: */
136 iNettuts.savePreferences();
137 }
138 return false;
139
140 });
141 });
142
143 },
144
145 attachStylesheet : function (href) {
146 var $ = this.jQuery;
147 return $('<link href="' + href + '" rel="stylesheet" type="text/css" />').appendTo('head');
148 },
149
150 makeSortable : function () {
151 var iNettuts = this,
152 $ = this.jQuery,
153 settings = this.settings,
154 $sortableItems = (function () {
155 var notSortable = null;
156 $(settings.widgetSelector,$(settings.columns)).each(function (i) {
157 if (!iNettuts.getWidgetSettings(this.id).movable) {
158 if(!this.id) {
159 this.id = 'widget-no-id-' + i;
160 }
161 if (notSortable==null) { notSortable=''; }
162 notSortable += '#' + this.id + ',';
163 }
164 });
165 return $('> :not(' + notSortable + ')', settings.columns);
166 })();
167
168 $sortableItems.find(settings.handleSelector).css({
169 cursor: 'move'
170 }).mousedown(function (e) {
171 $sortableItems.css({width:''});
172 $(this).parent().css({
173 width: $(this).parent().width() + 'px'
174 });
175 }).mouseup(function () {
176 if(!$(this).parent().hasClass('dragging')) {
177 $(this).parent().css({width:''});
178 } else {
179 $(settings.columns).sortable('disable');
180 }
181 });
182
183 $(settings.columns).sortable({
184 items: $sortableItems,
185 connectWith: $(settings.columns),
186 handle: settings.handleSelector,
187 placeholder: 'widget-placeholder',
188 forcePlaceholderSize: true,
189 revert: 300,
190 delay: 100,
191 opacity: 0.8,
192 containment: 'document',
193 start: function (e,ui) {
194 $(ui.helper).addClass('dragging');
195 $("#estado").html("Moviendo bloques...");
196 },
197 stop: function (e,ui) {
198 $(ui.item).css({width:''}).removeClass('dragging');
199 $(settings.columns).sortable('enable');
200 /* Save prefs to cookie: */
201 iNettuts.savePreferences();
202 }
203 });
204 },
205
206 savePreferences : function () {
207 var iNettuts = this,
208 $ = this.jQuery,
209 settings = this.settings,
210 cookieString = '';
211
212 if(!settings.saveToCookie) {return;}
213
214 /* Assemble the cookie string */
215 $(settings.columns).each(function(i){
216 cookieString += (i===0) ? '' : '|';
217 $(settings.widgetSelector,this).each(function(i){
218 cookieString += (i===0) ? '' : ';';
219 /* ID of widget: */
220 cookieString += $(this).attr('id') + ',';
221 /* Color of widget (color classes) */
222 cookieString += $(this).attr('class').match(/\bcolor-[\w]{1,}\b/) + ',';
223 /* Title of widget (replaced used characters) */
224 cookieString += $('h3:eq(0)',this).text().replace(/\|/g,'[-PIPE-]').replace(/,/g,'[-COMMA-]') + ',';
225 /* Collapsed/not collapsed widget? : */
226 cookieString += $(settings.contentSelector,this).css('display') === 'none' ? 'collapsed' : 'not-collapsed';
227 });
228 });
229 $.cookie(settings.saveToCookie,cookieString,{
230 expires: 10
231 //path: '/'
232 });
233 $("#estado").html("Nuevo estado guardado");
234 },
235
236 sortWidgets : function () {
237 var iNettuts = this,
238 $ = this.jQuery,
239 settings = this.settings;
240
241 /* Read cookie: */
242 var cookie = $.cookie(settings.saveToCookie);
243 if(!settings.saveToCookie||!cookie) {
244 /* Get rid of loading gif and show columns: */
245 /*$('body').css({background:'#000'});*/
246 $(settings.columns).css({visibility:'visible'});
247 return;
248 }
249
250 /* For each column */
251 $(settings.columns).each(function(i){
252
253 var thisColumn = $(this),
254 widgetData = cookie.split('|')[i].split(';');
255
256 $(widgetData).each(function(){
257 if(!this.length) {return;}
258 var thisWidgetData = this.split(','),
259 clonedWidget = $('#' + thisWidgetData[0]),
260 colorStylePattern = /\bcolor-[\w]{1,}\b/,
261 thisWidgetColorClass = $(clonedWidget).attr('class').match(colorStylePattern);
262
263 /* Add/Replace new colour class: */
264 if (thisWidgetColorClass) {
265 $(clonedWidget).removeClass(thisWidgetColorClass[0]).addClass(thisWidgetData[1]);
266 }
267
268 /* Add/replace new title (Bring back reserved characters): */
269 $(clonedWidget).find('h3:eq(0)').html(thisWidgetData[2].replace(/\[-PIPE-\]/g,'|').replace(/\[-COMMA-\]/g,','));
270
271 /* Modify collapsed state if needed: */
272 if(thisWidgetData[3]==='collapsed') {
273 /* Set CSS styles so widget is in COLLAPSED state */
274 $(clonedWidget).addClass('collapsed');
275 }
276
277 $('#' + thisWidgetData[0]).remove();
278 $(thisColumn).append(clonedWidget);
279 });
280 });
281
282 /* All done, remove loading gif and show columns: */
283 /*$('body').css({background:'#000'});*/
284 $(settings.columns).css({visibility:'visible'});
285 }
286
287 };
288
289 iNettuts.init();
Pasted by Wu on
noviembre 18, 2009 at 19:40 |
Lang: javascript |
(289 lines of code)