QualityMonitorChecklist QualityMonitorChecklist

instant.json

{
  "name": "QualityMonitorChecklist",
  "description": "QualityMonitorChecklist",
  "data": {
    "checklist": {
      "prdSuiteItemList": [
        {
          "fragments": [
            {
              "checklistMessage": "check1",
              "definition": "def1"
            },
            {
              "checklistMessage": "check2",
              "definition": "def2"
            }
          ]
        },
        {
          "fragments": [
            {
              "checklistMessage": "check3",
              "definition": "def3"
            },
            {
              "checklistMessage": "check4",
              "definition": "def4"
            }
          ]
        }
      ]
    },
    "context": null,
    "display": {
      "checkRulePopupVisible": false,
      "checkRulePopupXPos": 0,
      "checkRulePopupYPos": 0,
      "checkRulePopupWidth": 450,
      "checkRulePopupHeight": 165
    }
  }
}

InstantTemplate.tpl

{macro main()}
     {section {id:"checklist", type:"DIV", cssClass:"checklist"}}

    <div class="head">
       <div>Last check 04JUN13 at 14:36</div>
	   <a href="">Check now</a>
	   <div>***</div>
    </div>

    {if (data.checklist != null) && (data.checklist.prdSuiteItemList != null)}
    <ul>
      {foreach item in data.checklist.prdSuiteItemList}
        {foreach fragment in item.fragments}
          {var messageId = "messageStatus_" + item_index + "_" + fragment_index /}
          <li {on click { fn: this.onCheckRule, scope:this, args: {'fragment' : fragment, 'closeWhenLeave' : false, 'messageId' : messageId} } /}
              {on mouseenter { fn: this.onCheckRule, scope:this, args: {'fragment' : fragment, 'closeWhenLeave' : true, 'messageId' : messageId} } /}
              {on mouseleave { fn: this.onCloseRule, scope:this, args: {'fragment' : fragment} } /}>
            <span {id messageId /} class="notchecked"></span>
            <span>${fragment.checklistMessage}</span>
          </li>
        {/foreach}
	    {/foreach}
    </ul>
    {/if}

    {/section}
{/macro}

InstantTemplateScript.js

({
    $classpath:'InstantTemplateScript',
    $prototype : {

    /**
     * event loop
     */
    onModuleEvent : function(evt) {
        if (evt.name == "refreshChecklist") {
    		this.$refresh();
        }
    },

	onCheckRule : function(evt, args) {
		if (this.moduleCtrl.getData().display.checkRulePopupVisible == false) {
			var messageDom = this.$getElementById(args.messageId);
			var htmlId = messageDom.getProperty("id");
			this.moduleCtrl.checkRule(args.fragment, args.closeWhenLeave, htmlId);
		} else {
		   if (args.closeWhenLeave == false) {
			   this.moduleCtrl.setCloseWhenLeave(false);
		   }
		}
	},

	onCloseRule : function(evt, args) {
		if (this.moduleCtrl.getData().display.closeWhenLeave == true) {
			window.setTimeout(function(){
				if (this.moduleCtrl.getData().display.overChecklistPopup == false) {
					/*if (this.moduleCtrl.getData().display.checkRulePopupVisible == false) {
						   this.moduleCtrl.checkRule(args.fragment, args.closeWhenLeave, args.messageId);
						}*/
					this.moduleCtrl.closeCheckRulePopup();
				}
			}.bind(this), 0)
		}
	}
	}
})

InstantTemplateStyle.tpl.css

{macro main()}

.checklist .head{
    text-align: center;
}

.checklist .head div,
.checklist .head a{
	line-height: 18px;
}

.checklist ul{
	margin: 0;
	padding: 0;
}

.checklist ul li{
	padding:1px 2px;
	margin:0 5px 5px;
	overflow: hidden;
}

.checklist ul li:hover{
	background: url("/modules/qualitymonitorchecklist/img/checklistbkg.png") no-repeat;
}

.checklist ul li.itemBig:hover{
	background: url("/modules/qualitymonitorchecklist/img/checklistbkgbig.png") no-repeat;
}

.checklist span.notchecked{
	background: url("/modules/qualitymonitorchecklist/img/greybullet.png") no-repeat;
	width: 16px;
	height: 16px;
	float: left;
}

.checklist ul li span{
	float: right;
	width: 166px;
	padding-top: 1px;
}

.content {
    margin-bottom: 50px;
    overflow: auto;
    padding: 10px;
    position: relative;
  }

.buttonsBar {
    bottom: 0;
    left: 0;
    padding: 10px;
    position: absolute;
    left: 80px;
    right: 0;
    text-align: right;
}

.buttonsLeft {
  float: left;
  padding-left: 20px;
}
{/macro}

Created by Instant Aria Templates, viewable on http://instant.ariatemplates.com/adoueb/5927196