Friday, 24 June 2011

jQuery plugin template

(function($) {
 //Set default settings
 //These will be overridden by the values passed to the plugin
 var settings = {
  foo: false,
  bar: true
 };
 //Define public methods
 var methods = {
  init: function(options) {
   return this.each(function() {
    var $this = $(this),
     data = $this.data('pluginName');
    if(options) {
     //Override plugin settings with options passed
     $.extend(settings, options);
    };
    if(!data) {
     //If data isn't set, plugin hasn't been run before
     //so do your initial setup
     //Set any persistent data
     $this.data('pluginName', {
      runCount: 0
     });
     $this.pluginName('foobar');
    } else {
     $this.pluginName('foobar');
    }
   });
  },
  foobar: function(options) {
   return this.each(function() {
    var $this = $(this),
     data = $this.data('pluginName');
    data.runCount++;
    if(options) {
     //Override plugin settings with options passed
     $.extend(settings, options);
    };
    if(settings.foo) {
     $this.append('<div>Foo ' + data.runCount + '</div>');
    }
    if(settings.bar) {
     $this.append('<div>Bar ' + data.runCount + '</div>');
    }
   });
  }
 };
 $.fn.pluginName = function(method) {
  var $this = $(this);
  if(methods[method]) {
   return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  } else if(typeof method === 'object' || ! method) {
   return methods.init.apply(this, arguments);
  } else {
   $.error('Method ' +  method + ' does not exist on jQuery.pluginName');
  };
 };
})(jQuery);

You call this plugin like so:

jQuery('.mydiv').pluginName();

or custom settings:

jQuery('.mydiv').pluginName({foo:true,bar:false});

Once initialised you can use the public methods:

jQuery('.mydiv').pluginName('foobar', {bar:true});

Thursday, 23 June 2011

Simple front end editing with feeditadvanced

If you need to allow people to edit things other than pages and content on the front end of your TYPO3 site you can use some simple typoscript and feeditadvanced to achieve it. The following example lets you edit front end users on the storage page 13.

temp.recordEditor = CONTENT
temp.recordEditor {
    table = fe_users
    select.pidInList = 13
    renderObj = COA_INT
    renderObj {
        10 = TEXT
        10 {
            field = name
            wrap =<div>|</div>
            stdWrap.editPanel = 1
            stdWrap.editPanel {
                allow = edit,new,delete,hide
                line = 10
                label = %s
                onlyCurrentPid = 0
                previewBorder = 0
                edit.displayRecord = 1
            }
        }
    }
}



Then you just have to attach this to the page somewhere (eg page.10 < temp.recordEditor). You can edit any table this way (tt_address, tt_news, your own custom table) by changing the table and field selection.

Of course anyone who wants to edit the records will have to be logged into the back end and have proper access to the page/records. You can allow users from the front end to edit things by using the simulate back end user extension: http://typo3.org/extensions/repository/view/simulatebe/current/

You may need to setup feeditadvanced specially for this, I use the following TSConfig:

FeEdit.disable = 0
FeEdit.useAjax = 0
FeEdit.reloadPageOnContentUpdate = 1
FeEdit.clickContentToEdit = 1
FeEdit.menuBar.disable = 1


You seem to need reloadPageOnContentUpdate because I find the records don't get updated properly unless the page is reloaded.