jrAction_form in modal window like site search (jrElastic)

PatriaCo
PatriaCo
@the-patria-company
8 years ago
349 posts
Hey Guys,

I am trying to figure out how to have the Activity Feed "Timeline" form show up in a lightbox, rather than only being available on the timeline page. The same way the site search does when clicking the magnifying glass in the site header.

{* This is the search form - shows as a modal window when the search icon is clicked on *}
<div id="searchform" class="search_box" style="display:none;">
    {jrCore_lang module="jrSearch" id="1" default="Search Site" assign="st"}
    {jrSearch_form class="form_text" value=$st style="width:70%"}
    <div style="float:right;clear:both;margin-top:3px;">
        <a class="simplemodal-close">{jrCore_icon icon="close" size=20}</a>
    </div>
    <div class="clear"></div>
</div>

I would like to add a pencil icon and have the jrAction_form show up in the modal window.

{* we only show the new action form to the profile owner *}
            {if $quota_jrAction_can_post == 'on'}
                <div id="new_action" class="item">
                    {jrAction_form}
                </div>
            {/if}

Has anyone already figured this out?


--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3

updated by @the-patria-company: 05/31/16 08:38:08PM
michael
@michael
8 years ago
7,715 posts
I've not built it so can't advise with code, but what you're going to want to be sure of is the profile in use.

When a user has more than one profile, whichever profile they last visited will be the current active one.

So for the admin user if they visit a profile, their current active profile will be that one.

If they login and haven't visited a profile, it could be that there is no active profile.

So when you build it do a lot of testing on to make sure that the activity posts are coming out where you expect them to. From memory the activity timeline stuff all comes out on the home profile, so should be ok, just a tip to make sure you're checking.
PatriaCo
PatriaCo
@the-patria-company
8 years ago
349 posts
Ok, I am a little stuck. I see this trigger for the search window
<a onclick="jrSearch_modal_form()" title="{$st}">

which I am renaming for the New Action Modal window.
<a onclick="jrAction_modal_form()" title="{$at}">

I would like to avoid hacking up the jrAction files. If I created a jrAction_Custom.js and placed it in the jrAction/js directory would that be safe? Then how do I make sure the custom js file is loaded?

This is the first time I have ever done any custom js in JR, so I appreciate your patience and assistance.

Thanks :)

- Joshua


--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3
michael
@michael
8 years ago
7,715 posts
Since its your skin, not the jrAction module, put any javascript into your skins javascript file. If one exists already it will be at:
/skins/YOUR SKIN/js

If one doesn't exist, put a file there, then register it in your skins include.php file in the _init() function. check out how the other skins do it, Elastic registers jrElastic.js by adding this line:
   jrCore_register_module_feature('jrCore', 'javascript', 'jrElastic', 'jrElastic.js');
so change those jrElastic's to your skin in your skins include file to get your skins .js file included.

You can copy the jrSearch modules javascript function if you need to or add whatever system you like.
PatriaCo
PatriaCo
@the-patria-company
8 years ago
349 posts
Got it! Thanks

So I just want to make sure I am not going to mess anything up here.

/**
 * Display a modal new action form
 */
function jrAction_modal_form(){
    $('#new_action').modal({

        onOpen: function (dialog) {
            dialog.overlay.fadeIn(75, function () {
                dialog.container.slideDown(5, function () {
                    dialog.data.fadeIn(75);
                    $('#new_action_input').focus();
                });
            });
        },
        onClose: function (dialog) {
            dialog.data.fadeOut('fast', function () {
                dialog.container.hide('fast', function () {
                    dialog.overlay.fadeOut('fast', function () {
                        $.modal.close();
                    });
                });
            });
        },
        overlayClose:true
    });
}

I am the most unsure about this line: $('#new_action_input').focus();

What do you think? Is it even necessary?

Lastly, what is the difference between "75" "5" and "fast"?

Thanks :)


--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3
michael
@michael
8 years ago
7,715 posts
dont call it jrAction, call it something else because its not part of the jrAction module, even xxAction would do so anyone coming later knows its custom.

Probably $('#new_action_input').focus(); is not necessary unless you want the cursor to focus to the input box with id="new_action_input" when the modal window opens.

