highlighter - doc loaded handler

Sunday, September 25, 2016

Angular.js

W3-Angular
Angular-API reference
Angular-Tutorial
Angular-Developer guide
Angular-IE Compatability


Table sorting


1.) Click the table headers to change the sorting order
2.) Do clicks and right-clicks!
3.) Remove "| filter:test" form the row (tr) declaration if you don't want filtering.
test filters on all columns, to filter on one specific column, say on column "name", specify test.name/test.country
Filter:

Name Country
{{x.name}} {{x.country}}


// https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js
// https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js.map
<div ng-app="myApp" ng-controller="namesCtrl">

<table border="1" style="width: 300px;"><tbody>
<tr> <th ng-click="orderByMe('name')">Name</th> <th ng-click="orderByMe('country')">Country</th> </tr>
<tr ng-click="rowclick()" ng-right-click="rightclick()" ng-repeat="x in names | orderBy:propertyName:reverse"> <td>{{x.name}}</td> <td>{{x.country}}</td> </tr>
</tbody></table>

</div>

<script>
var app = angular.module('myApp', []).controller('namesCtrl', function($scope) {

    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Carl',country:'Sweden'},
        {name:'Margareth',country:'England'},
        {name:'Hege',country:'Norway'},
        {name:'Joe',country:'Denmark'},
        {name:'Gustav',country:'Sweden'},
        {name:'Birgit',country:'Denmark'},
        {name:'Mary',country:'England'},
        {name:'Kai',country:'Norway'}
        ];
     
 
  $scope.propertyName = 'name';
  $scope.reverse = true;

    $scope.orderByMe = function(propertyName ) {
       $scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
       $scope.propertyName = propertyName;
   }

  $scope.rowclick= function(){ 
    alert(this.x.country);
 }

  $scope.rightclick= function(scope,evt){
   alert(this.x.name);
  }

});

// when you want to apply the directive on an html element, you have to write, i.e.: <span ng-right-click>
// when you create the directive you have to use camelCase !!! - see example below:

app.directive('ngRightClick', function($parse) {
    return function(scope, element, attrs) {
        var fn = $parse(attrs.ngRightClick);
        element.bind('contextmenu', function(event) {
            scope.$apply(function() {
                event.preventDefault();
                fn(scope, {$event:event});
            });
        });
    };
});

</script>



Using an object as a filter:



<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
   
    <link rel="stylesheet" href="style.css" />
        <script>
    var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {});
    </script>
  </head>

  <body ng-controller="MainCtrl">

    <div ng-init="users = [{name:'John', phone:'555-1276', secret:'shhh'},
                           {name:'Mary', phone:'800-BIG-MARY', secret:'psst'},
                           {name:'Mike', phone:'555-4321', secret:'shhh'},
                           {name:'Adam', phone:'555-5678', secret:'shhh'},
                           {name:'Julie', phone:'555-8765', secret:'shhh'}]"></div>
    Name: <input ng-model="search.name"/><br>
    Phone: <input ng-model="search.phone"/><br>
    Secret: <input ng-model="search.secret"/><br>
    <table>
                                                 // anonymous object !
        <tr ng-repeat="user in users | filter:{name: search.name, phone: search.phone}">
            <td>{{user.name}}</td>
            <td>{{user.phone}}</td>
            <td>{{user.secret}}</td>
        </tr>
    </table>

  </body>

</html>

Custom formatters


<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x in names">
    {{x | myFormat}}
</li>
</ul>

<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
    return function(x) {
        var i, c, txt = "";
        for (i = 0; i < x.length; i++) {
            c = x[i];
            if (i % 2 == 0) {
                c = c.toUpperCase();
            }
            txt += c;
        }
        return txt;
    };
});
app.controller('namesCtrl', function($scope) {
    $scope.names = [
        'Jani',
        'Carl',
        'Margareth',
        'Hege',
        'Joe',
        'Gustav',
        'Birgit',
        'Mary',
        'Kai'
        ];
});
</script>

<p>Make your own filters.</p>
<p>This filter, called "myFormat", will uppercase every other character.</p>
</body>
</html>

Thursday, March 5, 2015

Highlight.js v8.4 code highlighting - Quick Start



is an open source project for JavaScript based code highlighting. Visit the Highlightjs.org site to get detailed information about usage, configuration and new releases!

Installation and Basic Usage
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/powershell.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/vbscript-html.min.js"></script>

Here is the basic init function:
<script>hljs.initHighlightingOnLoad();</script>
Now you can highlight your code, putting it inside of <pre>, <code> html tags by providing a class value (<code class="html or xml or c# or ...">), for your programming language. A list of supported programming/markup languages can be found here Class reference.
<pre><code class="html">
<html>
    <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
    </body>
</html>
</code></pre>
Now you can highlight your code by setting the respective class value  i.e. xml, html, ps, js, c#...If you want to highlight HTML, encode it first --> Html Encoder

Available Themes

HTML Escape your html upfront!
<meta name="CG" content="Homepage" />
<meta name="SCG" content="" />
<meta name="PT" content="Homepage" />
<meta name="PST" content="" />
<meta name="application-name" content="The New York Times" />
<meta name="msapplication-starturl" content="http://www.nytimes.com" />
<meta name="msapplication-task" content="name=Search;action-uri=http://css.nyt.com/images/icons/search.ico" />
<meta name="msapplication-task" content="name=Most Popular;action-uri=http://www.nytimes.com/gst.html?src=iepin;" />
<meta name="msapplication-task" content="name=Video;action-uri=http://css.nyt.com/icons/video.ico" />
<meta name="msapplication-task" content="name=Homepage;action-uri=icon-uri=http://css.nyt.com/icons/homepage.ico" />
<meta property="og:url" content="http://www.nytimes.com" />
CSHARP/C#
using System;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Company.BU.Project
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            svc.SharepointEmailWS sv = new svc.SharepointEmailWS();
            var status = sv.CreateContact("Bosch", svc.ContactFlags.None);

        }
    }
}
JavaScript
$.fn.printEvents = function () {

            console.log("************  Event Logging START  ************");

            var d = jQuery._data(this[0], "events");

            if (d == undefined) {
                console.log(">> No Events found!"); return this;
            }

            var count = Object.keys(d).length;
            for (var i = 0; i < count; i++) {
                var name = Object.keys(d)[i];
                var obj = d[name];
                var cnt = obj.length;

                for (var x = 0; x < cnt; x++) {
                    var o = obj[x];
                    console.log(" ");
                    console.log("************  " + o.origType + " event  ************");
                    console.log("OrigType: " + o.origType);
                    console.log("Type: " + o.type);
                    console.log("Handler: " + o.handler);
                    console.log("Guid: " + o.guid);
                    console.log("Data: " + o.data);
                    console.log("Selector: " + o.selector);
                    console.log("Namespace: " + o.namespace + "\n\r");
                }
            }
            console.log("************  Event Logging END  ************");
        };
PowerShell
Get-ChildItem 'HKLM:\SOFTWARE\Microsoft\NET Framework Setup\NDP' -recurse |
Get-ItemProperty -name Version -EA 0 |
Where { $_.PSChildName -match '^(?!S)\p{L}'} |
Select PSChildName, Version
Technorati Tags: ,