Web - Geek went Freak!

Web

Angular Dart 2: Conditionally apply CSS classes

Angular 2 provides NgClass directive to conditionally apply CSS classes to elements.

NgClass is available when Angular2 is imported using:

import 'package:angular2/angular2.dart';

First step is to inform Angular that NgClass is being used in the view.

@View(
    ...
    directives: const [NgClass]
    ...
)

Lets declare a variable in our component that is used to conditionally change CSS class.

class CSSSwitcher {
    ...
    bool status = false;
    ...
}

Use NgClass directive in the view

Finally, lets implement the toggleStatus funciton that toggles the status.

class CSSSwitcher {
  ...
  void toggleStatus() {
    status = !status;
  }
  ...
}

Here is the complete code:

NgClass takes a Map of String keys and bool values. The keys whose values evaluated to true are added to the element’s class. To added multiple class one can add multiple items to this map:

Here is the complete code that adds multiple classes conditionally:

NgClass can also take a String and a List of Strings. Here is an example with List of Strings:

Chrome: start chrome in full screen from command line

There are more than one ways to start chrome in full screen.

Kiosk method

Chrome can be started in full screen by using the –kiosk command line argument when chrome is launched.

chrome --kiosk https://geekwentfreak-raviteja.rhcloud.com

But the problem with this method it is not easily possible to minimize chrome without having to close it.

fullscreen command line option

There is another command line option named –fullscreen to launch chrome in fullscreen mode. The advantage of this method is that pressing F11 will un-fullscreen it. This might not be the right solution in kiosks since you don’t want your user to leave the browser.

chrome --fullscreen https://geekwentfreak-raviteja.rhcloud.com

Dart: SVG to image in Dart

You can convert SVG to image in Dart using the following code snippet:

In this code, the SVG is constructed using dart:svg library. The svg document is obtained using outerHtml property of SvgSvgElement. The SVG document if converted into data URI. This data URI can be later used as scr of Image or background-image of any element.

Huge: Shortcode for Google Prettify

If you are a programmer, source code highlighting is an important feature you would expect from a blog framework. Hugo supports both server-side and client-side code highlighting. Both methods are described in the following link.

One thing the above link is missing is configuring Google prettify to highlight source code.

Include Google Prettify script to every page

Add the following scrip tag at the bottom of head section in the header partial that you are using in all pages. This file should be in layouts/partials directory.

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

This provides basic set of languages provided by Google prettify out of the box. If you would like to add extra languages and choose a theme, you could add lang parameter to src url multiple times each time specifying a language. You can add skin parameter to choose a theme.

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=dart&lang=go&lang=css&lang=swift&lang=vhdl&lang=yaml&skin=sons-of-obsidian"></script>

Create Hugo shortcode for Google prettify

Next step is to create a Hugo shortcode that can be used in your posts.

Create prettify.html under layouts/shortcodes/ directory and the following to the file:

<pre class="prettyprint language-{{ .Get 0 }} linenums">{{ .Inner }}</pre>

Notice that we have added linenums class to enable line numbers.

Use the shortcode in your content

Now anywhere in your content you can highlight a block of source code:

{{< prettify go >}}
type (
    Interface interface {
    }
)
{{< /prettify >}}

Dart: Getting elements to accept drops using HTML5 DnD

Using HTML5 Drag-n-Drop could be little bit tricky, because it doesn’t work out of the box. If you want to listen to on-mouse-down or on-key-down events on an element, you would do it like this:

HtmlElement element = queryselector("#my-element");
element.onMouseDown.listen((MouseEvent e) {
  print("Please don't click me hard next time! Thanks for understanding :)");
});

So, it should be that simple to get on-drop event to work right? No! If you try this code, you will be disappointed to find out that, it doesn’t work at all.

HtmlElement element = queryselector("#my-element");
element.onDrop.listen((MouseEvent e) {
  print("Drop 'em on me!");
});

So why? From the beginning of HTML, when you drop something into a web page, it is thought to be a link and the browser tries to navigate there.

So? So, you have to disable this default behavior. This is how you do it:

HtmlElement element = queryselector("#my-element");
element.onDrop.listen((MouseEvent e) {
  print("Don't drop 'em too fast, you could break them.");
});

element.onDragOver.listen((event) {
  event.preventDefault();
});

Can you notice how we prevent default behavior in onDragOver event by calling preventDefault on the event? That does the trick!

Happy Darting!!!!