The reduce() method reduces the array to a single value. The reduce() method executes a provided function for each value of the array.

Step by step guide to implement search pipe to filter results with Angular 5. AngularJs will comes with inbuilt filter pipes.

But Angular didn't comes with filter pipes, because they perform poorly and prevent aggressive minification.

Step 1:

Install latest version of Angular Cli using following command.

npm install -g @angular/cli@latest

You can find the instruction and documentation in https://cli.angular.io/

Step 2: Create new project using Angular Cli

ng new myproject

It will create all required folder structure for you and install all node modules.

Step 3:

Create filter pipe filter.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({

  name: 'filter'

})

export class FilterPipe implements PipeTransform {

 transform(items: any, term: any): any {
    if (term === undefined) return items;

    return items.filter(function(item) {
      for(let property in item){
        if (item[property] === null){
          continue;
        }
        if(item[property].toString().toLowerCase().includes(term.toLowerCase())){
          return true;
        }
      }
      return false;
    });
  }

}

Step 4:

Import filter pipe in app.module.ts

import { NgModule }      from '@angular/core';

import { FormsModule }   from '@angular/forms';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

import { FilterPipe} from './filter.pipe';

@NgModule({

  imports:      [ BrowserModule, FormsModule ],

  declarations: [ AppComponent, FilterPipe ],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }

Step 5:

app.component.html should now look like this

<input [(ngModel)]="searchCategory" placeholder="search text...">

<section>

  <div *ngFor="let cat of categories | filter : searchCategory">

    {{cat}}

  </div>

</section>

Note: The filter pipe given above will solve this error "TypeError: it.toLowerCase is not a function", if you are using default filter pipe.

When we create the JavaScript function within another function and the inner function can access to all the variable of outer function.

How to create closure in javascript

Example 1:

function outerFunction(a) {
    var intial = 5;

    function innerFunction(b) {
        console.log(a + b + (++intial)); // It will return the 20.
    }
    innerFunction(10);
}

outerFunction(4); // Pass an argument 4

Output is 20

Check in jsfiddle

Here innerFunction() function can access to argument "a" and variable "intial", which are define in outerFunction() function.

Accessing variable outside of your scope create a closure.

Example 2:

function clickCounter() {
    var counter = 0;

    function runCounter() {
        return counter += 1;
    };

    return runCounter;
}

var counter = clickCounter();
alert(counter()); // 1
alert(counter()); // 2
alert(counter()); // 3

Check in jsfiddle

One important characteristic of closure is that outer variables can keep their states between multiple calls.

In the above example, outer function clickCounter returns the reference of inner function runCounter(). runCounter increases the outer variable counter to one. So calling inner function multiple time will increase the counter to one each time.

<div flow-init flow-files-submitted="$flow.upload()" flow-file-success="$file.msg = $message" flow-files-added="processFiles($files)" flow-name="obj.flow">
    <!-- <input type="file" flow-btn/> -->
    Input OR Other element as upload button
    <span class="btn" flow-btn>Add File</span>
    <div>
        <div ng-repeat="file in $flow.files" class="gallery-box ng-scope">
            <span class="title ng-binding">{{file.name}}</span>
            <div class="thumbnail" ng-show="$flow.files.length">
                <img flow-img="file" src="file.image">
            </div>
            <div class="progress progress-striped" ng-class="{active: file.isUploading()}">
                <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" ng-style="{width: (file.progress() * 100) + '%'}" style="width: 100%;">
                    <span class="sr-only ng-binding">1% Complete</span>
                </div>
            </div>
            <div class="btn-group">
                <a class="btn btn-xs btn-danger" ng-click="file.cancel()">
      Remove
    </a>
            </div>
        </div>
        <button type="button" ng-click="uploadFiles($flow)">Submit</button>
    </div>
</div>

In the controller file add the following

$scope.fileArray = [];
$scope.imgContent = {};
$scope.imageStrings = [];


$scope.processFiles = function(files) {

    angular.forEach(files, function(flowFile, i) {
        var fileReader = new FileReader();
        fileReader.onload = function(event) {
            var uri = event.target.result;
            $scope.imageStrings[i] = uri;
            $scope.imgContent = {
                fileName: flowFile.name,
                fileContent: uri
            };
        };
        fileReader.readAsDataURL(flowFile.file);

        $scope.fileArray.push($scope.imgContent);
    });

    console.log(JSON.stringify($scope.fileArray));
};


and decode the base64 format into image using the server side language like java, php etc.

Sublime Text 3 is sophisticated text editor, which i really love, Because due to it simplicity, enriched with lots of features and free plugins to extend more features of Sublime Text.

 In this post, find the list of useful Sublime Text Plugins & extensions which are capable of doing almost everything for all kind of developers and help them to perform several hassle free tasks and also which is love more.

1) Package Control:

Package Control is the first thing that you have to install right away after installing SublimeText. With it, you can install, upgrade, remove, and view with ease the list of packages or plugins that you have installed in SublimeText.

2) Emmet:

3) SidebarEnhancements:

Some things users love about Sublime Text

Goto Anything:

Multiple Selections:

Command Palette:

Distraction Free Mode:

Split Editing:

Instant Project Switch:

Customize Anything:

Cross Platform:

