Modifier un code ajax

Modifier un code ajax - HTML/CSS - Programmation

Marsh Posté le 02-02-2011 à 14:21:54    

Bonjour à tous !
 
Je viens demander votre aide pour modifier un code, celui du script "iNettuts".
Celui-ci permet d'afficher des fenêtres qu'on peut supprimer, bouger de colones en colones, éditer, etc.
 
J'ai besoin d'intégrer ce script à mon site pour que chaque inscrit puisse configurer son profil en bougeant les fenetres, les supprimant, tout ça serlié à la base de donnée.
 
Mon soucis est que je n'arrive pas à éditer le code pour permettre pour l'instant de pouvoir éditer le texte "Lorem ipsum dolor sit amet..." qui est un texte ne faisant pas partie de l'édition.
 
Comment puis-je rajouter un champ qui s'enregistrera aussi dans la bdd etc ?
 
Voilà le code entier :
 

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


 
Pourriez-vous m'aider ? =)
 
EDIT : C'est bon j'ai réussit, alors qu'il y a deux minutes encore je pensais que c'était impossible, il faut juste fouiller et être curieux et logique =P


Message édité par nardoum le 02-02-2011 à 15:07:06
Reply

Marsh Posté le 02-02-2011 à 14:21:54   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed