Changeset 145

Timestamp:

Jan 28, 2010, 5:34:50 PM (13 years ago)

Author:

duh

Message:

• wizard subjects page now build a table with features, does not work properly yet
• youtube autoplay help items are possible now
• development grouping page for selecting subjects and grouping them by dragging and dropping

Location:

trunk

Files:

• grails-app/controllers/dbnp/studycapturing/WizardController.groovy (modified) (3 diffs)
• grails-app/domain/dbnp/data/Term.groovy (modified) (1 diff)
• grails-app/domain/dbnp/studycapturing/Subject.groovy (modified) (2 diffs)
• grails-app/domain/dbnp/studycapturing/TemplateField.groovy (modified) (1 diff)
• grails-app/domain/dbnp/studycapturing/TemplateFieldType.groovy (modified) (1 diff)
• grails-app/domain/dbnp/studycapturing/TemplateSubjectField.groovy (modified) (1 diff)
• grails-app/taglib/dbnp/studycapturing/WizardTagLib.groovy (modified) (5 diffs)
• grails-app/views/wizard/common/_navigation.gsp (modified) (1 diff)
• grails-app/views/wizard/common/_wizard.gsp (modified) (1 diff)
• grails-app/views/wizard/index.gsp (modified) (1 diff)
• grails-app/views/wizard/pages/_groups.gsp (added)
• grails-app/views/wizard/pages/_study.gsp (modified) (2 diffs)
• grails-app/views/wizard/pages/_subjects.gsp (modified) (1 diff)
• grails-app/views/wizard/pages/_three.gsp (modified) (1 diff)
• web-app/css/wizard.css (modified) (2 diffs)
• web-app/js/development.js (added)
• web-app/js/swfobject.js (added)
• web-app/js/wizard.js (modified) (4 diffs)

trunk/grails-app/controllers/dbnp/studycapturing/WizardController.groovy

@@ -51 +51 @@
                                 [title: 'Study'],               // study
                                 [title: 'Subjects'],    // subjects
+                                [title: 'Groups'],              // groups
                                 [title: 'Form elements demo page']
                         ]
@@ -80 +81 @@
                                 if (params.get('startDate')) {
                                         params.startDate = new Date().parse("d/M/yyyy", params.get('startDate').toString())
+                                }
+
+                                // if a template is selected, get template instance
+                                if (params.get('template')) {
+                                        params.template = Template.findByName(params.get('template'))
                                 }
 
@@ -125 +131 @@
                                         error()
                                 }
-                        }.to "pageThree"
+                        }.to "groups"
                         on("previous") {
-                                // handle data?
-                                // go to study page
+                                // TODO
                         }.to "study"
                 }
 
+                groups {
+                        render(view: "_groups")
+                        onRender {
+                                flow.page = 3
+
+                                if (!flow.groups) {
+                                        flow.groups = []
+                                }
+                        }
+                        on("next") {
+                                // TODO
+                        }.to "groups"
+                        on("previous") {
+                                // TODO
+                        }.to "subjects"
+                }
+
                 // render page three
