Changeset 11219 for extensions/Back2Front/template

Timestamp:

Jun 3, 2011, 6:09:08 PM (13 years ago)

Author:

mistic100

Message:

add some options, better intégration

Location:

extensions/Back2Front/template

Files:

• admin.tpl (modified) (3 diffs)
• picture_content.tpl (modified) (7 diffs)
• style.css (modified) (1 diff)

extensions/Back2Front/template/admin.tpl

@@ +1 @@
+{combine_css path=$B2F_PATH|@cat:"template/style.css"}
+{if $themeconf.id == roma}<style type="text/css">.lang_help {ldelim} background-color:#464646; }</style>{/if}
+
+{footer_script require='jquery'}{literal}
+jQuery().ready( function () {
+  jQuery('select[name="lang_desc_select"]').change(function () {
+    jQuery('[id^="link_name"]').hide();
+    jQuery("#link_name_"+this.options[this.selectedIndex].value).show();
+  });
+  jQuery('[id^="link_name_"]').keyup(function () {
+    arr = jQuery(this).attr("id").split("link_name_");
+    id = arr[1];
+    opt = jQuery('select[name="lang_desc_select"] option[id="opt_'+id+'"]');
+    if (this.value != '')
+      opt.html(opt.html().replace("\u2718", "\u2714"));
+    else
+      opt.html(opt.html().replace("\u2714", "\u2718"));
+  });
+});
+
+jQuery('.lang_help').tipTip();
+{/literal}{/footer_script}
+
 <div class="titrePage">
         <h2>Back2Front</h2>
@@ -7 +30 @@
                 <legend>{'Display'|@translate}</legend>   
                 <ul>                    
+      <li>
+        <span class="property">{'Link position'|@translate}</span>
+        <label><input type="radio" name="position" value="top" {if $POSITION == 'top'}checked="checked"{/if}/> {'Top'|@translate}</label>
+        <label><input type="radio" name="position" value="bottom" {if $POSITION == 'bottom'}checked="checked"{/if}/> {'Bottom'|@translate}</label>
+        <label><input type="radio" name="position" value="toolbar" {if $POSITION == 'toolbar'}checked="checked"{/if}/> {'Toolbar'|@translate}</label>
+      </li>
                         <li>
                                 <span class="property">{'Switch mode'|@translate}</span>
@@ -16 +45 @@
                                 <label><input type="radio" name="transition" value="none" {if $TRANSITION == 'none'}checked="checked"{/if}/> {'None'|@translate}</label>
                                 <label><input type="radio" name="transition" value="fade" {if $TRANSITION == 'fade'}checked="checked"{/if}/> {'Fade'|@translate}</label>
-                        </li>           
+                        </li>   
+
+      <li>
+        <span class="property">{'Link name'|@translate}</span>
+        <select name="lang_desc_select">
+          {foreach from=$link_name item=lang}
+            <option value="{$lang.LANGUAGE_CODE}" id="opt_{$lang.LANGUAGE_CODE}">{if empty($lang.VALUE)}&#x2718;{else}&#x2714;{/if} &nbsp;{$lang.LANGUAGE_NAME}</option>
+          {/foreach}
+        </select>
+        {foreach from=$link_name item=lang}
+          <input type="text" size="30" name="link_name[{$lang.LANGUAGE_CODE}]" id="link_name_{$lang.LANGUAGE_CODE}" value="{$lang.VALUE}" style="{if $lang.LANGUAGE_CODE != 'default'}display:none; {/if}margin-left:10px;">
+        {/foreach}
+
+        <a class="lang_help" title="{'Seperate the two labels with the | symbol. Leave blank to use default translation.'|@translate}">i</a>
+      </li>      
                 </ul>
         </fieldset>

extensions/Back2Front/template/picture_content.tpl

@@ -1 +1 @@
 {combine_css path=$B2F_PATH|@cat:"template/style.css"}
+{combine_script id="jquery" load="header" path = "themes/default/js/jquery.min.js"}
 
 {footer_script require="jquery"}
@@ -16 +17 @@
         opacity:0
       }, 400, function() {ldelim}
