Enabling Edit In Place On Site Pages

Enabling Edit In-Place on Site Pages

Edit in place mode allows editing of translations right in the page where they are located. Sometimes it is more convenient to fix a translation where you see it instead of trying to find the key that is used for the display string.

To allow this mode on your pages will require some support code in your views:

1. You will need to add a link that will toggle this mode via the url:

   <a href="{{ url('/'.config('laravel-translation-manager.route')['prefix'].'/toggle-in-place-edit') }}">
   {{ noEditTrans('laravel-translation-manager::messages.in-place-edit') }}
   </a>

2. The current edit in place state is stored in the session store but it is only restored if you call \Lang::inPlaceEditing() with no argument.

   You need to add a call to \Lang::editInPlace() somewhere in your middleware or service provider that is loaded before handling a request. That way this setting will be restored from the session store.

3. You will need to add supporting stylesheets and JS to you pages when in-place-edit mode is turned on. The meta part is needed to allow CSRF token handling for AJAX translation calls.

   In the page head:

   @if(inPlaceEditing())
       <meta name="csrf-token" content="{{ csrf_token() }}"/>
       <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
       <link href="/vendor/laravel-translation-manager/css/translations.css" rel="stylesheet">
   @endif

   And at the bottom of the body with the rest of the scripts:

   @if(inPlaceEditing())
       <script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
       <script src="/vendor/laravel-translation-manager/js/inflection.js"></script>
       <script src="/vendor/laravel-translation-manager/js/translations.js"></script>
   @endif

4. All links that contain translations and need to support the in place edit need to be changed since the in-place-edit mode changes the translation string to a link that opens the edit pop-up. A link cannot contain another link so the following changes need to be made:

   From:

   <a href="/some-link">@lang('group.key')</a> 

   To (or its blade equivalent, make sure to use {!! ifEditTrans(...) !!} so as not to escape the HTML returned by this function):

   {!! ifEditTrans('group.key') !!} 
   <a href="/some-link">{{noEditTrans('group.key')}}</a> 

   Similarly, you don't want links to be embedded in buttons and should use the noEditTrans() for translating button labels and using ifEditTrans() to generate a link beside the button for editing the button label's translation. This way the UI can still be navigated while in-place-edit mode is on and the translation can be edited.

   ⚠️ For embedding result of trans() or choice() you should use the php tags <?= ?> or the blade unsafe html operator {!! !!} so that the HTML returned by these during edit in place mode is not escaped. It is easier to use @lang() and @choice() instead.

   For noEditTrans() you can use the safe HTML escaping clause of {{ }} since this function always returns the translation string, even during edit in place mode.

   The noEditTrans() function will always return the translation string regardless of the in-place-edit mode. So all links in pages that can have this mode turned on should use this function instead of @lang()

   The ifEditTrans() function is only needed for those translations that you wish to be editable within the page. By default the function will return a link wrapped in <br>[] so it is identifiable as a translation link when in-place-edit is turned on and an empty string when it is not.

   You can include multiple ifEditTrans() with different parameters for all strings that you will want to edit in the pages. This is also useful for translations that are not visible in the page but you want to expose for editing.

   The ifEditTrans() takes the same parameters as \Lang::trans() with the addition of an extra $noWrap boolean, which if true will not wrap the returned edit link in <br>[]. The function is defined as:

   /**
    * @param       $key
    * @param array $parameters
    * @param null  $locale
    * @param null  $useDB
    * @param null  $noWrap
    *
    * @return mixed
    */
   function ifEditTrans($key, $parameters = null, $locale = null, $useDB = null, $noWrap = null)
   {
       $trans = App::make('translator');
       if ($trans->inPlaceEditing()) {
           /* @var $trans Translator */
           $text = $trans->getInPlaceEditLink($key, $parameters ?: [], $locale, $useDB);
           return $noWrap ? $text : "<br>[$text]";
       }
       return '';
   }

5. Pop-up or drop-down menus can also have editable links but editing them will require two clicks. First click to open the drop-down and click on the edit link. This will open the pop-up but close the drop down menu. Second click to open the drop down will show the menu with the edit pop up opened.

6. After a translation is edited the group will need to be published before it will display in the page, the same as if it was edited in the LTM Web UI.