Try different speeds to find the one you like. There's more info on jquery at their website:
http://api.jquery.com/hide/#hide-duration-complete
PatriaCo
PatriaCo
@the-patria-company
8 years ago
349 posts
Ok, so this is what I have so far and I am using a cloned Elastic skin.

This is in the header_menu_desktop.tpl
            {if jrCore_module_is_active('jrAction')}
                {jrCore_lang skin=$_conf.jrCore_active_skin id=51 default="activity feed" assign="at"}
                <li><a onclick="atAction_modal_form()" title="{$at}">{jrCore_image image="A-T-Pencil.png" width=20 height=20 alt=$at style="margin-top:-3px"}</a></li>
            {/if}

Which triggers this js that I added to my skin js file:
/**
 * Display a modal new action form
 */
function atAction_modal_form(){
    $('#new_action').modal({

        onOpen: function (dialog) {
            dialog.overlay.fadeIn('fast', function () {
                dialog.container.slideDown('fast', function () {
                    dialog.data.fadeIn('fast');
                });
            });
        },
        onClose: function (dialog) {
            dialog.data.fadeOut('fast', function () {
                dialog.container.hide('fast', function () {
                    dialog.overlay.fadeOut('fast', function () {
                        $.modal.close();
                    });
                });
            });
        },
        overlayClose:true
    });
}

This opens the hidden form in the header.tpl
{* This is the new action form - shows as a modal window when the new action icon is clicked on *}
<div id="new_action" class="search_box" style="display:none;">
    {jrAction_form class="form_text" value=$at style="width:70%"}
    <div style="float:right;clear:both;margin-top:3px;">
        <a class="simplemodal-close">{jrCore_icon icon="close" size=20}</a>
    </div>
    <div class="clear"></div>
</div>

This does open the form as you can see from the screen shot, but I can not enter any text, nor does the Update button work.

Can you see where I went wrong?


--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3

updated by @the-patria-company: 02/01/16 02:20:02PM
PatriaCo
PatriaCo
@the-patria-company
8 years ago
349 posts
An additional weird occurrence is when I navigate to a page other than the timeline page I get a textbox that I can type into, but the update button does not work.


--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3
PatriaCo
PatriaCo
@the-patria-company
8 years ago
349 posts
Any ideas?


--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3
PatriaCo
PatriaCo
@the-patria-company
8 years ago
349 posts
I added this to my header.tpl and the embed media window opens now.
{jrCore_module_url module="jrAction" assign="murl"}

but I still can't get anything to enter into the text box. I can't type or add any content.


--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3
michael
@michael
8 years ago
7,715 posts
The question seams to be more a "How do I code" rather than a specific jamroom question.

This is a good place to learn the basics:
https://www.codecademy.com

The solution to any problem is:
* figure out what is happening
* find out what needs to happen
* implement that

There are tools like 'firebug' that will help you understand what is happening.

Sounds like you are at the point of trying to get the form to submit, but its not. You'll need to find out what IS happening, then what SHOULD happen and change the IS to SHOULD.
PatriaCo
PatriaCo
@the-patria-company
8 years ago
349 posts
May I ask you this first?

I did a very simple jQuery Hide <div> as an alternative method to the modal window.

 <a href="#" onclick="$('#new_action').slideToggle(300);return false" title="New Action"><span class="sprite_icon sprite_icon_30"><span class="sprite_icon_30 sprite_icon_30_img sprite_icon_30_plus"> </span></span></a>

followed by:
<div id="new_action" class="item left p10" style="display:none">
 {jrAction_form} 
</div>

I can enter text into the window, but when I click [Save Update] it saves an empty entry.

Why would hiding the div affect the action form, if it does not affect the search form?


--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3
michael
@michael
8 years ago
7,715 posts
you need to make sure you understand what is happening.
"Why would hiding the div affect the action form, if it does not affect the search form?"

You've decided that because the div is hidden that this is the reason the form is not submitting correctly.

If you do the same thing while the div is not hidden does it work then? If it does then the first decision has been proven to be correct and you can then assume that the issue is that the div being hidden is the problem and proceed from there.

Until you KNOW that that is what needs to be done, dont block out other possibilities. If the div is showing does the form submit?

Its just doing that, eliminating possibilities until its all working like you want it to work.

I would not expect that hiding a div would cause it to cause the form submission to fail.
PatriaCo
PatriaCo
@the-patria-company
8 years ago
349 posts
OK!! :)