+        jQuery(this).attr({ldelim}
+          src: '{$VERSO_URL}',
+          style: 'max-width:{$WIDTH_IMG}px;max-height:{$HEIGHT_IMG}px;',
+        });
         jQuery(this).animate({ldelim}
-          width:'{$VERSO_WIDTH}px',
-          height:'{$VERSO_HEIGHT}px'
-        }, 200, function() {ldelim}
-            jQuery(this).attr('src', '{$VERSO_URL}');
-            jQuery(this).animate({ldelim}
-              opacity:1
-            }, 400);
-        });
+          opacity:1
+        }, 400);
       });
     {else}
       jQuery('img[alt="{$ALT_IMG}"]').attr({ldelim}
         src: '{$VERSO_URL}',
-        style: 'width:{$VERSO_WIDTH}px;height:{$VERSO_HEIGHT}px;',
+        style: 'max-width:{$WIDTH_IMG}px;max-height:{$HEIGHT_IMG}px;',
       });
     {/if}
@@ -42 +41 @@
     
       /* B2F link content */
-      jQuery(this).html('<img src="{$B2F_PATH}template/rotate_2.png"/> {'See front'|@translate}');
+      jQuery(this).html('<img src="{$B2F_PATH}template/rotate_2.png"/> {$b2f_see_front}');
       jQuery(this).attr('rel', 'back');
     {/if}
@@ -52 +51 @@
 {/if} 
 
+      /* picture switch */
     {if $b2f_transition == 'fade'}
       jQuery('img[alt="{$ALT_IMG}"]').animate({ldelim}
         opacity:0
       }, 400, function() {ldelim}
+        jQuery(this).attr({ldelim}
+          src: '{$SRC_IMG}',
+          style: 'width:{$WIDTH_IMG}px;height:{$HEIGHT_IMG}px;',
+        });
         jQuery(this).animate({ldelim}
-          width:'{$WIDTH_IMG}px',
-          height:'{$HEIGHT_IMG}px'
-        }, 200, function() {ldelim}
-            jQuery(this).attr('src', '{$SRC_IMG}');
-            jQuery(this).animate({ldelim}
-              opacity:1
-            }, 400);
-        });
+          opacity:1
+        }, 400);
       });
     {else}
@@ -74 +72 @@
       
     {if $b2f_switch_mode == 'click'}
+      /* hd link */
       {if isset($high.U_HIGH)}
       jQuery('img[alt="{$ALT_IMG}"]').parent().attr({ldelim}
@@ -80 +79 @@
       {/if}
       
-      jQuery(this).html('<img src="{$B2F_PATH}template/rotate_1.png"/> {'See back'|@translate}');
+      /* B2F link content */
+      jQuery(this).html('<img src="{$B2F_PATH}template/rotate_1.png"/> {$b2f_see_back}');
       jQuery(this).attr('rel', 'front');
     {/if}
@@ -94 +94 @@
 {/footer_script}
 
-<img src="{$VERSO_URL}" style="display:none;"> {* <!-- force preload the verso --> *}
+<img src="{$VERSO_URL}" style="display:none;"/> {* <!-- force preload the verso --> *}
 
-<a class="reverse" rel="front" name="verso-link" {if $b2f_switch_mode == 'hover'}href="javascript:phpWGOpenWindow('{$VERSO_HD}','{$high.UUID}','scrollbars=yes,toolbar=no,status=no,resizable=yes')"{/if}>
-  <img src="{$B2F_PATH}template/rotate_1.png"/> {'See back'|@translate}
+{if $b2f_position != 'toolbar'}<div>{/if}
+<a class="reverse" rel="front" {if $b2f_position == 'toolbar'}style="border:none !important;"{/if} {if $b2f_switch_mode == 'hover'}href="javascript:phpWGOpenWindow('{$VERSO_HD}','{$high.UUID}','scrollbars=yes,toolbar=no,status=no,resizable=yes')"{/if}>
+  <img src="{$B2F_PATH}template/rotate_1.png"/> {$b2f_see_back}
 </a>
-<br/>
+{if $b2f_position != 'toolbar'}</div>{/if}

extensions/Back2Front/template/style.css

@@ -5 +5 @@
   margin-bottom:10px;
   font-size:15px;
-  font-style:italic;    
-  height:1em;
+  font-style:italic;  
 }
 a.reverse img {
-  margin:0 !important;
   vertical-align:top;
-  border:none !important;
 }
+.lang_help {
+  display:inline-block;
+  width:16px;
+  text-align:center;
+  vertical-align:middle;
+  font-style:italic;
+  font-family:"Georgia",serif;
+  background-color:#999;
+  margin-left:15px;
+  color:#fff;
+  font-size:0.9em;
+  line-height:1.4em;
+  border-radius:7px;
+  -moz-border-radius:7px;
+}
+.lang_help:hover {
+  background-color:#333;
+  border:none;
+  color:#fff;
+}