If you need to access tables within the same database as your Joomla! installation then you can simply use the JFactory->getDbo method. This uses the already established connection that Joomla! uses to connect to the database.


<?php
   $db = JFactory::getDbo();
?>

But what if you want to connect to a completely different database from the one used by Joomla!?. This might be a different database on the same machine as your Joomla! site or it might be on a different host and perhaps even require a different database driver. Well, you can do this using the JDatabase->getInstance method.

Sample html page with orientation media queries below

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>iPad mini Orientation issue</title>
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    </head>
    <body>
        <style>
            @media only screen and (orientation: portrait) {
                body {
                    border:solid red 1px;
                }
            }
            @media only screen and (orientation: landscape) {
                body {
                    border:solid blue1px;
                }
            }
        </style>
    </body>
</html>

Body border won't change if we change the orientation in iPad mini, i have faced the same issue when I do this.

Finally found the issue in viewport meta tag.


<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />

Remove height=device-height from viewport meta tag, will do the trick and orientation media queries will work as expected.

Backbone views are almost more convention than they are code — they don't determine anything about your HTML or CSS for you, and can be used with any JavaScript templating library.



Simple working example of backbone.js view

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Just backbone view & render</title>
</head>
<body>

  // Include libraries like jQuery, underscore.js & backbone-min.js. Since Backbone has a hard dependency on Underscore.js, you are able to utilize many Underscore.js methods to interact with Collections.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>

  // A simple script to render the paragraph html tag inside the body element
  <script>
(function($){
         var MyView = Backbone.View.extend({
el: $('body'),
initialize: function(){
             this.render();
},
render: function(){
            $(this.el).append("<p>Hello welcome to Backbone view & render</p>");
}
        });

// View object creation and initialize function will be called at the time of object creation.
var myView = new MyView();
})(jQuery);
</script>
</body>
</html>

Download the example from Github

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.



Backbone.js is a lightweight JavaScript library that adds structure to your client-side code. It makes it easy to manage and decouple concerns in your application, leaving you with code that is more maintainable in the long term.

Developers commonly use libraries like Backbone.js to create single-page applications (SPAs). SPAs are web applications that load into the browser and then react to data changes on the client side without requiring complete page refreshes from the server.

Backbone is mature, popular, and has both a vibrant developer community as well as a wealth of plugins and extensions available that build upon it. It has been used to create non-trivial applications by companies such as Disqus, Walmart, SoundCloud and LinkedIn.

Backbone focuses on giving you helpful methods for querying and manipulating your data rather than re-inventing the JavaScript object model. It’s a library, rather than a framework, that plays well with others and scales well, from embedded widgets to large-scale applications.

When working on a web application that involves a lot of JavaScript, one of the first things you learn is to stop tying your data to the DOM. It's all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks, all trying frantically to keep data in sync between the HTML UI, your JavaScript logic, and the database on your server. For rich client-side applications, a more structured approach is often helpful.

Tired of Javascript conflicts in drawer menu, here it is good news for developer. Drawer menu can be implemented only using CSS and not Javascript.

I came across the CSS panel menu which I have used in one of my kendo UI Mobile project. CSS panel menu is the customized version of JPanel menu (http://jpanelmenu.com/)

Check the link http://css-tricks.com/off-canvas-menu-with-css-target/



Advantages :
It's all CSS! Less code overall. Less resources to load. Works without JavaScript. Transition smoother than JavaScript transition.

Disadvantages :
Limited browser support. :target is IE9+ (the whole thing fails if :target doesn't work). Transitions are IE 10+. Changing classes or hide/showing/animating with JavaScript can overcome any browser limitations. Also you'll have more freedom in how the markup can be arranged instead of being forced into the specific order presented here. Also possibly slightly better semantics, not needing separate links for opening and closing the menu.

Create inputs with start and end date in html page. Example index.html

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Kendo UI Mobile DatePicker</title>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
  /* Add Kendo CSS and your custom CSS */
  <link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
  <link href="css/kendo.common.min.css" rel="stylesheet" />
  <link href="css/kendo.default.min.css" rel="stylesheet" />
  <link href="css/custom.css" rel="stylesheet" />
 </head>
 <body>
    <div id="add_screen">
<ul class="pdetails">
           <li class="simple-lbl">Start </li>
  <li class="claim-value">
<input id="startdatepicker" value="" name="startdate" style="width:100%;"/>
  </li>
        </ul>
        <ul class="pdetails">
  <li class="simple-lbl">End</li>
  <li class="claim-value">
<input id="enddatepicker" value="" name="enddate" style="width:100%;"/>
  </li>
       </ul>
    </div>
 
<script>
var app = new kendo.mobile.Application();
$("#startdatepicker").kendoDatePicker({format: "yyyy-MM-dd"});
$("#enddatepicker").kendoDatePicker({format: "yyyy-MM-dd"});
$("#startdatepicker").attr("disabled","disabled"); // This will disable the keyboard input and date will be selected from the calendar popup only.
$("#enddatepicker").attr("disabled","disabled");
    </script>
     </body>
</html>

What's in 3.2.1?

Download

New Installations: Click here to download Joomla! 3.2.1 (Full package) »

Update Package: Click here to download Joomla! 3.2.1 (Update package) »