[dev] [commit] r1020 - phplib templates/admin templates/common/bits wwwbase/admin wwwbase/js wwwbase/styles

automailer at dexonline.ro automailer at dexonline.ro
Wed Oct 9 01:09:14 EEST 2013


Author: grigoroiualex
Date: Wed Oct  9 01:09:14 2013
New Revision: 1020

Log:
Added: Tags can be previewed on the image from the tagging page. I've used the functions from dexGallery.js without changing them.
Changes: All the styling related to the visual dictionary is in a separate .css file.
         Prototype elements are loaded from two places (the gallery from search and tagging page), thus I've put them in a separate file which is included using Smarty.
         Corrected wrong .js files numbering from SmartyWrap.
         Deleted some variables that I forgot about in previous commits.

Added:
   templates/common/bits/prototypes.ihtml
   wwwbase/styles/visualDict.css
Modified:
   phplib/SmartyWrap.php
   templates/admin/visualTag.ihtml
   templates/common/bits/gallery.ihtml
   wwwbase/admin/visualTag.php
   wwwbase/js/dexGallery.js
   wwwbase/js/visualTag.js
   wwwbase/styles/flex.css
   wwwbase/styles/zepu.css

Modified: phplib/SmartyWrap.php
==============================================================================
--- phplib/SmartyWrap.php	Tue Oct  8 18:43:47 2013	(r1019)
+++ phplib/SmartyWrap.php	Wed Oct  9 01:09:14 2013	(r1020)
@@ -163,7 +163,10 @@
         self::$cssFiles[16] = 'easyui/icon.css?v=1';
         break;
       case 'select2':            self::$cssFiles[17] = 'select2/select2.css?v=3'; break;
-      case 'gallery':            self::$cssFiles[18] = 'colorbox/colorbox.css?v=1'; break;
+      case 'gallery':            
+        self::$cssFiles[18] = 'colorbox/colorbox.css?v=1'; 
+        self::$cssFiles[19] = 'visualDict.css';
+        break;
       default:
         FlashMessage::add("Cannot load CSS file {$id}");
         util_redirect(util_getWwwRoot());
@@ -201,10 +204,10 @@
       case 'select2Dev':       self::$jsFiles[22] = 'select2Dev.js?v=2'; break;
       case 'visualTag':        self::$jsFiles[23] = 'visualTag.js'; break;
       case 'gallery':          
-        self::$jsFiles[22] = 'colorbox/jquery.colorbox-min.js';
-        self::$jsFiles[23] = 'colorbox/jquery.colorbox-ro.js';
-        self::$jsFiles[24] = 'dexGallery.js?v=2';
-        self::$jsFiles[25] = 'jcanvas.min.js';
+        self::$jsFiles[24] = 'colorbox/jquery.colorbox-min.js';
+        self::$jsFiles[25] = 'colorbox/jquery.colorbox-ro.js';
+        self::$jsFiles[26] = 'dexGallery.js?v=2';
+        self::$jsFiles[27] = 'jcanvas.min.js';
         break;
       default:
         FlashMessage::add("Cannot load JS script {$id}");

Modified: templates/admin/visualTag.ihtml
==============================================================================
--- templates/admin/visualTag.ihtml	Tue Oct  8 18:43:47 2013	(r1019)
+++ templates/admin/visualTag.ihtml	Wed Oct  9 01:09:14 2013	(r1020)
@@ -18,8 +18,9 @@
     </script>
 
   {else}
+    {include file="common/bits/prototypes.ihtml"}
     <div id="visualTagCanvas">
-      <img src="{$imagePath}" id="jcrop"/>
+      <img src="{$imagePath}" id="jcrop" title="{$imageId}"/>
       <div id="selectionOptions">
         <label>Coordonatele centrului selecției:
           <input id="x" type="text" size="4" name="x"/>
@@ -31,6 +32,7 @@
           <button type="submit" name="action" value="finishedTagging">
             Etichetarea este completă
           </button>
+          <button id="previewTags" type="button">Previzualizare etichete</button>
         </form>
         <button type="button" id="toggleHelp">Click pentru Ajutor</button>
         <div id="helpText">

