Window Style

dojo-toolkit.js

// http://dojotoolkit.org/documentation/#widgets

define(["../Theme", "dojox/gfx/gradutils", "./common"], function(Theme, gradutils, themes){
    // created by Tom Trenka

    var g = Theme.generateGradient,
        defaultFill = {type: "linear", space: "shape", x1: 0, y1: 0, x2: 0, y2: 100};

    themes.Claro = new Theme({
        chart: {
            fill:       {
                type: "linear",
                x1: 0, x2: 0, y1: 0, y2: 100,
                colors: [
                    { offset: 0, color: "#dbdbdb" },
                    { offset: 1, color: "#efefef" }
                ]
            },
            stroke:    {color: "#b5bcc7"}
        },
        plotarea: {
            fill:       {
                type: "linear",
                x1: 0, x2: 0, y1: 0, y2: 100,
                colors: [
                    { offset: 0, color: "#dbdbdb" },
                    { offset: 1, color: "#efefef" }
                ]
            }
        },
 axis:{
            stroke:    { // the axis itself
                color: "#888c76",
                width: 1
            },
            tick: {    // used as a foundation for all ticks
                color:     "#888c76",
                position:  "center",
                font:      "normal normal normal 7pt Verdana, Arial, sans-serif",    // labels on axis
                fontColor: "#888c76"                                // color of labels
            }
        },
        series: {
            stroke:  {width: 2.5, color: "#fff"},
            outline: null,
            font: "normal normal normal 7pt Verdana, Arial, sans-serif",
            fontColor: "#131313"
        },
        marker: {
            stroke:  {width: 1.25, color: "#131313"},
            outline: {width: 1.25, color: "#131313"},
            font: "normal normal normal 8pt Verdana, Arial, sans-serif",
            fontColor: "#131313"
        },
        seriesThemes: [
            {fill: g(defaultFill, "#2a6ead", "#3a99f2")},
            {fill: g(defaultFill, "#613e04", "#996106")},
            {fill: g(defaultFill, "#0e3961", "#155896")},
            {fill: g(defaultFill, "#55aafa", "#3f7fba")},
            {fill: g(defaultFill, "#ad7b2a", "#db9b35")}
        ],
        markerThemes: [
            {fill: "#2a6ead", stroke: {color: "#fff"}},
            {fill: "#613e04", stroke: {color: "#fff"}},
            {fill: "#0e3961", stroke: {color: "#fff"}},
            {fill: "#55aafa", stroke: {color: "#fff"}},
            {fill: "#ad7b2a", stroke: {color: "#fff"}}
        ]
})

enyo-button.js

enyo.kind({
	name: "onyx.sample.ButtonSample",
	classes: "onyx onyx-sample",
	components: [
		{classes: "onyx-sample-divider", content: "Buttons"},
		{classes: "onyx-sample-tools", components: [
			{kind:"onyx.Button", content: "Button", ontap:"buttonTapped"}
		]},
		{classes: "onyx-sample-tools", components: [
			{kind:"onyx.Button", content: "Affirmative", classes: "onyx-affirmative", ontap:"buttonTapped"},
			{kind:"onyx.Button", content: "Negative", classes: "onyx-negative", ontap:"buttonTapped"},
			{kind:"onyx.Button", content: "Blue", classes: "onyx-blue", ontap:"buttonTapped"},
			{kind:"onyx.Button", content: "Dark", classes: "onyx-dark", ontap:"buttonTapped"},
			{kind:"onyx.Button", content: "Custom", style: "background-color: purple; color: #F1F1F1;", ontap:"buttonTapped"}
		]},
		{classes: "onyx-sample-tools", components: [
			{kind:"onyx.Button", content: "Active", classes: "active", ontap:"buttonTapped"},
			{kind:"onyx.Button", content: "Disabled", disabled: true, ontap:"buttonTapped"},
			{kind:"onyx.Button", content: "Active Disabled", classes: "active", disabled: true, ontap:"buttonTapped"}
		]},
		{classes: "onyx-sample-tools", components: [
			{kind:"onyx.Button", content: "Tall Button", style: "height: 70px;", ontap:"buttonTapped"}
		]},
		{classes: "onyx-sample-divider", content: "Buttons with images"},
		{classes: "onyx-sample-tools", components: [
			{kind: "onyx.Button", name:"Image Button", ontap:"buttonTapped", components: [
				{tag: "img", attributes: {src: "assets/enyo-logo-small.png"}},
				{content: "There is an image here"}
			]},
			{kind: "onyx.Button", name:"Fishbowl Button", ontap:"buttonTapped", components: [
				{kind: "onyx.Icon", src: "assets/fish_bowl.png"}
			]}
		]},
		{kind: "onyx.Groupbox", classes:"onyx-sample-result-box", components: [
			{kind: "onyx.GroupboxHeader", content: "Result"},
			{name:"result", classes:"onyx-sample-result", content:"No button tapped yet."}
		]}
	],
	buttonTapped: function(inSender, inEvent) {
		if (inSender.content){
			this.$.result.setContent("The \"" + inSender.getContent() + "\" button was tapped");
		} else {
			this.$.result.setContent("The \"" + inSender.getName() + "\" button was tapped");
		}
	}
});

enyo.js

// http://enyojs.com/sampler/latest/

enyo.kind({
	name: "enyo.sample.PanelsFlickrSample",
	kind: "Panels",
	classes: "panels-sample-flickr-panels enyo-unselectable enyo-fit",
	arrangerKind: "CollapsingArranger",
	components: [
		{layoutKind: "FittableRowsLayout", components: [
			{kind: "onyx.Toolbar", components: [
				{kind: "onyx.InputDecorator", style: "width: 90%;", layoutKind: "FittableColumnsLayout", components: [
					{name: "searchInput", fit: true, kind: "onyx.Input", value: "Japan", onchange: "search"},
					{kind: "Image", src: "assets/search-input-search.png", style: "width: 20px; height: 20px;"}
				]},
				{name: "searchSpinner", kind: "Image", src: "assets/spinner.gif", showing: false}
			]},
			{kind: "List", fit: true, touch: true, onSetupItem: "setupItem", components: [
				{name: "item", style: "padding: 10px;", classes: "panels-sample-flickr-item enyo-border-box", ontap: "itemTap", components: [
					{name: "thumbnail", kind: "Image", classes: "panels-sample-flickr-thumbnail"},
					{name: "title", classes: "panels-sample-flickr-title"}
				]},
				{name: "more", style: "background-color: #323232;", components: [
					{kind: "onyx.Button", content: "more photos", classes: "onyx-dark panels-sample-flickr-more-button", ontap: "more"},
					{name: "moreSpinner", kind: "Image", src: "assets/spinner.gif", classes: "panels-sample-flickr-more-spinner"}
				]}
			]}
		]},
		{name: "pictureView", fit: true, kind: "FittableRows", classes: "enyo-fit panels-sample-flickr-main", components: [
			{name: "backToolbar", kind: "onyx.Toolbar", showing: false, components: [
				{kind: "onyx.Button", content: "Back", ontap: "showList"}
			]},
			{fit: true, style: "position: relative;", components: [
				{name: "flickrImage", kind: "Image", classes: "enyo-fit panels-sample-flickr-center panels-sample-flickr-image", showing: false, onload: "imageLoaded", onerror: "imageLoaded"},
				{name: "imageSpinner", kind: "Image", src: "assets/spinner-large.gif", classes: "enyo-fit panels-sample-flickr-center", showing: false}
			]}
		]},
		{name: "flickrSearch", kind: "enyo.sample.PanelsFlickrSearch", onResults: "searchResults"}
	],
	rendered: enyo.inherit(function(sup) {
		return function() {
			sup.apply(this, arguments);
			this.search();
		};
	}),
	reflow: enyo.inherit(function(sup) {
		return function() {
			sup.apply(this, arguments);
			var backShowing = this.$.backToolbar.showing;
			this.$.backToolbar.setShowing(enyo.Panels.isScreenNarrow());
			if (this.$.backToolbar.showing != backShowing) {
				this.$.pictureView.resize();
			}
		};
	}),
	search: function() {
		this.searchText = this.$.searchInput.getValue();
		this.page = 0;
		this.results = [];
		this.$.searchSpinner.show();
		this.$.flickrSearch.search(this.searchText);
	},
	searchResults: function(inSender, inResults) {
		this.$.searchSpinner.hide();
		this.$.moreSpinner.hide();
		this.results = this.results.concat(inResults);
		this.$.list.setCount(this.results.length);
		if (this.page === 0) {
			this.$.list.reset();
		} else {
			this.$.list.refresh();
		}
	},
	setupItem: function(inSender, inEvent) {
		var i = inEvent.index;
		var item = this.results[i];
		this.$.item.addRemoveClass("onyx-selected", inSender.isSelected(inEvent.index));
		this.$.thumbnail.setSrc(item.thumbnail);
		this.$.title.setContent(item.title || "Untitled");
		this.$.more.canGenerate = !this.results[i+1];
		return true;
	},
	more: function() {
		this.page++;
		this.$.moreSpinner.show();
		this.$.flickrSearch.search(this.searchText, this.page);
	},
	itemTap: function(inSender, inEvent) {
		if (enyo.Panels.isScreenNarrow()) {
			this.setIndex(1);
		}
		this.$.imageSpinner.show();
		var item = this.results[inEvent.index];

		if (item.original == this.$.flickrImage.getSrc()) {
			this.imageLoaded();
		} else {
			this.$.flickrImage.hide();
			this.$.flickrImage.setSrc(item.original);
		}
	},
	imageLoaded: function() {
		var img = this.$.flickrImage;
		img.removeClass("tall");
		img.removeClass("wide");
		img.show();
		var b = img.getBounds();
		var r = b.height / b.width;
		if (r >= 1.25) {
			img.addClass("tall");
		} else if (r <= 0.8 ) {
			img.addClass("wide");
		}
		this.$.imageSpinner.hide();
	},
	showList: function() {
		this.setIndex(0);
	}
});

// A simple component to do a Flickr search.
enyo.kind({
	name: "enyo.sample.PanelsFlickrSearch",
	kind: "Component",
	published: {
		searchText: ""
	},
	events: {
		onResults: ""
	},
	url: "https://api.flickr.com/services/rest/",
	pageSize: 200,
	api_key: "2a21b46e58d207e4888e1ece0cb149a5",
	search: function(inSearchText, inPage) {
		this.searchText = inSearchText || this.searchText;
		var i = (inPage || 0) * this.pageSize;
		var params = {
			method: "flickr.photos.search",
			format: "json",
			api_key: this.api_key,
			per_page: this.pageSize,
			page: i,
			text: this.searchText
		};
		var req;
		if (window.location.protocol === "ms-appx:") {
			params.nojsoncallback = 1;
			// Use ajax for platforms with no jsonp support (Windows 8)
			req = new enyo.Ajax({url: this.url, handleAs: "text"})
				.response(this, "processAjaxResponse")
				.go(params);
		} else {
			req = new enyo.JsonpRequest({url: this.url, callbackName: "jsoncallback"})
				.response(this, "processResponse")
				.go(params);
		}
		return req;
	},
	processAjaxResponse: function(inSender, inResponse) {
		inResponse = JSON.parse(inResponse);
		this.processResponse(inSender, inResponse);
	},
	processResponse: function(inSender, inResponse) {
		var photos = inResponse.photos ? inResponse.photos.photo || [] : [];
		for (var i=0, p; (p=photos[i]); i++) {
			var urlprefix = "http://farm" + p.farm + ".static.flickr.com/" + p.server + "/" + p.id + "_" + p.secret;
			p.thumbnail = urlprefix + "_s.jpg";
			p.original = urlprefix + ".jpg";
		}
		this.doResults(photos);
		return photos;
	}
});

igniteui.js

// http://www.igniteui.com/layout-manager/overview

$('#layout').igLayoutManager({
    layoutMode: "grid",
    width: "100%",
    height: "500px",
    gridLayout: {
        cols: 3,
        rows: 3
    },
    items: [
        {
            rowSpan: 2,
            colSpan: 2,
            colIndex: 0,
            rowIndex: 0
        },
        {
            rowSpan: 1,
            colSpan: 1,
            rowIndex: 0,
            colIndex: 2
        },
        {
            rowSpan: 1,
            colSpan: 1,
            rowIndex: 1,
            colIndex: 2
        },
        {
            rowSpan: 1,
            colSpan: 3,
            colIndex: 0,
            rowIndex: 2
        }
    ]
});

sample-directive.js

angular.module('directive.ProbeHistoGraph', []).directive('probegraph', ['$rootScope', function() {
  return {
    restrict: 'E',
    scope: {
      params: '=',
    },
    template: '<div class="text-right"><a class="download-graph" ng-click="download()">Download</a></div>'+
      '<div class="probe-histo-graph" style="width:100%;"></div>',

    link: function(scope, el, attrs) {
      var chart;

      draw();

      function getSeries() {
        var series = []

        for (var probe_name in scope.params) {
          var data = [];
          var mode = scope.params[probe_name].agg_type || 'avg';

          scope.params[probe_name].timestamps_and_stats.forEach(function(it) {
            data.push([it[0], it[1][mode]]);
          });

          series.push({name: probe_name, data: data});
        }

        return series;
      }

      function draw() {
        if (chart) chart.destroy();

        chart = new Highcharts.Chart({
          chart: {
            renderTo: el.find('.probe-histo-graph')[0],
            animation: false
          },
          credits: {
            enabled: false
          },
          title: {
            text: 'Probe values in the past 7 days'
          },
          xAxis: {
            type: 'datetime',
            gridLineWidth: 0.1,
          },
          yAxis: [{
          }],
          plotOptions: {
            area: {
              enableMouseTracking: true,
              fillOpacity: 0.6
            },
            series: {
            }
          },
          series: getSeries(),
        });
      }

      scope.download = function() {
        var svg = chart.getSVG({
          chart: {
            backgroundColor: '#141a1f'
          },
          exporting: {
            sourceWidth: chart.chartWidth,
            sourceHeight: chart.chartHeight,
          }
        });

        // Double the resolution
        var render_height = chart.chartHeight * 2;
        var render_width = chart.chartWidth * 2;

        // Create a canvas
        var canvas = document.createElement('canvas');
        canvas.height = render_height;
        canvas.width = render_width;

        // Create an image and draw the SVG onto the canvas
        var image = new Image;
        image.onload = function() {
          canvas.getContext('2d').drawImage(this, 0, 0, render_width, render_height);

          // Download the canvas as png
          canvas.toBlob(function(blob) {
            saveAs(blob, "probe.png")
          })
        };
        image.src = 'data:image/svg+xml;base64,' + window.btoa(svg);
      };
    }
  };
}]);

Angular Directive

Pros:

• Customisation
• Homogeneisation des technologies (pas d'ajout de nouvelle lib ou relaté)
• Possibilité de creation de propre logique
• Reinjection des services et modeles dans la directive

Cons:

• Hard a debug et tester
• Demande que le front recupere les directive pour pouvoir les afficher