From cea598f9d43670c0f21763945e8497048d5d5de4 Mon Sep 17 00:00:00 2001 From: Josh Caldwell Date: Mon, 12 Mar 2012 08:11:07 -0400 Subject: [PATCH 01/15] [#1050724] - committing patch for context ui from contextual links --- context_ui/context_ui.module | 104 ++++++++++++++++++++++++++++++++++++++ context_ui/context_ui_dialog.css | 37 +++++++++++++ context_ui/context_ui_dialog.js | 53 +++++++++++++++++++ 3 files changed, 194 insertions(+), 0 deletions(-) create mode 100644 context_ui/context_ui_dialog.css create mode 100644 context_ui/context_ui_dialog.js diff --git a/context_ui/context_ui.module b/context_ui/context_ui.module index adf927b..1d3d312 100644 --- a/context_ui/context_ui.module +++ b/context_ui/context_ui.module @@ -85,6 +85,18 @@ function context_ui_menu() { 'type' => MENU_LOCAL_TASK, 'weight' => 3, ); + $items['context-ui/activate'] = array( + 'title' => 'Activate Context UI', + 'access arguments' => TRUE, + 'page callback' => 'context_ui_activate', + 'type' => MENU_CALLBACK + ); + $items['context-ui/deactivate'] = array( + 'title' => 'deactivate Context UI', + 'access arguments' => TRUE, + 'page callback' => 'context_ui_deactivate', + 'type' => MENU_CALLBACK + ); return $items; } @@ -259,6 +271,12 @@ function context_ui_settings($form, &$form_state) { } } } + $form['context_ui_dialog_enabled'] = array( + '#type' => 'checkbox', + '#title' => t('Use Context Editor Dialog'), + '#default_value' => context_ui_dialog_is_enabled(), + '#description' => t('When enabled all contextual links will have a Edit Layout link that will refresh the page with the context editor in a dialog box.'), + ); $form = system_settings_form($form); $form['#submit'][] = 'context_ui_settings_submit'; return $form; @@ -271,3 +289,89 @@ function context_ui_settings($form, &$form_state) { function context_ui_settings_submit($form, &$form_state) { variable_set('menu_rebuild_needed', TRUE); } + + +/** + * context_ui_dialog_is_enabled test if the dialog is enabled + */ +function context_ui_dialog_is_enabled() { + + return variable_get("context_ui_dialog_enabled", FALSE); +} + +/** + * implements hook_page_alter() + * + * If we have the dialog enabled and active build the dialog + * and add to the page + */ +function context_ui_page_alter(&$page) { + $contexts = context_active_contexts(); + if ( + context_ui_dialog_is_enabled() && + context_isset('context_ui', 'context_ui_editor_present') + ) { + $contexts = context_active_contexts(); + $form = drupal_get_form('context_ui_editor', $contexts); + //$form = drupal_get_form('context_ui_editor', array($context)); + $path = drupal_get_path("module", 'context_ui'); + drupal_add_library('system', 'ui.dialog'); + drupal_add_js($path . '/context_ui_dialog.js', array('type' => 'file', 'weight' => 50)); + drupal_add_css($path . '/context_ui_dialog.css'); + + $page['content']['context_ui_editor'] = array( + 0 => array( + '#type' => 'markup', + '#markup' => '', + ), + ); + } +} + +/** + * implements hook_menu_contextual_links_alter() + * + * we we have the dialog enabled lets add a link to all contextual links + * to activate it. + */ +function context_ui_menu_contextual_links_alter(&$links, $router_item, $root_path) { + if(context_ui_dialog_is_enabled() && + !context_isset('context_ui', 'context_ui_editor_present')) { + $links['layout'] = array( + 'href' => 'context-ui/activate', + 'title' => t('Configure Layout'), + 'localized_options' => array( + 'query' => array('destination'=> $_GET['q']), + 'options' => array('html' => FALSE, 'attributes' => array()), + ), + ); + } +} + +/** + * page call back activating the context_ui inline editor dialog + */ +function context_ui_activate() { + $_SESSION['context_ui_active'] = TRUE; + drupal_goto($_GET['destination']); +} + +/** + * page call back deactivating the context_ui inline editor dialog + */ +function context_ui_deactivate() { + $_SESSION['context_ui_active'] = FALSE; + drupal_goto($_GET['destination']); +} + +/** + * implements hook_init() + * + * if the session say we should have an active dialog set a context variable to tell everything else + */ +function context_ui_init() { + $active = isset($_SESSION['context_ui_active']) && $_SESSION['context_ui_active']; + if($active) { + context_set('context_ui', 'context_ui_editor_present', TRUE); + } +} diff --git a/context_ui/context_ui_dialog.css b/context_ui/context_ui_dialog.css new file mode 100644 index 0000000..80891c1 --- /dev/null +++ b/context_ui/context_ui_dialog.css @@ -0,0 +1,37 @@ +#context_ui_dialog-context-ui { + width: 550px; + display:none; +} + +#context_ui_dialog-context-ui ul { + margin: 0; +} +#context_ui_dialog-context-ui ul li { + padding: 0; + list-style: none; +} +#context_ui_dialog-context-ui div.admin-pane-condition, +#context_ui_dialog-context-ui div.admin-pane-reaction-theme, +#context_ui_dialog-context-ui div.admin-pane-reaction-theme_html { + display: none; +} + +.boxes-box-editing { + background: none repeat scroll 0 0 #EEEEDD; + display: inline-block; + padding: 3px; +} + +body.context-editing div.contextual-links-wrapper { + right: 0; + top: 40px; +} + +form.context-editing li.context-editable { + opacity: .2; +} +form.context-editing li.context-editing { + visibility : visible; + display : list-item; + opacity: 1; +} diff --git a/context_ui/context_ui_dialog.js b/context_ui/context_ui_dialog.js new file mode 100644 index 0000000..1c07187 --- /dev/null +++ b/context_ui/context_ui_dialog.js @@ -0,0 +1,53 @@ +(function ($) { + Drupal.behaviors.context_ui_dialog = { attach: function(context) { + $('#context_ui_dialog-context-ui').dialog({ + width: 350, + height: 450, + //position: 'left', + position: [0, 75], + zIndex: 0, + draggable: false, + resizable: false, + title: 'Context Editor', + hide: 'slide', + open: function () { + $('#context_ui_dialog-context-ui').show(); + $('#context_ui_dialog-context-ui').parent().css('position', 'fixed'); + + $('div.ui-dialog-titlebar').click(function () { + $('#context_ui_dialog-context-ui').toggle(400); + }); + + $(".context-block-addable").mousedown(function () { + $('#context_ui_dialog-context-ui').attr('location', $('#context_ui_dialog-context-ui').parent().css('left')); + $('#context_ui_dialog-context-ui').parent().animate({'left':-300}, 1000); + $('body').one('mouseup',function () { + $('#context_ui_dialog-context-ui').parent().animate({'left':$('#context_ui_dialog-context-ui').attr('location')}, 1000); + }); + }); + }, + close: function () { + window.location.href = "/context-ui/deactivate?destination=" + window.location.pathname.replace(/^./,""); + } + }); + + // Hide the context editor if we're editing or adding a box + if ($('#boxes-box-form').length || $('.boxes-box-editing').length) { + $('#context_ui_dialog-context-ui').hide(); + $('#context-ui-editor .links a.done').click(); + } + else { + $('#context_ui_dialog-context-ui').show(); + } + + // Trigger Edit mode (init) + $('#context-ui-editor .links a.edit').first().click(); + + // Conceal Section title, subtitle and class + $('div.context-block-browser').nextAll('.form-item').hide(); + + // Add a class to body + $('body').once().addClass('context-field-editor'); + } + }; +})(jQuery); -- 1.7.0.4 From 4af48441714e7918a417e2d92041a05f07853388 Mon Sep 17 00:00:00 2001 From: Josh Caldwell Date: Mon, 12 Mar 2012 08:54:43 -0400 Subject: [PATCH 02/15] Various code cleanup from the patch and pushing region markers to the top of each region --- context_ui/context_ui.module | 18 +++++++++++++----- plugins/context_reaction_block.inc | 11 ++++++++++- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/context_ui/context_ui.module b/context_ui/context_ui.module index 1d3d312..7765899 100644 --- a/context_ui/context_ui.module +++ b/context_ui/context_ui.module @@ -92,7 +92,7 @@ function context_ui_menu() { 'type' => MENU_CALLBACK ); $items['context-ui/deactivate'] = array( - 'title' => 'deactivate Context UI', + 'title' => 'Deactivate Context UI', 'access arguments' => TRUE, 'page callback' => 'context_ui_deactivate', 'type' => MENU_CALLBACK @@ -300,7 +300,7 @@ function context_ui_dialog_is_enabled() { } /** - * implements hook_page_alter() + * Implementation of hook_page_alter(). * * If we have the dialog enabled and active build the dialog * and add to the page @@ -313,8 +313,8 @@ function context_ui_page_alter(&$page) { ) { $contexts = context_active_contexts(); $form = drupal_get_form('context_ui_editor', $contexts); - //$form = drupal_get_form('context_ui_editor', array($context)); - $path = drupal_get_path("module", 'context_ui'); + + $path = drupal_get_path('module', 'context_ui'); drupal_add_library('system', 'ui.dialog'); drupal_add_js($path . '/context_ui_dialog.js', array('type' => 'file', 'weight' => 50)); drupal_add_css($path . '/context_ui_dialog.css'); @@ -329,7 +329,7 @@ function context_ui_page_alter(&$page) { } /** - * implements hook_menu_contextual_links_alter() + * Implementation of hook_menu_contextual_links_alter(). * * we we have the dialog enabled lets add a link to all contextual links * to activate it. @@ -375,3 +375,11 @@ function context_ui_init() { context_set('context_ui', 'context_ui_editor_present', TRUE); } } + +/** + * Ajax callback to get the list of available blocks + * + */ +function context_ui_get_available_blocks() { + drupal_json_output(array('lols' => 'testing')); +} \ No newline at end of file diff --git a/plugins/context_reaction_block.inc b/plugins/context_reaction_block.inc index 2f1ae04..fbea2a3 100644 --- a/plugins/context_reaction_block.inc +++ b/plugins/context_reaction_block.inc @@ -293,6 +293,7 @@ class context_reaction_block extends context_reaction { * Add markup for making a region editable. */ protected function editable_region($region, $build) { + if ($this->is_editable_region($region) && (!empty($build) || variable_get('context_reaction_block_all_regions', FALSE) || @@ -301,8 +302,16 @@ class context_reaction_block extends context_reaction { global $theme; $regions = system_region_list($theme); $name = isset($regions[$region]) ? $regions[$region] : $region; - $build['context']['#markup'] = "{$name}"; + // The negative weight + sorted will push our region marker to the top of the region + $build['context'] = array( + '#prefix' => '
', + '#markup' => "{$name}", + '#suffix' => '
', + '#weight' => -100, + ); + $build['#sorted'] = FALSE; } + return $build; } -- 1.7.0.4 From 7fac2e42888d17f97c1f1f5e63d9bdd952f19760 Mon Sep 17 00:00:00 2001 From: Josh Caldwell Date: Mon, 12 Mar 2012 09:35:35 -0400 Subject: [PATCH 03/15] Added some more js for adding a block --- context_ui/context_ui_dialog.css | 12 ++++++++++++ context_ui/context_ui_dialog.js | 17 +++++++++++++++++ 2 files changed, 29 insertions(+), 0 deletions(-) diff --git a/context_ui/context_ui_dialog.css b/context_ui/context_ui_dialog.css index 80891c1..97ebd9f 100644 --- a/context_ui/context_ui_dialog.css +++ b/context_ui/context_ui_dialog.css @@ -35,3 +35,15 @@ form.context-editing li.context-editing { display : list-item; opacity: 1; } + +.context-ui-editor-placeholder { + position: relative; +} + +.context-ui-add-link { + font-size:12px; + position:absolute; + right:5px; + top: 10px; + color:#fff; +} \ No newline at end of file diff --git a/context_ui/context_ui_dialog.js b/context_ui/context_ui_dialog.js index 1c07187..4d610ab 100644 --- a/context_ui/context_ui_dialog.js +++ b/context_ui/context_ui_dialog.js @@ -48,6 +48,23 @@ // Add a class to body $('body').once().addClass('context-field-editor'); + + + //TODO - Can we get this to work with contextual links instead? + $('.context-ui-editor-placeholder', context).not('.context-ui-processed') + .each(function(index, el) { + var link = $(''); + link.text(Drupal.t('Add a Block')).addClass('context-ui-add-link'); + + var name = $('.context-block-region', el).attr('id'); + name = name.replace('context-block-region-', ''); + link.click(function(e){ + $('#context_ui_dialog-context-ui').toggle(400); + //TODO : Put something here + }); + + $(el).append(link).addClass('context-ui-processed'); + }); } }; })(jQuery); -- 1.7.0.4 From a9caef75f99ac18a0622fb9c42655f9719f6543f Mon Sep 17 00:00:00 2001 From: Josh Caldwell Date: Wed, 14 Mar 2012 15:15:42 -0400 Subject: [PATCH 04/15] More work - basic add working, styling still wack --- context_ui/context_ui_dialog.css | 11 ---- context_ui/context_ui_dialog.js | 24 +-------- plugins/context_reaction_block.css | 15 +++++ plugins/context_reaction_block.js | 102 ++++++++++++++++++++++++------------ 4 files changed, 86 insertions(+), 66 deletions(-) diff --git a/context_ui/context_ui_dialog.css b/context_ui/context_ui_dialog.css index 97ebd9f..abdcb09 100644 --- a/context_ui/context_ui_dialog.css +++ b/context_ui/context_ui_dialog.css @@ -36,14 +36,3 @@ form.context-editing li.context-editing { opacity: 1; } -.context-ui-editor-placeholder { - position: relative; -} - -.context-ui-add-link { - font-size:12px; - position:absolute; - right:5px; - top: 10px; - color:#fff; -} \ No newline at end of file diff --git a/context_ui/context_ui_dialog.js b/context_ui/context_ui_dialog.js index 4d610ab..3079bf2 100644 --- a/context_ui/context_ui_dialog.js +++ b/context_ui/context_ui_dialog.js @@ -1,4 +1,5 @@ (function ($) { + Drupal.behaviors.context_ui_dialog = { attach: function(context) { $('#context_ui_dialog-context-ui').dialog({ width: 350, @@ -18,13 +19,6 @@ $('#context_ui_dialog-context-ui').toggle(400); }); - $(".context-block-addable").mousedown(function () { - $('#context_ui_dialog-context-ui').attr('location', $('#context_ui_dialog-context-ui').parent().css('left')); - $('#context_ui_dialog-context-ui').parent().animate({'left':-300}, 1000); - $('body').one('mouseup',function () { - $('#context_ui_dialog-context-ui').parent().animate({'left':$('#context_ui_dialog-context-ui').attr('location')}, 1000); - }); - }); }, close: function () { window.location.href = "/context-ui/deactivate?destination=" + window.location.pathname.replace(/^./,""); @@ -50,21 +44,7 @@ $('body').once().addClass('context-field-editor'); - //TODO - Can we get this to work with contextual links instead? - $('.context-ui-editor-placeholder', context).not('.context-ui-processed') - .each(function(index, el) { - var link = $(''); - link.text(Drupal.t('Add a Block')).addClass('context-ui-add-link'); - - var name = $('.context-block-region', el).attr('id'); - name = name.replace('context-block-region-', ''); - link.click(function(e){ - $('#context_ui_dialog-context-ui').toggle(400); - //TODO : Put something here - }); - - $(el).append(link).addClass('context-ui-processed'); - }); + } }; })(jQuery); diff --git a/plugins/context_reaction_block.css b/plugins/context_reaction_block.css index de42f0b..3d5c264 100644 --- a/plugins/context_reaction_block.css +++ b/plugins/context_reaction_block.css @@ -193,3 +193,18 @@ body.context-editing .draggable:hover a.context-block-remove { #context-blockform .tabledrag-toggle-weight-wrapper { margin-bottom:0; } + +.context-ui-add-link { + font-size:12px; + position:absolute; + left:0px; + top: 0px; + padding:2px; + background:#fff; + z-index:100; + display:none; +} + +.region-inner:hover .context-ui-add-link{ + display:block; +} \ No newline at end of file diff --git a/plugins/context_reaction_block.js b/plugins/context_reaction_block.js index 36933a1..ac00603 100644 --- a/plugins/context_reaction_block.js +++ b/plugins/context_reaction_block.js @@ -146,26 +146,6 @@ DrupalContextBlockEditor = function(editor) { this.blocks = {}; this.regions = {}; - // Category selector handler. - // Also set to "Choose a category" option as browsers can retain - // form values from previous page load. - $('select.context-block-browser-categories', editor).change(function() { - var category = $(this).val(); - var params = { - containment: 'document', - revert: true, - dropOnEmpty: true, - placeholder: 'draggable-placeholder', - forcePlaceholderSize: true, - helper: 'clone', - appendTo: 'body', - connectWith: ($.ui.version === '1.6') ? ['.ui-sortable'] : '.ui-sortable' - }; - $('div.category', editor).hide().sortable('destroy'); - $('div.category-'+category, editor).show().sortable(params); - }); - $('select.context-block-browser-categories', editor).val(0).change(); - return this; }; @@ -190,8 +170,70 @@ DrupalContextBlockEditor.prototype.initBlocks = function(blocks) { DrupalContextBlockEditor.prototype.initRegions = function(regions) { this.regions = regions; + var ref = this; + + $(regions).not('.context-ui-processed') + .each(function(index, el) { + var link = $(''); + link.text(Drupal.t('Add a Block')).addClass('context-ui-add-link'); + + var name = $('.context-block-region', el).attr('id'); + name = name.replace('context-block-region-', ''); + link.click(function(e){ + ref.showBlockBrowser(this); + }); + + $(el).append(link).addClass('context-ui-processed'); + }); + $('.context-block-browser').hide(); }; +DrupalContextBlockEditor.prototype.showBlockBrowser = function(region) { + + $('#context_ui_dialog-context-ui').toggle(400); + + var activeId = $('.context-editing', this.editor).attr('id').replace('-trigger', ''), + context = $('#' + activeId)[0]; + + this.browser = $('.context-block-browser', context); + var self = this; + + this.browser.show().dialog({ + modal : true, + close : function() { + self.browser.dialog('destroy'); + self.browser.hide().appendTo(context); + $('#context_ui_dialog-context-ui').toggle(400); + } + }); + + var innerRegion = $('.context-ui-editor-placeholder', $(region).parent()); + + $('.context-block-browser-categories', this.browser).change(function(e) { + $('.category', self.browser).hide(); + $('.category-' + $(this).val()).show(); + }); + + + if(this.addToRegion) { + $('.context-block-addable', this.browser).unbind('click', this.addToRegion) + } + + this.addToRegion = function(e){ + var ui = { + 'item' : $(this).clone(), + 'sender' : $(region) + }; + self.browser.dialog('close'); + + innerRegion.after(ui.item); + self.addBlock(e, ui, this.editor, activeId.replace('context-editable-', '')); + }; + + $('.context-block-addable', this.browser).bind('click', this.addToRegion); + +} + /** * Update UI to match the current block states. */ @@ -201,14 +243,10 @@ DrupalContextBlockEditor.prototype.updateBlocks = function() { // For all enabled blocks, mark corresponding addables as having been added. $('.block, .admin-block').each(function() { var bid = $(this).attr('id').split('block-')[1]; // Ugh. - $('#context-block-addable-'+bid, browser).draggable('disable').addClass('context-block-added').removeClass('context-block-addable'); }); // For all hidden addables with no corresponding blocks, mark as addable. $('.context-block-item', browser).each(function() { var bid = $(this).attr('id').split('context-block-addable-')[1]; - if ($('#block-'+bid).size() === 0) { - $(this).draggable('enable').removeClass('context-block-added').addClass('context-block-addable'); - } }); // Mark empty regions. @@ -235,10 +273,6 @@ DrupalContextBlockEditor.prototype.updateRegion = function(event, ui, region, op // jQuery UI 1.8 $('.draggable-placeholder', region).size() === 1 && $('.block:has(a.context-block)', region).size() == 0 - // jQuery UI 1.6 - // $('div.draggable-placeholder', region).size() === 0 && - // $('div.block:has(a.context-block)', region).size() == 1 && - // $('div.block:has(a.context-block)', region).attr('id') == ui.item.attr('id') ) { $(region).addClass('context-block-region-empty'); } @@ -271,10 +305,12 @@ DrupalContextBlockEditor.prototype.addBlock = function(event, ui, editor, contex params.context_block = bid + ',' + context; // Replace item with loading block. + //ui.sender.append(ui.item); + var blockLoading = $('
'); ui.item.addClass('context-block-added'); ui.item.after(blockLoading); - ui.sender.append(ui.item); + $.getJSON(Drupal.settings.contextBlockEditor.path, params, function(data) { if (data.status) { @@ -286,7 +322,8 @@ DrupalContextBlockEditor.prototype.addBlock = function(event, ui, editor, contex $(this).replaceWith(newBlock); self.initBlocks(newBlock); self.updateBlocks(); - Drupal.attachBehaviors(); + console.log(newBlock); + Drupal.attachBehaviors(newBlock); }); } else { @@ -319,7 +356,7 @@ DrupalContextBlockEditor.prototype.setState = function() { }); self.state[region] = blocks; }); - + console.log(this.state); // Serialize here and set form element value. $('input.context-block-editor-state', this.editor).val(JSON.stringify(this.state)); }; @@ -365,7 +402,6 @@ DrupalContextBlockEditor.prototype.enableTextSelect = function() { */ DrupalContextBlockEditor.prototype.editStart = function(editor, context) { var self = this; - // This is redundant to the start handler found in context_ui.js. // However it's necessary that we trigger this class addition before // we call .sortable() as the empty regions need to be visible. @@ -374,7 +410,7 @@ DrupalContextBlockEditor.prototype.editStart = function(editor, context) { this.disableTextSelect(); this.initBlocks($('.block:has(a.context-block.edit-'+context+')')); - this.initRegions($('a.context-block-region').parent()); + this.initRegions($('a.context-block-region').parent().parent()); this.updateBlocks(); // First pass, enable sortables on all regions. -- 1.7.0.4 From 8574a3c0631d0f968578def207ee058eb32be846 Mon Sep 17 00:00:00 2001 From: Josh Caldwell Date: Thu, 15 Mar 2012 10:31:04 -0400 Subject: [PATCH 05/15] Further build work --- context_ui/context_ui.module | 7 +++++-- plugins/context_reaction_block.css | 13 ++++++------- plugins/context_reaction_block.inc | 2 ++ plugins/context_reaction_block.js | 20 +++++++++++++------- theme/context-block-browser.tpl.php | 19 ++++++++++--------- 5 files changed, 36 insertions(+), 25 deletions(-) diff --git a/context_ui/context_ui.module b/context_ui/context_ui.module index 7765899..3923bfb 100644 --- a/context_ui/context_ui.module +++ b/context_ui/context_ui.module @@ -128,7 +128,6 @@ function context_ui_editor($form, &$form_state, $contexts) { $items = array(); $form_context = array(); ksort($contexts); - foreach ($contexts as $context) { $edit = l(t('Edit'), $_GET['q'], array('fragment' => $context->name, 'attributes' => array('class' => array('edit')))); $done = l(t('Done'), $_GET['q'], array('fragment' => $context->name, 'attributes' => array('class' => array('done')))); @@ -222,9 +221,13 @@ function context_ui_editor_submit(&$form, &$form_state) { foreach ($form_state['values']['contexts'] as $name => $values) { $original_conditions = $values['context']->conditions; $original_reactions = $values['context']->reactions; + $context = context_ui_editor_process($values); - if (($original_conditions !== $context->conditions) || ($original_reactions !== $context->reactions)) { + + if (TRUE||($original_conditions !== $context->conditions) || ($original_reactions !== $context->reactions)) { + dpm('trying to save'); if (context_save($context)) { + dpm('saved'); drupal_set_message(t('Saved %title.', array( '%title' => (!empty($context->description) ? $context->description : $context->name) ))); diff --git a/plugins/context_reaction_block.css b/plugins/context_reaction_block.css index 3d5c264..641e92c 100644 --- a/plugins/context_reaction_block.css +++ b/plugins/context_reaction_block.css @@ -9,7 +9,11 @@ /** * Browser */ - .context-block-browser .category { display:none; } + +.context-block-browser .blocks { + height:85%; + overflow: auto; +} .context-block-item, .context-block-browser .draggable-placeholder, @@ -202,9 +206,4 @@ body.context-editing .draggable:hover a.context-block-remove { padding:2px; background:#fff; z-index:100; - display:none; -} - -.region-inner:hover .context-ui-add-link{ - display:block; -} \ No newline at end of file +} \ No newline at end of file diff --git a/plugins/context_reaction_block.inc b/plugins/context_reaction_block.inc index fbea2a3..9a59a5b 100644 --- a/plugins/context_reaction_block.inc +++ b/plugins/context_reaction_block.inc @@ -275,6 +275,7 @@ class context_reaction_block extends context_reaction { * Add markup for making a block editable. */ protected function editable_block($block) { + if (!empty($block->content['#markup']) || element_children($block->content)) { $block->content = array( 'content' => $block->content, @@ -286,6 +287,7 @@ class context_reaction_block extends context_reaction { unset($block->content['content']['#contextual_links']); } } + return $block; } diff --git a/plugins/context_reaction_block.js b/plugins/context_reaction_block.js index ac00603..c789bdc 100644 --- a/plugins/context_reaction_block.js +++ b/plugins/context_reaction_block.js @@ -115,6 +115,7 @@ DrupalContextBlockForm = function(blockForm) { $(block).html(""+ text + "" + select + "X"); // add block item to region + //TODO : Fix it so long blocks don't get stuck when added to top regions and dragged towards bottom regions var base = "context-blockform-region-"+ region; Drupal.tableDrag[base].makeDraggable(block); $('table#'+base).append(block); @@ -204,14 +205,20 @@ DrupalContextBlockEditor.prototype.showBlockBrowser = function(region) { self.browser.dialog('destroy'); self.browser.hide().appendTo(context); $('#context_ui_dialog-context-ui').toggle(400); - } + }, + height: (.8 * $(window).height()), + minHeight:400 }); var innerRegion = $('.context-ui-editor-placeholder', $(region).parent()); $('.context-block-browser-categories', this.browser).change(function(e) { - $('.category', self.browser).hide(); - $('.category-' + $(this).val()).show(); + if ($(this).val() === 0) { + $('.category', self.browser).show(); + } else { + $('.category', self.browser).hide(); + $('.category-' + $(this).val()).show(); + } }); @@ -322,7 +329,6 @@ DrupalContextBlockEditor.prototype.addBlock = function(event, ui, editor, contex $(this).replaceWith(newBlock); self.initBlocks(newBlock); self.updateBlocks(); - console.log(newBlock); Drupal.attachBehaviors(newBlock); }); } @@ -356,7 +362,6 @@ DrupalContextBlockEditor.prototype.setState = function() { }); self.state[region] = blocks; }); - console.log(this.state); // Serialize here and set form element value. $('input.context-block-editor-state', this.editor).val(JSON.stringify(this.state)); }; @@ -407,7 +412,7 @@ DrupalContextBlockEditor.prototype.editStart = function(editor, context) { // we call .sortable() as the empty regions need to be visible. $(document.body).addClass('context-editing'); this.editor.addClass('context-editing'); - + $('.context-ui-add-link').show(); this.disableTextSelect(); this.initBlocks($('.block:has(a.context-block.edit-'+context+')')); this.initRegions($('a.context-block-region').parent().parent()); @@ -417,7 +422,6 @@ DrupalContextBlockEditor.prototype.editStart = function(editor, context) { $(this.regions).each(function() { var region = $(this); var params = { - containment: 'document', revert: true, dropOnEmpty: true, placeholder: 'draggable-placeholder', @@ -463,6 +467,8 @@ DrupalContextBlockEditor.prototype.editFinish = function() { } $(this).removeClass('draggable'); }); + $('.context-ui-add-link').hide(); + this.regions.sortable('destroy'); this.setState(); diff --git a/theme/context-block-browser.tpl.php b/theme/context-block-browser.tpl.php index 2359951..e12e780 100644 --- a/theme/context-block-browser.tpl.php +++ b/theme/context-block-browser.tpl.php @@ -1,17 +1,18 @@
+
+ $module_blocks): ?> - $module_blocks): ?> + +
+
+ + $block)); ?> + +
+ - -
- - $block)); ?>
- - - -
-- 1.7.0.4 From 4364c58f6950d7951a987f25b9b5702e5157d209 Mon Sep 17 00:00:00 2001 From: Josh Caldwell Date: Thu, 15 Mar 2012 11:33:03 -0400 Subject: [PATCH 06/15] Code cleanup --- plugins/context_reaction_block.css | 35 ++- plugins/context_reaction_block.js | 587 +++++++++++++++++------------------- 2 files changed, 301 insertions(+), 321 deletions(-) diff --git a/plugins/context_reaction_block.css b/plugins/context_reaction_block.css index 641e92c..8764ce5 100644 --- a/plugins/context_reaction_block.css +++ b/plugins/context_reaction_block.css @@ -15,49 +15,50 @@ overflow: auto; } - .context-block-item, - .context-block-browser .draggable-placeholder, +.context-block-item, +.context-block-browser .draggable-placeholder, #admin-toolbar .context-block-browser .context-block-item { font-size:11px; line-height:20px; height:20px; - text-shadow:#333 0px 1px 0px; - color:#fff; + color:#333; - padding:5px 4px 4px 5px; + padding:3px 3px 3px 3px; margin:0px 1px 1px 0px; max-width:300px; white-space:nowrap; overflow:hidden; - background:url(context_reaction_block.png) 0px -40px repeat-x; + background:#efefef; + border:1px solid #ddd; position:relative; + border-radius:5px; -moz-border-radius:5px; - -webkit-border-radius:5px; -moz-user-select:none; -webkit-user-select:none; - } +} + .context-block-addable { cursor: pointer; } - .context-block-item span.icon { + .context-block-item span.icon { background:url(context_reaction_block.png) 0px -80px no-repeat; display:block; width:20px; height:20px; float:left; margin-right:5px; - } + } - .context-block-loading { max-width:none; } + .context-block-loading { max-width:none; } - .context-block-loading span.icon { + .context-block-loading span.icon { background-position:-20px -80px; float:none; margin:0px auto; - } + } - .context-block-browser .draggable-placeholder { padding:2px 1px 1px 2px; } + .context-block-browser .draggable-placeholder { padding:2px 1px 1px 2px; } #admin-toolbar.horizontal .context-block-browser .draggable-placeholder, #admin-toolbar.horizontal .context-block-browser .context-block-item { @@ -65,10 +66,10 @@ margin-right:1px; padding-right:9px; float:left; - } + } + - .context-block-addable { cursor: move; } - .context-block-added { display:none !important; } + .context-block-added { display:none !important; } /** * Inline editing elements ============================================ diff --git a/plugins/context_reaction_block.js b/plugins/context_reaction_block.js index c789bdc..04c76ae 100644 --- a/plugins/context_reaction_block.js +++ b/plugins/context_reaction_block.js @@ -150,333 +150,312 @@ DrupalContextBlockEditor = function(editor) { return this; }; -DrupalContextBlockEditor.prototype.initBlocks = function(blocks) { - var self = this; - this.blocks = blocks; - blocks.each(function() { - if($(this).hasClass('context-block-empty')) { - $(this).removeClass('context-block-hidden'); - } - $(this).addClass('draggable'); - $(this).prepend($('')); - $(this).prepend($('').click(function() { - $(this).parent ('.block').eq(0).fadeOut('medium', function() { - $(this).remove(); - self.updateBlocks(); - }); - return false; - })); - }); -}; - -DrupalContextBlockEditor.prototype.initRegions = function(regions) { - this.regions = regions; - var ref = this; - - $(regions).not('.context-ui-processed') - .each(function(index, el) { - var link = $(''); - link.text(Drupal.t('Add a Block')).addClass('context-ui-add-link'); - - var name = $('.context-block-region', el).attr('id'); - name = name.replace('context-block-region-', ''); - link.click(function(e){ - ref.showBlockBrowser(this); - }); - - $(el).append(link).addClass('context-ui-processed'); +DrupalContextBlockEditor.prototype = { + initBlocks : function(blocks) { + var self = this; + this.blocks = blocks; + blocks.each(function() { + if($(this).hasClass('context-block-empty')) { + $(this).removeClass('context-block-hidden'); + } + $(this).addClass('draggable'); + $(this).prepend($('')); + $(this).prepend($('').click(function() { + $(this).parent ('.block').eq(0).fadeOut('medium', function() { + $(this).remove(); + self.updateBlocks(); + }); + return false; + })); }); - $('.context-block-browser').hide(); -}; + }, + initRegions : function(regions) { + this.regions = regions; + var ref = this; + + $(regions).not('.context-ui-processed') + .each(function(index, el) { + var link = $(''); + link.text(Drupal.t('Add a Block')).addClass('context-ui-add-link'); + + var name = $('.context-block-region', el).attr('id'); + name = name.replace('context-block-region-', ''); + link.click(function(e){ + ref.showBlockBrowser(this); + }); -DrupalContextBlockEditor.prototype.showBlockBrowser = function(region) { - - $('#context_ui_dialog-context-ui').toggle(400); - - var activeId = $('.context-editing', this.editor).attr('id').replace('-trigger', ''), - context = $('#' + activeId)[0]; - - this.browser = $('.context-block-browser', context); - var self = this; - - this.browser.show().dialog({ - modal : true, - close : function() { - self.browser.dialog('destroy'); - self.browser.hide().appendTo(context); + $(el).append(link).addClass('context-ui-processed'); + }); + $('.context-block-browser').hide(); + }, + showBlockBrowser : function(region) { + var self = this, + toggled = false; + //close the dialog if its open + if($('#context_ui_dialog-context-ui').css('display') != 'none'){ $('#context_ui_dialog-context-ui').toggle(400); - }, - height: (.8 * $(window).height()), - minHeight:400 - }); - - var innerRegion = $('.context-ui-editor-placeholder', $(region).parent()); - - $('.context-block-browser-categories', this.browser).change(function(e) { - if ($(this).val() === 0) { - $('.category', self.browser).show(); - } else { - $('.category', self.browser).hide(); - $('.category-' + $(this).val()).show(); + toggled = true; } - }); - - - if(this.addToRegion) { - $('.context-block-addable', this.browser).unbind('click', this.addToRegion) - } + //figure out the id of the context + var activeId = $('.context-editing', this.editor).attr('id').replace('-trigger', ''), + context = $('#' + activeId)[0]; - this.addToRegion = function(e){ - var ui = { - 'item' : $(this).clone(), - 'sender' : $(region) - }; - self.browser.dialog('close'); + this.browser = $('.context-block-browser', context); - innerRegion.after(ui.item); - self.addBlock(e, ui, this.editor, activeId.replace('context-editable-', '')); - }; - - $('.context-block-addable', this.browser).bind('click', this.addToRegion); - -} - -/** - * Update UI to match the current block states. - */ -DrupalContextBlockEditor.prototype.updateBlocks = function() { - var browser = $('div.context-block-browser'); - - // For all enabled blocks, mark corresponding addables as having been added. - $('.block, .admin-block').each(function() { - var bid = $(this).attr('id').split('block-')[1]; // Ugh. - }); - // For all hidden addables with no corresponding blocks, mark as addable. - $('.context-block-item', browser).each(function() { - var bid = $(this).attr('id').split('context-block-addable-')[1]; - }); - - // Mark empty regions. - $(this.regions).each(function() { - if ($('.block:has(a.context-block)', this).size() > 0) { - $(this).removeClass('context-block-region-empty'); - } - else { - $(this).addClass('context-block-region-empty'); - } - }); -}; + //show a dialog for the blocks list + this.browser.show().dialog({ + modal : true, + close : function() { + self.browser.dialog('destroy'); + self.browser.hide().appendTo(context); + if(toggled){ + $('#context_ui_dialog-context-ui').toggle(400); + } + }, + height: (.8 * $(window).height()), + minHeight:400 + }); -/** - * Live update a region. - */ -DrupalContextBlockEditor.prototype.updateRegion = function(event, ui, region, op) { - switch (op) { - case 'over': - $(region).removeClass('context-block-region-empty'); - break; - case 'out': - if ( - // jQuery UI 1.8 - $('.draggable-placeholder', region).size() === 1 && - $('.block:has(a.context-block)', region).size() == 0 - ) { - $(region).addClass('context-block-region-empty'); + //handle showing / hiding block items when a different category is selected + $('.context-block-browser-categories', this.browser).change(function(e) { + //if no category is selected we want to show all the items + if (!$(this).val()) { + $('.category', self.browser).show(); + } else { + $('.category', self.browser).hide(); + $('.category-' + $(this).val()).show(); } - break; - } -}; - -/** - * Remove script elements while dragging & dropping. - */ -DrupalContextBlockEditor.prototype.scriptFix = function(event, ui, editor, context) { - if ($('script', ui.item)) { - var placeholder = $(Drupal.settings.contextBlockEditor.scriptPlaceholder); - var label = $('div.handle label', ui.item).text(); - placeholder.children('strong').html(label); - $('script', ui.item).parent().empty().append(placeholder); - } -}; + }); + + //if we already have the function for a different context, rebind it so we don't get dupes + if(this.addToRegion) { + $('.context-block-addable', this.browser).unbind('click', this.addToRegion) + } -/** - * Add a block to a region through an AHAH load of the block contents. - */ -DrupalContextBlockEditor.prototype.addBlock = function(event, ui, editor, context) { - var self = this; - if (ui.item.is('.context-block-addable')) { - var bid = ui.item.attr('id').split('context-block-addable-')[1]; - - // Construct query params for our AJAX block request. - var params = Drupal.settings.contextBlockEditor.params; - params.context_block = bid + ',' + context; - - // Replace item with loading block. - //ui.sender.append(ui.item); - - var blockLoading = $('
'); - ui.item.addClass('context-block-added'); - ui.item.after(blockLoading); + //protected function for adding a clicked block to a region + this.addToRegion = function(e){ + var ui = { + 'item' : $(this).clone(), + 'sender' : $(region) + }; + self.browser.dialog('close'); + $('.context-ui-editor-placeholder', $(region).parent()).after(ui.item); + self.addBlock(e, ui, this.editor, activeId.replace('context-editable-', '')); + }; + $('.context-block-addable', this.browser).bind('click', this.addToRegion); + }, + // Update UI to match the current block states. + updateBlocks : function() { + var browser = $('div.context-block-browser'); + + // For all enabled blocks, mark corresponding addables as having been added. + $('.block, .admin-block').each(function() { + var bid = $(this).attr('id').split('block-')[1]; // Ugh. + }); + // For all hidden addables with no corresponding blocks, mark as addable. + $('.context-block-item', browser).each(function() { + var bid = $(this).attr('id').split('context-block-addable-')[1]; + }); - $.getJSON(Drupal.settings.contextBlockEditor.path, params, function(data) { - if (data.status) { - var newBlock = $(data.block); - if ($('script', newBlock)) { - $('script', newBlock).remove(); - } - blockLoading.fadeOut(function() { - $(this).replaceWith(newBlock); - self.initBlocks(newBlock); - self.updateBlocks(); - Drupal.attachBehaviors(newBlock); - }); + // Mark empty regions. + $(this.regions).each(function() { + if ($('.block:has(a.context-block)', this).size() > 0) { + $(this).removeClass('context-block-region-empty'); } else { - blockLoading.fadeOut(function() { $(this).remove(); }); + $(this).addClass('context-block-region-empty'); } }); - } - else if (ui.item.is(':has(a.context-block)')) { - self.updateBlocks(); - } -}; + }, + // Live update a region + updateRegion : function(event, ui, region, op) { + switch (op) { + case 'over': + $(region).removeClass('context-block-region-empty'); + break; + case 'out': + if ( + // jQuery UI 1.8 + $('.draggable-placeholder', region).size() === 1 && + $('.block:has(a.context-block)', region).size() == 0 + ) { + $(region).addClass('context-block-region-empty'); + } + break; + } + }, + // Remove script elements while dragging & dropping. + scriptFix : function(event, ui, editor, context) { + if ($('script', ui.item)) { + var placeholder = $(Drupal.settings.contextBlockEditor.scriptPlaceholder); + var label = $('div.handle label', ui.item).text(); + placeholder.children('strong').html(label); + $('script', ui.item).parent().empty().append(placeholder); + } + }, + // Add a block to a region through an AJAX load of the block contents. + addBlock : function(event, ui, editor, context) { + var self = this; + if (ui.item.is('.context-block-addable')) { + var bid = ui.item.attr('id').split('context-block-addable-')[1]; + + // Construct query params for our AJAX block request. + var params = Drupal.settings.contextBlockEditor.params; + params.context_block = bid + ',' + context; + + // Replace item with loading block. + //ui.sender.append(ui.item); + + var blockLoading = $('
'); + ui.item.addClass('context-block-added'); + ui.item.after(blockLoading); + + + $.getJSON(Drupal.settings.contextBlockEditor.path, params, function(data) { + if (data.status) { + var newBlock = $(data.block); + if ($('script', newBlock)) { + $('script', newBlock).remove(); + } + blockLoading.fadeOut(function() { + $(this).replaceWith(newBlock); + self.initBlocks(newBlock); + self.updateBlocks(); + Drupal.attachBehaviors(newBlock); + }); + } + else { + blockLoading.fadeOut(function() { $(this).remove(); }); + } + }); + } + else if (ui.item.is(':has(a.context-block)')) { + self.updateBlocks(); + } + }, + // Update form hidden field with JSON representation of current block visibility states. + setState : function() { + var self = this; -/** - * Update form hidden field with JSON representation of current block visibility states. - */ -DrupalContextBlockEditor.prototype.setState = function() { - var self = this; - - $(this.regions).each(function() { - var region = $('a.context-block-region', this).attr('id').split('context-block-region-')[1]; - var blocks = []; - $('a.context-block', $(this)).each(function() { - if ($(this).attr('class').indexOf('edit-') != -1) { - var bid = $(this).attr('id').split('context-block-')[1]; - var context = $(this).attr('class').split('edit-')[1].split(' ')[0]; - context = context ? context : 0; - var block = {'bid': bid, 'context': context}; - blocks.push(block); - } + $(this.regions).each(function() { + var region = $('a.context-block-region', this).attr('id').split('context-block-region-')[1]; + var blocks = []; + $('a.context-block', $(this)).each(function() { + if ($(this).attr('class').indexOf('edit-') != -1) { + var bid = $(this).attr('id').split('context-block-')[1]; + var context = $(this).attr('class').split('edit-')[1].split(' ')[0]; + context = context ? context : 0; + var block = {'bid': bid, 'context': context}; + blocks.push(block); + } + }); + self.state[region] = blocks; + }); + // Serialize here and set form element value. + $('input.context-block-editor-state', this.editor).val(JSON.stringify(this.state)); + }, + //Disable text selection. + disableTextSelect : function() { + if ($.browser.safari) { + $('.block:has(a.context-block):not(:has(input,textarea))').css('WebkitUserSelect','none'); + } + else if ($.browser.mozilla) { + $('.block:has(a.context-block):not(:has(input,textarea))').css('MozUserSelect','none'); + } + else if ($.browser.msie) { + $('.block:has(a.context-block):not(:has(input,textarea))').bind('selectstart.contextBlockEditor', function() { return false; }); + } + else { + $(this).bind('mousedown.contextBlockEditor', function() { return false; }); + } + }, + //Enable text selection. + enableTextSelect : function() { + if ($.browser.safari) { + $('*').css('WebkitUserSelect',''); + } + else if ($.browser.mozilla) { + $('*').css('MozUserSelect',''); + } + else if ($.browser.msie) { + $('*').unbind('selectstart.contextBlockEditor'); + } + else { + $(this).unbind('mousedown.contextBlockEditor'); + } + }, + // Start editing. Attach handlers, begin draggable/sortables. + editStart : function(editor, context) { + var self = this; + // This is redundant to the start handler found in context_ui.js. + // However it's necessary that we trigger this class addition before + // we call .sortable() as the empty regions need to be visible. + $(document.body).addClass('context-editing'); + this.editor.addClass('context-editing'); + $('.context-ui-add-link').show(); + this.disableTextSelect(); + this.initBlocks($('.block:has(a.context-block.edit-'+context+')')); + this.initRegions($('a.context-block-region').parent().parent()); + this.updateBlocks(); + + // First pass, enable sortables on all regions. + $(this.regions).each(function() { + var region = $(this); + var params = { + revert: true, + dropOnEmpty: true, + placeholder: 'draggable-placeholder', + forcePlaceholderSize: true, + items: '> .block:has(a.context-block.editable)', + handle: 'a.context-block-handle', + start: function(event, ui) { self.scriptFix(event, ui, editor, context); }, + stop: function(event, ui) { self.addBlock(event, ui, editor, context); }, + receive: function(event, ui) { self.addBlock(event, ui, editor, context); }, + over: function(event, ui) { self.updateRegion(event, ui, region, 'over'); }, + out: function(event, ui) { self.updateRegion(event, ui, region, 'out'); } + }; + region.sortable(params); }); - self.state[region] = blocks; - }); - // Serialize here and set form element value. - $('input.context-block-editor-state', this.editor).val(JSON.stringify(this.state)); -}; - -/** - * Disable text selection. - */ -DrupalContextBlockEditor.prototype.disableTextSelect = function() { - if ($.browser.safari) { - $('.block:has(a.context-block):not(:has(input,textarea))').css('WebkitUserSelect','none'); - } - else if ($.browser.mozilla) { - $('.block:has(a.context-block):not(:has(input,textarea))').css('MozUserSelect','none'); - } - else if ($.browser.msie) { - $('.block:has(a.context-block):not(:has(input,textarea))').bind('selectstart.contextBlockEditor', function() { return false; }); - } - else { - $(this).bind('mousedown.contextBlockEditor', function() { return false; }); - } -}; - -/** - * Enable text selection. - */ -DrupalContextBlockEditor.prototype.enableTextSelect = function() { - if ($.browser.safari) { - $('*').css('WebkitUserSelect',''); - } - else if ($.browser.mozilla) { - $('*').css('MozUserSelect',''); - } - else if ($.browser.msie) { - $('*').unbind('selectstart.contextBlockEditor'); - } - else { - $(this).unbind('mousedown.contextBlockEditor'); - } -}; - -/** - * Start editing. Attach handlers, begin draggable/sortables. - */ -DrupalContextBlockEditor.prototype.editStart = function(editor, context) { - var self = this; - // This is redundant to the start handler found in context_ui.js. - // However it's necessary that we trigger this class addition before - // we call .sortable() as the empty regions need to be visible. - $(document.body).addClass('context-editing'); - this.editor.addClass('context-editing'); - $('.context-ui-add-link').show(); - this.disableTextSelect(); - this.initBlocks($('.block:has(a.context-block.edit-'+context+')')); - this.initRegions($('a.context-block-region').parent().parent()); - this.updateBlocks(); - - // First pass, enable sortables on all regions. - $(this.regions).each(function() { - var region = $(this); - var params = { - revert: true, - dropOnEmpty: true, - placeholder: 'draggable-placeholder', - forcePlaceholderSize: true, - items: '> .block:has(a.context-block.editable)', - handle: 'a.context-block-handle', - start: function(event, ui) { self.scriptFix(event, ui, editor, context); }, - stop: function(event, ui) { self.addBlock(event, ui, editor, context); }, - receive: function(event, ui) { self.addBlock(event, ui, editor, context); }, - over: function(event, ui) { self.updateRegion(event, ui, region, 'over'); }, - out: function(event, ui) { self.updateRegion(event, ui, region, 'out'); } - }; - region.sortable(params); - }); - - // Second pass, hook up all regions via connectWith to each other. - $(this.regions).each(function() { - $(this).sortable('option', 'connectWith', ['.ui-sortable']); - }); - // Terrible, terrible workaround for parentoffset issue in Safari. - // The proper fix for this issue has been committed to jQuery UI, but was - // not included in the 1.6 release. Therefore, we do a browser agent hack - // to ensure that Safari users are covered by the offset fix found here: - // http://dev.jqueryui.com/changeset/2073. - if ($.ui.version === '1.6' && $.browser.safari) { - $.browser.mozilla = true; - } -}; + // Second pass, hook up all regions via connectWith to each other. + $(this.regions).each(function() { + $(this).sortable('option', 'connectWith', ['.ui-sortable']); + }); -/** - * Finish editing. Remove handlers. - */ -DrupalContextBlockEditor.prototype.editFinish = function() { - this.editor.removeClass('context-editing'); - this.enableTextSelect(); - - // Remove UI elements. - $(this.blocks).each(function() { - $('a.context-block-handle, a.context-block-remove', this).remove(); - if($(this).hasClass('context-block-empty')) { - $(this).addClass('context-block-hidden'); + // Terrible, terrible workaround for parentoffset issue in Safari. + // The proper fix for this issue has been committed to jQuery UI, but was + // not included in the 1.6 release. Therefore, we do a browser agent hack + // to ensure that Safari users are covered by the offset fix found here: + // http://dev.jqueryui.com/changeset/2073. + if ($.ui.version === '1.6' && $.browser.safari) { + $.browser.mozilla = true; } - $(this).removeClass('draggable'); - }); - $('.context-ui-add-link').hide(); + }, + // Finish editing. Remove handlers. + editFinish : function() { + this.editor.removeClass('context-editing'); + this.enableTextSelect(); + + // Remove UI elements. + $(this.blocks).each(function() { + $('a.context-block-handle, a.context-block-remove', this).remove(); + if($(this).hasClass('context-block-empty')) { + $(this).addClass('context-block-hidden'); + } + $(this).removeClass('draggable'); + }); + $('.context-ui-add-link').hide(); - this.regions.sortable('destroy'); + this.regions.sortable('destroy'); - this.setState(); + this.setState(); - // Unhack the user agent. - if ($.ui.version === '1.6' && $.browser.safari) { - $.browser.mozilla = false; + // Unhack the user agent. + if ($.ui.version === '1.6' && $.browser.safari) { + $.browser.mozilla = false; + } } -}; +}; //End of DrupalContextBlockEditor prototype })(jQuery); -- 1.7.0.4 From 70a577f7db89860adfb1b4bb016ee99c72f5f0e3 Mon Sep 17 00:00:00 2001 From: Josh Caldwell Date: Thu, 15 Mar 2012 21:53:16 -0400 Subject: [PATCH 07/15] More code cleanup, Addition of sliding context picker --- context_ui/context_ui.module | 22 +++------- context_ui/context_ui_dialog.css | 19 ++++++++- context_ui/context_ui_dialog.js | 88 ++++++++++++++++++++----------------- 3 files changed, 72 insertions(+), 57 deletions(-) diff --git a/context_ui/context_ui.module b/context_ui/context_ui.module index 3923bfb..508c718 100644 --- a/context_ui/context_ui.module +++ b/context_ui/context_ui.module @@ -142,18 +142,6 @@ function context_ui_editor($form, &$form_state, $contexts) { 'context' => array('#type' => 'value', '#value' => $context), ); - // Edit context conditions. - foreach (array_keys(context_conditions()) as $condition) { - $plugin = context_get_plugin('condition', $condition); - if (method_exists($plugin, 'editor_form') && ($plugin_form = $plugin->editor_form($context))) { - $form_context['condition'][$condition] = $plugin_form; - } - } - if (count(element_children($form_context['condition']))) { - $form_context['condition']['#title'] = t('Conditions'); - $form_context['condition']['#description'] = t('This context is active when any of the selected conditions are true.'); - } - // Edit context reactions. foreach (array_keys(context_reactions()) as $reaction) { $plugin = context_get_plugin('reaction', $reaction); @@ -225,9 +213,7 @@ function context_ui_editor_submit(&$form, &$form_state) { $context = context_ui_editor_process($values); if (TRUE||($original_conditions !== $context->conditions) || ($original_reactions !== $context->reactions)) { - dpm('trying to save'); if (context_save($context)) { - dpm('saved'); drupal_set_message(t('Saved %title.', array( '%title' => (!empty($context->description) ? $context->description : $context->name) ))); @@ -355,7 +341,7 @@ function context_ui_menu_contextual_links_alter(&$links, $router_item, $root_pat * page call back activating the context_ui inline editor dialog */ function context_ui_activate() { - $_SESSION['context_ui_active'] = TRUE; + $_SESSION['context_ui_active'] = $_GET['destination']; drupal_goto($_GET['destination']); } @@ -373,9 +359,13 @@ function context_ui_deactivate() { * if the session say we should have an active dialog set a context variable to tell everything else */ function context_ui_init() { - $active = isset($_SESSION['context_ui_active']) && $_SESSION['context_ui_active']; + $active = !empty($_SESSION['context_ui_active']) && + (base_path().$_SESSION['context_ui_active'] == request_uri()); if($active) { context_set('context_ui', 'context_ui_editor_present', TRUE); + } + else { + $_SESSION['context_ui_active'] = FALSE; } } diff --git a/context_ui/context_ui_dialog.css b/context_ui/context_ui_dialog.css index abdcb09..563adc9 100644 --- a/context_ui/context_ui_dialog.css +++ b/context_ui/context_ui_dialog.css @@ -1,6 +1,13 @@ #context_ui_dialog-context-ui { width: 550px; - display:none; + position:absolute; + background:#fff; + top:100px; + display:none; + z-index:9999999; + padding:10px; + border:2px solid #333; + } #context_ui_dialog-context-ui ul { @@ -36,3 +43,13 @@ form.context-editing li.context-editing { opacity: 1; } +.context-ui-dialog-open { + position: absolute; + background: white; + top: 50px; + padding: 10px; + width: 50px; + right:-72px; + border:2px solid #333; + border-left:0; +} diff --git a/context_ui/context_ui_dialog.js b/context_ui/context_ui_dialog.js index 3079bf2..01bfa03 100644 --- a/context_ui/context_ui_dialog.js +++ b/context_ui/context_ui_dialog.js @@ -1,50 +1,58 @@ (function ($) { - Drupal.behaviors.context_ui_dialog = { attach: function(context) { - $('#context_ui_dialog-context-ui').dialog({ - width: 350, - height: 450, - //position: 'left', - position: [0, 75], - zIndex: 0, - draggable: false, - resizable: false, - title: 'Context Editor', - hide: 'slide', - open: function () { - $('#context_ui_dialog-context-ui').show(); - $('#context_ui_dialog-context-ui').parent().css('position', 'fixed'); - - $('div.ui-dialog-titlebar').click(function () { - $('#context_ui_dialog-context-ui').toggle(400); + Drupal.behaviors.context_ui_dialog = { + attach: function(context) { + var selector = $('#context_ui_dialog-context-ui', context).not('context_ui_dialog-processed'); + + if(selector) { + selector.addClass('context_ui_dialog-processed'); + selector.detach(); + $('#page').prepend(selector); + + var labelOpen = Drupal.t('Select Context >>'); + var labelClose = Drupal.t('Hide <<'); + + // Create a tab to show/hide our edit area + var tab = $(''+labelClose+''); + selector.append(tab); + + selector.toggled = false; + var width = $(selector).outerWidth(); + tab.click(function(e){ + if(selector.toggled) { + selector.stop(true, false).animate({'left':0}, 400); + selector.toggled = false; + $(this).text(labelClose); + } else { + selector.stop(true, false).animate({'left':-width}, 400); + selector.toggled = true; + $(this).text(labelOpen); + } }); - }, - close: function () { - window.location.href = "/context-ui/deactivate?destination=" + window.location.pathname.replace(/^./,""); - } - }); - - // Hide the context editor if we're editing or adding a box - if ($('#boxes-box-form').length || $('.boxes-box-editing').length) { - $('#context_ui_dialog-context-ui').hide(); - $('#context-ui-editor .links a.done').click(); - } - else { - $('#context_ui_dialog-context-ui').show(); - } + //create a stop editing link + var stop = $('Stop Editing Layout'); + stop.attr('href', "/context-ui/deactivate?destination=" + window.location.pathname.replace(/^./,"")); + $('.buttons', selector).append(stop); - // Trigger Edit mode (init) - $('#context-ui-editor .links a.edit').first().click(); + // Hide the context editor if we're editing or adding a box + if ($('#boxes-box-form').length || $('.boxes-box-editing').length) { + $('#context_ui_dialog-context-ui').hide(); + $('#context-ui-editor .links a.done').click(); + } + else { + $('#context_ui_dialog-context-ui').show(); + } - // Conceal Section title, subtitle and class - $('div.context-block-browser').nextAll('.form-item').hide(); + // Trigger Edit mode (init) + $('#context-ui-editor .links a.edit').first().click(); - // Add a class to body - $('body').once().addClass('context-field-editor'); + // Conceal Section title, subtitle and class + $('div.context-block-browser').nextAll('.form-item').hide(); - - - } + // Add a class to body + $('body').once().addClass('context-field-editor'); + } + } }; })(jQuery); -- 1.7.0.4 From d20c310c01732199f39b17f9225fd283f5b88158 Mon Sep 17 00:00:00 2001 From: Josh Caldwell Date: Fri, 16 Mar 2012 13:27:53 -0400 Subject: [PATCH 08/15] Most things are working - updated ui --- context_ui/context_ui.css | 2 +- context_ui/context_ui_dialog.css | 61 ++++++++++++++++++++++------- context_ui/context_ui_dialog.js | 7 +-- context_ui/theme/filter.js | 66 ++++++++++++++++++++++++++++++++ plugins/context_reaction_block.css | 53 +++++++++++++++++++------ plugins/context_reaction_block.inc | 6 ++- plugins/context_reaction_block.js | 34 ++++++++-------- theme/context-block-browser.tpl.php | 7 ++- theme/context_reaction_block.theme.inc | 19 +++++++++- 9 files changed, 199 insertions(+), 56 deletions(-) create mode 100644 context_ui/theme/filter.js diff --git a/context_ui/context_ui.css b/context_ui/context_ui.css index 4c2231e..3b2f10a 100644 --- a/context_ui/context_ui.css +++ b/context_ui/context_ui.css @@ -89,7 +89,7 @@ table.context-admin input.form-text { width:90%; } .context-plugins { position:relative; margin:0px 0px 10px; - } +} .context-plugins .context-plugin-info { padding:10px 10px 9px; diff --git a/context_ui/context_ui_dialog.css b/context_ui/context_ui_dialog.css index 563adc9..44e8630 100644 --- a/context_ui/context_ui_dialog.css +++ b/context_ui/context_ui_dialog.css @@ -1,22 +1,19 @@ -#context_ui_dialog-context-ui { - width: 550px; - position:absolute; - background:#fff; - top:100px; - display:none; - z-index:9999999; - padding:10px; - border:2px solid #333; +#context_ui_dialog-context-ui a, #context_ui_dialog-context-ui li a.active { + color: #222; } - #context_ui_dialog-context-ui ul { margin: 0; } #context_ui_dialog-context-ui ul li { - padding: 0; + padding: 4px 0; list-style: none; } + +#context_ui_dialog-context-ui .buttons { + padding-top:15px; +} + #context_ui_dialog-context-ui div.admin-pane-condition, #context_ui_dialog-context-ui div.admin-pane-reaction-theme, #context_ui_dialog-context-ui div.admin-pane-reaction-theme_html { @@ -34,6 +31,10 @@ body.context-editing div.contextual-links-wrapper { top: 40px; } +.context_ui_dialog-stop { + float:right; +} + form.context-editing li.context-editable { opacity: .2; } @@ -42,14 +43,44 @@ form.context-editing li.context-editing { display : list-item; opacity: 1; } +#context_ui_dialog-context-ui { + width: 550px; + position:fixed; + background:#fff; + color:#222; + top:100px; + display:none; + z-index:9999999; + padding:10px; + border:2px solid #ccc; + font-weight:bold; + border-radius:0 6px 6px 0; + border-left: 0; + -moz-box-shadow: 3px 3px 4px #444; + -webkit-box-shadow: 3px 3px 4px #444; + box-shadow: 3px 3px 4px #444; + /* For IE 8 */ + -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')"; + /* For IE 5.5 - 7 */ + filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444'); +} .context-ui-dialog-open { + border-radius:0 6px 6px 0; position: absolute; - background: white; + background:#fff; + color:#222; top: 50px; padding: 10px; - width: 50px; - right:-72px; - border:2px solid #333; + width: 55px; + right:-77px; + border:2px solid #ccc; border-left:0; + -moz-box-shadow: 3px 3px 4px #444; + -webkit-box-shadow: 3px 3px 4px #444; + box-shadow: 3px 3px 4px #444; + /* For IE 8 */ + -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444')"; + /* For IE 5.5 - 7 */ + filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444'); } diff --git a/context_ui/context_ui_dialog.js b/context_ui/context_ui_dialog.js index 01bfa03..958df65 100644 --- a/context_ui/context_ui_dialog.js +++ b/context_ui/context_ui_dialog.js @@ -9,8 +9,8 @@ selector.detach(); $('#page').prepend(selector); - var labelOpen = Drupal.t('Select Context >>'); - var labelClose = Drupal.t('Hide <<'); + var labelOpen = Drupal.t('Select Context'); + var labelClose = Drupal.t('Hide'); // Create a tab to show/hide our edit area var tab = $(''+labelClose+''); @@ -44,9 +44,6 @@ $('#context_ui_dialog-context-ui').show(); } - // Trigger Edit mode (init) - $('#context-ui-editor .links a.edit').first().click(); - // Conceal Section title, subtitle and class $('div.context-block-browser').nextAll('.form-item').hide(); diff --git a/context_ui/theme/filter.js b/context_ui/theme/filter.js new file mode 100644 index 0000000..82daa1f --- /dev/null +++ b/context_ui/theme/filter.js @@ -0,0 +1,66 @@ +/** + * create a simple search filter thing for a list + */ +(function ($) { + Drupal.Filter = function (list, title, type, parent){ + this.list = list; + this.title = title; + //provide defaults for type and parent so bad things don't happen + if (!type) { var type = '*'; } + this.type = type; + if (!parent) { var parent = list; } + this.parent = parent; + + this.init(); + } + + Drupal.Filter.prototype = { + init : function(){ + this.wrapper = $('
'); + if(this.title){ + this.title = '