Modified: templates/common/bits/gallery.ihtml
==============================================================================
--- templates/common/bits/gallery.ihtml	Tue Oct  8 18:43:47 2013	(r1019)
+++ templates/common/bits/gallery.ihtml	Wed Oct  9 01:09:14 2013	(r1020)
@@ -1,7 +1,6 @@
-<canvas id="prototypeCanvas"></canvas>
-<button id="prototypeTagsToggleButton">Ascunde/Afișează etichetele</button>
+{include file="common/bits/prototypes.ihtml"}
 <div id="gallery">
   {foreach from=$images item=image}
-    <a class="colorbox" href="{$image.img}" title="{$image.id}{$image.name}"><img src="{$image.tmb}"/></a>
+    <a class="gallery" href="{$image.img}" title="{$image.id}{$image.name}"><img src="{$image.tmb}"/></a>
   {/foreach}
 </div>

Added: templates/common/bits/prototypes.ihtml
==============================================================================
--- /dev/null	00:00:00 1970	(empty, because file is newly added)
+++ templates/common/bits/prototypes.ihtml	Wed Oct  9 01:09:14 2013	(r1020)
@@ -0,0 +1,2 @@
+<canvas id="prototypeCanvas"></canvas>
+<button id="prototypeTagsToggleButton">Ascunde/Afișează etichetele</button>
\ No newline at end of file

Modified: wwwbase/admin/visualTag.php
==============================================================================
--- wwwbase/admin/visualTag.php	Tue Oct  8 18:43:47 2013	(r1019)
+++ wwwbase/admin/visualTag.php	Wed Oct  9 01:09:14 2013	(r1020)
@@ -91,15 +91,12 @@
     SmartyWrap::assign('lexemeName', $lexemeName);
   }
 
-  $tags = VisualTag::get_all_by_imageId($imageId);
-
-  SmartyWrap::assign('savedTags', $tags);
   SmartyWrap::assign('imagePath', $imagePath);
   SmartyWrap::assign('imageId', $imageId);
   SmartyWrap::assign('imgLexemeId', $imgLexemeId);
 }
 
 SmartyWrap::assign('sectionTitle', 'Etichetare imagini pentru definiții');
-SmartyWrap::addCss('jcrop', 'select2', 'jqgrid', 'jqueryui');
-SmartyWrap::addJs('jquery', 'jcrop', 'visualTag', 'select2', 'select2Dev', 'jqgrid');
+SmartyWrap::addCss('jcrop', 'select2', 'jqgrid', 'jqueryui', 'gallery');
+SmartyWrap::addJs('jquery', 'jcrop', 'visualTag', 'select2', 'select2Dev', 'jqgrid', 'gallery'); 
 SmartyWrap::displayAdminPage('admin/visualTag.ihtml'); 

