DrupalGap
DrupalGap copied to clipboard
signalpoint
How to render the the same node on different pages in the DOM?
I want to render the same node on different pages in the DOM.
_drupalgap_entity_page_container_inject() gets the id with _drupalgap_entity_page_container_id(). The DOM then contains the same ID (e.g. node_1822_view_container) twice.
I wat thinking to change
$('#' + id).html(drupalgap_render_page()).trigger('create');
into
$('#' + drupalgap_get_page_id() + ' #' + id).html(drupalgap_render_page()).trigger('create');
in _drupalgap_entity_page_container_inject() but maybe there is better way to do this without changing DG gore.
@luxio What do your hook_menu() items look like for these two pages? Please share.
FYI, I've been using this approach exclusively nowadays: http://docs.drupalgap.org/7/Entities/Rendering_Entities
Take note of the 4th arguments in the page_arguments, that's the unique key that helps me load/display the same entity two different pages.
I'm using the default hook_menu():
'node/%': {
'title': t('Node'),
'page_callback': 'node_page_view',
'page_arguments': [1],
'pageshow': 'node_page_view_pageshow',
'title_callback': 'node_page_title',
'title_arguments': [1]
},
On the first page the (duplicate) nodes are loaded in a view and inserted via hook_node_page_view_alter_type():
function hook_node_page_view_alter_task(node, options) {
try {
var task_nid = node.nid;
var build = {};
build['task'] = {
theme: 'my_theme_node',
node: node,
};
build['task_submissions'] = {markup: '<div id="task-submissions-' + task_nid + '" class="task-submissions"></div>'};
// get submissions
var path_to_view = '/app/task_submissions/' + node.nid;
views_datasource_get_view_result(path_to_view, {
success: function (data) {
if (data.nodes.length > 0) {
//$('#task-submissions-' + task_nid).append('<h3>' + t('Your Submissions') + '</h3>');
// create empty submission divs
for (var i = 0, l = data.nodes.length; i < l; i++) {
$('#task-submissions-' + task_nid).append('<div id="node-submission-' + data.nodes[i].node.nid + '"></div>');
}
// insert nodes
// @TODO: use index method to retrieve all nodes with on call
for (i = 0, l = data.nodes.length; i < l; i++) {
var submission = data.nodes[i].node
node_load(submission.nid, {
success: function (node) {
var $output = theme('my_theme_node', {node: node});
$('#task-submissions-' + task_nid + ' #node-submission-' + node.nid).html($output).trigger('create');
}
});
}
}
}
});
options.success(build);
}
catch (error) {
console.log('hook_node_page_view_alter_typ ' + error);
}
}
The second page which contains the single same node as the one above in the view is is also altered with hook_node_page_view_alter_type():
function hook_node_page_view_alter_post(node, options) {
try {
var build = {};
// build task
build['post'] = {
theme: 'my_theme_node',
node: node
};
options.success(build);
return;
}
catch (error) {
console.log('hook_node_page_view_alter_post - ' + error);
}
}
theme_my_theme_node:
function theme_my_theme_node(variables) {
try {
if (typeof variables.hide_links == 'undefined') {
variables.hide_links = false;
}
if (typeof variables.embed_in_form == 'undefined') {
variables.embed_in_form = false;
}
var node = variables.node;
var created = new Date(node.created * 1000).toISOString();
var posts_count = node.field_posts_count['und'][0].value;
var image = theme('my_theme_avatar', {uri: node.picture_uri});
// generate node links
var links_html = '';
var create_post_link = '';
if (!variables.hide_links) {
if (node.type == 'task2') {
// create add post link
if (node.field_task_type['und'][0]['value'] == 'structured') {
// structured task
create_post_link = l(t('Create post'), 'node/' + node.nid + '/form', {
reloadPage: true,
attributes: {class: 'last'}
});
create_post_link = 'node/' + node.nid + '/form';
//create_post_link = l(t('Create post'), 'node/' + node.nid , {reloadPage:true});
} else {
// disscussion task
var og_group = node.og_group_ref['und'][0]['target_id'];
create_post_link = l(t('Create post'), 'node/add/post/' + og_group + '/' + node.nid, {attributes: {class: 'last'}});
create_post_link = 'node/add/post/' + og_group + '/' + node.nid;
}
links_html = '<div class="actions-wrapper">';
links_html += l(posts_count + ' ' + t('Posts'), null, {attributes: {class: 'first'}});
links_html += create_post_link;
links_html += '</div>';
var createPostButton = theme('my_theme_button', {
// text: 'fa-camera-retro',
path: create_post_link,
icon: 'fa-pencil-square-o',
options: {
reloadPage: true
},
});
links_html = '<div class="ll-block-wrapper ">' +
'<div class="ll-block ll-bg-none ll-node-links clearfix">' +
'<div class="ll-view-title ll-left">' + t('Posts') + '</div>' +
'<div class="ll-right">' + createPostButton + '</div>' +
'</div>' +
'</div>';
}
}
var id = '';
if (variables.attributes.class == 'unhide_webform') {
id = 'node_' + node.nid + '_webform_wrapper';
} else if (variables.embed_in_form) {
id = 'node_' + node.nid + '_form_view_wrapper';
} else {
id = 'node_' + node.nid + '_view_wrapper';
}
// check if id already exits in DOM and remove it
if ($('#' + id).length) {
//$('#' + id).remove();
}
var html = '' +
'<div class="ll-block-wrapper">' +
'<div id="' + id + '" class="ll-block ll-border-top-bottom mobile-post ' + variables.attributes.class + '">' +
'<div class="mobile-post-header clearfix">' +
'<div class="mobile-user-picture">' + image + '</div>' +
'<div class="mobile-post-title mobile-header-1">' + node.title + '</div>' +
'<div class="mobile-post-info mobile-font-tiny">' +
'<span class="mobile-author">' + node.name + '</span> ' + jQuery.timeago(created) +
'</div>' +
'</div>' +
'<div class="mobile-post-content">' + node.content + '</div>' +
'</div>' +
'</div>';
var comments_container_id = 'node_' + node.nid + '_comments_container';
// check if id already exits in DOM and remove it
if ($('#' + comments_container_id).length) {
//$('#' + comments_container_id).remove();
}
html += '<div id="' + comments_container_id + '" class="comments-wrapper"></div>';
var query = {
parameters: {
nid: node.nid
}
};
comment_index(query, {
success: function (results) {
try {
// Render the comments.
var comments = '';
for (var index in results) {
if (!results.hasOwnProperty(index)) {
continue;
}
var comment = results[index];
comments += theme('comment', {comment: comment});
}
var comments_html = theme('comments', {
node: node,
comments: comments
});
// Finally, inject the comments
$('#' + comments_container_id).html(comments_html);
// scroll to selected comment (cid)
if (_GET('cid') != null ) {
var cid = _GET('cid');
console.log('theme_my_theme_node - scroll to comment '+ cid);
scrollToElement( '#' + comments_container_id + ' #' + comment_container_id(cid), 500, -40);
}
}
catch (error) {
var msg = 'theme_my_theme_node - comment_index - ' +
error;
console.log(msg);
}
}
});
// Render the comment form, so we can add it to the content later.
var comment_form = '';
if (node.comment == 2) {
comment_form = drupalgap_get_form(
'comment_edit',
{nid: node.nid},
node
);
}
// If the comments are open, show the comment form.
if (node.comment == 2 && user_access('post comments')) {
html += '<div class="ll-block-wrapper ll-comment-form"><div class="ll-block ll-border-top-bottom">' +
comment_form +
'</div></div>';
var actions = [
{
theme: 'my_theme_button',
variables: {
icon: 'fa-commenting-o',
attributes: {
class: 'toggle-comment-form',
}
}
}
];
var actions_wrapper_html = theme('my_theme_actions', {
actions: actions
});
html += actions_wrapper_html;
}
html += links_html;
return html;
}
catch (error) {
console.log('theme_my_theme_node - ' + error);
}
}