' + this.title + '

'; + this.wrapper.append(this.title); + } + this.input = $(''); + this.wrapper.append(this.input); + + $(this.parent).append(this.wrapper); + this.createHandlers(); + }, + createHandlers : function(){ + var self = this; + $(this.input).keyup(function(e){ + self.filter(); + }); + }, + filter : function(){ + //show all first off + $('*', this.list).show(); + //hide ignored items + if(this.input.val()) { + $('*', this.list).not(this.type).hide(); + } + + var regex = new RegExp(this.input.val(), 'i'); + + var self = this; + $(this.type, this.list).each(function(ind, el) { + var string = self.strip(el.innerHTML); + if(!regex.test(string)){ + $(el).hide(); + } else { //show the parent and any labels or whatever in the parent + var parent = $(el).parent().show(); + $('*', parent).not(self.type).show(); + } + }); + }, + strip : function(string){ + var strip = /<([^<|^>]*)>/i; + while(strip.test(string)){ + var matches = string.match(strip); + string = string.replace(strip, ''); + } + return string; + } + }; +})(jQuery); \ No newline at end of file diff --git a/plugins/context_reaction_block.css b/plugins/context_reaction_block.css index 8764ce5..e114959 100644 --- a/plugins/context_reaction_block.css +++ b/plugins/context_reaction_block.css @@ -9,10 +9,21 @@ /** * Browser */ +.context-block-browser { + width: 600px; +} .context-block-browser .blocks { - height:85%; + height:98%; overflow: auto; + float: left; + width: 320px; +} + +.context-block-browser .block-browser-sidebar { + float: left; + width: 250px; + padding: 0 0 0 15px; } .context-block-item, @@ -37,8 +48,10 @@ border-radius:5px; -moz-border-radius:5px; -moz-user-select:none; - -webkit-user-select:none; +- -webkit-user-select:none; } + + .context-block-addable { cursor: pointer; } .context-block-item span.icon { @@ -74,23 +87,37 @@ /** * Inline editing elements ============================================ */ -a.context-block-region { display:none; } +div.context-block-region {display: none;} a.context-block { display:none !important; } -body.context-editing .context-block-region-empty a.context-block-region { +body.context-editing div.context-block-region { -moz-border-radius:5px; -webkit-border-radius:5px; background:#666; color:#fff; - opacity:.25; + opacity: 0.5; + -moz-opacity: 0.5; + filter:alpha(opacity=50); display:block; height:40px; - line-height:40px; + line-height:24px; text-align:center; font-size:18px; white-space:nowrap; +} + +.context-block-region .region-name { + width:100%; + text-align:center; + font-size:18px; + color:#fff; + white-space:nowrap; + padding:; + display:block; + -moz-user-select:none; + -webkit-user-select:none; } body.context-editing .ui-sortable .block { opacity:.25; } @@ -199,12 +226,12 @@ body.context-editing .draggable:hover a.context-block-remove { margin-bottom:0; } -.context-ui-add-link { +a.context-ui-add-link, a:link.context-ui-add-link, a:visited.context-ui-add-link { + display:block; + width:100%; + text-align:center; font-size:12px; - position:absolute; - left:0px; - top: 0px; - padding:2px; - background:#fff; - z-index:100; + color:#fff; + cursor: pointer; + line-height:14px; } \ No newline at end of file diff --git a/plugins/context_reaction_block.inc b/plugins/context_reaction_block.inc index 9a59a5b..f1e6b8c 100644 --- a/plugins/context_reaction_block.inc +++ b/plugins/context_reaction_block.inc @@ -117,6 +117,7 @@ class context_reaction_block extends context_reaction { drupal_add_library('system', 'ui.droppable'); drupal_add_library('system', 'ui.sortable'); drupal_add_js(drupal_get_path('module', 'context_ui') . '/json2.js'); + drupal_add_js(drupal_get_path('module', 'context_ui') . '/theme/filter.js'); drupal_add_js(drupal_get_path('module', 'context') . '/plugins/context_reaction_block.js'); drupal_add_css(drupal_get_path('module', 'context') . '/plugins/context_reaction_block.css'); @@ -306,8 +307,9 @@ class context_reaction_block extends context_reaction { $name = isset($regions[$region]) ? $regions[$region] : $region; // The negative weight + sorted will push our region marker to the top of the region $build['context'] = array( - '#prefix' => '
', - '#markup' => "{$name}", + '#prefix' => "
", + '#markup' => "{$name}" . + "" . t('Add a block here.') . '', '#suffix' => '
', '#weight' => -100, ); diff --git a/plugins/context_reaction_block.js b/plugins/context_reaction_block.js index 04c76ae..a12cf87 100644 --- a/plugins/context_reaction_block.js +++ b/plugins/context_reaction_block.js @@ -75,6 +75,7 @@ DrupalContextBlockForm = function(blockForm) { $(this).parents('div.form-item').eq(0).show(); } }); + }; // make sure we update the state right before submits, this takes care of an @@ -175,16 +176,9 @@ DrupalContextBlockEditor.prototype = { $(regions).not('.context-ui-processed') .each(function(index, el) { - var link = $(''); - link.text(Drupal.t('Add a Block')).addClass('context-ui-add-link'); - - var name = $('.context-block-region', el).attr('id'); - name = name.replace('context-block-region-', ''); - link.click(function(e){ - ref.showBlockBrowser(this); - }); - - $(el).append(link).addClass('context-ui-processed'); + $('.context-ui-add-link', el).click(function(e){ + ref.showBlockBrowser($(this).parent()); + }).addClass('context-ui-processed'); }); $('.context-block-browser').hide(); }, @@ -202,6 +196,12 @@ DrupalContextBlockEditor.prototype = { this.browser = $('.context-block-browser', context); + //add the filter element to the block browser + if (!this.browser.attachedFilter) { + var parent = $('.block-browser-sidebar .filter', this.browser); + var list = $('.blocks', this.browser); + this.browser.attachedFilter = new Drupal.Filter (list, false, '.context-block-addable', parent); + } //show a dialog for the blocks list this.browser.show().dialog({ modal : true, @@ -213,13 +213,14 @@ DrupalContextBlockEditor.prototype = { } }, height: (.8 * $(window).height()), - minHeight:400 + minHeight:400, + width:615, }); //handle showing / hiding block items when a different category is selected $('.context-block-browser-categories', this.browser).change(function(e) { //if no category is selected we want to show all the items - if (!$(this).val()) { + if ($(this).val() == 0) { $('.category', self.browser).show(); } else { $('.category', self.browser).hide(); @@ -233,13 +234,14 @@ DrupalContextBlockEditor.prototype = { } //protected function for adding a clicked block to a region + console.log(region, 'region'); this.addToRegion = function(e){ var ui = { 'item' : $(this).clone(), 'sender' : $(region) }; self.browser.dialog('close'); - $('.context-ui-editor-placeholder', $(region).parent()).after(ui.item); + $(region).after(ui.item); self.addBlock(e, ui, this.editor, activeId.replace('context-editable-', '')); }; @@ -339,7 +341,7 @@ DrupalContextBlockEditor.prototype = { var self = this; $(this.regions).each(function() { - var region = $('a.context-block-region', this).attr('id').split('context-block-region-')[1]; + var region = $(this).attr('id').split('context-block-region-')[1]; var blocks = []; $('a.context-block', $(this)).each(function() { if ($(this).attr('class').indexOf('edit-') != -1) { @@ -393,10 +395,9 @@ DrupalContextBlockEditor.prototype = { // we call .sortable() as the empty regions need to be visible. $(document.body).addClass('context-editing'); this.editor.addClass('context-editing'); - $('.context-ui-add-link').show(); this.disableTextSelect(); this.initBlocks($('.block:has(a.context-block.edit-'+context+')')); - this.initRegions($('a.context-block-region').parent().parent()); + this.initRegions($('.context-block-region').parent()); this.updateBlocks(); // First pass, enable sortables on all regions. @@ -445,7 +446,6 @@ DrupalContextBlockEditor.prototype = { } $(this).removeClass('draggable'); }); - $('.context-ui-add-link').hide(); this.regions.sortable('destroy'); diff --git a/theme/context-block-browser.tpl.php b/theme/context-block-browser.tpl.php index e12e780..69e8a15 100644 --- a/theme/context-block-browser.tpl.php +++ b/theme/context-block-browser.tpl.php @@ -1,6 +1,4 @@
- -
$module_blocks): ?> @@ -15,4 +13,9 @@
+
+
+
+ +
diff --git a/theme/context_reaction_block.theme.inc b/theme/context_reaction_block.theme.inc index 06c6bbe..b794342 100644 --- a/theme/context_reaction_block.theme.inc +++ b/theme/context_reaction_block.theme.inc @@ -72,7 +72,7 @@ function theme_context_block_script_placeholder($text = '') { function template_preprocess_context_block_browser(&$vars) { $categories = array( '#type' => 'select', - '#options' => array(0 => '<' . t('Choose a category') . '>'), + '#options' => array(0 => '<' . t('All Categories') . '>'), '#attributes' => array('class' => array('context-block-browser-categories')), '#value' => 0, '#size' => 1, @@ -95,8 +95,25 @@ function template_preprocess_context_block_browser(&$vars) { } $blocks[$group][$block->bid] = $block; // Don't call theme('context_block_browser_item') to allow others to alter. } + + //add help text to tell people how to use the block browser + $help_text = array( + '#prefix' => '
', + '#markup' => t('To add a block to the current region, simply click on the block. You may use the category filter to filter by + block type or the search filter to find the block that you wish to add.'), + '#suffix' => '
', + ); + + $filter_label = array( + '#prefix' => '
', + '#markup' => t('Search Filter'), + '#suffix' => '
', + ); + $vars['categories'] = $categories; // Don't call theme('select') here to allow further preprocesses to alter the element. $vars['blocks'] = $blocks; + $vars['help_text'] = $help_text; + $vars['filter_label'] = $filter_label; } /** -- 1.7.0.4 From 88164337bc04ca98ea94e087aa818f08180654ce Mon Sep 17 00:00:00 2001 From: Josh Caldwell Date: Fri, 16 Mar 2012 18:26:19 -0400 Subject: [PATCH 09/15] Fully working version with UI --- context_ui/context_ui.module | 21 ++++++++++++++++--- context_ui/context_ui_dialog.css | 38 ++++++++++++++++++++--------------- context_ui/context_ui_dialog.js | 18 ++-------------- plugins/context_reaction_block.css | 15 ++++++++++++++ plugins/context_reaction_block.js | 17 +++++++++++++-- 5 files changed, 71 insertions(+), 38 deletions(-) diff --git a/context_ui/context_ui.module b/context_ui/context_ui.module index 508c718..8ada09a 100644 --- a/context_ui/context_ui.module +++ b/context_ui/context_ui.module @@ -168,6 +168,15 @@ function context_ui_editor($form, &$form_state, $contexts) { '#value' => t('Cancel'), '#submit' => array('context_ui_editor_cancel'), ); + + $form['stop'] = array( + '#markup' => l(t('Stop Editing Layout'), 'context-ui/deactivate', array( + 'query' => array('destination' => request_path()), + 'attributes' => array('class' => array('context_ui_dialog-stop')), + ) + ), + ); + return $form; } @@ -338,7 +347,7 @@ function context_ui_menu_contextual_links_alter(&$links, $router_item, $root_pat } /** - * page call back activating the context_ui inline editor dialog + * A page call back to activate the context_ui inline editor dialog. */ function context_ui_activate() { $_SESSION['context_ui_active'] = $_GET['destination']; @@ -346,7 +355,10 @@ function context_ui_activate() { } /** - * page call back deactivating the context_ui inline editor dialog + * A page call back to deactivate the context_ui inline editor dialog. + * This is semi unecessary as context editor will auto deactivate upon going to any + * page other than the destination from the start. However, its useful as a place + * to navigate to when deactivating context_ui_editor */ function context_ui_deactivate() { $_SESSION['context_ui_active'] = FALSE; @@ -354,13 +366,14 @@ function context_ui_deactivate() { } /** - * implements hook_init() + * Implemenation of hook_init(). * * if the session say we should have an active dialog set a context variable to tell everything else */ function context_ui_init() { $active = !empty($_SESSION['context_ui_active']) && - (base_path().$_SESSION['context_ui_active'] == request_uri()); + ($_SESSION['context_ui_active'] == request_path()); + if($active) { context_set('context_ui', 'context_ui_editor_present', TRUE); } diff --git a/context_ui/context_ui_dialog.css b/context_ui/context_ui_dialog.css index 44e8630..69eb9bf 100644 --- a/context_ui/context_ui_dialog.css +++ b/context_ui/context_ui_dialog.css @@ -31,8 +31,12 @@ body.context-editing div.contextual-links-wrapper { top: 40px; } -.context_ui_dialog-stop { +#context_ui_dialog-context-ui a.context_ui_dialog-stop, +#context_ui_dialog-context-ui a:link.context_ui_dialog-stop, +#context_ui_dialog-context-ui a:visited.context_ui_dialog-stop { float:right; + padding-top:18px; + color: #ad3f00; } form.context-editing li.context-editable { @@ -48,21 +52,22 @@ form.context-editing li.context-editing { position:fixed; background:#fff; color:#222; - top:100px; + top:140px; display:none; z-index:9999999; padding:10px; - border:2px solid #ccc; font-weight:bold; + border:1px solid #ddd; + border-left:0; border-radius:0 6px 6px 0; - border-left: 0; - -moz-box-shadow: 3px 3px 4px #444; - -webkit-box-shadow: 3px 3px 4px #444; - box-shadow: 3px 3px 4px #444; + /* Shadow */ + -moz-box-shadow: 3px 3px 4px #555; + -webkit-box-shadow: 3px 3px 4px #555; + box-shadow: 3px 3px 4px #555; /* For IE 8 */ - -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')"; + -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#555555')"; /* For IE 5.5 - 7 */ - filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444'); + filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#555555'); } .context-ui-dialog-open { @@ -73,14 +78,15 @@ form.context-editing li.context-editing { top: 50px; padding: 10px; width: 55px; - right:-77px; - border:2px solid #ccc; + right:-76px; + border:1px solid #ddd; border-left:0; - -moz-box-shadow: 3px 3px 4px #444; - -webkit-box-shadow: 3px 3px 4px #444; - box-shadow: 3px 3px 4px #444; + /* Shadow */ + -moz-box-shadow: 3px 3px 4px #555; + -webkit-box-shadow: 3px 3px 4px #555; + box-shadow: 3px 3px 4px #555; /* For IE 8 */ - -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444')"; + -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#555555')"; /* For IE 5.5 - 7 */ - filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444'); + filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#555555'); } diff --git a/context_ui/context_ui_dialog.js b/context_ui/context_ui_dialog.js index 958df65..04df66a 100644 --- a/context_ui/context_ui_dialog.js +++ b/context_ui/context_ui_dialog.js @@ -24,26 +24,14 @@ selector.toggled = false; $(this).text(labelClose); } else { - selector.stop(true, false).animate({'left':-width}, 400); + selector.stop(true, false).animate({'left':-width-4}, 400); selector.toggled = true; $(this).text(labelOpen); } }); - //create a stop editing link - var stop = $('Stop Editing Layout'); - stop.attr('href', "/context-ui/deactivate?destination=" + window.location.pathname.replace(/^./,"")); - $('.buttons', selector).append(stop); - - // Hide the context editor if we're editing or adding a box - if ($('#boxes-box-form').length || $('.boxes-box-editing').length) { - $('#context_ui_dialog-context-ui').hide(); - $('#context-ui-editor .links a.done').click(); - } - else { - $('#context_ui_dialog-context-ui').show(); - } - + $('#context_ui_dialog-context-ui').show(); + // Conceal Section title, subtitle and class $('div.context-block-browser').nextAll('.form-item').hide(); diff --git a/plugins/context_reaction_block.css b/plugins/context_reaction_block.css index e114959..e96b97d 100644 --- a/plugins/context_reaction_block.css +++ b/plugins/context_reaction_block.css @@ -234,4 +234,19 @@ a.context-ui-add-link, a:link.context-ui-add-link, a:visited.context-ui-add-link color:#fff; cursor: pointer; line-height:14px; +} + +.editing-context-label { + position: fixed; + top:70px; + background:#fff; + color:#222; + padding:10px; + font-weight:bold; + opacity: 0.5; + -moz-opacity: 0.5; + filter:alpha(opacity=50); + border:1px solid #ddd; + border-left:0; + border-radius:0 6px 6px 0; } \ No newline at end of file diff --git a/plugins/context_reaction_block.js b/plugins/context_reaction_block.js index a12cf87..071da98 100644 --- a/plugins/context_reaction_block.js +++ b/plugins/context_reaction_block.js @@ -197,10 +197,10 @@ DrupalContextBlockEditor.prototype = { this.browser = $('.context-block-browser', context); //add the filter element to the block browser - if (!this.browser.attachedFilter) { + if (!this.browser.has('input.filter').size()) { var parent = $('.block-browser-sidebar .filter', this.browser); var list = $('.blocks', this.browser); - this.browser.attachedFilter = new Drupal.Filter (list, false, '.context-block-addable', parent); + new Drupal.Filter (list, false, '.context-block-addable', parent); } //show a dialog for the blocks list this.browser.show().dialog({ @@ -234,7 +234,6 @@ DrupalContextBlockEditor.prototype = { } //protected function for adding a clicked block to a region - console.log(region, 'region'); this.addToRegion = function(e){ var ui = { 'item' : $(this).clone(), @@ -400,6 +399,14 @@ DrupalContextBlockEditor.prototype = { this.initRegions($('.context-block-region').parent()); this.updateBlocks(); + $('a.context_ui_dialog-stop').hide(); + + $('.editing-context-label').remove(); + var label = $('#context-editable-trigger-'+context+' .label').text(); + label = Drupal.t('Now Editing: ') + label; + editor.parent().parent() + .prepend('
'+ label + '
'); + // First pass, enable sortables on all regions. $(this.regions).each(function() { var region = $(this); @@ -437,6 +444,8 @@ DrupalContextBlockEditor.prototype = { editFinish : function() { this.editor.removeClass('context-editing'); this.enableTextSelect(); + + $('.editing-context-label').remove(); // Remove UI elements. $(this.blocks).each(function() { @@ -447,6 +456,8 @@ DrupalContextBlockEditor.prototype = { $(this).removeClass('draggable'); }); + $('a.context_ui_dialog-stop').show(); + this.regions.sortable('destroy'); this.setState(); -- 1.7.0.4 From 1b897ac179e7b24486ad182890cc1237365b8461 Mon Sep 17 00:00:00 2001 From: Josh Caldwell Date: Fri, 16 Mar 2012 18:59:22 -0400 Subject: [PATCH 10/15] Fixed an issue with saving block placement --- context_ui/context_ui.module | 5 +---- plugins/context_reaction_block.js | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/context_ui/context_ui.module b/context_ui/context_ui.module index 8ada09a..0e847b3 100644 --- a/context_ui/context_ui.module +++ b/context_ui/context_ui.module @@ -216,12 +216,9 @@ function context_ui_editor_process($values) { */ function context_ui_editor_submit(&$form, &$form_state) { foreach ($form_state['values']['contexts'] as $name => $values) { - $original_conditions = $values['context']->conditions; $original_reactions = $values['context']->reactions; - $context = context_ui_editor_process($values); - - if (TRUE||($original_conditions !== $context->conditions) || ($original_reactions !== $context->reactions)) { + if (($original_reactions !== $context->reactions)) { if (context_save($context)) { drupal_set_message(t('Saved %title.', array( '%title' => (!empty($context->description) ? $context->description : $context->name) diff --git a/plugins/context_reaction_block.js b/plugins/context_reaction_block.js index 071da98..dc42371 100644 --- a/plugins/context_reaction_block.js +++ b/plugins/context_reaction_block.js @@ -340,7 +340,7 @@ DrupalContextBlockEditor.prototype = { var self = this; $(this.regions).each(function() { - var region = $(this).attr('id').split('context-block-region-')[1]; + var region = $('.context-block-region', this).attr('id').split('context-block-region-')[1]; var blocks = []; $('a.context-block', $(this)).each(function() { if ($(this).attr('class').indexOf('edit-') != -1) { -- 1.7.0.4 From 4b5e5dbfb1117f19696d1e097e9388864fe94149 Mon Sep 17 00:00:00 2001 From: Josh Caldwell Date: Fri, 16 Mar 2012 19:32:37 -0400 Subject: [PATCH 11/15] Fixed issue with block browser after changing contexts --- plugins/context_reaction_block.js | 12 ++++++------ 1 files changed, 6 insertions(+), 6 deletions(-) diff --git a/plugins/context_reaction_block.js b/plugins/context_reaction_block.js index dc42371..fa9b194 100644 --- a/plugins/context_reaction_block.js +++ b/plugins/context_reaction_block.js @@ -183,8 +183,7 @@ DrupalContextBlockEditor.prototype = { $('.context-block-browser').hide(); }, showBlockBrowser : function(region) { - var self = this, - toggled = false; + var toggled = false; //close the dialog if its open if($('#context_ui_dialog-context-ui').css('display') != 'none'){ $('#context_ui_dialog-context-ui').toggle(400); @@ -194,7 +193,7 @@ DrupalContextBlockEditor.prototype = { var activeId = $('.context-editing', this.editor).attr('id').replace('-trigger', ''), context = $('#' + activeId)[0]; - this.browser = $('.context-block-browser', context); + this.browser = $('.context-block-browser', context).addClass('active'); //add the filter element to the block browser if (!this.browser.has('input.filter').size()) { @@ -206,8 +205,8 @@ DrupalContextBlockEditor.prototype = { this.browser.show().dialog({ modal : true, close : function() { - self.browser.dialog('destroy'); - self.browser.hide().appendTo(context); + $(this).dialog('destroy'); + $(this).hide().appendTo(context).removeClass('active');; if(toggled){ $('#context_ui_dialog-context-ui').toggle(400); } @@ -234,12 +233,13 @@ DrupalContextBlockEditor.prototype = { } //protected function for adding a clicked block to a region + var self = this; this.addToRegion = function(e){ var ui = { 'item' : $(this).clone(), 'sender' : $(region) }; - self.browser.dialog('close'); + $(this).parents('.context-block-browser.active').dialog('close'); $(region).after(ui.item); self.addBlock(e, ui, this.editor, activeId.replace('context-editable-', '')); }; -- 1.7.0.4 From c46262115b3c0f103cf2fa75571ca65179689737 Mon Sep 17 00:00:00 2001 From: Josh Caldwell Date: Fri, 23 Mar 2012 11:03:04 -0400 Subject: [PATCH 12/15] Issue #1487598 by muschpusch: Fixed Context_ui() higher z-index than overlay. And fix for tab disappearing if block browser closed. --- context_ui/context_ui_dialog.css | 2 +- context_ui/context_ui_dialog.js | 3 --- plugins/context_reaction_block.js | 12 ++++-------- 3 files changed, 5 insertions(+), 12 deletions(-) diff --git a/context_ui/context_ui_dialog.css b/context_ui/context_ui_dialog.css index 69eb9bf..2bb962f 100644 --- a/context_ui/context_ui_dialog.css +++ b/context_ui/context_ui_dialog.css @@ -54,7 +54,7 @@ form.context-editing li.context-editing { color:#222; top:140px; display:none; - z-index:9999999; + z-index:400; padding:10px; font-weight:bold; border:1px solid #ddd; diff --git a/context_ui/context_ui_dialog.js b/context_ui/context_ui_dialog.js index 04df66a..ea294db 100644 --- a/context_ui/context_ui_dialog.js +++ b/context_ui/context_ui_dialog.js @@ -32,9 +32,6 @@ $('#context_ui_dialog-context-ui').show(); - // Conceal Section title, subtitle and class - $('div.context-block-browser').nextAll('.form-item').hide(); - // Add a class to body $('body').once().addClass('context-field-editor'); } diff --git a/plugins/context_reaction_block.js b/plugins/context_reaction_block.js index fa9b194..89d0d87 100644 --- a/plugins/context_reaction_block.js +++ b/plugins/context_reaction_block.js @@ -40,6 +40,9 @@ Drupal.behaviors.contextReactionBlock = {attach: function(context) { return false; }); }); + + // Conceal Section title, subtitle and class + $('div.context-block-browser', context).nextAll('.form-item').hide(); }}; /** @@ -184,11 +187,7 @@ DrupalContextBlockEditor.prototype = { }, showBlockBrowser : function(region) { var toggled = false; - //close the dialog if its open - if($('#context_ui_dialog-context-ui').css('display') != 'none'){ - $('#context_ui_dialog-context-ui').toggle(400); - toggled = true; - } + //figure out the id of the context var activeId = $('.context-editing', this.editor).attr('id').replace('-trigger', ''), context = $('#' + activeId)[0]; @@ -207,9 +206,6 @@ DrupalContextBlockEditor.prototype = { close : function() { $(this).dialog('destroy'); $(this).hide().appendTo(context).removeClass('active');; - if(toggled){ - $('#context_ui_dialog-context-ui').toggle(400); - } }, height: (.8 * $(window).height()), minHeight:400, -- 1.7.0.4 From 22132ccfbe2cb60bae4c3d0a863c2fec5ae0dac1 Mon Sep 17 00:00:00 2001 From: mrfelton Date: Fri, 23 Mar 2012 13:40:18 -0400 Subject: [PATCH 13/15] Issue #661094 by jwhat, marcushenningsen, Mark Trapp, mrfelton: Added Permission for context module. --- context_ui/context_ui.module | 16 ++++++++++++++-- context_ui/export_ui/context.inc | 1 + 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/context_ui/context_ui.module b/context_ui/context_ui.module index 0e847b3..2ad0f82 100644 --- a/context_ui/context_ui.module +++ b/context_ui/context_ui.module @@ -53,7 +53,7 @@ function context_ui_block_info() { function context_ui_block_view($delta = '') { switch ($delta) { case 'editor': - if (user_access('administer site configuration') && strpos($_GET['q'], 'admin/structure/context') === FALSE && $contexts = context_active_contexts()) { + if (user_access('administer contexts') && strpos($_GET['q'], 'admin/structure/context') === FALSE && $contexts = context_active_contexts()) { return array( 'subject' => t('Context editor'), 'content' => drupal_get_form('context_ui_editor', $contexts), @@ -72,6 +72,18 @@ function context_ui_block_view($delta = '') { } /** + * Implementation of hook_permission(). + */ +function context_ui_permission() { + $permissions = array(); + $permissions['administer contexts'] = array( + 'title' => 'Administer contexts', + 'description' => 'Associate menus, views, blocks, etc. with different contexts to structure your site.' + ); + return $permissions; +} + +/** * Implementation of hook_menu(). */ function context_ui_menu() { @@ -79,7 +91,7 @@ function context_ui_menu() { $items['admin/structure/context/settings'] = array( 'title' => 'Settings', 'access callback' => 'user_access', - 'access arguments' => array('administer site configuration'), + 'access arguments' => array('administer contexts'), 'page callback' => 'drupal_get_form', 'page arguments' => array('context_ui_settings'), 'type' => MENU_LOCAL_TASK, diff --git a/context_ui/export_ui/context.inc b/context_ui/export_ui/context.inc index 968a88b..9dcab78 100644 --- a/context_ui/export_ui/context.inc +++ b/context_ui/export_ui/context.inc @@ -1,6 +1,7 @@ 'administer contexts', 'schema' => 'context', 'menu' => array( 'menu prefix' => 'admin/structure', -- 1.7.0.4 From 659441d2f311f57077f3f7a13e8125328d38a46d Mon Sep 17 00:00:00 2001 From: Josh Caldwell Date: Tue, 27 Mar 2012 11:35:52 -0400 Subject: [PATCH 14/15] Fixed an issue with the activate not sticking on node pages that have aliases --- context_ui/context_ui.module | 20 ++++++++++---------- 1 files changed, 10 insertions(+), 10 deletions(-) diff --git a/context_ui/context_ui.module b/context_ui/context_ui.module index 2ad0f82..80c3795 100644 --- a/context_ui/context_ui.module +++ b/context_ui/context_ui.module @@ -99,13 +99,13 @@ function context_ui_menu() { ); $items['context-ui/activate'] = array( 'title' => 'Activate Context UI', - 'access arguments' => TRUE, + 'access arguments' => array('administer contexts'), 'page callback' => 'context_ui_activate', 'type' => MENU_CALLBACK ); $items['context-ui/deactivate'] = array( 'title' => 'Deactivate Context UI', - 'access arguments' => TRUE, + 'access arguments' => array('administer contexts'), 'page callback' => 'context_ui_deactivate', 'type' => MENU_CALLBACK ); @@ -380,15 +380,15 @@ function context_ui_deactivate() { * if the session say we should have an active dialog set a context variable to tell everything else */ function context_ui_init() { - $active = !empty($_SESSION['context_ui_active']) && - ($_SESSION['context_ui_active'] == request_path()); - - if($active) { - context_set('context_ui', 'context_ui_editor_present', TRUE); - } - else { - $_SESSION['context_ui_active'] = FALSE; + if (!empty($_SESSION['context_ui_active'])) { + $path = $_SESSION['context_ui_active']; + if( $path == request_path() || $path == drupal_get_path_alias() || $path = drupal_get_normal_path(request_path()) ) { + context_set('context_ui', 'context_ui_editor_present', TRUE); + return; + } } + //otherwise turn it off to avoid annoyance + $_SESSION['context_ui_active'] = FALSE; } /** -- 1.7.0.4 From f965817139eda09f53f2455a8f0052f646e4fba0 Mon Sep 17 00:00:00 2001 From: Josh Caldwell Date: Tue, 27 Mar 2012 11:54:37 -0400 Subject: [PATCH 15/15] Added title and description to the context selector widget --- context_ui/context_ui.module | 18 ++++++++++++++++++ plugins/context_reaction_block.css | 11 +++++++++++ 2 files changed, 29 insertions(+), 0 deletions(-) diff --git a/context_ui/context_ui.module b/context_ui/context_ui.module index 80c3795..6a3fc67 100644 --- a/context_ui/context_ui.module +++ b/context_ui/context_ui.module @@ -137,6 +137,24 @@ function context_ui_editor($form, &$form_state, $contexts) { 'buttons' => array('#tree' => FALSE), ); + $form['title'] = array( + '#prefix' => '

', + '#markup' => t('Select the Context/Layer to Edit'), + '#suffix' => '

', + '#weight' => -2, + ); + + //add some help text to the top of the form + $form['help'] = array ( + '#prefix' => '

', + '#markup' => t('Select which context, or layer of blocks, to edit. + Each context is configured to appear on different sets of pages so read the description carefully. + When you are done editing click Done and save your changes. + You may use the Stop Editing Layout link to close the editor.'), + '#suffix' => '

', + '#weight' => -1, + ); + $items = array(); $form_context = array(); ksort($contexts); diff --git a/plugins/context_reaction_block.css b/plugins/context_reaction_block.css index e96b97d..1e1e50f 100644 --- a/plugins/context_reaction_block.css +++ b/plugins/context_reaction_block.css @@ -249,4 +249,15 @@ a.context-ui-add-link, a:link.context-ui-add-link, a:visited.context-ui-add-link border:1px solid #ddd; border-left:0; border-radius:0 6px 6px 0; +} + +.context-help { + font-size:12px; + font-weight:normal; +} + +.context-editor-title { + font-size:24px; + margin:10px 0px; + padding:0; } \ No newline at end of file -- 1.7.0.4