I have been working like crazy on this and I finally figured out the issue.

The TinyMCE editor does not like being in a modal window.

I have it working with the editor disabled in the Timeline global settings.

But I would like to use it to embed media.

Do you have any idea why the TinyMCE would break in a modal window? I was getting an NS_Error.


--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3
michael
@michael
8 years ago
7,715 posts
nice job in locating the source of it. Yes I had a lot of troubles getting tinymce to work in a modal window with site builder.

Take a look at how it does it and perhaps you can see your solution from there.

What you're probably interested in is:
tinymce.EditorManager.

https://www.tinymce.com/docs/api/class/tinymce.editormanager/

The concept being initialize the editor manager in the base window, then use that manager to put tinymce into the modal window when you open it.

NOTE: remember to close it when you close the window, or otherwise if you re-open the modal window again you wont be able to put it back there again.
PatriaCo
PatriaCo
@the-patria-company
8 years ago
349 posts
Thanks @michael :)

Could you share the section of code you used for this from the sitebuilder?

Does the tinymce editor manager need to be initialized into a hidden div?

Then does the modal window js call it into the modal window?

This is the original code in the Timeline include.php that holds the current conflict

if (!isset($_conf['jrAction_editor']) || $_conf['jrAction_editor'] != 'on') {
        $out .= '<textarea cols="72" rows="6" id="action_update" name="action_text" placeholder="' . $_lang['jrAction'][3] . '" onfocus="$(this).attr(\'data-pl\', $(this).attr(\'placeholder\')).attr(\'placeholder\',\'\')" onblur="if($(this).val().length === 0){ $(this).attr(\'placeholder\', $(this).attr(\'data-pl\')) }"></textarea>
        <img id="action_submit_indicator" src="' . $img . '" width="24" height="24" alt="' . jrCore_entity_string($_lang['jrCore'][73]) . '"><input id="action_submit" type="button" class="form_button" value="' . str_replace('"', '\"', $_lang['jrAction'][5]) . '" onclick="$(\'#action_submit_indicator\').show(300, function() { ;var t=$(\'#action_update\').val();if (t.length < 1){return false;} else {$(this).attr(\'disabled\',\'disabled\').addClass(\'form_button_disabled\');$(\'#action_form\').submit()} });">' .
            $add . '</form>' .
            '<span id="action_text_counter" class="action_warning">' . $_lang['jrAction'][6] . ': <span id="action_text_num">' . intval($_conf['jrAction_max_length']) . '</span></span>';
    }
    else {



--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3

updated by @the-patria-company: 02/26/16 12:11:19PM
michael
@michael
8 years ago
7,715 posts
all the modules are open source, you can see all of the code in the module files, no need to paste it here because it will become outdated as time goes on.

I haven't built what you're trying to build, so don't have the exact code to give you sorry.
PatriaCo
PatriaCo
@the-patria-company
8 years ago
349 posts
I am getting closer, but I need a little more help please. Here is my code so far:
function atAction_modal_form() {
    
	$('#new_action').modal({

        onOpen: function (dialog) {
            dialog.overlay.fadeIn('fast', function () {
                dialog.container.slideDown('fast', function () {
                    dialog.data.fadeIn('fast', function () {
					    if (tinymce.EditorManager.activeEditor !== 'undefined') {
                        tinymce.settings = ehtml_content;
                        tinymce.EditorManager.execCommand('mceAddEditor', false, 'ehtml_content');
                        }
					});	
                });
            });
        },
        onClose: function (dialog) {
            dialog.data.fadeOut('fast', function () {
                dialog.container.hide('fast', function () {
                    dialog.overlay.fadeOut('fast', function () {
                        if (tinymce.EditorManager.activeEditor !== 'undefined') {
                            tinymce.EditorManager.execCommand('mceRemoveEditor', false, 'ehtml_content');
                        }
						$.modal.close();
                    });
                });
            });
        },
        overlayClose:true
    });
}
When I turn on the editor I get this error: ReferenceError: ehtml_content is not defined
I am unable to type into the text box.

When I turn the editor off I get ReferenceError: tinymce is not defined
I am able to type and save, but I the close modal window [x] does not work.

Any thoughts?


--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3

Tags