DrupalGap icon indicating copy to clipboard operation
DrupalGap copied to clipboard

Panel Widgets via Buttons on Node Pages

Open mkinnan opened this issue 8 years ago • 3 comments

I'm trying to get this to work on node pages to be able to configure certain fields (e.g., notify of new content for this node): http://docs.drupalgap.org/7/Widgets/Panels

I have the button displayed exactly where I want. However, I'm not sure how I'm supposedly to get the button link to call my_module_pageshow. When I follow the code for the button link, tapping the button doesn't do anything.

Any suggestions would be greatly appreciated!

mkinnan avatar Feb 17 '17 18:02 mkinnan

I tried this in hook_menu:

items['#my_module_left_panel'] = {
  pageshow: 'my_module_pageshow'
};

but still can't get the panel to show.

mkinnan avatar Feb 17 '17 23:02 mkinnan

The Panels Widget documentation is a year old. Is it still valid?

Is the approach now to use hook_block_view and add a case for my_module_pageshow and dump all the code into that?

mkinnan avatar Feb 18 '17 16:02 mkinnan

Here's what I partially have working. I add a simple button next to the node title. Tapping the button causes the

A couple issues I can't figure out.

(1) The div content only slides up/down on the first node visited. It doesn't work when tapping the button on other node pages. (2) I believe the above issue is due to the location of the script content. I can't get it to work anywhere else. Where is the best place to put the script code?

function my_module_entity_post_render_content(entity, entity_type, bundle) {
  try {

    entity.content = 
      '<script>$(\'button\').click(function () {  var $t = $(\'#container\');  if ($t.is(\':visible\')) { $t.slideUp(100); } else { $t.slideDown(100); } }); </script>' +
      '<div>' + 
        '<span class="nodetitle">' + entity.title + '</span>' +
        '<span class="node-settings-gear">' + '<button>TAP</button>' + '</span>' +
      '</div>' +
      entity.content +
      '<div id="container"><div id="inner">' + slide_panel_content_return() + '</div></div>';

  } 
}

Here's my function to load the content into the div that will slide up/down.

function slide_panel_content_return() {
  
  // Build the checkbox.
  var checkbox = {
    title: 'Enjoy pizza?',
    attributes: {
      id: 'my_checkbox',
      checked: 'checked'
    }
  };

  // Build the label.
  var label = { element: checkbox };
  label.element.id = checkbox.attributes.id;
   
  // Render the checkbox and label and return it.
  return theme('checkbox', checkbox) + theme('form_element_label', label);
  
}

Here's my CSS for the div that contains the content.

#container {
  bottom: 0;
  display: none;
  position: fixed;
  width: 100%;
}

#inner {
  background-color: #F0F0F0;
  border-top: 1px solid #666666;
  padding: 20px 20px 100px 20px;
}

mkinnan avatar Feb 26 '17 19:02 mkinnan