-                pageThree {
+                demo {
                         render(view: "_three")
                         onRender {

trunk/grails-app/domain/dbnp/data/Term.groovy

@@ -7 +7 @@
  * The Term object should point to an existing term in an online ontology, therefore instances of this class can also
  * be seen as a cache of elements of the external ontology.
+ *
+ * Revision information:
+ * $Rev$
+ * $Author$
+ * $Date$
  */
-class Term {
-    static searchable = true
-    String name
-    Ontology ontology
-    String accession
+class Term implements Serializable {
+        static searchable = true
+        String name
+        Ontology ontology
+        String accession
 
-    static constraints = {
-    }
+        static constraints = {
+        }
 
-  def String toString() {
-    return name
-  }
-
-
+        def String toString() {
+                return name
+        }
 }

trunk/grails-app/domain/dbnp/studycapturing/Subject.groovy

@@ -5 +5 @@
 /**
  * This domain class describes the subjects in a study.
+ *
+ * Revision information:
+ * $Rev$
+ * $Author$
+ * $Date$
  */
-class Subject {
+class Subject implements Serializable {
         static searchable = true
         String name
@@ -16 +21 @@
 
         static hasMany = [
-                templateStringFields : String, // stores both STRING and STRINGLIST items (latter should be checked against the list)
-                templateIntegerFields : int,
-                templateFloatFields : float,
-                templateTermFields : Term
+                templateStringFields: String, // stores both STRING and STRINGLIST items (latter should be checked against the list)
+                templateIntegerFields: int,
+                templateFloatFields: float,
+                templateTermFields: Term
         ]
-        
+
         static constraints = {
         }

trunk/grails-app/domain/dbnp/studycapturing/TemplateField.groovy

@@ -3 +3 @@
 /**
  * This is the superclass for template fields. Normally, this class will not be instantiated.
+ *
+ * Revision information:
+ * $Rev$
+ * $Author$
+ * $Date$
  */
-abstract class TemplateField {
-    String name
-    TemplateFieldType type
-    String unit
+abstract class TemplateField implements Serializable {
+        String name
+        TemplateFieldType type
+        String unit
 
-    static constraints = {
-            name(unique:true)
-            unit(nullable:true, blank:true)
-    }
+        static constraints = {
+                name(unique: true)
+                unit(nullable: true, blank: true)
+        }
 
         def String toString() {

trunk/grails-app/domain/dbnp/studycapturing/TemplateFieldType.groovy

@@ -3 +3 @@
 /**
  * Enum describing the type of a templated field.
+ * Revision information:
+ * $Rev$
+ * $Author$
+ * $Date$
  */
 public enum TemplateFieldType {
-    STRING('String'),
-    INTEGER('Integer number'),
-    FLOAT('Decimal number'),
-    STRINGLIST('List of items'),
-    ONTOLOGYTERM('Ontology Reference')
+        STRING('String'),
+        INTEGER('Integer number'),
+        FLOAT('Decimal number'),
+        STRINGLIST('List of items'),
+        ONTOLOGYTERM('Ontology Reference')
 
-    String name
+        String name
 
-    TemplateFieldType(String name) {
-     this.name = name
-    }
+        TemplateFieldType(String name) {
+                this.name = name
+        }
 
-    static list() {
-     [STRING, INTEGER, FLOAT, STRINGLIST, ONTOLOGYTERM]
-    }
+        static list() {
+                [STRING, INTEGER, FLOAT, STRINGLIST, ONTOLOGYTERM]
+        }
 
-  // It would be nice to see the description string in the scaffolding,
-  // and the following works, but then the item cannot be saved properly.
-  // TODO: find a way to display the enum description but save the enum value in the scaffolding
-  /*def String toString() {
-      return this.name
-  }*/
-
+        // It would be nice to see the description string in the scaffolding,
+        // and the following works, but then the item cannot be saved properly.
+        // TODO: find a way to display the enum description but save the enum value in the scaffolding
+        /*
+        def String toString() {
+                  return this.name
+        }
+        */
 }

trunk/grails-app/domain/dbnp/studycapturing/TemplateSubjectField.groovy

@@ -3 +3 @@
 /**
  * Instances of this class describe an extra (template) field for the Subject entity.
+ *
+ * Revision information:
+ * $Rev$
+ * $Author$
+ * $Date$
  */
 class TemplateSubjectField extends TemplateField {

trunk/grails-app/taglib/dbnp/studycapturing/WizardTagLib.groovy

@@ -176 +176 @@
 
         /**
+         * generate a base form element
+         * @param String        inputElement name
+         * @param Map           attributes
+         * @param Closure       help content
+         */
+        def baseElement = { inputElement, attrs, help ->
+                // work variables
+                def description = attrs.remove('description')
+                def addExampleElement = attrs.remove('addExampleElement')
+
+                // render a form element
+                out << '<div class="element">'
+                out << ' <div class="description">'
+                out << description
+                out << ' </div>'
+                out << ' <div class="input">'
+                out << "$inputElement"(attrs)
+                if(help()) {
+                        out << '        <div class="helpIcon"></div>'
+                }
+
+                // add an disabled input box for feedback purposes
+                // @see dateElement(...)
+                if (addExampleElement) {
+                        def exampleAttrs = new LinkedHashMap()
+                        exampleAttrs.name = attrs.get('name')+'Example'
+                        exampleAttrs.class  = 'isExample'
+                        exampleAttrs.disabled = 'disabled'
+                        exampleAttrs.size = 30
+                        out << textField(exampleAttrs)
+                }
+
+                out << ' </div>'
+
+                // add help content if it is available
+                if (help()) {
+                        out << '  <div class="helpContent">'
+                        out << '    ' + help()
+                        out << '  </div>'
+                }
+
+                out << '</div>'
+        }
+
+        /**
          * render a textFieldElement
          * @param Map attrs
          * @param Closure body  (help text)
          */
-        def textFieldElement = {attrs, body ->
+        def textFieldElement = { attrs, body ->
                 // set default size, or scale to max length if it is less than the default size
                 if (!attrs.get("size")) {
@@ -190 +235 @@
                 }
 
-                // work variables
-                def addExampleElement = attrs.remove('addExampleElement')
-                //attrs.remove('addExampleElement')
-
-                // render a text element
-                out << '<div class="element">'
-                out << ' <div class="description">'
-                out << attrs.get('description')
-                out << ' </div>'
-                out << ' <div class="input">'
-
-                // add text input field
-                out << textField(attrs)
-
-                // add a help icon if help information is available
-                if (body()) {
-                        out << '        <div class="helpIcon" />'
-                }
-
-                // add an disabled input box for feedback purposes
-                // @see dateElement(...)
-                if (addExampleElement) {
-                        def exampleAttrs = new LinkedHashMap()
-                        exampleAttrs.name = attrs.get('name')+'Example'
-                        exampleAttrs.class  = 'isExample'
-                        exampleAttrs.disabled = 'disabled'
-                        out << textField(exampleAttrs)
-                }
-
-                // end HTML
-                out << ' </div>'
-
-                // add help content if it is available
-                if (body()) {
-                        out << '  <div class="helpContent">'
-                        out << '    ' + body()
-                        out << '  </div>'
-                }
-
-                out << '</div>'
-        }
-
-        //def baseElement
-
-        def templateElement = { attrs, body ->
-
+                // render template element
+                baseElement.call(
+                        'textField',
+                        attrs,
+                        body
+                )
         }
 
         /**
          * render a dateElement
+         * NOTE: datepicker is attached through wizard.js!
          * @param Map attrs
          * @param Closure body  (help text)
@@ -255 +261 @@
                 
                 // render a normal text field
-                out << textFieldElement(attrs,body)
-
-                // and attach the jquery-ui datepicker
-                out << '<script type="text/javascript">'
-                out << '$(document).ready(function() {'
-                out << '        $("#' + attrs.get('name') + '").datepicker({'
-                out << '                dateFormat: \'dd/mm/yy\','
-                out << '                altField: \'#' + attrs.get('name') + 'Example\', altFormat: \'DD, d MM, yy\''
-                out << '        });'
-                out << '});'
-                out << '</script>'
+                //out << textFieldElement(attrs,body)
+                textFieldElement.call(
+                        attrs,
+                        body
+                )
+        }
+        
+        /**
+         * Template form element
+         * @param Map           attributes
+         * @param Closure       help content
+         */
+        def speciesElement = { attrs, body ->
+                // render template element
+                baseElement.call(
+                        'speciesSelect',
+                        attrs,
+                        body
+                )
         }
 
@@ -285 +299 @@
 
         /**
+         * Template form element
+         * @param Map           attributes
+         * @param Closure       help content
+         */
+        def templateElement = { attrs, body ->
+                // render template element
+                baseElement.call(
+                        'templateSelect',
+                        attrs,
+                        body
+                )
+        }
+        
+        /**
          * render a template select element
          * @param Map attrs
@@ -296 +324 @@
                         attrs.name = 'template'
                 }
-
+                
                 out << select(attrs)
         }
+
+        def templateColumnHeaders = { attrs, body ->
+                TemplateSubjectField.findAll().each() {
+                        out << '<div class="column">' + it + '</div>'
+                }
+        }
+
+        def templateColumns = { attrs, body ->
+                def subjectId = attrs.remove('id')
+                
+                // for now, fetch them all
+                // also, this should probably be cached to reduce database load...
+                TemplateSubjectField.findAll().each() {
+                        out << '<div class="column">'
+                        out << '<input type="text">'
+                        out << '</div>'
+                }
+        }
 }

trunk/grails-app/views/wizard/common/_navigation.gsp

@@ -15 +15 @@
 %>
     <div class="navigation">
-      <g:if test="${page>1}"><wizard:ajaxButton name="previous" value="&laquo; prev" url="[controller:'wizard',action:'pages']" update="[success:'wizardPage',failure:'wizardError']" afterSuccess="attachHelpTooltips()" class="prevnext" /></g:if>
+      <g:if test="${page>1}"><wizard:ajaxButton name="previous" value="&laquo; prev" url="[controller:'wizard',action:'pages']" update="[success:'wizardPage',failure:'wizardError']" afterSuccess="onWizardPage()" class="prevnext" /></g:if>
       <g:if test="${page>1 && page<pages.size}"> | </g:if>
-      <g:if test="${page<pages.size}"><wizard:ajaxButton name="next" value="next &raquo;" url="[controller:'wizard',action:'pages']" update="[success:'wizardPage',failure:'wizardError']" afterSuccess="attachHelpTooltips()" class="prevnext" /></g:if>
+      <g:if test="${page<pages.size}"><wizard:ajaxButton name="next" value="next &raquo;" url="[controller:'wizard',action:'pages']" update="[success:'wizardPage',failure:'wizardError']" afterSuccess="onWizardPage()" class="prevnext" /></g:if>
     </div>

trunk/grails-app/views/wizard/common/_wizard.gsp

@@ -19 +19 @@
         <g:form action="pages" name="wizardForm" id="wizardForm">
                 <div id="wizardPage">
-                        <wizard:ajaxFlowRedirect form="form#wizardForm" name="next" url="[controller:'wizard',action:'pages']" update="[success:'wizardPage',failure:'wizardError']" afterSuccess="attachHelpTooltips()" />
+                        <wizard:ajaxFlowRedirect form="form#wizardForm" name="next" url="[controller:'wizard',action:'pages']" update="[success:'wizardPage',failure:'wizardError']" afterSuccess="onWizardPage()" />
                 </div>
         </g:form>

trunk/grails-app/views/wizard/index.gsp

@@ -19 +19 @@
         <meta name="layout" content="main"/>
         <link rel="stylesheet" href="${resource(dir: 'css', file: 'wizard.css')}"/>
+        <script type="text/javascript" src="${resource(dir: 'js', file: 'development.js')}"></script>
         <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery.qtip-1.0.0-rc3.min.js')}"></script>
+        <script type="text/javascript" src="${resource(dir: 'js', file: 'swfobject.js')}"></script>
         <script type="text/javascript" src="${resource(dir: 'js', file: 'wizard.js')}"></script>
 </head>

trunk/grails-app/views/wizard/pages/_study.gsp

@@ -16 +16 @@
 %>
 <wizard:pageContent>
-        <wizard:templateSelect />
         <wizard:textFieldElement name="title" description="Title" error="title" value="${study?.title}">
                 The title of the study you are creating
@@ -31 +30 @@
                 The start date of the study     
         </wizard:dateElement>
+        <wizard:templateElement name="template" description="Template" value="${study?.template}">
+                The meta data template to use for this study
+        </wizard:templateElement>
 </wizard:pageContent>

trunk/grails-app/views/wizard/pages/_subjects.gsp

@@ -16 +16 @@
 %>
 <wizard:pageContent>
-<wizard:ajaxButton name="add" value="Add" url="[controller:'wizard',action:'pages']" update="[success:'wizardPage',failure:'wizardError']" afterSuccess="attachHelpTooltips()" />
+<wizard:ajaxButton name="add" value="Add" url="[controller:'wizard',action:'pages']" update="[success:'wizardPage',failure:'wizardError']" afterSuccess="onWizardPage()" />
 <input name="addNumber" size="4" maxlength="4" value="1">
 subjects of species
 <wizard:speciesSelect name="addSpecies" />
 <g:if test="${subjects}">
-<div class="subjects">
+<div class="table">
+        <div class="header">
+                <div class="firstColumn">#</div>
+                <div class="column">name</div>
+                <div class="column">species</div>
+            <wizard:templateColumnHeaders/>
+        </div>
 <g:each var="subject" status="i" in="${subjects}">
-        <div class="subject<g:if test="${i>0}"> topborder</g:if>">
-                <div class="row">${i+1}</div>
-                <div class="row"><g:textField name="test" value="test" size="12" maxlength="12" /></div>
-                <div class="row">
-                        <wizard:speciesSelect value="${subject.species}" name="species_${i}" />
+        <div class="row">
+                <div class="firstColumn">${i}</div>
+                <div class="column"><g:textField name="subject_${i}_name" value="${subject.name}" size="12" maxlength="12" /></div>
+                <div class="column">
+                        <wizard:speciesSelect value="${subject.species}" name="subject_${i}_species" />
                 </div>
-                <div class="row">${subject.name}</div>
+                <wizard:templateColumns id="${i}" />
         </div>
 </g:each>

trunk/grails-app/views/wizard/pages/_three.gsp

@@ -31 +31 @@
         </wizard:textFieldElement>
         <wizard:dateElement name="startDate" description="Date element" error="startDate" value="${study?.startDate}">
-                <object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/2WNrx2jq184&hl=en_US&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/2WNrx2jq184&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
+                [youtube:2WNrx2jq184]
         </wizard:dateElement>
 </wizard:pageContent>

trunk/web-app/css/wizard.css

@@ -95 +95 @@
 }
 
+/** START ::  HELP **/
 .wizard .element .helpIcon {
     display: inline-block;
@@ -122 +123 @@
     display: none;
 }
-
-.wizard .subjects {
-    display: block;
-    /*
-    background-color: #c0ddea;
-    border: 1px solid #575a5d;
-    margin-top: 2px;
-    */
+/** END :: HELP **/
+
+/* START ::  TABLE */
+.wizard .table {
+    display: block;
     border: 1px solid #575a5d;
     background-color: #ebf7fc;
     margin-top: 10px;
-}
-
-.wizard .subjects .subject {
-    display: block;
-}
-
-.wizard .topborder {
+    font-size: 11px;
+    overflow: hidden;    
+}
+
+.wizard .column {
+    display: inline-block;
+    padding: 2px 4px;
+    width: 120px;
+}
+
+.wizard .firstColumn {
+    display: inline-block;
+    padding: 2px 4px;
+    width: 40px;
+}
+
+.wizard .table .header {
+    display: block;
+    background-color: #006DBA;
+    color: #fff;
+    font-weight: bold;
+    width: 2000px;
+}
+
+.wizard .table .header .column .first {
+    width: 40px;
+}
+
+.wizard .table .row {
+    display: block;
+    width: 2000px;
+    height: 28px;
     border-top: 1px solid #8e908f;
 }
 
-.wizard .subjects .subject .row {
-    display: inline-block;
-    /*
-    border: 1px solid #575a5d;
-    margin: 1px 1px 0px 0px;
-    */
-}
+.wizard .table input, .wizard .table select {
+    border: 1px solid #8e908f;
+    margin: 2px 0;
+    padding: 2px 4px;
+    background-color: transparent;
+    width: 100px;
+}
+
+.wizard .table .highlight, .wizard .table .highlight input, .wizard .table .highlight select {
+    background-color: #006DBA;
+    color: #fff;
+}
+/* END :: TABLE */
+
+
+.selectable .ui-selecting { background: #FECA40; }
+.selectable .ui-selected { background: #F39814; color: white; }
+.selectable { list-style-type: none; margin: 0; padding: 0; width: 200px; }
+.selectable li { margin: 3px; padding: 0.4em; font-size: 1em; height: 18px; }
+
+.wizard .grouping {
+    display: block;
+}
+
+.wizard .subjects {
+    display: inline-block;
+}
+
+.wizard .groups {
+    display: inline-block;
+    height: 100%
+}
+
+.droppable { width: 300px; }
+
+

trunk/web-app/js/wizard.js

@@ -14 +14 @@
  */
 $(document).ready(function() {
+    // check if user is using Firefox 3.6 and warm the user
+    // about the XMLHttpRequest bug that causes the wizard to break...
     re = /Firefox\/3\.6/gi;
     if (navigator.userAgent.match(re)) {
@@ -22 +24 @@
 
     // attach Tooltips
+    onWizardPage();
+});
+
+// runs when document is ready or a wizard action has been performs
+// @see _wizard.gsp, _navigation.gsp, _subjects.gsp
+function onWizardPage() {
+    // attach help tooltips
+    //insertYoutubePlayers();
     attachHelpTooltips();
-});
+    attachDatePickers();
+    attachTableEvents();
+    attachGroupingEvents();
+}
 
 // attach help tooltips
@@ -29 +42 @@
     // attach help action on all wizard help icons
     $('div#wizard').find('div.helpIcon').each(function() {
-        $(this).qtip({
+        helpIcon = $(this)
+        helpContent = helpIcon.parent().parent().find('div.helpContent')
+
+        // handle special content
+        var specialContent = helpContent.html().match(/\[([^:]+)\:([^\]]+)\]/)
+        if (specialContent) {
+            // replace content by calling a helper function
+            eval(specialContent[1]+"('"+specialContent[2]+"',helpContent)");
+        }
+
+        // attach tooltip
+        helpIcon.qtip({
             content: 'leftMiddle',
             position: {
@@ -47 +71 @@
                 name: 'blue'
             },
-            content: $(this).parent().parent().find('div.helpContent').html(),
+            content: helpContent.html(),
             show: 'mouseover',
-            hide: 'mouseout'
+            hide: 'mouseout',
+            api: {
+                beforeShow: function() {
+                    // not used at this moment
+                }
+            }
         })
+
+        // remove helpcontent div as we don't need it anymore
+        helpContent.remove();
     });
 }
+
+// insert a youtube player in a certain element
+function youtube(video,element) {
+    // insert a div we will replace with a youtube player
+    element.html("<div id='"+video+"'></div>")
+
+    // insert youtube player
+    var params = { allowScriptAccess: "always" };
+    var atts = { id: 'myytplayer_'+video };
+    swfobject.embedSWF("http://www.youtube.com/v/"+video+"?enablejsapi=1&playerapiid=ytplayer_"+video,
+                       video, "200", "150", "8", null, null, params, atts)
+}
+
+// when a youtube player is ready, play the video
+function onYouTubePlayerReady(playerId) {
+    ytplayer = document.getElementById("my"+playerId);
+    ytplayer.playVideo();
+}
+
+// add datepickers to date fields
+function attachDatePickers() {
+    $('div#wizard').find("input[type=text][name$='Date']").each(function() {
+        $(this).datepicker({
+            dateFormat  : 'dd/mm/yy',
+            altField    : '#' + $(this).attr('name') + 'Example',
+            altFormat   : 'DD, d MM, yy'
+        });
+    })
+}
+
+// attach subject events
+function attachTableEvents() {
+    $('div#wizard').find('div.row').each(function() {
+        $(this).hover(
+            function() {
+                $(this).addClass('highlight');
+            },
+            function() {
+                $(this).removeClass('highlight');
+            }
+        )
+    });
+}
+
+function attachGroupingEvents() {
+    console.log('attach drag and drop events')
+
+    $(".groups").find('div.droppable').droppable({
+                drop: function(event, ui) {
+                        $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+                }
+        });
+
+
+    $(".subjects").find(".selectable").selectable({
+        stop: function() {
+            // remove draggable from unselected items
+            $('.ui-selectee:not(.ui-selected)', this).each(function() {
+                $(this).draggable('destroy')   
+            })
+
+            // attach draggable to selected items
+            var subjects = $('.ui-selected', this);
+            subjects.each(function() {
+                var d = this
+                var D = $(this)
+                var content = D.html()
+                var offset = D.offset()
+
+                D.draggable({
+                    revert: 'invalid',
+                    start: function(event, ui) {
+                        // change dragged item's content to summarize selected items
+                        D.html(subjects.length + ' subjects');
+
+                        // hide the other items
+                        subjects.each(function() {
+                            if (this != d) {
+                                $(this).animate(
+                                    {
+                                        opacity: 0
+                                    },
+                                    200
+                                );
+                            }
+                        });
+                    },                  
+                    stop: function(event, ui) {
+                        // restore original content
+                        D.html(content);
+
+                        // make selected items visible
+                        subjects.each(function() {
+                            if (this != d) {
+                                $(this).animate(
+                                    {
+                                        opacity: 100
+                                    },
+                                    200
+                                );
+                            }
+                        });
+                    }
+                });
+            });
+        }
+    });
+}
+