Modified: wwwbase/js/dexGallery.js
==============================================================================
--- wwwbase/js/dexGallery.js	Tue Oct  8 18:43:47 2013	(r1019)
+++ wwwbase/js/dexGallery.js	Wed Oct  9 01:09:14 2013	(r1020)
@@ -1,5 +1,5 @@
 $(document).ready(function() {
-  $('.colorbox').colorbox({
+  $('.gallery').colorbox({
     maxWidth: '84%', maxHeight: '84%',
     rel: 'gallery',
     onComplete: function() {

Modified: wwwbase/js/visualTag.js
==============================================================================
--- wwwbase/js/visualTag.js	Tue Oct  8 18:43:47 2013	(r1019)
+++ wwwbase/js/visualTag.js	Wed Oct  9 01:09:14 2013	(r1020)
@@ -2,6 +2,20 @@
   
   var jcrop_api;
   var coords = new Object();
+  var gridOptions = {
+    add: false,
+    edit: false,
+    search: false,
+    deltitle: 'Șterge',
+    refreshtitle: 'Actualizează'
+  };
+  var editOptions = {};
+  var addOptions = {};
+  var delOptions = {
+    afterSubmit: checkServerResponse,
+    closeOnEscape: true,
+    reloadAfterSubmit: true
+  };
   
   initJcrop();
   resetCoords();
@@ -58,6 +72,22 @@
     $('#helpText').toggle();
   });
 
+  $('#previewTags').click(function() {
+    img = $('#jcrop');
+    $.colorbox({
+      href: img.attr('src'),
+      title: img.attr('title'),
+      maxWidth: '84%', maxHeight: '84%',
+      onComplete: function() {
+        addCanvas();
+        drawOnCanvas();
+      },
+      onCleanup: function() {
+        removeCanvas();
+      }
+    });
+  });
+
   $('#tagsGrid').jqGrid({
     url: wwwRoot + 'ajax/getSavedTags.php',
     postData: {imageId: $('#imageId').val()},
@@ -84,19 +114,7 @@
     caption: 'Etichete salvate',
     editurl: wwwRoot + 'ajax/visualTagsEdit.php'
   })
-  .navGrid('#tagsPaging',
-  {
-    add: false,
-    edit: false,
-    search: false,
-    deltitle: 'Șterge',
-    refreshtitle: 'Actualizează'
-  }, 
-  {}, {},
-  {
-    afterSubmit: checkServerResponse
-  }
-  );
+  .navGrid('#tagsPaging', gridOptions, editOptions, addOptions, delOptions);
 });
 
 /** Replaces the submit event that triggers on change, set in select2Dev.js */

Modified: wwwbase/styles/flex.css
==============================================================================
--- wwwbase/styles/flex.css	Tue Oct  8 18:43:47 2013	(r1019)
+++ wwwbase/styles/flex.css	Wed Oct  9 01:09:14 2013	(r1020)
@@ -375,35 +375,3 @@
 .ui-widget-header .ui-icon {
 	background-image: url("lightness-1.10.3/images/ui-icons_222222_256x240.png");
 }
-
-/* VisualTag */
-#visualTagCanvas {
-  float: left;
-  width: 500px;
-  height: 500px;
-}
-
-.jcrop-holder {
-  border: 1px solid black;
-}
-
-.visualTagImg img {
-  float: left;
-  max-width: 500px;
-  max-height: 500px;
-}
-
-#helpText {
-  display: none;
-}
-
-#tagOptions {
-  float: left;
-  width: 320px;
-  margin: 0 0 15px 13px;
-}
-
-#savedTags {
-  float: left;
-  width: 430px;
-}

Added: wwwbase/styles/visualDict.css
==============================================================================
--- /dev/null	00:00:00 1970	(empty, because file is newly added)
+++ wwwbase/styles/visualDict.css	Wed Oct  9 01:09:14 2013	(r1020)
@@ -0,0 +1,62 @@
+#visualTagCanvas {
+  float: left;
+  width: 500px;
+  height: 500px;
+}
+
+.jcrop-holder {
+  border: 1px solid black;
+}
+
+.visualTagImg img {
+  float: left;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+#helpText {
+  display: none;
+}
+
+#tagOptions {
+  float: left;
+  width: 320px;
+  margin: 0 0 15px 13px;
+}
+
+#savedTags {
+  float: left;
+  width: 430px;
+}
+
+
+#tagsInfo {
+  display: none;
+}
+
+#gallery {
+  float: right;
+}
+
+#gallery img{
+  display: block;
+}
+
+#prototypeCanvas, 
+#prototypeTagsToggleButton {
+  display: none;
+}
+
+#activeCanvas {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+}
+
+#tagsToggle {
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  background-color: #fff;
+  cursor: pointer;
+}

Modified: wwwbase/styles/zepu.css
==============================================================================
--- wwwbase/styles/zepu.css	Tue Oct  8 18:43:47 2013	(r1019)
+++ wwwbase/styles/zepu.css	Wed Oct  9 01:09:14 2013	(r1020)
@@ -1412,34 +1412,3 @@
   border-radius: 4px;
   -moz-border-radius: 4px;
 }
-
-#tagsInfo {
-  display: none;
-}
-
-#gallery {
-  float: right;
-}
-
-#gallery img{
-  display: block;
-}
-
-#prototypeCanvas, 
-#prototypeTagsToggleButton {
-  display: none;
-}
-
-#activeCanvas {
-  position: absolute;
-  top: 5px;
-  left: 5px;
-}
-
-#tagsToggle {
-  position: absolute;
-  bottom: 5px;
-  right: 5px;
-  background-color: #fff;
-  cursor: pointer;
-}


More information about the Dev mailing list