From: Galen Charlton Date: Wed, 13 May 2015 13:32:55 +0000 (-0400) Subject: start slides for AngularJS presentation X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=98ef4cf253bbbabdfc05dcc68414c10ba30de9d4;p=working%2Frandom.git start slides for AngularJS presentation --- diff --git a/angling.asciidoc b/angling.asciidoc new file mode 100644 index 000000000..edb85ced9 --- /dev/null +++ b/angling.asciidoc @@ -0,0 +1,128 @@ += Angling for a new Staff Interface +:data-uri: +:backend: slidy +:max-width: 45em + +== Current state of the web staff interface + +https://webby.evergreencatalog.com + +image:images/duck-with-webbed-feet.jpg[] + +_Image credit: Tim Green CC-BY 2.0_ + +== Overview of cataloging + + * MARC editor + * Record buckets + * Tag tables (+ SKOS) + +== Overview of AngularJS + +== Building a new interface - egGrid + +Playing around with global flags: https://webby.evergreencatalog.com/eg/staff/admin/config/global_flag + +== egGrid: index page + +[source,html] +---- +[% + WRAPPER "staff/base.tt2"; + ctx.page_title = l("Configuration"); + ctx.page_app = "egAdminConfigApp"; +%] + +[% BLOCK APP_JS %] + + +[% END %] + + +
+ +[% END %] +---- + +== egGrid itself + +[source,html] +---- + + + + + + +---- + +== egGrid AngularJS 1 + +[source,javascript] +---- +angular.module('egAdminConfigApp', + ['ngRoute', 'ui.bootstrap', 'egCoreMod', 'egUiMod', 'egGridMod']) +---- + +== egGrid AngularJS 2 + +[source,javascript] +---- +.config(function($routeProvider, $locationProvider, $compileProvider) { + $locationProvider.html5Mode(true); + $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|blob):/); // grid export + + // check auth and load data needed by all pages + var resolver = {delay : function(egStartup) {return egStartup.go()}}; + + $routeProvider.when('/admin/config/global_flag', { + templateUrl: './admin/config/t_global_flag', + controller: 'GlobalFlagCtl', + resolve : resolver + }); +---- + +== egGrid AngularJS 2.5 +[source,javascript] +---- + $routeProvider.when('/admin/config/global_flag/:name', { + templateUrl: './admin/config/t_global_flag', + controller: 'GlobalFlagCtrl', + resolve : resolver + }); +}) +---- + +== egGrid AngularJS 3 + +[source,javascript] +---- +.controller('GlobalFlagCtl', + ['$scope','$location','$q','egCore', +function($scope, $location, $q, egCore) { + $scope.grid_controls = { + // tell the grid which config.global_flag objects to retrieve + setQuery : function() { + return {name : {'!=' : null}}; + }, + activateItem : function() { + alert('dbl click'); + } + }; + $scope.an_action_handler = function() { alert('HELLO') } +}]) +---- + +== Join the web staff collective + +== Thanks! + + * Bill Erickson, King County Library System + * Mike Rylander, Equinox Software, Inc. + * Galen Charlton, Equinox Software, Inc. + diff --git a/angling.html b/angling.html new file mode 100644 index 000000000..f55af9926 --- /dev/null +++ b/angling.html @@ -0,0 +1,5141 @@ + + + + +Angling for a new Staff Interface + + + + + + + +
+

Current state of the web staff interface

+
+

https://webby.evergreencatalog.com

+

+images/duck-with-webbed-feet.jpg +

+

Image credit: Tim Green CC-BY 2.0

+
+
+
+

Overview of cataloging

+
+
    +
  • + +MARC editor + +
    • +
  • + +Record buckets + +
    • +
  • + +Tag tables (+ SKOS) + +
    • +
+
+
+
+

Overview of AngularJS

+
+
+
+
+

Building a new interface - egGrid

+
+

Playing around with global flags: https://webby.evergreencatalog.com/eg/staff/admin/config/global_flag

+
+
+
+

egGrid: index page

+
+
+
+
[%
+  WRAPPER "staff/base.tt2";
+  ctx.page_title = l("Configuration");
+  ctx.page_app = "egAdminConfigApp";
+%]
+
+[% BLOCK APP_JS %]
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/grid.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/admin/config/app.js"></script>
+[% END %]
+
+<!-- load the page-specific template -->
+<div ng-view></div>
+
+[% END %]
+
+
+
+

egGrid itself

+
+
+
+
<eg-grid
+  id-field="name"
+  idl-class="cgf"
+  auto-fields="true"
+  grid-controls="grid_controls"
+  persist-key="admin.config.global_flag">
+
+  <!-- actions drop-down -->
+  <eg-grid-action label="[% l('Test') %]" handler="an_action_handler"></eg-grid-action>
+
+</eg-grid>
+
+
+
+

egGrid AngularJS 1

+
+
+
+
angular.module('egAdminConfigApp',
+    ['ngRoute', 'ui.bootstrap', 'egCoreMod', 'egUiMod', 'egGridMod'])
+
+
+
+

egGrid AngularJS 2

+
+
+
+
.config(function($routeProvider, $locationProvider, $compileProvider) {
+    $locationProvider.html5Mode(true);
+    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|blob):/); // grid export
+
+    // check auth and load data needed by all pages
+    var resolver = {delay : function(egStartup) {return egStartup.go()}};
+
+    $routeProvider.when('/admin/config/global_flag', {
+        templateUrl: './admin/config/t_global_flag',
+        controller: 'GlobalFlagCtl',
+        resolve : resolver
+    });
+
+
+
+

egGrid AngularJS 2.5

+
+
+
+
    $routeProvider.when('/admin/config/global_flag/:name', {
+        templateUrl: './admin/config/t_global_flag',
+        controller: 'GlobalFlagCtrl',
+        resolve : resolver
+    });
+})
+
+
+
+

egGrid AngularJS 3

+
+
+
+
.controller('GlobalFlagCtl',
+       ['$scope','$location','$q','egCore',
+function($scope,  $location,  $q,  egCore) {
+    $scope.grid_controls = {
+        // tell the grid which config.global_flag objects to retrieve
+        setQuery : function() {
+            return {name : {'!=' : null}};
+        },
+        activateItem : function() {
+            alert('dbl click');
+        }
+    };
+    $scope.an_action_handler = function() { alert('HELLO') }
+}])
+
+
+
+

Join the web staff collective

+
+
+
+
+

Thanks!

+
+
    +
  • + +Bill Erickson, King County Library System + +
    • +
  • + +Mike Rylander, Equinox Software, Inc. + +
    • +
  • + +Galen Charlton, Equinox Software, Inc. + +
    • +
+
+
+ + diff --git a/images/duck-with-webbed-feet.jpg b/images/duck-with-webbed-feet.jpg new file mode 100644 index 000000000..a3e08b1d8 Binary files /dev/null and b/images/duck-with-webbed-feet.jpg differ