Ionic Framework with Rhizome

Ionic Framework with Rhizome

by phollott

HTML

<script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
<link rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css">
<script src="//cdn.jsdelivr.net/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="//phollott.github.io/lib/rhizome/rhizome.js"></script>
<div ng-app="rhzApp">
    <div class="row" ng-controller="RhzCtrl">
        <rhz-ion-questionnaire/>  
    </div>
</div>

CSS

.q4c-sq1 {
    width: 276px;
    height: 276px;
    float: left
}
.q4c-sq2 {
    width: 265px;
    text-align: center;
    float: left
}
#rhizSvg {
    width: 265px;
    height: 265px;
    background-color: lightgray
}
.frame {
    opacity: 0
}
.buttonface {
    width: 250px;
    height: 25px;
}
.buttonhalf {
    width: 125px;
    height: 25px;
    font-size: 8pt;
}
ol.buttonlist {
    list-style: none;
    margin: 0;
    padding: 0
}
.question {
    padding: 5px;
    max-width: 250px;
}
.label {
    font-family: Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: bold
}

JavaScript

var RhzApp;
(function (RhzApp) {
                
    var app = angular.module('rhzApp', ['ionic', 'rhizome']);

    app.controller('RhzCtrl', function ($scope, codeService, jsonpService) {
        // load questionnaire json
        jsonpService.getData(function(resource) {
            codeService.loadCodedConcepts(resource.content)
            $scope.$broadcast('RhzFocusSvg', {
                svg: resource.content.text.div,
                frame: codeService.getInitialFrame()
            })
            $scope.$broadcast('RhzQuestionnaire', {
                resourceContent: resource.content
            })
        }, "http://phollott.github.io/rhizome/fhir/questionnaire/3142.json")

        $scope.restartQuestionnaire = function () {
            $scope.group = resource.content.group;
            $scope.$broadcast('RhzFocusSvg', {
                frame: codeService.getInitialFrame()
            });
        }

        $scope.showPayload = function () {
            alert(JSON.stringify(resource))
        }

    });         

})(RhzApp || (RhzApp = {}));