/system/cms/modules/widgets/js/widgets.js
JavaScript | 462 lines | 337 code | 93 blank | 32 comment | 21 complexity | c89b882febd535c8bc08637501679bef MD5 | raw file
- jQuery(function($){
- $.extend($.ui.accordion.prototype, {
- refresh: function(){
- this.destroy();
- this.widget().accordion(this.options)
- return this;
- }
- });
- pyro.cache.widget_forms = {
- add :{},
- edit :{}
- }
- pyro.widgets = {
- $areas : null,
- $boxes : null,
- $instances : null,
- $container : null,
- selector : {
- container : 'null',
- instances : 'null'
- },
- ui_options: {
- // Widget Areas
- accordion: {
- collapsible : true,
- header : '> section > header',
- autoHeight : false,
- clearStyle : true
- },
- // Widget Instances List
- sortable: {
- cancel : '.no-sortable, a, :input, option',
- placeholder : 'empty-drop-item',
- start: function(){
- pyro.widgets.$areas.accordion('resize');
- },
- stop: function(){
- pyro.widgets.$areas.accordion('resize');
- },
- update: function(){
- var order = [];
-
- $(this).children('li').each(function(){
- order.push($(this).attr('id'));
- });
- $.post(SITE_URL + 'widgets/ajax/update_order', { order: order.join(',') });
- }
- },
- // Widget Box
- draggable: {
- revert : 'invalid',
- cursor : 'move',
- helper : 'clone',
- cursorAt : {left: 100},
- refreshPositions: true,
- start : function(e, ui){
- // Grab our desired width from the widget area list
- var width = pyro.widgets.$instances.width() - 22;
- // Setup our new dragging object
- $(this).addClass('widget-drag')
- $(ui.helper).css('width', width);
- },
- stop: function() {
- $(this).removeClass('widget-drag');
- }
- },
- // Widget Instances List
- droppable: {
- hoverClass : 'drop-hover',
- accept : '.widget-box',
- greedy : true,
- tolerance : 'pointer',
- over : function(){
- pyro.widgets.$areas.accordion('resize');
- },
- out : function(){
- pyro.widgets.$areas.accordion('resize');
- },
- drop : function(e, ui){
- $('li.empty-drop-item', this).show().addClass('loading');
- pyro.widgets.prep_instance_form(ui.draggable, $(pyro.widgets.selector.instances, this));
- }
- }
- },
- init: function()
- {
- // Create/Edit Areas
- $('a.create-area, .widget-area-content > .buttons > a.edit').livequery(function(){
- $(this).colorbox({
- scrolling : false,
- width :'700',
- height :'400',
- onComplete : function(){
- pyro.widgets.handle_area_form(this);
- }
- });
- });
- // Delete Areas
- $('.widget-area-content > .buttons > button[value=delete]').live('click-confirmed', function(e){
- e.preventDefault();
- var $area = $(this).parents('.js-widget-area'),
- id = $area.attr('data-id'),
- url = SITE_URL + 'admin/widgets/areas/delete/' + id;
- $.post(url, {}, function(response){
- if (response.status == 'success')
- {
- $area.slideUp(function(){
- $(this).remove();
- });
- }
- pyro.add_notification(response.message);
- }, 'json');
- });
- // Edit Instances
- $('.widget-actions > a.button.edit').live('click', function(e){
- e.preventDefault();
- var $anchor = $(this);
- // hide
- $anchor.parents('.widget-instance').slideUp(50, function(){
- // fake loading..
- $(this).siblings('li.empty-drop-item').clone()
- // move
- .insertAfter(this)
- // show
- .show().addClass('loading clone');
- // next step
- pyro.widgets.prep_instance_form($anchor, this, 'edit');
- });
- });
- // Delete Instances
- $('.widget-actions > button[value=delete]').live('click-confirmed', function(e){
- e.preventDefault();
- var $item = $(this).parents('li.widget-instance'),
- id = $item.attr('id').replace(/instance-/, ''),
- url = SITE_URL + 'admin/widgets/delete/' + id;
- $.post(url, {}, function(response){
- if (response.status == 'success')
- {
- $item.slideUp(50, function(){
- $(this).remove();
- });
- }
- pyro.add_notification(response.message);
- }, 'json');
- pyro.widgets.$areas.accordion('resize');
- });
- $.extend(true, pyro.widgets, {
- $areas : $('#widget-areas-list'),
- $boxes : $('.widget-box'),
- selector : {
- instances : '.widget-list > ol',
- container : '.widget-area-content'
- }
- });
- // Widget Instances Sortable
- pyro.widgets.$areas.bind('accordioncreate', function(){
- pyro.widgets.$instances = $(pyro.widgets.selector.instances).sortable(pyro.widgets.ui_options.sortable);
- });
- // Widget Instances Droppable
- pyro.widgets.$areas.bind('accordioncreate', function(){
- pyro.widgets.$container = $(pyro.widgets.selector.container).droppable(pyro.widgets.ui_options.droppable);
- pyro.widgets.$areas.find('> section > header').droppable({
- accept: '.widget-box',
- addClasses: false,
- greedy: true,
- tolerance: 'pointer',
- over: function(){
- pyro.widgets.$areas.accordion('option', 'active', this);
- }
- });
- });
- // Widget Areas Accordion
- pyro.widgets.$areas.accordion(pyro.widgets.ui_options.accordion);
- // Widget Boxes Draggable
- pyro.widgets.$boxes.draggable(pyro.widgets.ui_options.draggable);
- // Create a slug
- pyro.generate_slug('input[name="name"]', 'input[name="slug"]');
- // MANAGE ------------------------------------------------------------------------------
- $('#widgets-list > tbody').livequery(function(){
- $(this).sortable({
- handle: 'span.move-handle',
- stop: function(){
- $('#widgets-list > tbody > tr').removeClass('alt');
- $('#widgets-list > tbody > tr:nth-child(even)').addClass('alt');
- var order = [];
- $('#widgets-list > tbody > tr input[name="action_to\[\]"]').each(function(){
- order.push(this.value);
- });
- order = order.join(',');
- $.post(SITE_URL + 'widgets/ajax/update_order/widget', { order: order });
- }
- });
- });
- },
- handle_area_form: function(anchor)
- {
- var $loading = $('#cboxLoadingOverlay, #cboxLoadingGraphic'),
- $cbox = $('#cboxLoadedContent'),
- $submit = $cbox.find('button[value=save]'),
- $cancel = $cbox.find('.button.cancel'),
- $form = $cbox.find('form'),
- url = $(anchor).attr('href');
- $cancel.click(function(e){
- e.preventDefault();
- $.colorbox.close();
- });
- $submit.click(function(e){
- e.preventDefault();
- var data = $form.slideUp().serialize();
- $loading.show();
- $.post(url, data, function(response){
- var callback = false;
- if (response.status == 'success')
- {
- if (response.title)
- {
- // editing replace area title
- }
- if (response.html)
- {
- pyro.widgets.$areas
- .html(response.html)
- .accordion('refresh');
- if (response.active)
- {
- pyro.widgets.$areas.accordion('option', 'active', response.active);
- }
- }
- url.match(/create/) && $form.get(0).reset();
- callback = function(){
- $.colorbox.resize();
- $.colorbox.close();
- };
- }
- else
- {
- callback = $.colorbox.resize;
- }
- $loading.hide();
- $form.slideDown();
- pyro.add_notification(response.message, {ref: $cbox, method: 'prepend'}, callback);
- }, 'json');
- });
- $.colorbox.resize();
- },
- update_area: function(){
- var url = SITE_URL + 'admin/widgets/areas';
- pyro.widgets.$areas.load(url, function(){
- $(this).accordion('refresh');
- });
- },
- prep_instance_form: function(item, container, action)
- {
- action || (action = 'add');
- var key = (action == 'add') ? $(item).attr('id').replace(/^widget-/, '') : $(container).attr('id').replace(/^instance-/, ''),
- url = (action == 'add') ? SITE_URL + 'admin/widgets/create/' + key : $(item).attr('href');
- // known? receive the action form
- if (key in pyro.cache.widget_forms[action])
- {
- // next step
- return pyro.widgets.add_instance_form(pyro.cache.widget_forms[action][key], container, action, key);
- }
- $.get(url, function(response){
- response = '<li id="' + action + '-instance-box" class="box widget-instance no-sortable">' +
- response + '</li>';
- // write action form into cache
- pyro.cache.widget_forms[action][key] = response;
- pyro.widgets.add_instance_form(response, container, action, key);
- }, 'html');
- },
- add_instance_form: function(item, container, action, key)
- {
- var widget = {
- $item: $(item),
- $container: $(container)
- }, method = 'appendTo';
- if (action === 'edit')
- {
- widget.$container.parent().children('li.empty-drop-item.clone').slideUp(50, function(){
- $(this).remove();
- });
- method = 'insertAfter';
- }
- else
- {
- widget.$container.children('li.empty-drop-item').hide().removeClass('loading');
- }
- pyro.widgets.handle_instance_form(widget.$item[method](widget.$container).slideDown(200, function(){
- pyro.widgets.$boxes.draggable('disable');
- pyro.widgets.$areas.accordion('resize');
- }).children('form'), action, key);
- },
- handle_instance_form: function(form, action, key)
- {
- var $form = $(form),
- $submit = $form.find('#instance-actions button[value=save]'),
- $cancel = $form.find('#instance-actions a.cancel')
- area_id = $form.parents('.js-widget-area').attr('data-id'),
- url = $form.attr('action');
- if ($form.data('has_events'))
- {
- return;
- }
- $form.data('has_events', true);
- $cancel.click(function(e){
- e.preventDefault();
- var callback = action === 'edit' ? function(){
- $('li#instance-'+key).slideDown(function(){
- pyro.widgets.$areas.accordion('resize');
- });
- } : false;
- pyro.widgets.rm_instance_form($form, action, key, callback);
- });
- $submit.click(function(e){
- e.preventDefault();
- var data = $form.serialize() + (action === 'add' ? '&widget_area_id=' + area_id : '');
- $.post(url, data, function(response){
- var callback = false,
- options = {};
- if (response.status == 'success')
- {
- callback = function(){
- pyro.widgets.rm_instance_form($form, action, key, function(){
- pyro.widgets.update_area();
- var $active = pyro.widgets.$areas.find('> section > header:eq('+pyro.widgets.$areas.accordion('option', 'active')+')').parent();
- if (response.active && response.active !== ('#' + $active.attr('id') + ' header'))
- {
- pyro.widgets.$areas.accordion('option', 'active', response.active);
- }
- });
- }
- }
- else
- {
- options = {
- ref: $form.children('header:eq(0)')
- }
- }
- pyro.add_notification(response.message, options, callback);
- }, 'json');
- });
- },
- rm_instance_form: function(form, action, key, callback)
- {
- $(form).parent().slideUp(50, function(){
- action === 'add'
- ? $(this).remove()
- : key
- ? pyro.cache.widget_forms[action][key] = $(this).detach()
- : pyro.cache.widget_forms[action] = {};
- pyro.widgets.$boxes.draggable('enable');
- pyro.widgets.$areas.accordion('resize');
- callback && callback();
- });
- }
- // ,scroll_to: function(ele){
- // $('html, body').animate({
- // scrollTop: $(ele).offset().top
- // }, 1000);
- // }
- };
-
- pyro.widgets.init();
- // Slide toggle for widget codes
- $(".instance-code").livequery('click', function(){
- $('#'+$(this).attr('id')+'-wrap').toggle();
- });
- // Select code
- $(".widget-code").focus(function(){$(this).select()});
- $(".widget-code").mouseup(function(e){e.preventDefault();});
- });