13/11/2018 Development / java script

Eu passei a tarde toda penando com isso....

Entao pra quem for usar upload no POSTMAN....nao esqueça:

DESABILITE o content-type: application/x-www-form-urlencoded

Play!!!!

17/08/2018 Development / java script

Esse é um baita pulinho do gato pra traduzir o ui-grid facilmente!

var app = angular().....

app.run(i18nService) {

i18nService.setCurrentLang('pt-br')

}

 

14/06/2018 Development / java script

Eu estava procurando um generator de API REST e encontrei o feathersjs.

Usando ele com MONGOOSE é possível definir os models, e ai usar o famoso populate.

Fica muito facil fazer uma API.

Então, eu vou postar aqui rapidinho pra eu não esquecer. Eu fiquei o dia todo vendo como isso funcionava.

Basicamente, depois de criar o service

feathers generate service

Ai você escolhe o nome da rota, e define o banco -> MONGOOSE

No model, você coloca sua relação:

    text: { type: String, required: true },
    cliente : { type: mongoose.Schema.Types.ObjectId, ref: 'Cliente' }

Esse é um exemplo

E no hooks,você faz a importação.

const {populate} = require('feathers-hooks-common');
  
const userRoleSchema = {
  include: {
    service: 'cliente',
    nameAs: 'cliente',
    parentField: 'cliente',
    childField: '_id'
  }
};

e no metodo after

  after: {
    all: [
      populate({ schema: userRoleSchema })
    ],

É isso! Espero que ajude

08/05/2018 Development / java script

Eu to virando especialista em UI-GRID e agora esse trechinho de código serve pra deixar a altura da row automatica.

this.gridOptionsTitulos.gridApi.core.on.rowsRendered(null, () => {

//scope.gridApi.treeBase.expandAllRows();

this.gridOptionsTitulos.gridApi.expandable.expandAllRows();

});

 

this.gridOptionsTitulos.gridApi.expandable.on.rowExpandedBeforeStateChanged(null, (row) => {

var len = row.entity.parcelamento ? row.entity.parcelamento.parcelas.length : 0;

this.gridOptionsTitulos.expandableRowHeight = (len * 30);

});

15/04/2018 Development / java script

Esse macete aqui, poucos conhecem! Então eu vou passar o pulo do gato pra galera!!!

Quando se está trabalhando com firebase, pode ocorrer da sua tabela ser muito grande, tipo ter uns 90mil registros.

Isso vai onerar sua aplicacao, então, no caso é melhor fazer uma paginação.

Mas como faço pra pegar o total de itens do meu banco?

firebase.auth().currentUser.getToken().then(data => {

let auth = data;

fetch('https://SEUPROJETO.firebaseio.com/SUAREFERENCIA/.json?shallow=true&auth=' + auth).then(resp => { return resp.json(); }).then(data => { this.gridOptions.totalItems = Object.keys(data).length; console.log(Object.keys(data).length) });

});

E oque é esse auth?

auth é a chave de autenticacao, que indica que você pode realmente acessar os dados. Pra vc pegar esse auth, basta usar o seguinte codigo.

firebase.auth().currentUser.getToken().then(data => {

let auth = data;

fetch('https://rjr-backend.firebaseio.com/clientes/.json?shallow=true&auth=' + auth).then(resp => { return resp.json(); }).then(data => { this.gridOptions.totalItems = Object.keys(data).length; console.log(Object.keys(data).length) });

});

É isso, ai o resto é só implementar!!!

15/04/2018 Development / java script

Firebase ou você AMA ou você ODEIA!

O firebase não tem uma resposta muito boa, tipo um formato de que um tratamento decente.

No caso de paginacao de dados, é ainda pior.

Pra voê saber quantos registros você tem na sua base, tem um macete.

https://SEUPROJETO.firebaseio.com/SUAREFERENCIA/.json?shallow=true

Esse json?shallow=true, retorna somente as KEYS que estao no banco.

Na minha opiniao é uma GAMBIARRA, mas ajuda, quando se trata de ter um banco com 1milhao de registros.

15/03/2018 Development / java script

Essa foi a forma menos feia que eu encontrei pra não ter que ficar setando toda hora o createdAt, createdBy, updatedAt, updatedBy... É um baaaaaaaita jump the cat, hehehe!! Espero que sirva pra alguem tambem!

var set = firebase.database.Reference.prototype.set;
firebase.database.Reference.prototype.set = function(value, onComplete){
  value['createdAt'] = firebase.database.ServerValue.TIMESTAMP;
  value['createdBy'] = firebase.auth().currentUser.displayName;
  return set.apply(this, arguments);
}
var update = firebase.database.Reference.prototype.update;
firebase.database.Reference.prototype.update = function(value, onComplete){
  value['updatedAt'] = firebase.database.ServerValue.TIMESTAMP;
  value['updatedBy'] = firebase.auth().currentUser.displayName;
  return update.apply(this, arguments);
}

 

20/02/2018 Development / java script

Trabalhar com firebase é muuuuuuuuuuuuuuito produtivo! Super rapido fazer as paradas, subir aplicação, mas tem 2 coisas que eu vi que são chatinhas, uma eu já citei aqui que é o lance de não ter um JOIN decente no database, a outra, porém é necessário, é que a gente só consegue manipular os dados de usuários através do servidor. No client, não é possível fazer um firebase.auth().getUser(uid) por exemplo, e tem total sentido isso né!

Então, acaba que a gente tem que meter a mão na massa e fazer as Cloud Functions, que são tipos umas funções que você vai poder executar do lado do servidor. Nesse caso, eu precisei meeeeeesmo, fazer um CRUD pra manipular os dados de usuários. Então eu vou compartilhar com vocês. É só trocar a chave da public key, fazer o deploy e correr pro abraco!

const express = require('express');

const app = express();

const functions = require('firebase-functions');

const admin = require("firebase-admin");

const bodyParser = require('body-parser');

const cors = require('cors');

 

app.use(cors({ origin: true }));

app.use(bodyParser.urlencoded({ extended: true }));

app.use(bodyParser.json());

 

admin.initializeApp({

  credential: admin.credential.cert({

    projectId: "AQUIVEMSEUPROJETO",

    clientEmail: "AQUIVEMOSEUEMAILPROVADO",

    privateKey: "-----BEGIN PRIVATE KEY-----AQUIVEMASUACHAVEPRIVADA==\n-----END PRIVATE KEY-----\n"

  }),

  databaseURL: "https://AQUIVEMOSEUPROJETO.firebaseio.com"

});

 

//GET

app.get('/:id', (req, res) => {

let uid = req.params.id;

admin.auth().getUser(uid)

  .then(function(userRecord) {

    resp.json(userRecord.toJSON());

  })

  .catch(function(error) {

    res.json(error);

  });

});

 

//POST

app.post('/', (req, res) => {

let data = req.body;

console.log(data);

 

admin.auth().createUser(data)

  .then(function(userRecord) {

    res.json(userRecord);

  })

  .catch(function(error) {

    res.json(error);

  });

});

 

//DELETE

app.delete('/:id', (req, res) => {

let uid = req.params.id;

admin.auth().deleteUser(uid)

  .then(function(userRecord) {

    res.json(userRecord.toJSON());

  })

  .catch(function(error) {

    res.json(error);

  });

});

 

//UPDATE

app.put('/:id', (req, res) => {

let uid = req.params.id;

let data = req.body;

admin.auth().updateUser(uid, data)

  .then(function(userRecord) {

    res.json(userRecord.toJSON());

  })

  .catch(function(error) {

    res.json(error);

  });

});

exports.api = functions.https.onRequest(app);

Espero que sirva!

30/01/2018 Development / java script

Essa parada do firebase não ter um join, innerjoin, groupBy, é meio frustante, então, eu vou descrever aqui, oque eu tenho feito para suprir as minhas necessidades.

O firebase tem um evento listener chamado ON e ONCE, onde você pode aplicar alguns valores:

let ref = firebase.database().ref();

ref.child('livros').on('child_added', => snapshot { console.log(snapshot.val()); })
ref.child('livros').on('value', snapshot  => { console.log(snapshot.val()); })
ref.child('livros').on('child_removed', snapshot => { console.log(snapshot.val()); })
ref.child('livros').on('child_changed', snapshot => { console.log(snapshot.val()); })

A diferença entre ON e ONCE é que ONCE escuta uma vez só, e ON fica escutando sempre.

Seguindo essa documentação, imagina que eu tenho uma LISTA de LIVROS, e pra cada LIVRO eu gostaria de trazer o AUTHOR e todo mundo que já comprou esse livro.

Bom, com SQL ou até mesmo com MONGO, isso seria uma tarefa fácil, mas com essa porra de firebase, já é chatinho, mas vamo la!!!

No cenário mais simples, a gente usuário o child_added, que pra cada livro a gente iria consultar o author e os clientes. Vamos fazer a query

ref.child('livros').on('child_added', => snapshot {
let livro = snapshot.val();
let authorId = livro.authorId;
console.log('nome do livro: ' + livro.nome);
ref.child('author').orderByChild("authorId").equalTo( authorId ).on('value', author => {
console.log('nome do author:' + author.val().nome;
})
})

Sabe oque aconteceria nesse caso? Primeiro, ia dar o console.log de todos os nomes dos nossos livros e depoooooois, iria dar o console do nome dos autores. Ex:

nome do livro é: SENHOR DOS ANEIS
nome do livro é: O ALQUIMISTA
nome do livro é: TUDO É POSSÍVEL

nome do author: J. R. R. Tolkien
nome do author: Paulo Coelho
nome do author: Allan Percy

Mas oque a gente queria fazer é:

nome do livro é: SENHOR DOS ANEIS
nome do author: J. R. R. Tolkien

nome do livro é: O ALQUIMISTA
nome do author: Paulo Coelho

nome do livro é: TUDO É POSSÍVEL
nome do author: Allan Percy

Ai você pensa: Ahhhhhh, fácil, no retorno da segunda consulta eu mostro o nome do livro junto com o nome do author :-), Que malandro sou eu? hummmmm

ref.child('livros').on('child_added', => snapshot {
let livro = snapshot.val();
let authorId = livro.authorId;

ref.child('author').orderByChild("authorId").equalTo( authorId ).on('value', author => {
console.log('nome do livro: ' + livro.nome + '\n');
console.log('nome do author:' + author.val().nome;

})
})

Tá, assim funciona! Mas e agora no caso da gente adicionar o terceiro listener, que é o caso dos clientes que compraram, oque a gente pode fazer? Ao mesmo tempo que você esta consultando o author, também esta consultando os clientes, você não sabe qual vai ser o primeiro ou último a responder, por isso não pode jogar o console no listener do author ou no listener do cliente, certo?

Nesse caso, usamos o conceito de Promisse() e ao inves de ON, usamos o ONCE que retorna uma Promisse, e a implementação ficaria da seguinte maneira:

Só uma observação: Quando a gente usa orderByChild, é como se fosse um filtro, então, ele retorna um array podendo conter 1 ou mais objetos.

let promises = [];

ref.child('livros').on('child_added', => snapshot {
let livro = snapshot.val();
let authorId = livro.authorId;

let promise_author = ref.child('author').orderByChild("authorId").equalTo( authorId ).once('value') //no caso do author, vai trazer 1 só
let promise_pedidos = ref.child('pedidos').orderByChild("livroId").equalTo( livroId ).once('value') //no caso de pedidos, vai trazer varios, 1 pedido contem o codigo do cliente e codigo do livro e como o pedido é um snapshot de como estão as informações no momento. Aprendi isso trabalhando na B2W! Pra mim oque vale é o nome do cliente naquele dia.

promises.push(promise_author, promise_pedidos) //inserindo as promises na fila

// Quando terminar todas as minhas promises, ai sim eu monto a resposta final

Promise.all(promisses).then(function(resp){

let nomeLivro = livro.nome;
let nomeAuthor = resp[0].val().nome;
let clientePedidos = resp[1].val().map(pedido => { return pedido.nomeCliente });

      array.push(livro.nome + ' - ' + nomeAuthor + ' - ' + clientePedidos.join('\n'))

     $('pre').text(array.join('\n'))

    })

})

Essa foi a saida para a implementação usando uma espécie de JOIN, claro que ao inves de colocar no ARRAY, eu fiz um objeto bonitinho, mapeado, e tal, mas isso fica a critério da sua implementação. Espero que sirva de base!

 

13/12/2017 Development / java script

Eu uso com muuuuuita frequencia essa parada, então, deixar registrado aqui pra eu poder usar com mais facilidade.

A primeira é essa porrinha aqui, pra pegar somente os números: "ABABABABAAB12121212-232323fdfdf".replace(/\D/g, '')

A outra é pra formatar moeda antes de salvar no banco de dados.

Ex: "R$ 15.404,00" (STRING) se eu salvar assim direto, depois fica ruim de formatar.

Entao é bom salvar assim => Number("R$ 15.404,00".replace(/[^0-9\.]+/g,""))

Espero que me ajude :-)

 

08/12/2017 Development / java script

this._$state.transitionTo('titulos', this._$stateParams, { reload: true, inherit: false, notify: true });

Espero que ajude!

02/12/2017 Development / java script

angular.module('myUtils', [])
.factory('$Utils', ['$rootScope', function($rootScope){

  this._$scope = $rootScope;

  var NormalizedCollection = (ref, childKey, keyValue, obj) => {
    ref.child(childKey).once('value').then(resp => {
        obj[keyValue] = resp.val();
        this._$scope.$apply();
    });
  };

  return {
    NormalizedCollection : NormalizedCollection
  };
}]);

angular.module('MyOtherApp', ['myUtils']);

export class MyController {
  constructor ($Utils) {}
}

02/12/2017 Development / java script

Firebase é bom pra caraaaaaaaleo, mas uma coisa que falta é ter JOIN mais facilmente entre as coleções.

Tem um projetinho chamado normalizeCollection de um carinha lá do time do angular firebase, mas só funciona pra versões 1.x alguma coisa do firebase, como eu estou usando a versão 3, eu me fudi!

Então eu fiz meu próprio normalize.

Eu tenho 4 bases que precisam ser juntadas.

Clientes, Pessoas, Credores, Titulos

Primeiro eu consulto todos os meus títulos, e cada título tem cliente, credor e operador(que é a base Pessoas)

Olha como ficou a primeira versão do script

var ref = firebase.database().ref();

var refPessoas = ref.child("pessoas");

var refClientes = ref.child("clientes");

var refCredores = ref.child("credores");

ref.child("titulos").orderByChild('codigoOperador').on('child_added', snapshot => {

var codigoOperador, codigoCliente, codigoCredor;

var obj = {};

obj = snapshot.val();

codigoOperador = obj.codigoOperador;

codigoCliente = obj.cnpjCliente || obj.cpfCliente;

codigoCredor = obj.cnpjCredor;

var NormalizedCollection = (ref, childKey, keyValue, obj) => {

ref.child(childKey).once('value').then(resp => {

obj[keyValue] = resp.val();

this._$scope.$apply();

});

};

NormalizedCollection(refPessoas, codigoOperador, 'Operador', obj);

NormalizedCollection(refClientes, codigoCliente, 'Cliente', obj);

NormalizedCollection(refCredores, codigoCredor, 'Credor', obj);

this.data.push(obj);

})

Acho que ficou uma bosta, mas funcionou ! Espero que sirva de ideia

27/11/2017 Development / java script

Agora que eu comecei a migrar a Odete de ANGULAR5 pra REACT, comecei a traduzir o ngClass.

Exemplo usando ANGULAR

<div class="container-fluid how-works" [ngClass]="{'how-works-hidden' : data.length > 0}">

Exemplo usando REACT

es6 transpiler 

<div className={`container-fluid how-works ${this.state.data.length > 0 ? 'how-works-hidden' : ''}`}>

 

25/11/2017 Development / java script

Isso acontece quando você tenta ler uma propriedade de um retorno de uma consulta. Exemplo

.subscribe(resp => { resp.nome }) // Aqui pode extourar um erro.

O ideial é criar uma interface e associar o retorno da requisicao, a essa interface. Exemplo

interface NotificacaoUsuario {

nome: string;
imagem: string;

}

service

getNewPedidoTelefone() {

return this.sockets.fromEvent('newPedidoTelefone').map((data: NotificacaoUsuario) => {

return data;

});

}

controller

this.service.getNewPedidoTelefone().subscribe(data => {

Notification.requestPermission(function(perm) {

const NotificationOptions: NotificationOptions = {

body: 'Pediram o telefone de: ' + data.nome,

tag: new Date().getTime().toString(),

icon : 'https://odete.com.br/uploads/' + data.imagem

};

const notification = new Notification('Pediram o Telefone', NotificationOptions);

});

});

22/11/2017 Development / java script

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

 

@Pipe({

name: 'tel'

})

export class TelPipe implements PipeTransform {

 

transform(value: any, args?: any): any {

 

let str = value + '';

str = str.replace(/\D/g, '');

if (str.length === 11 ) {

str = str.replace(/^(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');

}else {

str = str.replace(/^(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');

}

return str;

}

}

22/11/2017 Development / java script

I preferr observable

getColaboradores(filters) {

return new Promise((resolve, reject) => {

this.http.get(this.urlApi + '/colaboradores', { params : { data : filters }})

.toPromise()

.then(response => {

this.dataColaboradores = response.json();

resolve();

});

});

in your controller 

constructor(private service: ColaboradorService) {}

service.getColaboradores().then(_=>  this.loading = false)

and Observable

getColaboradores(filters): Observable<any[]> {

return this.http.get(this.urlApi + '/colaboradores', { params : { data : filters }})

.map(response => {

return response.json();

});

}

22/11/2017 Development / java script
// in the service
getVehicles(){
    return Observable.interval(2200).map(i=> [{name: 'car 1'},{name: 'car 2'}])
}

// in the controller
vehicles: Observable<Array<any>>
ngOnInit() {
    this.vehicles = this._vehicleService.getVehicles();
}

// in template
<div *ngFor='let vehicle of vehicles | async'>
    {{vehicle.name}}
</div>
22/11/2017 Development / java script

Esse código foi feito para integrar o site da Odete.com.br usando angular5 e googleMaps

Eu criei um service chamado ColaboradorService onde tem uma porrada de método que eu utilizo nas consultas dos colaboradores, e um desses métodos é uma função que retorna a latitude e longitude de uma pessoa, a partir de um cep ou endereço consultado. Eu preciso desses dados, para consultar no mongo e trazer as diaristas, com base na lat e lng, + o Raio de distancia.

Como vocês sabem, não é possível injetar o script do google na mão, é muito feio. 

import { GoogleMapsAPIWrapper, MapsAPILoader } from '@agm/core';

import { Injectable, NgZone } from '@angular/core';

export class ColaboradorService extends GoogleMapsAPIWrapper {

constructor(private http: Http, private __loader: MapsAPILoader, private __zone: NgZone) {

super(__loader, __zone);

}

/* retorna latitude e longitude */

getCepbyGoogle(address: string): Observable<any[]> {

 

return Observable.create(observer => {

this.__loader.load().then(() => {

console.log('Getting Address - ', address);

const geocoder = new google.maps.Geocoder();

geocoder.geocode( { 'address': address}, function(results, status) {

if (status === google.maps.GeocoderStatus.OK) {

observer.next(results[0].geometry.location);

observer.complete();

} else {

console.log('Error - ', results, ' & Status - ', status);

observer.next({});

observer.complete();

}

});

});

});

 

21/11/2017 Development / java script

no angular 5 para enviar um objeto para o componente, basta na classe do componente incluir

// fazer o import do decorate Input
import { Input } from '@angular/core';

export class PerfilComponent implements OnInit {

// model = nomedoModel
@Input('model') model;

}

e no chamada do componente
<app-perfil [model]="{ ObjetoModel }"></app-perfil>

20/11/2017 Development / java script

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {

// Make the HTTP request:

this.http.get('https://odete-app.herokuapp.com/colaboradores').subscribe(data => {
 // Read the result field from the JSON response.
 this.results = data;
 console.log(data);
});

}

20/11/2017 Development / java script
app.run(function($window, $rootScope) {
      $rootScope.online = navigator.onLine;
      $window.addEventListener("offline", function() {
        $rootScope.$apply(function() {
          $rootScope.online = false;
        });
      }, false);

      $window.addEventListener("online", function() {
        $rootScope.$apply(function() {
          $rootScope.online = true;
        });
      }, false);
});

In your controller $rootScope.online in your view {{online}}

12/11/2017 Development / java script

É comum quando a gente está desenvolvendo ter que simular os dados mockados, isso é um porre, mas necessário.

Eu uso uma parada chamada chancejs, mas o chancejs só gera o valor, 1 único valor. O legal é passar um model e ja retornar tudo de uma vez.

Exemplo com o chancejs.

gerarDados(qtdeRows, jsonModel){
return {
nome: chance.name(),
idade: chance.int()
}
}

Basicamente, beeeeeem basicamente essa é a ideia.

Mas o ideial seria fazer um request para uma url, passando a qdte e o model.

Exemplo:

fetch(endpoint, {qtde: qtdeRows, model: jsonModel})

Porque isso é legal? Porque voce pode fazer uma parada que seja em DEV desse jeito e em PROD, apontar pra outro endpoint que vai retornar exatamente a mesma coisa, e você não fica travado, esperando o cara do backend fazer sua parte.

Tá, mas como eu gero esses dados com URL?

Bom, aqui vão alguns links.

http://www.objgen.com/json?demo=true

https://www.json-generator.com/

http://json-schema-faker.js.org

https://www.npmjs.com/package/dummy-json // Esse carinha faz oque a gente quer

https://github.com/marak/Faker.js/ bom pra caraaaaaaleo, porque da pra fazer um requisicao pela URL direta.

Também é possível gerar os dados apenas usando um schema

Ex: Essa url - http://faker.hook.io/?property=name.findName&locale=de

fetch('http://faker.hook.io/?property=name.findName&locale=de').then(function(resp){ return resp.json() }).then(function(data){ console.log(data) }) :-)

https://rawgit.com/Marak/faker.js/master/examples/browser/index.html

https://github.com/typicode/json-server //sobe um servidor e você pode fazer schemas

Espero que sirva

 

12/11/2017 Development / java script

Com as recentes tecnologias aparecendo no mundo do desenvolvimento web, como as novas versões dos browsers, novas versões do NPM, NODE, novas versões dos pacotes das bibliotecas e frameworks, surgiu algumas novidades que possibilitam utilizá-las para melhorar a performance das nossas aplicações.

Uma delas é o navigator.connection.type que retorna como você esta conectado. 

Ex: wifi, 2G, etc...

Imagina fazer o seguinte, quando estiver wifi,carrega um vídeo, quando estiver 2G carrega uma imagem. :-)

Outro pulinho do gato é o display: optional em uso das fontes

Ex:

font-family: 'Xibata';
font-display: optional

 

06/11/2017 Development / java script

Talvez vocês não conheçam, mas o chancejs tem uma lista grande de métodos que não estão na documentação..

  • chance.hex();
  •  chance.cnpj();
  •  chance.profession();
  •  chance.company();
  •  chance.israelId();
  •  chance.mrz();
  •  chance.HIDN();
  •  chance.nationality();
  •  chance.semver();
  •  chance.tlds();
  •  chance.port();
  •  chance.locale();
  •  chance.geojson();
  •  chance.county();
  •  chance.weekday();
  •  chance.iban();
  •  chance.file();
  •  chance.mac_address();
01/11/2017 Development / java script

É muito chato na hora da gente desenvolver, ter que ficar fazendo dados mockados, então, pra ficar um pouco mais divertido tem uma biblioteca chamada changejs.

Que a gente pode fazer o seguinte

this.data = new Array(50).fill(1).map(() => {

return {
"codigo": chance.hash({length: 4}),
"operador": chance.name(),
"titulos" : chance.integer({min: 0, max: 500}),
"valorTotal" : chance.floating({min: 0, max: 100}),
"valorRecebido" : chance.floating({min: 0, max: 100}),
"valorEstimado" : chance.floating({min: 0, max: 100})
}

});

isso vai gerar um array de 50 itens contendo dados que eu nem imagino qual serão os valores, rs...mas vai gerar :-)

 

05/10/2017 Development / java script
Eu uso essa parada pra testar as notificações e vira e mexe eu esqueço! Agora não esqueço mais ;-)

var key = 'YOUR-SERVER-KEY';
var to = 'YOUR-IID-TOKEN';
var notification = {
  'title': 'Portugal vs. Denmark',
  'body': '5 to 1',
  'icon': 'firebase-logo.png',
  'click_action': 'http://localhost:8081'
};

fetch('https://fcm.googleapis.com/fcm/send', {
  'method': 'POST',
  'headers': {
    'Authorization': 'key=' + key,
    'Content-Type': 'application/json'
  },
  'body': JSON.stringify({
    'notification': notification,
    'to': to
  })
}).then(function(response) {
  console.log(response);
}).catch(function(error) {
  console.error(error);
})
28/09/2017 Development / java script

Esse post serve só pra eu lembrar que no REDUX é criado uma unica STORE...maaaaaaas, não é bem assim...a gente pode sim, e aqui abaixo eu tenho o pulo do gato pra usar isso.

import { createStore } from 'redux'

// ISSO É O REDUCER = funcao redutora, entra de um jeito e sai de outro ;-)
function minhaFuncao(state, action){
if(action.type === 'BLABLABLA'){
return state
}

}

const store = createStore(minhaFuncao)

App store={store}

Quando a gente recebe as propriedades do store, usando o REDUX nos temos os métodos

subscribe()
getState()
dispatch()

http://redux.js.org/docs/api/Store.html

O getState() retorna o ultimo valor retornado da funcao redutora

O dispatch({ type: 'BLABLABLA' , payload: 'PAYLOAD'}) ou no ES6 poderia só passar dispatch({ type: 'BLABLABLA' , payload}) que recebe o type que vai ser responsavel por disparar a acao na funcao redutora, e o payload que é o valor.

Só que ficar mandando toda hora dispatch com o type, é uma merda!

Pra resolver esse problema a gente tem o REDUX-THUNK

https://github.com/gaearon/redux-thunk

E dai nosso dispatch ficaria

this.props.store.dispatch(minhaFuncao(meusparametros)) e na minha funcao eu retorno um dispatch

minhafuncao(url){
return dispatch => {
fetch(url).then(resp => {
dispatch({ type: 'BLABLABLA' , resp}) //explosao de variaveis para objetos literais
return resp
})
}
}

Pra isso temos que importar

import ReduxThunk from 'redux-thunk'

mas na hora de criar a store precisamos importar

import { createStore, applyMiddleware(ReduxThunk) } from 'redux'

O lance é que isso não é nada sem esse carinha aqui ó

https://github.com/reactjs/react-redux

import { Provider } from 'react-redux'

E para usar isso é bom a gente declarar as propriedades das classes que vão herdar o nosso store

App.contextTypes = {
store: React.PropTypes.object.isRequired
}

e usar no App store={this.context.store}

E no final a gente usa o npm install generator-electrode :-)

31/08/2017 Development / java script

A pessoa pode quebrar a cabeça um pouquinho com isso. Então pra ajudar outros pessoas e a me ajudar futuramente, caso eu venha utilizar novamente, vou postar aqui o pulinho do gato que faz funcionar a recuperação dos dados usando o req.body no node.

Basicamente é isso aqui uma chamada usando fetch

                    fetch('http://localhost:3000/position', {
                        method: 'post',
                        headers: {
                         'Accept': 'application/json',
                         'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            position: {latitude : position.coords.latitude, longitude: position.coords.longitude},
                            id: 'XPTO'
                        })
                    }); 

E no node você usa req.body.position, por exemplo.

Mas pra isso funcionar, o pulo do gato é inserir o headers

                        headers: {
                         'Accept': 'application/json',
                         'Content-Type': 'application/json'
                        },

Espero que ajude

 

20/06/2017 Development / java script

Recentemente eu desenvolvi um programinha para cadastrar eventos de corredores. É o onboard - http://onboard.run

E comecei a pesquisar os polylines, que mostram as rotas dos trajetos realizados. É para uma possível implementação.

E olha como ficou o resultado.

https://jsfiddle.net/3ubgkpwu/1/

06/03/2017 Development / java script

Muita gente não sabe, mas o método split aceita expressões regulares. Imagine o seguinte cenário.

var arquivo = '100,200-150,200;20';
var valores = arquivo.split(',');
["100", "200-150", "200;20"] //vai imprimir

var exp = /[,;-]/;
var valores = arquivo.split(exp);
["100", "200", "150", "200", "20"] //vai imprimir tudo separado e bonitinho de uma vez só.

Espero que ajude.

27/01/2017 Development / java script

FormatMessage do react-intl pode ser usado de algumas maneiras, vou expor aqui 2 maneiras.

Diretamente no html.

Ex: <Field label={<FormattedMessage {...messages.publicoAlvo} />}

Ou você pode criar uma função que retorna o defaultMessage.

const m = (message) => ({ ...messages[message] }.defaultMessage);

<Field label={m('publicoAlvo')} />

Eu prefiro a segunda.

Espero que ajude

 

24/01/2017 Development / java script

insert in your component - attribute (data-componente="namecomponente")

function debugComponent(){

    document.querySelectorAll("[data-component]").forEach(function(component, index){

        var modulo = document.createElement('div');
        modulo.classList.add('debug-modulo');

        var moduloName = document.createTextNode(component.getAttribute('data-component'));
        modulo.appendChild(moduloName);

        component.classList.toggle("debug-modulo-active");
        component.appendChild(modulo);
    });
}

//css

.debug-modulo-active {
    border: 1px solid red;
    position: relative;
    display: block;
}

.debug-modulo {
    position: absolute;
    top: 0;
    left : 0;
    z-index: 1000;
    right: 0;
    background-color: #fff;
    color: #000;
    font-size: 10px;
}

20/01/2017 Development / java script

When you are working with the component toastr, you may want to customize the css, there is a need to debug the css on the console. However, when you do this, if you just hover and pull, toastr closes :-(

With this code it will only close in the click :-)

    angular.extend(toastrConfig, {

        // use for debug component
        // timeOut: 0,
        // extendedTimeOut: 0,

        closeButton: true
    });

 

03/01/2017 Development / java script

this is the demo

the secret is:  ng-selected="true"

        <md-input-container>
            <label for="aggregation">Aggregation:</label>
              <md-select ng-model="aggregation">
                <md-option ng-value="Select" ng-selected="true">Select</md-option>
                <md-option><em>Hour</em></md-option>
                <md-option><em>Day</em></md-option>
                <md-option><em>Week</em></md-option>
              </md-select>
          </md-input-container>

03/01/2017 Development / java script

Same time i need repeat using numbers

sample: ng-repeat="item in [1,2,3,4,5,6...]" but this is very hugly :-(

I prefer

 ng-repeat="n in [].constructor(48) track by $index"

26/12/2016 Development / java script

Depois de muito, muito, mas muito mesmo procurar na internet algo que fosse mais ou menos assim.

Queria deixar desabilitador ou readonly os campos de datetimepicker do kendo e deixar o usuario manipular apenas pelos icones de calendario e timer.

Nao encontrei nada :-(

A minha solucao foi a seguinte:

Eu inicializo os campos como readonly e dou um bind via js nos elementos

      var kendoDateTimePicker = element.find('#roc-datetimeinterval-start').data('kendoDateTimePicker');
      var kendoDateTimePickerEnd = element.find('#roc-datetimeinterval-end').data('kendoDateTimePicker');

      // abre o calendario do start date
      element.find('.startDatetime .k-link-date').on("click", function (e) {
        kendoDateTimePicker.close('time');
        kendoDateTimePicker.open('date');
      });

      // abre o calendario do end date
      element.find('.endDatetime .k-link-date').on("click", function (e) {
        kendoDateTimePickerEnd.close('time');
        kendoDateTimePickerEnd.open('date');
      });


      // abre o timer do start date
      element.find('.startDatetime .k-link-time').on("click", function (e) {
        kendoDateTimePicker.close('date');
        kendoDateTimePicker.open('time');
      });

      // abre o timer do end date
      element.find('.endDatetime .k-link-time').on("click", function (e) {
        kendoDateTimePickerEnd.close('date');
        kendoDateTimePickerEnd.open('time');
      });

Ficou supimba, Espero que funcione pra vc!

 

22/12/2016 Development / java script

Tudo que você precisa saber sobre eventos e Layers de Mapa usando Leaflet

// Base Mapa
map.on('layeradd' // Usado para inicializar o mapa - todas as layer passam por ele inicialmente
baseLayer.on('loading', function() { //Esse evento sé chamado, em casos de zoom in ou out
baseLayer.on('load', function() { //Esse evento é chamado no final do layeradd ou no final do loading

// Raster
baseRasterLayer.on('loading', function() { //Esse evento só é chamado quando tem zoom + ou zoom -
baseRasterLayer.on('load', function() { // Esse evento é chmado no final do layeradd ou loading

// Vetor
overlay.on('layeradd', function() { //Usado para carregar as layers dos vetores
overlay.on('load', function() { // Chmado no final de layeradd

//Issues
overlay.on('loading', function(e) { //Evento quando tem zoom - ou zoom +
overlay.on('load', function(e) { // Final do loading
Nesse caso de issues, foi inserido um evento que fica escutando cada ícone de issue inserido
myMarker.on('add', function(e){ // E zera o mapa

E o pulo do gato nesse caso, foi desabilitar o map.off('layeradd');

20/12/2016 Development / java script

Essas contantes sao usadas para fazer filtros usando o ui grid

1.  STARTS_WITH
2.  ENDS_WITH
3.  CONTAINS 
4.  EXACT
5.  NOT_EQUAL
6.  GREATER_THAN
7.  GREATER_THAN_OR_EQUAL
8.  LESS_THAN
9.  LESS_THAN_OR_EQUAL

 

17/12/2016 Development / java script

É muito chato ter que parsear data usando o html input type date.

Então pra facilitar tem um macetezinho que quando voce grava no banco um tipo no formato data e depois vc quer reutilizar, usa esse eskema aqui ó

$scope.birthday= moment(result.birthday).toDate()

Nesse caso, usei a biblioteca moment.js

Espero que sirva!

03/08/2016 Development / java script
SELECT ST_AsGeoJSON("poiGeometrico") geojson, * FROM "Incidente"
    WHERE 
ST_Intersects(ST_Buffer((SELECT shape FROM "RotaOlimpica" WHERE id = 1), 0.001),"poiGeometrico")
AND
inicio >= now() - interval '1 day'
AND
inicio <= now() + interval '1 day'
AND
status = 'ABERTO';
02/08/2016 Development / java script

            var MyIcon = L.Icon.extend({
              options: {
                  iconUrl: '/data-s4c/Camadas/Rotas/s4c_ic_ending_point.png',
                  iconSize: new L.Point(24, 24),
                  iconAnchor: new L.Point(22, 94),
                  popupAnchor: new L.Point(-3, -76)
              }
            });
            var icon = new MyIcon();

                via.geom.setStyle({color: $scope.fillColor()});

                MapaService.adicionarLayer(via.geom);
                MapaService.obterMapa().then(function(mapa) {
                    mapa.fitBounds(via.geom);

                    var layers = _.first(via.geom.getLayers());
                    var posIni = layers.getLatLngs()[0];
                    var posEnd = layers.getLatLngs()[layers.getLatLngs().length -1];

                    var marker1 = L.marker([posIni.lat, posIni.lng], {icon: icon}).addTo(mapa);
                    var marker2 = L.marker([posEnd.lat, posEnd.lng]).addTo(mapa);

                  

07/07/2016 Development / java script

http://jsfiddle.net/b43hj/3387/

Fiz esse pequeno script para a landing Page da GVT é bem util. O footer fica travado quando o scrolltop chega em determinado elemento. theFixed é o elemento que vc quer comparar.

$(document).ready(function(){
var the = $("#theFixed").offset().top;

  $(window).scroll(function(){

    if($(this).scrollTop() > Math.max(0,($("#theFixed").offset().top + $("#theFixed").height())-$(this).scrollTop())){
  $("#theFixed").addClass("fixed")
  }else{
  $("#theFixed").removeClass("fixed");
  }

})

27/06/2016 Development / java script

        function returnPromisse() {
            var p = $q.defer();
            $http.get(API_ENDPOINT + '/usuarios')
                .then(function(response) {
                    if (typeof response.data === 'object') {
                        p.resolve(response.data);
                    } else {
                        p.reject(response);
                    }
                }, function(err) {
                    p.reject(err);
                });

            return p.promise;
        }

var promisse = returnPromisse().then(function(data){ console.log(data) })

 

22/06/2016 Development / java script

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {    margin: 0;    padding: 0;    border: 0;    font-size: 100%;    font: inherit;    vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    display: block;}body {    line-height: 1;}ol, ul {    list-style: none;}blockquote, q {    quotes: none;}blockquote:before, blockquote:after,q:before, q:after {    content: '';    content: none;}table {    border-collapse: collapse;    border-spacing: 0;}
        
        
        header{
            text-align: center;
            font-size: 72px;
            line-height: 108px;
            height: 108px;
            background: #335C7D;
            color: #fff;
            font-family: 'PT Sans', sans-serif;
            
            // set animation
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }
        
        header.sticky {
            position: fixed;
            font-size: 24px;
            line-height: 48px;
            height: 48px; 
            width: 100%;
            background: #efc47D;
            text-align: left;
            padding-left: 20px;
        }


 

 



     

Sticky Header


      
     
     Big Image
      
     
     
      
     
     
     $(window).scroll(function() {
     if ($(this).scrollTop() > 1){
     $('header').addClass("sticky");
     }
     else{
     $('header').removeClass("sticky");
     }
     });

Outras referencias

http://jsfiddle.net/sinky/S8Fnq/

http://callmenick.com/_development/resize-header-on-scroll/

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy_affix&stacked=h

https://codepen.io/chrissp26/pen/gBrdo

https://codepen.io/renby/pen/tKnFH

09/06/2016 Development / java script

Insert in your html, attribute data-component="nameComponent"

and javascript Debug View

function debugComponent(){
    
    

    $("[data-component]").each(function(index, item){

var modulo = $('<div>').css({'position': 'absolute', 'top': 0, 'left' : 0, 'z-Index': 1000, 'right': 0, backgroundColor: '#fff', 'color': '#000', 'fontSize': '10px'})

var obj = $(item);

        var cmpt = obj.data("component");

        obj.css({"border": "1px solid red", 'position': 'relative', 'display': 'block'}).append(modulo.text(cmpt))

    })
}

14/05/2016 Development / java script

I change database of My App Odete.

Odete was MySQL, now is Mongo.

Sample of change:

Query for select users and geoLocation using Mysql

        var sql = 'SELECT colaboradores.id, colaboradores.verify, colaboradores.latitude, colaboradores.longitude, colaboradores.cidade,colaboradores.nome, colaboradores.sobrenome, colaboradores.valor, colaboradores.uf, colaboradores.bairro, colaboradores.idfacebook, colaboradores.imagem, CAST( ' +
                      '6371 ' + 
                      '* acos ( ' +
                      'cos(radians('+ $latitude +')) * ' +
                      'cos(radians( colaboradores.latitude)) * ' +
                      'cos(radians( colaboradores.longitude) - ' +
                      'radians( '+ $longitude +' )) + ' +
                      'sin(radians( '+ $latitude +' )) * ' +
                      'sin(radians(colaboradores.latitude)) ' +
                    ') AS UNSIGNED) AS distance, GROUP_CONCAT(telefones.numero) as telefone, GROUP_CONCAT(operadoras.txtOperadora) as operadora, (SELECT GROUP_CONCAT(servicos.txtServico) from odete.servicos inner join odete.colaboradores_servicos on colaboradores_servicos.servico_id = servicos.id where colaboradores_servicos.colaborador_id in (colaboradores.id)) as servico FROM (odete.colaboradores) INNER JOIN odete.telefones ON colaboradores.id = telefones.colaborador_id INNER JOIN odete.operadoras ON operadoras.id = telefones.operadora_id WHERE tipo_colaborador = "COLABORADOR" GROUP BY colaboradores.id having distance <= ' + range + ' ORDER BY colaboradores.nome';

And Now Mongo

            Colaborador.geoNear(coords, {num: limit, maxDistance: maxDistance, spherical: true, distanceMultiplier: km}, function(err, resp) {
                if (err) return res.status(500).json(err);

The difference is brutal!

 

 

12/05/2016 Development / java script

My app http://odete.hagility.com.br was backend php.

Now odete app is NODE.

My app is host in Heroku and the endpoints for front-end are

https://odete-app.herokuapp.com/colaboradores

https://odete-app.herokuapp.com/servicos

https://odete-app.herokuapp.com/operadoras

The database odete is MySQL, but in the future will be Mongo.

 

26/04/2016 Development / java script

Olhando de curioso os métodos no chrome, descobri essa muther fucker!

navigator.getBattery().then(function(resp){ console.log(resp) });

Espero que sirva!

17/02/2016 Development / java script

using angular with find, i discovered that "find" run only on name atributte.

Sample:

element.find('.myclass') - not run

element[0].querySelector('.myclass') - run

Jump the cat

 

04/02/2016 Development / java script

window.onload = function() {
    var n, div, worker;
    
    var wikis = [
        "brownie",
        "lemon",
        "chocolate",
        "sesame",
        "lollipop",
        "oat",
        "cake",
        "gingerbread",
        "sweet",
        "applicake",
        "apple",
        "chups"
    ];

    for (n = 0; n < 5; ++n) {
        worker = new Worker("task.js");
        div = document.getElementById("text-" + n);
        worker.onmessage = function (event, index) {
          var d = event.data[0];
          document.getElementById("text-" + event.data[1]).innerHTML = d;
        };
        worker.postMessage([div.innerHTML, wikis, n]);
    }
}

task.js

this.onmessage = function(e) {
    var html = e.data[0];
    var index = e.data[2];
    for(var i=0; i<e.data[1].length;i++){
        var reg = new RegExp(e.data[1][i], 'gi');
        html = html.replace(reg, "<span class='wiki'>" + e.data[1][i] + "</span>");
    }
    this.postMessage([html, index]);
}


<div id="text-0">esse eh o texto lemon, muito legal, cake</div>
<div id="text-1">applicake, apple</div>
<div id="text-2">sweet, brownie</div>
<div id="text-3">chocolate legal, cake, gingerbread</div>
<div id="text-4">brownie lemon, muito legal, cake</div>

.wiki {color: red}

04/02/2016 Development / java script

I did a test in my job with WORKERS.

I create a file task.js

onmessage = function(e) {
    var html = e.data[0];
    for(var i=0; i<e.data[1].length;i++){
        var reg = new RegExp(e.data[1][i], 'gi');
        html = html.replace(reg, "<span class='wiki'>" + e.data[1][i] + "</span>");
    }
    postMessage(html);
}

And my app

window.onload = function() {
    var div = document.getElementById("text");
    var wikis = [
        "brownie",
        "lemon",
        "chocolate",
        "sesame",
        "lollipop",
        "oat",
        "cake",
        "gingerbread",
        "sweet",
        "applicake",
        "apple",
        "chups"
    ];

    var worker = new Worker('task.js');
    
    worker.onmessage = function (event) {
        var d = event.data;
        div.innerHTML = d;
    }
    worker.postMessage([div.innerHTML, wikis]);

}

And my HTML

<div id="text">esse eh o texto lemon, muito legal, cake</div>

css - .wiki {color: red}

30/11/2015 Development / java script

I did two implementations using promisses.

One using angular, and other using node.

Angular Implementation

---------------------------------------------------------------------------

    var myApp = angular.module('myApp',[]);
    function MyCtrl($scope, $http, $q, $timeout) {

        $scope.response = [];
        $scope.brands = ['shoptime', 'americanas', 'submarino'];

        $scope.update = function(data){

            var promises = [];

            $scope.brands.forEach(function(brand){

                var deferred = $q.defer();
                var url = 'https://api.'+ brand +'.com.br/';
                promises.push($http.get(url, {params: {brand : brand}}, function (error, msg, body) {
                  if (error) {
                    deferred.reject();
                  }
                  deferred.resolve();
                }));
            });

            $q.all(promises).then(function (resp) {

                $scope.response = [];
                var arr = [];

                resp.forEach(function(obj){

                  var brand = obj.config.params.brand;
                  var body = obj.data;

                  var oas = body.oas[brand];
                  var oassitepage = body.oassitepage[brand];
                  var ftpupload = body.ftpupload[brand];
                  arr.push({ 'oas' : oas, 'oassitepage': oassitepage, 'ftpupload': ftpupload, 'brand' : brand });
                });

                $scope.response = arr;
            });

            $timeout($scope.update, 5000);
        };

        $scope.update();
    };

 

Node Implementation - using socket.io

------------------------------------------------------------------------------------

function requestUrl(socket){

  var promises = [];

  brands.forEach(function (brand){
    var deferred = Q.defer();
    var options = {url: 'https://api.'+ brand +'.com.br/'};
    promises.push(request(options, function (error, msg, body) {
      if (error) {
        deferred.reject();
      }
      deferred.resolve();
    }));
  })

  Q.all(promises).then (function (resp) {
    var body = resp;
    var arr = [];

    resp.forEach(function(obj){

      brand = obj[0].request.uri.host.replace("api.", "");
      brand = brand.replace(".com.br", "");

      body = JSON.parse(obj[0].body);

      var oas = body.oas[brand];
      var oassitepage = body.oassitepage[brand];
      var ftpupload = body.ftpupload[brand];
      arr.push({ 'oas' : oas, 'oassitepage': oassitepage, 'ftpupload': ftpupload, 'brand' : brand });
    });

    socket.emit('news', { 'brands': arr });
  }).catch(function(err){
    console.log(err);
  });

For B2W Implementation

09/11/2015 Development / java script

<!-- add a class to the first item -->
<ul>
    <li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the last item -->
<ul>
    <li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the even items and a different class to the odd items -->
<ul>
    <li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

 

09/11/2015 Development / java script

With plugin - http://codepen.io/anon/pen/dYgxNL

Without plugin - https://jsfiddle.net/bbgtjobb/

25/09/2015 Development / java script

Essa semana eu comecei a dar uma olhada bem superficial no react e a principio comecei bem de leve, abri uma paginazinha no google, digitei react jsfiddle, entrei no primeiro exemplo e fui brincando.

A primeira impressão fiquei com pé atras, por ter visto o html misturado ao javascript, mas quando caiu a ficha que aquilo ali se tratava de um componente e que um componente tem vida propria e pode se comunicar com qualquer outro componente, pensei como existem pessoas inteligentes na face da terra!!!

E a partir dai fui brincando, brincando e fazendo os testes.

A minha missão era fazer uma pagina renderizar N componentes e dentro desses componentes, poderiam ter N componentes e ai por diante...

O desafio maior é que essa estrutura estava em um JSON.

var spacey = [{
    type : 'Position',
    position: 'x01',
    sm: 12,
    md: 6,
    lg: 6,
    items : [{
        type : 'Carrousel',
        items : [{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        }]
    }]
},{
    type : 'Position',
    position: 'x02',
    sm: 12,
    md: 6,
    lg: 6,
    items : [{
        type : 'Carrousel',
        items : [{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        }]
    }]
},{
    type : 'Position',
    position: 'x03',
    sm: 12,
    md: 6,
    lg: 6,
    items : [{
        type : 'Carrousel',
        items : [{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        }]
    }]
},{
    type : 'Position',
    position: 'x04',
    sm: 12,
    md: 6,
    lg: 6,
    items : [{
        type : 'Carrousel',
        items : [{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        }]
    }]
}];

module.exports.spacey = spacey;

Ou seja, dentro desse JSON eu tenho um componente chamado Position, que dentro dele tem um componente chamado Carrousel que dentro dele tem componentes chamado Imagem.

E o desafio ficou maior quando eu decide aproveitar ao máximo o poder do REACT e fazer uma aplicação Isomorphica que respondia tanto no client como no server com o mesmo código :-)

Primeiro criei um servidor usando o EXPRESS

Server.js

// server.js

var express = require('express'),
path = require('path'),
app = express(),
port = 4444,
bodyParser = require('body-parser');

// JSX transpiler
require("node-jsx").install();

app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

require('./app/routes/core-routes.js')(app);

app.get('*', function(req, res) {
    res.json({
        "route": "Ops, não encontrado"
    });
});

app.listen(port);
console.log('Server is Up and Running at Port : ' + port);

Feito isso minha preocupação foi fazer os componentes

Componente Position

/** @jsx React.DOM */

var React = require('react');
var Position = require('./Position');
var Carrousel = require('./Carrousel');
var Imagem = require('./Imagem');

var id = 0;
function newId(){
    return id++;
}
var Position = React.createClass({

    componentDidMount: function() {
        setTimeout(function(){
            //sp.getPublication();
        }, 5000); 
    },


    render: function() {

        var obj = {};
        obj['col-sm-' + this.props.properties.sm] = this.props.properties.sm;
        obj['col-md-' + this.props.properties.md] = this.props.properties.md;
        obj['col-lg-' + this.props.properties.lg] = this.props.properties.lg;
        obj['spacey-oas'] = 'spacey-oas';

        var classes = React.addons.classSet(obj);
        var dataPos = this.props.properties.position;


        if(this.props.items){
            var components = this.props.items.map(function(component){
            var module = React.createFactory(require('./' + component.type));
            var instance = React.createElement(module, {items: component.items, properties: component, key: newId()});
                return (instance);
            });            
        }
 
        return (<div className={ classes } data-pos={dataPos}><div className="well">{components}</div></div>);
    }
});

module.exports = Position;

Componente Carrousel

/** @jsx React.DOM */

var React = require('react/addons');
var Imagem = require('./Imagem');

var id = 0;
function newId(){
    return id++;
}

var Carrousel = React.createClass({

    //antes de carregar
    componentDidMount: function() {
        jQuery(this.getDOMNode()).not('.ready').addClass('ready').slick({infinite: true,slidesToShow: 1,slidesToScroll: 1});
    },

    //depois de carregar
    componentWillMount: function() {
    },

    render: function() {
        var components = this.props.items.map(function(component){
        var module = React.createFactory(require('./' + component.type));
        var instance = React.createElement(module, {items: component.items, properties: component, key: newId()});
            return (<div>{instance}</div>);            
        });

        return (<div className="slick-slider">{components}</div>);
    }
});

module.exports = Carrousel;

Componente Imagem

/** @jsx React.DOM */

var React = require('react/addons');

var Imagem = React.createClass({
    render: function() {
        return (<img src={this.props.properties.imgP} className='imagem img-responsive'/>);
    }
});

module.exports = Imagem;

Componente MyComponents - Responsavel por chamar todos os componentes.

/** @jsx React.DOM */

var React = require('react');
var Position = require('./Position');
var id = 0;
function newId(){
    return id++;
}

var MyComponents = React.createClass({
    render: function() {
        var obj = [].concat(this.props.obj);
        var components = obj.map(function(component){
        var module = React.createFactory(require('./' + component.type));
             return (React.createElement(module, {items: component.items, properties: component, key : newId() } ));            
        });
 
        return (<div>{components}</div>);
    }
});

module.exports = MyComponents;

3) Feito isso, fui fazer o arquivo que iria renderizar todo esse processo, o arquivo MAIN.JS do Client e o meu Core-Routes.js no Server

Core-routes.js

/* Server Side */
var React = require('react');
var MyComponents = React.createFactory(require('../components/MyComponents'));
var spacey = require('../data/spacey.js').spacey;
var http = require('http');

module.exports = function(app) {

    app.get('/', function(req, res){
        var reactHtml = React.renderToString(MyComponents({'obj' : spacey}));
        res.render('index.ejs', {reactOutput: reactHtml});
    });
};

Main.js - Client

/** @jsx React.DOM */
/* Client Side */    

var React = require('react');
var spacey = require('./data/spacey.js').spacey;

var MyComponents = require('./components/MyComponents');
var container = document.getElementById("react-main-mount");

var app = React.createElement(MyComponents, {'obj' : spacey});
app = React.render(app, container);

E por ultima a minha view que iria fazer o merge com os dados

  <div class="container-fluid">
    <div class="row">
      <div id="react-main-mount">
        <%- reactOutput %>
      </div>
    </div>
  </div>

<!-- se comentar esse cara só renderiza via server  -->
<script src="/main.js"></script>

E tambem um arquivo importantissimo que transforma os componentes no main.js, para isso usei o gulp

var gulp       = require('gulp'),
browserify = require('gulp-browserify'),
watch = require('gulp-watch'),
livereload = require('gulp-livereload');

gulp.task('scripts', function () {

    gulp.src(['app/main.js'])
        .pipe(browserify({
            debug: true,
            transform: [ 'reactify' ]
        }))
        .pipe(livereload())
        .pipe(gulp.dest('./public/'));

});

gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('app/**/*.js', ['scripts']);
});

gulp.task('default', ['scripts','watch']);

Ai foi juntar tudo isso e plaaaay! A parada é absurdamente animal

Espero que sirva para alguém ;-)

 

07/09/2015 Development / java script

Hi guys.

I am development a system in my company, using component in components in loop.

I have a idea of using REACT and i development this script.

var obj = [{
    type : 'Carrousel',
    effect : 'fade',
    items : [{
        type : 'Product',
        productId: '121212121'
    },{
        type : 'Image',
        imgP: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150'
    },{
        type : 'Image',
        imgP: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150'
    },{
        type : 'Image',
        imgP: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150'
    },{
        type : 'Image',
        imgP: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150'
    },{
        type : 'Image',
        imgP: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150'
    }]
}];

var MyComponents = React.createClass({
    render: function() {
        var components = obj.map(function(component){
        var module = window[component.type]
            return (React.createElement(module, {items: component.items}));            
        });

        return (

{components}

);
    }
});

 


var Carrousel = React.createClass({
    render: function() {

        var components = this.props.items.map(function(component){
        var module = window[component.type]
        var instance = React.createElement(module, {properties: component})
            return (

  • {instance}
  • );            
            });

     

            return (

    • {components}
    );
        }
    });

     

    var Product = React.createClass({
        render: function() {
            return (

    Produto: {this.props.properties.productId}

    );
        }
    });

     

    var Image = React.createClass({
        render: function() {
            return ();
        }
    });

    React.render(, document.getElementById('container'));

    this is a jsfiddle

  • https://jsfiddle.net/69z2wepo/15430/

04/05/2015 Development / java script

I developement a new implementation at b2wDigital.

http://jsfiddle.net/wa1mL8s2/

http://jsfiddle.net/rn8snfod/2/

This initial development, and hir next Post.

http://jsfiddle.net/rn8snfod/4/

12/01/2015 Development / java script

Mas que porra é essa?

Essa é uma porrinha que tem no site novo da MSN Brasil e que eu achei legal e tive a ideia de implementar.

http://jsfiddle.net/evqt871L/65/

update (ainda falta colocar o evento touch)

http://jsfiddle.net/evqt871L/69/

update

http://jsfiddle.net/evqt871L/72/ - agora com evento de touch

Espero que sirva!!!

23/09/2014 Development / java script

Exemplo rapidinho de filter usando jquery com expressão regular. Nem preciso explicar o script, só pra caso um dia eu precise mesmo ;-)

    $(function() {    
        $('#input-search').on('keyup', function() {
          var rex = new RegExp($(this).val(), 'i');
            $('.searchable-container .items').hide();
            $('.searchable-container .items').filter(function() {
                return rex.test($(this).text());
            }).show();
        });
    });

09/04/2014 Development / java script

Fiz esse scriptzinho na hora do almoço para usar em uma aplicação.

Espero que sirva.

http://jsfiddle.net/jPfCX/406/

25/02/2014 Development / java script

Script pra controlar o audio.

http://jsfiddle.net/tfSTh/44/

15/01/2014 Development / java script

http://jsfiddle.net/r2hnL/

To estudando ainda!

19/12/2013 Development / java script

.animate-enter, 
.animate-leave

    -webkit-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: absolute;

 
.animate-enter {
    left: 100%;
}
.animate-enter.animate-enter-active {
    left: 0;
}
 
.animate-leave {
    left: 0;
}
.animate-leave.animate-leave-active{
    left: -100%;
}

<div ui-view ng-animate=" 'animate' "></div>

01/12/2013 Development / java script

DomNodeInserted, é um evento que escuta todas as mudanças no documento.

Imagina que a cada elemento criado dinamicamente em nossa página, iremos adicionar uma borda vermelha. Qualquer elemento mesmo! Independente da ação a qual ele este vinculado.

<p><button id="insert">Insert</button></p>

$(document).bind('DOMNodeInserted', function(e) {
    var element = e.target;
        $(element).css("border", "1px solid red");
});

$('#insert').click(function() {
    $('<div id="test"/>').
    text('Test').
    appendTo('body');
});

$('#insert2').click(function() {
    $('<div id="test2"/>').
    text('Test2').
    appendTo('body');
});

http://jsfiddle.net/XaTCh/358/

26/11/2013 Development / java script

No exemplo abaixo, Restrict, é configurada com um valor ‘E’.

Este ‘E’ vem de Elemento, ou seja, você está dizendo que a diretiva deve funcionar restritamente como um elemento.

O padrão é ‘A’, de Atributo. Você também pode aceitar as duas formas, basta configurar como ‘AE’.

Diretivas:

Restrict

E = Elemento
<my-directive></my-directive>

A = Atributo
<div my-directive="exp"></div>

C = Classe
<div class="my-directive: exp;"></div>

M = Comentario
<!-- directive: my-directive exp -->

angular.module(‘app.directives.customcontrols’, [])

.directive(‘loginControl’, function() {

return {

          restrict: ‘E’,

template: ‘<h1>Meu primeiro control customizado!</h1>’

};

});

21/11/2013 Development / java script

Eh isso mesmo, console.table, ele renderiza os dados no formato de uma tabelinha.

function Person(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age; }

var family = {};
family.mother = new Person("Susan", "Doyle", 32);
family.father = new Person("John", "Doyle", 33);
family.daughter = new Person("Lily", "Doyle", 5);
family.son = new Person("Mike", "Doyle", 8);

console.table(family, ["firstName", "lastName", "age"]);

Espero que sirva!

 

17/01/2014 Development / java script

Ultima versão do script

http://codepen.io/anon/pen/btDjA

 

Eu fiquei cansado de ficar procurando um plugin jquery que fixasse minha thead e meu tfoot e decidi fazer o meu próprio pluginzinho.

Está ainda no inicio, mas já atende minha necessidade.

Versao final saindo do forno!!!!!! Feliz pra caraleo, meu FixedGrid funcionando 100%.

HFGrid

 

http://jsfiddle.net/nJMAs/8/

Update: http://jsfiddle.net/nJMAs/10/

Codepen: http://codepen.io/anon/pen/GzwpF

Update goood:

http://codepen.io/anon/pen/nhkAJ

http://codepen.io/anon/pen/Fjyba

Espero que sirva!

25/06/2013 Development / java script

Função para saber quais métodos estão atachados no seu seletor. Utilizo muito quando estou fazendo engenharia reversa no site de terceiros ou plugins.

var clickEvents = $._data($('.shop')[0], "events").click;
jQuery.each(clickEvents, function(key, handlerObj) {
console.log(handlerObj.handler);
});

10/04/2013 Development / java script

O exemplo é esse aqui.

http://imoveis.felipehuggler.com/

E o script é basicamente este:

    var menu = $("ul#menu-front"); // é o menu que queremos abrir ou fechar
    function showMenu(event) {
 
        if(menu.is(":visible"))
            menu.slideUp({ complete: function() { $(this).css('display', '') } });
        else
        menu.slideDown();
    }

    var button = $("#menu-back a"); // é o botão que vai testar se esta fechado ou aberto

    button.live("click", function() {
        showMenu();
    });

Espero que sirva!

 

02/02/2013 Development / java script

Fiz esse scriptinho mais pra saber mesmo qual seria o grau de dificuldade em implementa-lo.

É interessante você dar ao usuário o poder de selecionar vários ao mesmo tempo e como o shift já é um padrão, vamos colocar em prática!

 

<input type="checkbox" name="ch" value="1"/>
<input type="checkbox" name="ch" value="2"/>
<input type="checkbox" name="ch" value="3"/>
<input type="checkbox" name="ch" value="4"/>
<input type="checkbox" name="ch" value="5"/>
<input type="checkbox" name="ch" value="6"/>
<input type="checkbox" name="ch" value="7"/>
<input type="checkbox" name="ch" value="8"/>

$().ready(function(){
 $("input").on("click", function(e){
  if(e.shiftKey){
   $('input:checked').prevAll().attr("checked", "checked");
  }
 })
});

http://jsfiddle.net/6gTCk/

Espero que sirva!

 

15/01/2013 Development / java script

Função para o browser te auto-localizar!!!

function success(position) {
    var s = document.querySelector('#status');

    if (s.className == 'success') {
        return;
    }

    s.innerHTML = "Você foi localizado!";
    s.className = 'success';

    var mapcanvas = document.createElement('div');
        mapcanvas.id = 'mapcanvas';
        mapcanvas.style.height = '400px';
        mapcanvas.style.width = '560px';

    document.querySelector('article').appendChild(mapcanvas);

    var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeControl: false,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title:"Você está aqui!"
    });

}

function error(msg) {
    var s = document.querySelector('#status');
        s.innerHTML = typeof msg == 'string' ? msg : "falhou";
        s.className = 'fail';
}

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, error);
} else {
    error('Seu navegador não suporta <b style="color:black;background-color:#ffff66">Geolocalização</b>!');
}

 

10/01/2013 Development / java script

Estudando como os sliders são feitos, eu comecei a refatorar um código de um plugin chamado jMask.

A principio eu cheguei nessa solução:

(function ($) {
    $.fn.jMask = function (options) {

        var $this = $(this);
        var pic = $this.find("IMG");
        var tot = pic.length-1;
        var num = tot;

        setInterval(function () {

            var $active = $this.find("IMG.active");
            if ($active.length == 0) $active = $this.find("img:last");
            var $next = $active.next().length ? $active.next() : $this.find("img:first");

            $this.animate({ height: $next.height() }, 1000, function () {

                $active.addClass('last-active');
                $next.css({ opacity: 0.0 }).addClass('active').animate({ opacity: 1.0 }, 1000, function () {
                    $active.removeClass('active last-active');
                });
            });
        }, 5000);
    }

})(jQuery);

Nesse cenário, pegamos todas as imagens que estiver dentro do container e vamos apenas fazendo um next, last, first...Filé neh!!!

Mas por uma questão de performance e deixar o código mais injuto, pensei na seguinte implementação:

(function ($) {
    $.fn.jMask = function (options) {

        var $this = $(this);
        var pic = $this.find("IMG");
        var tot = pic.length-1;
        var num = tot;

        setInterval(function () {

            num = (num || tot);
            $this.animate({ opacity: 0 }, 'slow', function () {
                $this.css({ "background-image": "url('" + pic.eq(num--).attr("src") + "')" }).animate({ opacity: 1 });
            });

        }, 5000);
    }

})(jQuery);

O css fica mais ou menos assim:

        .slideshow {
            text-align:center;
            z-index: 11;
            overflow:hidden;
            display:block;
            height: 250px;
            width:100%;
            background-position: center top;
            background-repeat: no-repeat;
        }

        .slideshow IMG
        {
            text-align: center;
            margin: 0 auto;
            display: none;
            overflow:hidden;
        }

$(".slideshow").jMask();

Espero que sirva!

 

06/01/2013 Development / java script

<div id="map-canvas">
<div id="map" style="width:100%;height:300px;"></div>
</div>
</div>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>

geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.730885,-73.997383);
var mapOptions = {
    scrollwheel: true,
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), mapOptions );

var address = 'Hugo Panasco Alvim';
geocoder.geocode(
    { 'address': address},
    function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);

            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
           
            marker = new google.maps.Marker({
                draggable: true,
                map: map,
                position: results[0].geometry.location
            });
        } else {
            alert('Localização não encontrada.');
        }
    }
);

 

21/11/2012 Development / java script

<html ng-app>
    <head>
        <title>Lista de compras</title>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
        <script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js" type="text/javascript"></script>
        <script src="Scripts/angular-ui-0.3.1/build/angular-ui.js" type="text/javascript"></script>


        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
       
        <style type="text/css">
            .negative { color: white; background: red}
            .positive { color: white; background: green}
         td { font-family: Arial; font-size: 11px; width: 50px; text-align: center }
        </style>

    </head>
    <body>
   
    <h1>Grid de Cotações utilizando AngularJS</h1>
    <div ng-controller="GridModel">
        <table border="1" cellspacing="0" cellpadding="7">
            <tr>
                <td></td>
                <td>Stock</td>
                <td>Volume</td>
                <td>Date</td>
                <td>Time</td>
                <td>Change</td>
                <td>Sales</td>
                <td>Price</td>
                <td>Stock</td>
                <td>Volume</td>
                <td>Date</td>
                <td>Time</td>
                <td>Change</td>
                <td>Sales</td>
                <td>Price</td>
                <td>Stock</td>
                <td>Volume</td>
                <td>Date</td>
                <td>Time</td>
                <td>Change</td>
                <td>Sales</td>
                <td>Price</td>
                <td></td>
            </tr>
            <tr ng-repeat="item in itens">
                <td><input type="text" value="{{ item.price }}" /></td>
                <td>{{ item.stock }}</td>
                <td>{{ item.volume }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.time }}</td>
                <td>{{ item.change }}</td>
                <td>{{ item.sales }}</td>
                <td ng-class="{positive:showCssPriceMajor(item), 'negative' : showCssPriceMenor(item)}">{{ item.price }}</td>
                <td>{{ item.stock }}</td>
                <td>{{ item.volume }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.time }}</td>
                <td>{{ item.change }}</td>
                <td>{{ item.sales }}</td>
                <td ng-class="{positive:showCssPriceMajor(item), 'negative' : showCssPriceMenor(item)}">{{ item.price }}</td>
                <td>{{ item.stock }}</td>
                <td>{{ item.volume }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.time }}</td>
                <td>{{ item.change }}</td>
                <td>{{ item.sales }}</td>
                <td ng-class="{positive:showCssPriceMajor(item), 'negative' : showCssPriceMenor(item)}">{{ item.price }}</td>
                <td ng-click="removeItem()"><i class="icon-remove"></i></td>
            </tr>
        </table>

        <input type="text" id="cotacaotxtStock" />
        <button type="button" ng-click="addItem()">Adicionar Ativo</button>
        <button type="button" ng-click="removeItem()">Remover Ativo</button>
    </div>

        <script>

            var change = ['+', '-', '='];

            function getTime() {
                var now = new Date();
                var hours = now.getHours();
                var minutes = now.getMinutes();
                var seconds = now.getSeconds();
                var timeValue = "" + ((hours > 12) ? hours - 12 : hours);
                timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
                timeValue += ((seconds < 10) ? ":0" : ":") + seconds;
                timeValue += (hours >= 12) ? " PM" : " AM";
                return timeValue.toString();
            };

            function Quote(stock) {

                this.stock = stock;
                this.volume;
                this.date;
                this.time;
                this.change;
                this.sales;
                this.price;
            };

            var initialStockData = [];
            var arrStocks = ['PETR4', 'CESP6', 'VALE5', 'TAMM4', 'BBDC4', 'USIM5', 'MMXM3', 'LLXL3', 'OGXP3', 'GOAU4', 'BBAS3', 'NETC4', 'AMBV4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4', 'BRKM5', 'ITUB4', 'EMBR3', 'SANB11', 'ITSA4', 'CYRE3', 'PETR4', 'CESP6', 'VALE5', 'TAMM4', 'BBDC4', 'USIM5', 'MMXM3', 'LLXL3', 'OGXP3', 'GOAU4', 'BBAS3', 'NETC4', 'AMBV4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4', 'BRKM5', 'ITUB4', 'EMBR3', 'SANB11', 'ITSA4', 'CYRE3', 'PETR4', 'CESP6', 'VALE5', 'TAMM4', 'BBDC4', 'USIM5', 'MMXM3', 'LLXL3', 'OGXP3', 'GOAU4', 'BBAS3', 'NETC4', 'AMBV4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4', 'BRKM5', 'ITUB4', 'EMBR3', 'SANB11', 'ITSA4', 'CYRE3', 'PETR4', 'CESP6', 'VALE5', 'TAMM4', 'BBDC4', 'USIM5', 'MMXM3', 'LLXL3', 'OGXP3', 'GOAU4', 'BBAS3', 'NETC4', 'AMBV4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4', 'BRKM5', 'ITUB4', 'EMBR3', 'SANB11', 'ITSA4', 'CYRE3', 'PETR4', 'CESP6', 'VALE5', 'TAMM4', 'BBDC4', 'USIM5', 'MMXM3', 'LLXL3', 'OGXP3', 'GOAU4', 'BBAS3', 'NETC4', 'AMBV4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4', 'BRKM5', 'ITUB4', 'EMBR3', 'SANB11', 'ITSA4', 'CYRE3', 'PETR4', 'CESP6', 'VALE5', 'TAMM4', 'BBDC4', 'USIM5', 'MMXM3', 'LLXL3', 'OGXP3', 'GOAU4', 'BBAS3', 'NETC4', 'AMBV4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4'];
            for (var x in arrStocks) {
                initialStockData.push(new Quote(arrStocks[x]));
            }

            function GridModel($scope) {
                $scope.itens = initialStockData;

                $scope.addItem = function () {
                    $scope.itens.push(new Quote(document.getElementById('txtStock').value));
                };

                $scope.removeItem = function () {
                    $scope.itens.pop();
                };

                $scope.update = function () {

                    var items = $scope.itens;
                    var len = items.length;

                    var rnd = Math.floor(Math.random() * len);

                    var stock = items[rnd];
                    stock.sales = (Math.floor(Math.random() * 50));
                    stock.price = (Math.floor(Math.random() * 90) - 30);
                    stock.change = (change[Math.floor(Math.random() * change.length)]);
                    stock.time = getTime();

                    $scope.$apply();

                };

                $scope.showCssPriceMajor = function($scope) {
                    return ($scope.price > 30 ? true : false);
                };

                $scope.showCssPriceMenor = function ($scope) {
                    return ($scope.price < 0 ? true : false);
                };


                var that = this;
                setInterval(function () { $scope.update() }, 1);

            };
        </script>

    </body>
</html>

 

08/11/2012 Development / java script

        var a = { doStuff: function () { alert(this.name) }, name: "a" };
        var b = { name: "b" };
        var c = a.doStuff.bind(b);

Gostei do bind!


 

31/10/2012 Development / java script

Agora que eu estou estudando pra tirar a certificação 70-480 da Microsoft, resolvi voltar a estudar e me interar sobre html5, css3 e javascript. Não quero abandonar a area web.

Então vamos as novidades! Que tal um upload com barra de progresso? Agora é possível nativamente. Vamos ao código.

        function fileSelected() {
            var file = document.getElementById('fileToUpload').files[0];
            if (file) {
                var fileSize = 0;
                if (file.size > 1024 * 1024)
                    fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                else
                    fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

                document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
                document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
                document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
            }
        }

        function uploadFile() {
            var fd = new FormData();
            fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", uploadProgress, false);
            xhr.addEventListener("load", uploadComplete, false);
            xhr.addEventListener("error", uploadFailed, false);
            xhr.addEventListener("abort", uploadCanceled, false);
            xhr.open("POST", "Default3.aspx");
            xhr.send(fd);
        }

        function uploadProgress(evt) {
            if (evt.lengthComputable) {
                var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
            }
            else {
                document.getElementById('progressNumber').innerHTML = 'unable to compute';
            }
        }

        function uploadComplete(evt) {
            /* This event is raised when the server send back a response */
            alert(evt.target.responseText);
        }

        function uploadFailed(evt) {
            alert("There was an error attempting to upload the file.");
        }

        function uploadCanceled(evt) {
            alert("The upload has been canceled by the user or the browser dropped the connection.");
        }

  <form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
    <div class="row">
      <label for="fileToUpload">Select a File to Upload</label><br />
      <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
    </div>
    <div id="fileName"></div>
    <div id="fileSize"></div>
    <div id="fileType"></div>
    <div class="row">
      <input type="button" onclick="uploadFile()" value="Upload" />
    </div>
    <div id="progressNumber"></div>
  </form>

//***************************************
ASPNET
//***************************************
        //Capture File From Post
        HttpContext context = HttpContext.Current;
        HttpPostedFile file = context.Request.Files["fileToUpload"];

        //Optional: Convert to File to binary if you need to forward it to a video encoding service like Panda Stream
        //BinaryReader b = new BinaryReader(file.InputStream);
        //byte[] binData = b.ReadBytes(file.ContentLength);
        //b.Close();

        //Or just save it locally
        file.SaveAs("C:/teste.png");

        string result = "File Saved Successfully";

        context.Response.ContentType = "text/plain";
        context.Response.Write(result);


 

31/10/2012 Development / java script

Alguns estudos com o angular - Primeira impressão!

<html xmlns="http://www.w3.org/1999/xhtml" ng-app>
<head runat="server">
    <script src="Scripts/angular-1.1.0/angular.js" type="text/javascript"></script>
    <title></title>
    <script>

        function Lista($scope) {
            $scope.items = [
            { 'text': "Este é o texto", 'value': "Este é o valor" },
            { 'text': "Este é o texto", 'value': "Este é o valor" },
            { 'text': "Este é o texto", 'value': "Este é o valor" },
            { 'text': "Este é o texto", 'value': "Este é o valor" },
            { 'text': "Este é o texto", 'value': "Este é o valor" },
            { 'text': "Este é o texto", 'value': "Este é o valor"}];
        }
    </script>
</head>
<body ng-controller="Lista">
   
    <input type="text" ng-model="name" />
    <div>{{name}}</div>

    <ul>
        <li ng-repeat="item in items">
        {{item.text}}
        </li>
    </ul>

</body>
</html>

 

21/09/2012 Development / java script

<style type="text/css">#ui-themeswitcher{position:absolute;top:0.5em;right:130px}</style>
<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
$("<div id='ui-themeswitcher'></div>").appendTo("#accordion").themeswitcher();

Usei esse template no esquema dos accordions que pode abrir todos os panels ao mesmo tempo.

        $("#accordion").addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
          .find("h3")
            .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
            .hover(function () { $(this).toggleClass("ui-state-hover"); })
            .prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>')
            .click(function () {
                $(this)
                .toggleClass("ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom")
                .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()
                .next().toggleClass("ui-accordion-content-active").slideToggle();
                return false;
            })
            .next()
              .addClass("ui-accordion-content  ui-helper-reset ui-widget-content ui-corner-bottom")
              .hide();

 

13/09/2012 Development / java script

$(':checked').map(function(){return this.value}).get();

$('input:checkbox').map(function() {
   return { name: this.name, value: this.checked ? this.value : "false" };
 });

var searializedObj = {}
$("form input:checkbox").each(function(){
searializedObj[this.name] = this.checked;
});

 

Jump the cat!

 

03/09/2012 Development / java script

De todas as maneiras que eu pesquisei sobre compressão de arquivos, a mais simples e rápida foi utilizando YuiCompressor.

Basicamente você vai precisar:

  1. Instalar o Java
  2. Instalar o pacote YuiCompressor
  3. Rodar uma Bat

Instalando o Java - Eu baixei a última versão Java JDK 7

Pacote http://developer.yahoo.com/yui/compressor/

Rodar a Bat

@echo off

copy /b "C:\FaceBrooker\Core\js\jquery\jquery.min.js"+"C:\FaceBrooker\Core\js\jquery\jquery-ui.min.js"+"C:\FaceBrooker\js\jquery\jquery.colorbox.js"+"C:\FaceBrooker\Core\js\jquery\jquery.mask.js"+"C:\FaceBrooker\Core\js\jquery\jquery.meio.mask.min.js"+"C:\Pessoal\AplicacoesASP\001 - SISTEMAS\000 - SIO\Core\js\jquery\jquery.tmpl.js"+"C:\FaceBrooker\Core\js\jquery\jquery.ui.dropdownchecklist-1.4-min.js"+"C:\FaceBrooker\Core\js\funcoes.js" "C:\FaceBrooker\Core\js\jscript.js"

cd C:\yuicompressor-2.4.7\build\

java -jar yuicompressor-2.4.7.jar "C:\FaceBrooker\Core\js\jscript.js" -o "C:\FaceBrooker\Core\js\jscript-min.js"

del /F /Q "C:\FaceBrooker\Core\js\jscript.js"

pause

 

15/08/2012 Development / java script

this.sortById = function () {
             this.items.sort(function (a, b) {
                 if (sortAsc)
                     return a.id() > b.id() ? -1 : 1;
                 else
                     return a.id() < b.id() ? -1 : 1;
             });
 
             sortAsc = !sortAsc;
         };

 

13/08/2012 Development / java script

function resizeGrid() {
    var gridElement = $("#grid");
    var dataArea = gridElement.find(".k-grid-content");
    var newHeight = gridElement.parent().innerHeight() - 2;
    var diff = gridElement.innerHeight() - dataArea.innerHeight();
    gridElement.height(newHeight);
    dataArea.height(newHeight - diff);
}

$(window).resize(function(){
    resizeGrid();
});

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                fields: {
                    OrderID: { type: "number" },
                    ShipName: { type: "string" },
                    ShipCity: { type: "string" }
                }
            }
        },
        pageSize: 10,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    },
    height: 250,
    filterable: true,
    sortable: true,
    pageable: true,
    dataBound: resizeGrid,
    columns: [{
            field:"OrderID",
            filterable: false
        },
        "ShipName",
        "ShipCity"
    ]
});​

http://jsfiddle.net/dimodi/4eNu4/33/

http://jsfiddle.net/4eNu4/118/

 

01/08/2012 Development / java script

Do que eu tenho lido e estudado sobre backbone me parece que é bem promissor a tecnologia.

Uma das coisas que eu gostei foi a parte do events e de atachar os binds de mudança de valores.

var Grid = Backbone.View.extend({

 events : {
  "click #addStock " : "newStock",
  "click .removeStock" : "removeStock"
 }

});

var Grid = Backbone.Model.extend({

 defaults : { stock : ''},

 initialize: function () {

  this.bind("change:stock", function () {

  var name = this.get("stock");

  alert("Você mudou o nome ou valor do Ativo para: " + name);

 }),

 updateStock: function( name ){

  this.set({ 'stock': name });
 
 }
});

Acho que dá pra entender que é bem interessante e fácil fazer uma classe.

Bora pra frente estudar galera!


 

18/07/2012 Development / java script

Como fazer um grid em 30 segundos com knockout!

        <div data-bind="foreach: items">
            <p>First name: <input data-bind="value: name" /></p>
            <p>Last name: <input data-bind="value: sales" /></p>
            <h2>Hello, <span data-bind="text: price"> </span>!</h2>
            <hr size="1" />
        </div>

        <button type="button" data-bind="click: addItem">Add</button>
        <button type="button" data-bind="click: removeItem">Remove</button>
        <script>
            var GridModel = function (items) {
                this.items = ko.observableArray(items);

                this.addItem = function () {
                    this.items.push({ name: "New item", sales: Math.round(Math.random() * 100), price: Math.round(Math.random() * 100) });
                };

                this.removeItem = function () {
                    this.items.pop();
                };
            };


            var initialData = [
             { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
             { name: "Speedy Coyote", sales: 89, price: 190.00 },
             { name: "Furious Lizard", sales: 152, price: 25.00 },
             { name: "Indifferent Monkey", sales: 1, price: 99.95 },
             { name: "Brooding Dragon", sales: 0, price: 6350 },
             { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
             { name: "Optimistic Snail", sales: 420, price: 1.50 }
            ];

            ko.applyBindings(new GridModel(initialData));
        </script>

Espero que sirva!

 

15/07/2012 Development / java script

Funçãozinha pra formatar Dimdim!

function formatCurrency(num){
    num = num.toString().replace(/\$|\,/g, '');
    if (isNaN(num))
        num = '0';
    sign = (num == (num = Math.abs(num)));
    num = Math.floor(num * 100 + 0.50000000001);
    cents = num % 100;
    num = Math.floor(num / 100).toString();
    if (cents < 10)
        cents = '0' + cents;
    for (i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++){
        num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
    }
    return (((sign) ? '' : '-') + 'R$' + num + '.' + cents);
}

 

12/05/2012 Development / java script

Ahhhhhhhh que isso! Sério mesmo? Screenshot com javascript? Kaaaaô!

Né não neguinho! Agora com canvas é possível sim ;-) - Existe um projeto chamado html2canvas do meu amigo Nick - https://github.com/niklasvh/html2canvas

Vou postar um exemplo rapidinho de como é fácil implementar. Depois é só você pode soltar a imaginação e fazer um sistema de feedback com o print do erro, enviar via ajax o binario, enfim!

            $('body').html2canvas();
            var queue = html2canvas.Parse();
            var canvas = html2canvas.Renderer(queue, { elements: { length: 1} });
            var img = canvas.toDataURL()

            function writeConsole(content) {
                top.consoleRef = window.open('', 'myconsole',
                  'width=350,height=250'
                   + ',menubar=0'
                   + ',toolbar=1'
                   + ',status=0'
                   + ',scrollbars=1'
                   + ',resizable=1')
                top.consoleRef.document.writeln(
                  '<html><head><title>Console</title></head>'
                   + '<body bgcolor=white onLoad="self.focus()">'
                   + content
                   + '</body></html>'
                 )
                top.consoleRef.document.close()
            };

            writeConsole("<img src='" + img + "'><p>");

Espero que sirva!

 

10/05/2012 Development / java script

Um exemplozinho mais prático para mostrar como funciona web worker, as novas threads em javascript.

Quer experimentar: Execute um loop muito grande e verá que o navegador trava até o loop ser finalizado:
var result = 0;
 
for ( var x = 0; x &lt; 10000000; x++){
result++
}
 
alert( result );

E como resolver se preciso de um loop extenso ou qualquer outro item que esteja travando a interface?
Existem algumas técnicas para amenisar esse travamento utilizando setTimeout ou setInterval mas isso não vem ao caso pois a noite é da estrela Web Worker.
Aí você me pergunta: Mas então o que é Web Worker e o que ele faz?

var worker = new Worker( 'path/to/script.js' );
 
worker.addEventListener('message', function(e){
alert( e.data );
}, false );
 
worker.postMessage(); // Inicia o worker

Script.js

this.addEventListener('message',function( e ){
 
var result = 0;
 
for ( var x = 0; x &lt; 10000000; x++){
result++
}
 
this.postMessage( result );
 
this.close();
 
}, false );

Para testar clique aqui - http://alantavares.com.br/exemplos/javascript/webworker/

Post reaproveitado de http://alantavares.com.br/

Espero que sirva!

 

10/05/2012 Development / java script

Já que eu falo tanto de performance e boas práticas, nada mais justo que eu aplicar essa parada na prática, e o melhor lugar pra fazer isso é aqui, no meu site mesmo.

Como que funcionava antes: Eu fazia uma requisição pra uma pagina e essa página já me retornava o html renderizado. Feio né!

Além de demorar, é excroto mesmo!

Como funciona agora:

Eu faço uma requisição e a resposta é um json, ainda esta vindo como texto, mas em breve será json parseado mesmo ;-)

Eu criei um template e assim que ele retorna é executado um merge entre o template e o json e aplicado na DIV.

Além disso, deixei a consulta do ajax em cache, ou seja, realiza apenas 1 vez e deixo o resultado na memória.

Bem rapidinho e fácil de dar manutenção.

 

10/04/2012 Development / java script

SCRIPT438: O objeto não oferece suporte à propriedade ou método 'createContextualFragment'

Se você recebe essa mensagem, eis a solução:

if ((typeof Range !== "undefined") && !Range.prototype.createContextualFragment) {
    Range.prototype.createContextualFragment = function(html) {
        var frag = document.createDocumentFragment(),
        div = document.createElement("div");
        frag.appendChild(div);
        div.outerHTML = html;
        return frag;
    };
}

Espero que sirva!

 

06/04/2012 Development / java script

Extender métodos no javascript é muito fácil e muito útil para coisas que são corriqueiras. Exemplo: métodos trim, capitalize, bold, reverse e métodos que podem ser especificos de uma classe Utils.js dentro do seu projeto

Por exemplo, se a gente fosse fazer uma extensão para deixar uma string sempre com a primeira letra em maiuscula.

var string = "yes";

if(!String.prototype.capitalize)
{
    String.prototype.capitalize = function()
    {
        return this.slice(0,1).toUpperCase() + this.slice(1).toLowerCase();
    }
}

Tranquilo né! Só que temos uma inconveniente nesse código.

for(i in string) console.log(i + ":" + string[i]);

Resultado:

1) y
2) e
3) s
4) function ....

Nesse caso, imagina que você tenha que fazer um for, teria que ficar validando se é realmente string ou function, estranho né!

A solução: Vamos usar o Object.defineProperty

Ele incrementa ou altera um método ao objeto passado. Mais detalhes - https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/defineProperty

if(!String.prototype.capitalize)
{
    Object.defineProperty(String.prototype, 'capitalize',
    {
       value: function()
       {
           return this.slice(0,1).toUpperCase() + this.slice(1).toLowerCase();
       },
       enumerable: false
    });
}

alert(string.capitalize());

for(i in string) console.log(i + ":" + string[i]);

Resultado:

1) y
2) e
3) s

Espero que sirva!

 

05/04/2012 Development / java script

Dando continuidade aos exemplos...Vamos supor que a gente queira atualizar de 1 em 1 segundos a página do cliente. Ex: A gente ficar varrendo um arquivo txt, ou só gerando um Date.toLocaleTimeString() ;-)

Novamente a parte do server. É muito importante termos esse conhecimento que quase tudo rola em torno disso. Levantar o server e depois consumir. É uma receita de bolo, com o tempo você acostuma. É como se fosse escrever um confirm("blabla")...prompt("tche...tche..re..tche...tche..tche")...e assim por diante

var http = require('http'), fs = require('fs');

//Escrevendo várias vezes no response (fazer com o curl para ver melhor)
var server = http.createServer(function(request, response)
{
 switch(request.url)
 {
  case '/':
   fs.readFile(__dirname + '/index.html', function (err, data){
    if (err) {
     response.writeHead(500, {"Content-Type":"text/html"});
     return response.end('Error loading index.html');
    } else {
     response.writeHead(200, {"Content-Type":"text/html"});
     response.end(data);
    }
   });
  break;
  case '/stream':
   response.writeHead(200, {"Content-Type":"text/json"});

   setInterval(function(){ response.write((new Date()).toLocaleTimeString()); }, 1000);

   /*
   file = __dirname + '/arquivo.txt';
   fs.watch(file, function(curr, prev){
    fs.readFile(file, function (err, dados){
     response.write(dados);
    });
   });
   */
  break;
 }
}).listen(8181); // Temos nosso server na porta 8181

Agora vamos consumir

var io = require('socket.io').listen(server); // Aqui eu digo que vou consumir esse server usando socket.io

// Requisição client para buscar o stream, e envia via socket
var options = {
  host: 'localhost',
  port: 8181,
  path: '/stream',
  method: 'GET'
};
var reqStream = http.request(options, function(res)
{
 if(res.statusCode==200)
 {
  res.setEncoding('utf8');
  res.on('data', function (chunk){
   io.sockets.emit('update_dados', { dados: chunk });
  });

  res.on('end', function(){
   io.sockets.emit('close_dados');
  });

 } else {
  io.sockets.emit('close_dados');
 }
});
reqStream.end();

Agora só fazer a parte /* Cliente - index.html */

<html>
  <head>
    <title>Dashboard</title>
 <script src="/socket.io/socket.io.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 <script>
  $(document).ready(function(){

   socket = io.connect();

   socket.on('update_dados', function(json){
    $("#div_dados").html(json.dados);
   });

   socket.on('close_dados', function(){
    $("#div_dados").html('Fim da Transmissao!');
   });
  });

 </script>
  </head>
  <body>
 <h2>DASHBOARD</h2>
 <p id="div_dados"></p>
  </body>
</html>

 

05/04/2012 Development / java script

Vou tentar explicar bem direitinho porque esse lance de node parece fácil, mas tem uns macetes!

Primeiro nós temos que levantar, subir o nosso servidor que será responsável por receber e emitir  as mensagens para todos os usuários conectados, certo?

/* Server.js */
/* é um exemplo simples, só para base de estudo */

var io = require('socket.io').listen(8000); // aqui eu digo que vou subir na porta 8000

// abre a conexão socket
io.sockets.on('connection', function (socket) {

 // recebo mensagem do cliente - "data" são os dados que o usuário enviou
 //**********************************************************************************
 socket.on('chat', function (data) {
 //**********************************************************************************

  //Envia para todos os usuários que assinaram o handler "chat" 
  socket.broadcast.emit('chat', {
   msg : data.msg,
   msgr : data.user
  });
 });
});

Molezinha né! para ver realmente se está funcionando http://localhost:8000 - Shooow

Agora a parte do nosso Html ou seja, o

/* Cliente */

<html>
   <head>
      <script src="http://localhost:8000/socket.io/socket.io.js"></script>
      <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
      <script>
         var name = '';
         var socket = io.connect('http://localhost:8000');
        
         $(document).ready(function(){

            while (name == '') {
               name = prompt("Qual seu nome?","");
            }

            $("button").click(function(){
           
  var value = $("input#msg").val();              
  $("p#log").html('Enviei a mensagem: ' + value);
              

        // envio mensagem para o servidor 
               //**********************************************************************************
  socket.emit('chat', {'msg' : value, 'user' : name});
               //**********************************************************************************

              
               $("p#data_recieved").append("<br />\r\n" + name + ': ' + value);
              
               // limpa a caixa de texto
               $("input#msg").val('');
            });
           
           
            // vou enviar o nome do usuario para o servidor  
            socket.emit('register', name );
         });
        
         // Handler quando eu receber uma mensagem do servidor
         socket.on('chat', function (data) {
            $("p#data_recieved").append("<br />\r\n" + data.msgr + ': ' + data.msg);
            $("p#log").html('Recebi a mensagem: ' + data.msg);
         });
      </script>
   </head>
   <body>
      <input type="text" id="msg"></input><button>Click me</button>
      <p id="log"></p>
      <p id="data_recieved"></p>
   </body>
</html>

Com isso, você já pode fazer um eskema de chat...deixar os dados em memória quando for a primeira vez que o usuário entrar, fazer um eskema de jogos, leilão...só viajar nas idéias!

 

 

28/03/2012 Development / java script

Esse código é muito útil, quando você quer pegar a posição exata do elemento;

var el = element, pos = {x: 0, y: 0};
while ( el ) {
    pos.x += el.offsetLeft;
    pos.y += el.offsetTop;
    el = el.offsetParent;
}

ou  $("#" + objectId).offset().left...eu ainda prefiro o primeiro!

 

12/03/2012 Development / java script

Comecei a pensar como eu faria um sistema multi-idiomas em javascript usando knockout. Segue a ideia. Mas acho que talvez posteriormente eu usario template mesmo.

http://felipehuggler.com/knockout/index2.htm

 

29/02/2012 Development / java script

Brincando um pouco com o knockout! Achei rápido e tal, mas usar jquery e jquery.tmpl, puts...fudeu! Eu particularmente prefiro fazer toda a estrutura MVC. Mas pra quem estiver realmente afim de usar, segue um exemplo facil!

http://felipehuggler.com/knockout/

 

27/02/2012 Development / java script

Tive que fazer um hack pra forçar o carregamento do browser utilizando htmlfile.

               var d = 'dominio.com.br';
                c = new ActiveXObject("htmlfile");
                c.open();
                c.write("<html><head><title>PublisherWeb<\/title><\/head><body>");
                c.write("<script>document.domain = '" + d + "';<\/s" + "cript>");
                c.write("<\/body><\/html>");
                c.close();

                var div = c.createElement("div");
                c.body.appendChild(div);
                div.innerHTML = "<iframe src='" + url + "' id='Streammer'></iframe>";
                c.parentWindow.TratarMensagemPublicada = TratarMensagemPublicada;

                /* isso é um hack para forçar o carregamento do script */
                setInterval(function () { var __x = ((c) && (typeof c.parentWindow == "object")); }, 1);
                c.documentElement.document.getElementById('Streammer').document.attachEvent("onreadystatechange", function () { alert('carregou') });
                _this._iFramePub = c;

 

08/06/2012 Development / java script
  • <script type="text/javascript" charset="iso-8859-1" src="data:text/javascript;base64,....
  • <img alt="" src="data:image/jpeg;base64,....
  • <link href="data:text/css;base64,....
  • img {background: url('data:image/png;base64,....

 

07/02/2012 Development / java script

Comecei a dar uma olhada como funciona o LightStreamer, e a primeira impressão que tive está send muito boa. O Fórum funciona muito bem, a instalação é bem confiável, sobre tudo porque você precisa passar o MAC Address da sua máquina pra receber o ClientId, ou seja, se você passar um inválido não vai nem conseguir testar.

Eles oferecem uma porção de Demos - http://www.lightstreamer.com/demos.htm

Basicamente estou criando os grids e analizando a performance, comparando oque vale mais a pena, ter um publicador próprio, um feito em nodejs ou lighstreamer. Até final de semana termino meus estudos e faço um post das considerações finais.

 

07/02/2012 Development / java script

Acabei de colocar o sistema de chat em teste. Segue video!!

http://www.felipehuggler.com/videos/nodejs.avi

 

06/02/2012 Development / java script

Essa semana eu comecei a colocar em prática após vários dias de estudos um novo projeto pessoal que será um homebroker utilizando nodejs e knockout.

Achei interessante utilizar nodejs, pelo fato de toda conexão socket ser efetuada através do próprio javascript e knockout pelas notificações utilizando o formato de template em json.

Como o html a gente não ter como fugir mesmo, é bem melhor ter um centralizador de eventos nas classes dos próprios controles, assim eu não preciso repassar os eventos até a chamada final que faria o tratamento de encerramento.

Basicamente a cada classe criada, eu percorro os handlers e chamo os metodos ko.applyBindings(json) e todos os meus controles html´s serão atualizados. "isso na teroria né" e se for isso mesmo, o bichinho vai ficar extraordianariamente rápido e até um pouco sem graça, porque não tem o que programar :-|

A parte de Aspnet, vai ficar tudo em MVC aspnet 4.0

  • 1 imagem
  • 1 css
  • 1 javascript
  • ambos compactados em base64 e com controle de versão

Caso alguem queira uma cópia do projeto, só enviar um email para mim - felipe@felipehuggler.com  - Assunto: Projeto HomeBroker

Imaginemos que o setInterval seja um publicador de mensagens em nodejs ou em lighstreamer, dojo, websocket, eventSource, enfim...um publicador!

<script type='text/javascript' src='knockout-2.0.0.js'></script>
<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='jquery.tmpl.js'></script>
<script>
$().ready(function(){
 
 var nome = ['PETR4', 'CESP6', 'VALE5'];
 var idade = [60.00, 43.20, 32.30];
 
 function getNome(){
  return nome[parseInt(Math.random() * (nome.length), 10)];
 }
 
 function getIdade(){
  return idade[parseInt(Math.random() * (idade.length), 10)];
 } 
 
 var model = {
  nome : function(){ return getNome() },
  idade : function(){ return getIdade() }
 }
 
 function init(){
  setInterval(function(){
    ko.applyBindings(new ViewModel(model.nome(), getIdade()));
  }, 2000);
 }
 
 init();
 
 var ViewModel = function(first, last) {
  this.firstName = ko.observable(first);
  this.lastName = ko.observable(last);
  
  this.fullName = ko.computed(function() {
   return this.firstName() + " " + this.lastName();
   }, this);
  };
  
//  ko.applyBindings(new ViewModel("Planet", "Earth"));
});
</script>
</head>

<body>
<p>
Ativo Name: <input data-bind="value: firstName" /></p>
<p>Preço: <input data-bind="value: lastName" /></p>
<h2><span data-bind="text: fullName"> </span>.</h2> 

 

02/02/2012 Development / java script

Tem pessoas que estão com um conhecimento muito avassalador sobre essas tecnologias...Só tenho a agradecer essas feras e repassar o conhecimento!

http://www.designadaptavel.com.br/artigos/mobile-first-vs-desktop-first

 

31/01/2012 Development / java script

Parece que a Microsoft vem com tudo realmente quando a questão é novas apps para Web. No Windows 8 foi inserido um namespace chamado Windows.UI.Web e através dele o browser manipulará eventos de conexão, desconexão, ativar o namespace, etc... Tentei rodar uma aplicação mas bati cabeça até descobrir que precisava ter o Windows Developer Preview instalado, nada nada, 4Gb :-|

E só pra apimentar um pouquinho esse post, já vi caras de C# e C++ da Microsoft, discutindo bravamente o porque de tantos desenvolvedores estarem partindo pra JavaScript. O fato é que essas novas implementações darão acesso ao WinRT e os programadores terão acesso a recurso de sistemas via Web. Sem falar que a própria linguagem javascript termina com ;...ou seja, linguagem de cabra macho! rsrsr

A natureza dinâmica, a facilidade de callbacks, as toneladas de código disponível para um desenvolvedor e as comunidades, fazem dessa linguagem se tornar cada vez mais procurada.

Penso que quando esses montros de C#, C++ realmente cairem de cabeça pro mundo Web, vai ser fantástico, os caras vão atingir um novo patamar.

Eu comecei a fazer um Homebroker puxando todos os dados lá de fora, negócio é animalesco!

Pra quem quiser ir pesquisando sobre isso, dá uma olhada nessas url´s

 

 

16/12/2011 Development / java script

Meu publicador de mensagens HelloWorld, heheheh!"

var a = 0;
var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.write('Hello World\n');


setInterval(function(){
  console.log((a++) + 'Hello World\n');
  res.write('Hello World\n');

}, 2000);

}).listen(1337, "127.0.0.1");
console.log('Server running at http://127.0.0.1:1337/');

 

16/12/2011 Development / java script

Este é um modelo que eu venho utilizando bastante em minhas estruturas e chamadas de classes.

Eu deixo de capturar os parametros nos argumentos e capturo atraves do invoke da classe via call; Ex: Ao inves deu fazer:

function Animal(nome, idade){
alert(nome + ' - ' + idade);
}

ou

function Animal(){
alert(arguments[0] + ' - ' + arguments[1])
}

eu faço

function Animal(){
alert(this.nome + " - " + this.idade)
}

Mas huggler, voce está louco? nome e idade nesse caso estão vazios!!! Sim, até o momento da chamada.

Animal.call({"nome" : "Huggler", "idade" : "77"});

Espero que sirva!

 

 

12/12/2011 Development / java script

Centralizar as chamadas dos métodos em um controller e ao mesmo tempo passar os parametros para as respectivas funções. Achei que ficou simples e bem rápido. Espero que sirva

function one(arguments){
 alert(arguments[0]);
}
function two(){
 alert('two');
}
function tree(){
 alert('tree');
}


var methods = {

 'one' : one,
 'two' : two,
 'tree' : tree
 
};

function request(method){
 methods[method].call(this, arguments)
}


request("one", "item", "item2");
request("two");
request("tree");

 

 

03/12/2011 Development / java script

É isso mesmo, desenvolvimento de aplicações para smartTv. Cansei de programar pensando naquelas pessoas com a bundinha sentada na frente de um pc, abrindo um IE 7 e achando que tudo tem que funcionar 100%. Negócio agora é neguinho tirar o escorpião do bolso e avançar com a tecnologia. Por isso vou postar um exemplo facil de como começar com o desenvolvimento. Vamos lá.

Primeiro deve se fazer o download do SDK da samsung - http://www.samsungdforum.com/.

Basicamente as páginas rodadas num Samsung Internet@TV são compostas de HTML +  CSS  e Javascript a diferença é que o browser interpreta uma linguagem chamada MAPLE - Marku Engine Plataform Embedded Systems - HTML4 e CSS2.

Hello world!

$MANAGER_WIDGET/Common/API/Widget.js - é a library que dá interatividade e recursos para se mexer nas funcionalidades;

body {
    margin: 0;
    padding: 0;
    background-color: transparent;
 }
#welcome {
   position: absolute;
   left: 50px;
   top: 50px;
   width: 500px;
   height: 50px;
   background-color: #AFAFAF;
   color: #99FFFF;
   font-size: 30px;
   text-align: center;
}

Quase sempre o javascript criado é o Main.js

var Main = {
}
var widgetAPI = new Common.API.Widget(); // Cria o módulo Common

Main.onLoad = function () {
 widgetAPI.sendReadyEvent(); // Envia as mensagens para Application Manager
}

Basicamente é isso meus amigos!!! Aconselho a todos a estudarem essa nova tecnologia, creio que será uma oprtunidade incrivel num futuro próximo.


 

10/11/2011 Development / java script

Agora sim tá ficando interessante!!!

        <script type="text/javascript">

            function Initialize() {
                if (window.EventSource == undefined) {
                    alert("Seu Browser não suporta Server Side Events.");
                    return;
                }

                var source = new EventSource('httpPublisher.aspx');
                var doc = document;
                var pub = doc.getElementById('PublishMessages');
               
                source.onopen = function(event) {
                    pub.innerHTML += "<font color='green'>Conectado</font><br>";
                };

                source.onerror = function(event) {
                    if (event.eventPhase == EventSource.CLOSED) {
                        pub.innerHTML += "<font color='red'>Desconectado</font><br>";
                    }
                };

                source.onmessage = function(event) {
                    pub.innerHTML += event.data + '<br>';
                };
            }
        </script>
        <div id="PublishMessages"></div>
        <button onclick="Initialize()">Iniciar Conexão</button>

/* httpPublisher.aspx */

        DateTime startDate = DateTime.Now;
        Response.ContentType = "text/event-stream";

        while (startDate.AddMinutes(1) > DateTime.Now)
        {
            Response.Write(string.Format("data: {0}\n\n", DateTime.Now.ToString()));
            Response.Flush();

            System.Threading.Thread.Sleep(1000);
        }
        Response.Close();

Espero que sirva!

 

29/10/2011 Development / java script

Imagine a seguinte situação: Você tem um publicador de mensagens que fica chamando varios metodos, e esses metodos escrevem as mensagens tratadas na tela.

function RecebePublicacao(msg){
if(msg = tal){
printX(msg)
}

if(msg = tal){
printY(msg)
}

if(msg = tal){
printZ(msg)
}
}

Oque acontece nesse cenario? Se a maquina do cliente for um 386, o IE 7, 8...vai peidar...porque a engine de javascript, consume muito recurso pra printar os objetos na tela :-(

//**********************************************************

Uma maneira de solucionar esse problema. ;-)

var arrayCotacao, arrayPublicacao, arrGeral = [];
function RecebePublicacao(msg){
if(msg = tal){
arrayCotacao.push(msg)
}

if(msg = tal){
arrayPublicacao.push(msg)
}

if(msg = tal){
arrayGeral.push(msg)
}
}

function trataCotacao(){
if(arrCotacao.lenght>0){
var msg = arrCotacao.shift();
$handleEvent("Cotacao", msg)
}
}
function trataPublicacao(){
...
}
function trataGeral(){
...
}

setInterval(trataCotacao, 1)
setInterval(trataPublicacao, 1)
setInterval(trataGeral, 1)

Dessa maneira o browser cadencia os processos, e deixa mais leve a aplicação. Espero que sirva!

 

26/10/2011 Development / java script

Fiz esse scriptzinho só de exemplo para manipulação de feeds rss em javascript utilizando a api do google ajax. Até um tempo atrás isso não era possivel, devido ao crossDomain dos websites. Espero que sirva.

var RssItens = [
        {
            'Title' : 'Uol',
            'Url': 'http://rss.esporte.uol.com.br/ultimas/index.xml',
            'Selected' : false
        },
        {
            'Title': 'InfoMoney',
            'Url': 'http://www.infomoney.com.br/petr4/rss',
            'Selected': true
        },
        {
            'Title': 'Globo',
            'Url': 'http://oglobo.globo.com/rss/plantaotecnologia.xml',
            'Selected': false
        }];

        function Rss() {
            this.rss = RssItens;
            this.load();
        };
        Rss.prototype.load = function() {
            var div = "";
            for (var x = 0; x < RssItens.length; x++) {
                div = document.createElement("div");
                div.innerHTML = "<b>" + RssItens[x].Title + "</b>";
                if (RssItens[x].Selected) {
                    div.className = "selected";
                    this.oRss = RssItens[x];
                }
                $(div).click(function() { $Rss.setRss($(this)); });
                document.getElementById("tabs").appendChild(div);
            }
            this.loadRss();
        };

        Rss.prototype.loadRss = function() {
            var item = this.getRss().Url;
            var script = document.createElement("script");
            var url = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q='+ item +'&callback=processResults';
            script.src = url;
            document.body.appendChild(script);
        };

        Rss.prototype.setRss = function(oRss) {
            for (var x = 0; x < RssItens.length; x++) {
                if (RssItens[x].Title.toString() == oRss.text()) {
                    RssItens[x].Selected = true;
                    this.oRss = RssItens[x];
                } else {
                    RssItens[x].Selected = false;
                }
            }

            $("#tabs div").attr("class", "");
            oRss.attr("class", "selected");

            this.loadRss();
        };
        Rss.prototype.getRss = function() {
            return this.oRss;
        };

        function processResults(result) {
            document.getElementById('news').innerHTML = "";
            var len = result.responseData.feed.entries.length;
            var entries = [];
            for (var x = 0; x < len; x++) {
                entries.push(result.responseData.feed.entries[x].title + '<br>');
            };
            document.getElementById('news').innerHTML = entries.join("");
        };
        var $Rss = new Rss();

    <style>
    .selected { border:1px solid red; }
    div { width: 100px; float:left; border:1px solid blue; margin-right: 2px; padding: 3px; }
    .tabs { width: 100%;  }
    .both { clear: both; border: none}
    .news { width:100% }
    </style>
    <div id="tabs" class="tabs"></div>
    <div class="both"></div>
    <div id="news" class="news"></div>

 

13/09/2011 Development / java script

Um exemplo bem básico de como trabalhar com threading no javascript e não fazer o browser peidar!!!

<button onclick="sayHI()">Say HI</button>
<button onclick="unknownCmd()">Send unknown command</button>
<button onclick="stop()">Stop worker</button>
<output id="result"></output>

<script>
  function sayHI() {
    worker.postMessage({'cmd': 'start', 'msg': 'Hi'});
  }

  function stop() {
    // Calling worker.terminate() from this script would also stop the worker.
    worker.postMessage({'cmd': 'stop', 'msg': 'Bye'});
  }

  function unknownCmd() {
    worker.postMessage({'cmd': 'foobard', 'msg': '???'});
  }

  var worker = new Worker('doWork2.js');

  worker.addEventListener('message', function(e) {
    document.getElementById('result').textContent = e.data;
  }, false);
</script>

self.addEventListener('message', function(e) {
  var data = e.data;
  switch (data.cmd) {
    case 'start':
      self.postMessage('WORKER STARTED: ' + data.msg);
      break;
    case 'stop':
      self.postMessage('WORKER STOPPED: ' + data.msg + '. (buttons will no longer work)');
      self.close(); // Terminates the worker.
      break;
    default:
      self.postMessage('Unknown command: ' + data.msg);
  };
}, false);

 

08/09/2011 Development / java script

var animals = ["aligator", "bat", "cow"];
var bad = document.getElementById("bad");
for (var i = 0; i < animals.length; i++) {
  var animal = animals[i];
  var input = document.createElement("input");
  input.type = "button";
  input.value = animal;
  input.style.marginLeft = "5px";
  input.onclick = function() {alert(animal);};
  bad.appendChild(input);
}

Oque vai acontecer com esse código??? Ao clicar em qualquer um dos botões, vai aparecer um alert com a palavra "cow", porque a variavel animal no final estará setada como "cow", Simples né.

Como reverter isso?

var animals = ["aligator", "bat", "cow"];
var good = document.getElementById("good");
for (var i = 0; i < animals.length; i++) {
  var animal = animals[i];
  var input = document.createElement("input");
  input.type = "button";
  input.value = animal;
  input.style.marginLeft = "5px";
  input.onclick = (function(animal) {return function() {alert(animal);};})(animal);
  good.appendChild(input);
}

Agora fizemos uma clousure! No momento da atribuição do valor da variavel, estamos setando uma função que assim que chamada, vai nos retornar o valor da variavel no momento em que ela foi setada.

 

26/08/2011 Development / java script

Esse foi o patter que eu escolhi para o gerenciamento dos eventos dentro do HomeBroker da Xp Investimentos

/* Gerenciador de eventos */
/***************************************************************************/
var $Event = {};
(function(s){

    var events = {};

        /* Aciona um evento */
        s.handleEvent = function() {

            var evt = arguments[0];
            var handlers = events[evt];
            var handler;

            if (!handlers || handlers.length == 0) {
                return false;
            }

            var len = handlers ? handlers.length : 0;
            var args = [];
            var i = arguments.length - 1;

            for (var x = 0; x < i; x++) {
                args[x] = arguments[x + 1];
            }

            while (len--) {
                handler = handlers[len];
                handler.func.apply(handler.ctx, args);
            }
        };

        /* Adiciona um evento */
        s.addHandler = function(evt, func, ctx) {

            if (!events[evt]) {
                events[evt] = [];
            }

            events[evt].push({'func' : func, 'ctx' : ctx});
        };

        /* Remove um evento */
        s.removeHandler = function(evt, cb, ctx) {
           
            var handlers = events[evt];
            var handler;

            if (!handlers || handlers.length == 0) {
                return false;
            }

            var len = handlers.length;

            while(len--){
                handler = handlers[len];

                if(handler){
                    if (ctx) {
                        if (cb) {
                            if (handler.ctx == ctx && handler.func == cb) {
                                handlers.splice(len, 1);
                            }
                        } else {
                            handlers.splice(len, 1);
                        }
                    }else{
                        handlers.splice(len, 1);
                    }
                }
            }
        };
})($Event);

 

14/08/2011 Development / java script
Mas vezes, eu estou checando a conclusão que usar clousures, métodos dentro de métodos é a maneira mais eficaz quando se algo mais performatico em javascript. Esse exemplo abaixo mostra exatamente isso. Ao inves de chamar 100 a rotina e fazer o browser dar aquela travada, é melhor invocar de tanto em tanto milessimos de segundos e ter o resultado bem mais rapido. Fica a Dica, espero que ajude! function process() { var above = 0, below = 0; for(var i=0; i<1000000; i++) { if(Math.random() * 2 > 1) { above ++; } else { below ++; } } } function test1() { var result1 = document.getElementById('result1'); var start = new Date().getTime(); for(var i=0; i<100; i++) { result1.value = 'time=' + (new Date().getTime() - start) + ' [i=' + i + ']'; process(); } result1.value = 'time=' + (new Date().getTime() - start) + ' [done]'; } function test2() { var result2 = document.getElementById('result2'); var start = new Date().getTime(); var i = 0, limit = 100, busy = false; var processor = setInterval(function() { if(!busy) { busy = true; result2.value = 'time=' + (new Date().getTime() - start) + ' [i=' + i + ']'; process(); if(++i == limit) { clearInterval(processor); result2.value = 'time=' + (new Date().getTime() - start) + ' [done]'; } busy = false; } }, 100); }
20/07/2011 Development / java script

A medida que você vai digitando, o textarea vai se redimensionando.

<textarea rows="1" style="height: 23px; overflow: hidden" name="descricao" cols="71" onpropertychange="this.style.posHeight=this.scrollHeight"></textarea>

 

20/07/2011 Development / java script

2 horas da manha, fazendo funcaozinha de data! Aiaiai

Espero que sirva pra alguém!

function calendar(data){
 this.data = new Date(data.split('/')[2], data.split('/')[1], data.split('/')[0]);
};

calendar.prototype = {

 addDay : function(d){
  this.data.setDate(this.data.getDate() + parseInt(d))
 },
 
 addMonth : function(m){
  this.data.setMonth(this.data.getMonth() + parseInt(m))
 },
 
 addYear : function(y){
  this.data.setFullYear(this.data.getFullYear() + parseInt(y)) 
 },
 
 toString : function(){
  return this.data.getDate() + "/" + this.data.getMonth() + "/" + this.data.getFullYear();
 }
}

var data = new calendar('10/10/2011');
data.addDay(2);
data.addMonth(4);
data.addYear(4);
alert(data.toString())

 

20/07/2011 Development / java script

Eu sempre esqueço esse pulo do gato. Então vou deixar aqui registrado.

var dropdowm = '<select onchange="somaData(this.value, \''+ campo + '\')">' +

Espero que eu mesmo use, hehehe


 

15/07/2011 Development / java script

Venho estudando há um bom tempo como receber as publicações de mensagens de um canal de comunicação criado através de um ActiveXObject("htmlfile"). Eis a solução:

            if (window.ActiveXObject) {
                var dom = 'xpi.com.br';
                var c = new ActiveXObject("htmlfile");
                c.open();
                c.write("<html><head><title>f<\/title><\/head><body>");
                c.write("<script>document.domain = '" + dom + "'<\/s" + "cript>");
                c.write("<\/body><\/html>");
                c.close();
                c.div = c.createElement("div");
                c.appendChild(c.div);
                c.parentWindow.TratarMensagemPublicada = TratarMensagemPublicada;  // make the
                c.div.innerHTML = "<iframe id='ifr' src='" + urlPublisher + "' id='Streammer'><\/iframe>";
                setInterval(function () { }, 10000);
            } else {

                iframe = document.createElement("iframe");
                iframe.src = urlPublisher;
                iframe.id = "Streammer";
                iframe.name = "Streammer";
                iframe.style.width = "100%";
                iframe.style.height = "50px";
                iframe.style.display = (debug ? "block" : "none");
                iframe.style.position = "absolute";
                iframe.style.top = "0px";
                iframe.style.left = "0px";

                _this._iFramePub = iframe;
                body.appendChild(iframe);
            }

05/07/2011 Development / java script

Apenas um exemplo de como eu venho construindo meus códigos.

function People() {
    this.Name;
    this.Age;
}

People.prototype = {

    /* get and set */
    MyName: function(name) {
        return name ? this.Name = name : this.Name;
    }
}

var p = new People();
alert(p.MyName('Felipe'));
alert(p.MyName());
15/06/2011 Development / java script

No desenvolvimento é comum encontrarmos uma lógica de programação do tipo:

var dr = document.readyState;

if(dr == "loaded"){
/* todo */
}

Esse if funciona perfeitamente, mas que tal implementarmos um if, 400% mais performático?

2 maneiras:

Se você sabe exatamente o valor que quer comparar com sua variavél, use:

var variavel = document.readyState;

if(/loaded/.test(varaivel)){
/* todo */
}

Agora se você quer comparar uma variavel com outra variavel, use:

var v0 = document.readyState;
var v1 = new RegExp(v0)
var v2 = valorDifinidoemOutraVariavel;

if(/v1/.test(v2)){
/* todo */
}

 

05/06/2011 Development / java script

Estava procurando uma maneira de implementar os gráficos no novo HomeBroker da Xp Investimentos. E um&nbsp; projeto que me chamou bastante a atenção foi o http://visifire.com

Muito simples a implementação e agora estou estudando como manipular os dados e eventos.

Meu primeiro exemplo, tentei simular uma cotação em tempo real. Goooo!

Depois de baixar os arquivos no site - Utilize na mesma pasta oa arquivos (SL.Visifire.Charts.xap e Visifire.js)

No site http://visifire.com/silverlight_wpf_charts_gauges_designer.php, você escolhe o template e ele gera o script html.

Coloque o script <SCRIPT type=text/javascript src="Visifire.js"></SCRIPT>

    <div id="VisifireChart0" >
       
        <script type="text/javascript" >


            var chart;

            function update() {
                var series = chart.Series[0];

                for (var i = 0; i < series.DataPoints.length; i++) {
                    series.DataPoints[i].AxisXLabel = Math.round(Math.random() * 10);
                    series.DataPoints[i].YValue = Math.round(Math.random() * 10);
                }

                setTimeout(arguments.callee, 1000);
            }

            // Create Visifire object
            var vChart = new Visifire('SL.Visifire.Charts.xap', "MyChart", 500, 300);
           
            // Chart Data XML
             var chartXml = '<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" Theme="Theme3" AnimationEnabled="True" Bevel="True" View3D="False">'
                       + '     <vc:Chart.Titles>'
                       + '         <vc:Title Text="Athens 2004 Olympics" FontSize="14"/>'
                       + '     </vc:Chart.Titles>'
                       + '     <vc:Chart.Series>'
                       + '         <vc:DataSeries RenderAs="Column" LabelEnabled="True">'
                       + '             <vc:DataSeries.DataPoints>'
                       + '                 <vc:DataPoint AxisXLabel="USA" YValue="35"/>'
                       + '                 <vc:DataPoint AxisXLabel="China" YValue="32"/>'
                       + '                 <vc:DataPoint AxisXLabel="Russia" YValue="27"/>'
                       + '                 <vc:DataPoint AxisXLabel="Australia" YValue="17"/>'
                       + '                 <vc:DataPoint AxisXLabel="Japan" YValue="16"/>'
                       + '             </vc:DataSeries.DataPoints>'
                       + '         </vc:DataSeries>'
                       + '     </vc:Chart.Series>'
                       + ' </vc:Chart>';
           
                    // Set Chart Data file Uri
            vChart.setDataXml(chartXml);

            vChart.loaded = function (args) {
                chart = args[0];
                update();
            };
           
            // Render chart
            vChart.render("VisifireChart0");

        </script>
       
    </div>


http://www.felipehuggler.com/felipehuggler/testes/grafico/

 

05/04/2011 Development / java script

Uma maneira simples para não ter que ficar escrevendo prototype

    Function.prototype.newMethod = function(methodName, func) {
        this.prototype[methodName] = func;
        return this;
    };

    var Pessoa = function() { }
    .newMethod('fala', function() {
        alert('Falando'); return this;
    })
    .newMethod('escuta', function() {
        alert('Escutando'); return this;
    })
    .newMethod('anda', function() {
        alert('andando'); return this;
    });

    var p = new Pessoa();
    p.fala();
    p.escuta();
    p.anda();

 

26/03/2011 Development / java script

Eu só tinha conhecimento do AjaxPro, uma DLL que registrada na página, acessa os métodos behind Code via Javascript.

Estudando em casa, acabei descobrindo que o script manager do Visual Studio, também oferece essa funcionalidade.

Vamos lá!

Primeiro insera o controle scriptManager na página

    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" ID="maganger" EnablePageMethods="true"></asp:ScriptManager>
    </form>
    <button onclick="getPeople()">chamarMetodo</button>

Agora o javascript que fará o acesso aos métodos

        function getPeople() {
            PageMethods.getPeople("", callbackSucess, callbackError);
        }

        function callbackSucess(retorno) {
            alert(retorno[0].Nome);
        };

        function callbackError(retorno) {};

Agora vamos fazer o método n behind Code

    [WebMethod]
    [ScriptMethod(ResponseFormat= ResponseFormat.Json)]
    public static IList<Pessoa> getPeople(string txt)
    {
        IList<Pessoa> pessoa = new List<Pessoa>();
        for (int x = 0; x <= 5; x++)
        {
            Pessoa p = new Pessoa();
            p.Idade = "Idade " + x;
            p.Nome = "Pessoa " + x;
            pessoa.Add(p);
        }

        return pessoa;
    }


    public class Pessoa {
        public string Nome { get; set; }
        public string Idade { get; set; }
    }

É necessário registrar os seguintes namespaces:

using System.Web.Services;
using System.Web.Script.Services;
using System.Collections;

É isso, espero que seja útil!

 

15/02/2011 Development / java script

Essa dica aqui é um baita pulo do gato!

Quando estamos trabalhando com prototype usamos a seguinte sintaxe.

function Classe(){};
Classe.prototype.Metodo1 = function(){};
Classe.prototype.Metodo2 = function(){}

Quando fazemos uma chamada a um WebMethod que está registrado no servidor, fazemos: Namespace.Pagina.WebMetodo(arg1, arg2, fnCallback)

fnCallback é o método que tratará a resposta do WebMetodo. Acontece que se chamarmos WebMetodo(args1, args2, this.Metodo1)...this.Metodo1 perderá a herança de this da Classe original, o this agora é a resposta do webMetodo.

Para fazermos a chamada corretamente, devemos fazer:

Namespace.Pagina.WebMetodo(args1, args2, this.Metodo1.bind(this));

Espero que sirva.

 

08/02/2011 Development / java script

Criei esse plugin que eh rapidnho e dah uma enganada legal na aplicacao. Quem quiser eh soh mandar bala. Naum coloquei todos os eventos, mas podem ser passados por parametros e isso fica a criterio de quem quiser implementar. ;-)

$.fn.comboBox = function(options) {

    function combo(cbo) {

        var $dv = jQuery('

').addClass("cboBox");
        var $sp = jQuery('');
        var selected = cbo.find(":selected:first");

        if (selected.length == 0) {
            selected = cbo.find("option:first");
        }

        $sp.html(selected.html());

        cbo.css('opacity', 0).wrap($dv).before($sp); /*este eh o segredo*/

        /* handlers */
        /**********************/
        cbo.bind(
            { "change.uniform": function() {
                $sp.text(cbo.find(":selected").html());
            },
                "focus.uniform": function() { },
                "blur.uniform": function() { },
                "mousedown.uniform touchbegin.uniform": function() { },
                "mouseup.uniform touchend.uniform": function() { },
                "click.uniform touchend.uniform": function() { },
                "mouseenter.uniform": function() { },
                "mouseleave.uniform": function() { },
                "keyup.uniform": function() {
                    $sp.text(cbo.find(":selected").html());
                }
            });
    };

    return this.each(function() {
        combo(jQuery(this));
    });
}

div.cboBox { border: 1px solid gray; background: black; color: gray; background: url('seta.gif') no-repeat right; }
div.cboBox span { position:absolute; margin: 2px 0px 0px 3px }
div.cboBox span, select {font-family: Arial; font-size: 11px}

Demo

 

01/02/2011 Development / java script

        var profile = [{
            pagina: 'pagina1',
            thema: 'thema1',
            id: new Date().getDate(),
            perfil: 1,
            widgets: [{}],
            using: true
        }];
       
        function Controller() {
            this.oProfile = [];
        };

        Controller.prototype.loadprofile = function(p) {
            this.oProfile = p;
        };


    Controller.prototype.saveProfile = function() {

        var pagina = 'novapagina';

        /*if (pagina == getPage(pagina)) {
            alert('pagina jã existe');
            return false;
        }*/

        var o = {
            'pagina': pagina,
            'thema': 'thema2',
            'id': new Date().getDate(),
            'perfil': '2',
            'widgets': this.fullWidgets(),
            using: false

        }

        this.oProfile.push(o);
        var p = this.oProfile;
        alert(jQuery.toJSON(p));
    }
   
    /* retorna todos os wifgets da pagina atual */
    Controller.prototype.fullWidgets = function() {
        var widgets = [{ 'type': 'book' }, { 'type': 'book' }, { 'type': 'book' }, { 'type': 'book'}];
        return widgets;
    }

    var hb = new Controller();
    hb.loadprofile(profile);
    hb.saveProfile();

 

18/01/2011 Development / java script

Trabalhando em cima das resizes das janelas do novo home broker da Xp Investimentos, tive a seguinte idéia:

// JSCRIPT

jQuery(document).ready(function() {
var hr = null;
$("div .drag").live('mousedown', function(e) { hr = { y: e.pageY, p: $(this).parent(), ph: $(this).parent().height() }; e.preventDefault(); });

$(document)
.mousemove(function(e){ if (hr) { hr.p.height(hr.ph + (e.pageY - hr.y)); } e.preventDefault(); })
.mouseup(function(e){ hr = null; e.preventDefault(); /* Poderia chamar algum evento qualquer */ });
});

// HTML

<div class="full">Texto<div class="drag">div>div>
<div class="full">Texto<div class="drag">div>div>
<div class="full">Texto<div class="drag">div>div>

// ESTILO CSS

div.drag { background-color: #DDD; bottom:0px; position:absolute; width:100%; margin-top:-2px; cursor: n-resize; height: 2px;}
div.full   { border:1px solid red; position: relative; float:left; width: 250px; margin:5px}

 

13/01/2011 Development / java script

No projeto que eu estou trabalhando atualmente, a idéia é deixar todos os templates previamente formatados para apenas receber um bloco de Json, que fará a inject no html.

Pensei em usar o jquery Template ou o jsTemplate do Google. Mas foi ai que eu comecei a pensar em como ficaria uma implementação simples usando expressão regular. O resultado é script abaixo.

    var json = { Nome : 'Felipe Huggler', idade : '27', cidade : 'Curitiba'};
    var html = "
  • @{Nome}
  • @{idade}
  • @{cidade}
"; var View = { inject: function(json, template) { var pattern = /\@\{(\w*)\}/g; var html = template.replace(pattern, function(key) { return json[key.slice(2, -1)]; }) return html; } }; alert(View.inject(json, html));
05/01/2011 Development / java script

A primeira forma de eliminarmos a repetição de trabalho é utilizando carregamento tardio. Carregamento tardio siginifica que nenhum trabalho será feito até que sua informação seja necessária.

Ex: Função sem carregamento tardio.

function alertaUsuario(msg){
if browser == IE
alert(msg)
else
console(msg)
}

Não tem lógica, ficarmos chegando toda hora se o browser é IE ou FF, é inimaginavel que o usuário troque de browser estando na mesma página, não é?

Agora com carregamento tardio.

function alertaUsuario(msg){
if (browser == IE){
alertUsuario = function(msg){
alert(msg)
}}
else{
alertUsuario = function(msg){
console(msg)}}}

Ou seja, apenas sobrescrevemos o código ;-)

 

25/12/2010 Development / java script

Abri minha garrafa de black label, 12 anos e comecei a matutar, o porque do travamento no IE quando ocorre grandes atualizações em lote.

Fiz essas funçõeszinha pra gerar e atualizar os Boxes.

    .box { width: 125px; height: 125px; padding:5px; border: 2px solid red; margin: 5px; float: left }

        function RegistrarAssinatura() {
            $.each(ativos, function(chave, key) {
                $("
").prependTo("body"); }) }; var box; function TratarMensagemPublicada(s) { var m = s.split("#"); var acao = m[0] var ativo = m[1]; var valor = m[2]; //if (acao.toString() == 'PUBQUT') { if (box) box.css("background", ""); box = $("#Box[ativo='" + ativo + "']"); box.css("background", "yellow").html("Ativo: " + ativo + "
Valor: R$" + valor + ",00
").find("#lblVolume").text("Volume: " + valor); //} }; var ativos = ['PETR4', 'CESP6', 'BBDC4', 'MMXM3', 'LLXL3', 'GOAU4', 'USIM5', 'ITUB4', 'VALE5', 'OGX3', 'NETC4', 'OSXB3', 'BBAS3', 'OGXP3', 'BVMF3', 'BOVA11', 'CCR03', 'HAGA4', 'ALLL3', 'BBRK3', 'MILK11', 'IDNT3', 'EVEN3', 'ICFK11', 'WING11', 'RAPT4', 'CESP6', 'LLIS3', 'USIM5']; var msg = ['PUBQUT', 'PUBBOK', 'ASWQUT']; function HttpPublisher() { var m = msg[parseInt(Math.random() * msg.length)] + "#" + ativos[parseInt(Math.random() * ativos.length)]+ "#" + parseInt(Math.random() * 1000, 10); top.TratarMensagemPublicada(m); setTimeout("HttpPublisher()", 1); }; RegistrarAssinatura(); HttpPublisher();

Parece que está tudo OK! Só falta testar Segunda-feira na empresa. ;-)

 

20/12/2010 Development / java script
Use o método AddHandler para adicionar um manipulador de eventos DOM o elemento que expõe o evento. O parâmetro eventName não deve incluir o "on " prefixo. Por exemplo, especificar "clique"em vez de "onclick".
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", processEventInfo);
    var myArray = ['altKey', 'button', 'charCode', 'clientX', 'clientY',
                   'ctrlKey', 'offsetX', 'offsetY', 'screenX', 'screenY', 
                   'shiftKey', 'target', 'type'];

    function processEventInfo(eventElement) {
        var result = '';
        for (var i = 0, l = myArray.length; i < l; i++) {
            var arrayVal = myArray[i];
            if (typeof(arrayVal) !== 'undefined') {
                // Example: eventElement.clientX
                result += arrayVal + " = " + eval("eventElement." + arrayVal) + '
'; } } $get('Label2').innerHTML = result; }
08/12/2010 Development / java script
    function Protect() {
        this.arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        this.arrsenha = [];
        this.vSenhaOk = true;
    };

    Protect.prototype.makeRandom = function() {
        for (var j, x, i = this.arr.length; i; j = parseInt(Math.random() * i), x = this.arr[--i], this.arr[i] = this.arr[j], this.arr[j] = x);
        return this.arr;
    };

    Protect.prototype.makeButtons = function() {

        this.makeRandom();

        for (var b = 0; b < 10; b += 2) {
            var btn = document.createElement("button");
            btn.setAttribute("value", this.arr[b] + " ou " + this.arr[b + 1]);
            var p = this.arrsenha;
            btn.onclick = function() { p.push(this.value.toString().replace(" ou ", "")) }
            document.getElementById('teclado').appendChild(btn);
        }

        this.makePass();
    };

    Protect.prototype.makePass = function() {
        document.getElementById('senha').value = (this.makeRandom()).toString().substring(0, 7).replace(",", "").replace(",", "").replace(",", "");
    };

    Protect.prototype.checkPass = function() {
        var vUserPassword = document.getElementById('senha').value;
        if (this.arrsenha.length > 0) {
            for (var i = 0; i < this.arrsenha.length; i++) {
                if (vUserPassword.substr(i, 1) != this.arrsenha[i].substr(0, 1) && vUserPassword.substr(i, 1) != this.arrsenha[i].substr(1, 1)) {
                    this.vSenhaOk = false;
                    break;
                }
            }
            alert('Sua senha está: ' + this.vSenhaOk);
        }
    };

    var pass = new Protect();
    pass.makeButtons();
30/11/2010 Development / java script

Eu sou extremamente apaixonado em procurar coisas novas, aprender, e dividir o pouco conhecimento que tenho. Essa semana eu tava analizando meu site e o eskema que eu coloco os fontes não é legal! Procurei um plugin que mostrasse de forma mais profissional os códigos e acabei encontrando o SyntaxHighlighter.

Pra instalar é bem tranquilo. Basta baixar os arquivos css#js e chamar a função SyntaxHighlighter.all()

E pra chamar o código na página:

function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }
17/11/2010 Development / java script

Só funciona no IE!

        var myArray = new Array("sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday");
        var collection = new Enumerator(myArray);
       
        for( collection.moveFirst(); !collection.atEnd(); collection.moveNext() )
        {
            document.write( collection.item() + "<br />");
        }

 

02/12/2010 Development / java script
function Animal(type) {
    if (type == "cat") {
        this.__proto__ = Cat.prototype;
    } else if (type == "dog") 04.{
        this.__proto__ = Dog.prototype;
    } else if (type == "fish") 06.{
        this.__proto__ = Fish.prototype;
    }
}
Animal.prototype.say = function() {
    alert("This animal can't speak!");
}
function Cat() {
    // init cat
}
Cat.prototype = new Animal();
Cat.prototype.say = function() {
   alert("Meow!");
}
function Dog() {
    // init dog
}
Dog.prototype = new Animal();
Dog.prototype.say = function() {
    alert("Bark!");
}
function Fish() {
    // init fish
}
Fish.prototype = new Animal();
var newAnimal = new Animal("dog");
newAnimal.say();
17/11/2010 Development / java script

Agora é possível usar instruções SQL no HTML5.

Segue o link - http://dev.w3.org/html5/webdatabase/

 

29/10/2010 Development / java script

Quando a requisição demora mais que o tempo default de resposta. o AjaxPro retorna um erro. Segue abaixo o tratamento.

    if (typeof AjaxPro != "undefined" && AjaxPro !== null) {
        AjaxPro.timeoutPeriod = 600000;
        AjaxPro.onTimeout = function(b, res) {
            alert('Ocorreu um problema de comunicação com o servidor!');
        }
    }

 

27/10/2010 Development / java script

Duas maneiras de escrever classes. Eu venho utilizando bastante a primeira, mas de um tempo pra cá vou começar a dar mais enfase na segunda maneira, achei que fica mais organizado o código.

function Pessoa(){
    this.pessoas = [];
};
Pessoa.prototype.getNome = function(){
    return this.nome;
};
Pessoa.prototype.setNome = function(nome){
    this.nome = nome;
};
Pessoa.prototype.addPessoa = function(nome, idade, cod){
    var obj = {};
    obj.idade = idade;
    obj.nome = nome;
    obj.codEmpresa = cod;
    this.pessoas.push(obj);
};

function Empresa(){
    this.empresas = [];
};
Empresa.prototype = new Pessoa();
Empresa.prototype.addEmpresa = function(nome, cod){
    var obj = {};
    obj.nome = nome;
    obj.cod = cod;
    this.empresas.push(obj);
};
Empresa.prototype.funcionarios = function(cod){
    var func = [];
    for(var x = 0; x        if(this.pessoas[x].codEmpresa == cod){
            func.push(this.pessoas[x]);
        }
    }
    return func;
};

var Pessoa = {
    Class : function(){
        //get e setter ao mesmo tempo
        this.nome = function(n){ return n ? nome = n : nome; }
        this.idade = function(i){return i ? idade = i : idade;}
        this.codEmpresa = function(cd){return cd ? codEmpresa = cd : cd;}
        this.pessoas = [];
       
        this.addPessoa = function(nome, idade, cod){
            var obj = {};
            obj.idade = idade;
            obj.nome = nome;
            obj.codEmpresa = cod;
            this.pessoas.push(obj)
        }
           
        this.funcionarios = function(cod){
            var func = [];
            for(var x = 0; x                if(this.pessoas[x].codEmpresa == cod){
                    func.push(this.pessoas[x]);
                }
            }
            return func;
        }
    } //Fim da Class
};


var Empresa = {
    Class : function(){
        Pessoa.Class.apply(this); //Aplique Pessoa.Class na classe Empresa
        this.empresas = [];
       
        this.addEmpresa = function(nome, cod){
            var obj = {};
            obj.nome = nome;
            obj.cod = cod;
            this.empresas.push(obj);
        }
       
        this.funcionarios = function(cod){
            var func = [];
            for(var x = 0; x                if(this.pessoas[x].codEmpresa == cod){
                    func.push(this.pessoas[x]);
                }
            }
            return func;
        }
    } //Fim da Class
};


var e = new Empresa.Class();
e.addEmpresa('Xurupitas Inc', 10);
e.addPessoa('Huggler', 20, 10);
e.addPessoa('Hugo Tostes', 90, 10);
e.addPessoa('Luis Claudinho', 28, 10);

e.addEmpresa('Microsoft', 12);
e.addPessoa('Jack Bower', 20, 12);
e.addPessoa('Sandra Bullock', 90, 12);
e.addPessoa('Tais Araujo', 28, 12);

alert(e.funcionarios(10));

// ******************************************************

Trocando idéia com o Eduardo [ http://javiani.wordpress.com/ ], ele mandou a seguinte implementação:

var Interface = {
abstract :function(constructor){
if( this.constructor == constructor )
throw new Error(‘Classe abstrata não pode ser instanciada’)
}
}

var Organizacao = {

Class :function(){

Interface.abstract.apply( this, [Organizacao.Class] )

var data = { empresas :[], funcionarios :[] }

this.add = function(){
return this.add[ arguments.length ].apply( this, arguments )
}

this.add[2] = function(nome, codigo){
data.empresas.push({ nome :nome, codigo :codigo })
}

this.add[3] = function(nome, idade, codigo){
data.funcionarios.push({ nome :nome, idade :idade, codigo :codigo })
}

function get(type, codigo){
var ret = []
var search_for = data[ type ]
for(var i = 0; i < search_for.length; i++)
if( search_for[i].codigo == codigo)
ret.push(search_for[i])
return ret
}

this.get_funcionario = function(id){
return get('funcionarios', id)
}

this.get_empresa = function(id){
return get('empresas', id)
}

}

}

var Empresa = {
Class :function(){
Organizacao.Class.apply( this )

// Outros métodos
}
}

var e = new Empresa.Class

e.add('Google Inc', 10)
e.add('Felipe Huggler', 20, 10)
e.add('Hugo Tostes', 90, 10)
e.add('Luis Claudinho', 28, 10)
e.add('Microsoft', 12)
e.add('Jack Bower', 20, 12)
e.add('Sandra Bullock', 90, 12)
e.add('Tais Araujo', 28, 12);

console.log(e.get_funcionario(10));
console.log(e.get_empresa(10)); 

15/10/2010 Development / java script

Cara, programacao eh uma parada foda mesmo, to aki em casa 2:30 da manha, viajando num componentezinho de dropdown em jquery. Mas pq? Pq eu fiquei encucado em saber como o viado do programador, rsrsrsr...manipula o dropdowm quando o cara clicava em outros elementos, objetos na pagina.

Queria saber se ele colocava handlers, fazia alguma assinatura e ficava chegando de tempo em tempo, ateh que eu descobri o pulo do gato, e que pulo, um verdadeiro salto, rsrsrsrs

Na verdade, ele mantem o dropdowm, mas ele esconde o select, deixando apenas as options, e o evento o browser mesmo manipula.

Vamos ao exemplo, fiz sem CSS mesmo, basta clicar em cima do numero pra ver o resultado

// JAVASCRIPT

$().ready(function() {

$("#meuSelect").cboHuggler();

});

$.fn.cboHuggler = function(options) {

function combo(elem) {

var $el = $(elem);

alert($el.attr("id"));

var divTag = $('<div />'),

spanTag = $('<span />');

var selected = elem.find(":selected:first");

if (selected.length == 0) {

selected = elem.find("option:first");

}

spanTag.html(selected.html());

elem.css('opacity', 0);

elem.wrap(divTag);

elem.before(spanTag);

divTag = elem.parent("div");

spanTag = elem.siblings("span");

// handlers

elem.bind({

"change.uniform": function() {

spanTag.text(elem.find(":selected").html());

},

"focus.uniform": function() {

},

"blur.uniform": function() {

},

"mousedown.uniform touchbegin.uniform": function() {

},

"mouseup.uniform touchend.uniform": function() {

},

"click.uniform touchend.uniform": function() {

},

"mouseenter.uniform": function() {

},

"mouseleave.uniform": function() {

},

"keyup.uniform": function() {

spanTag.text(elem.find(":selected").html());

}

});

}

return this.each(function() {

var elem = $(this);

combo(elem);

})

}

// HTML

<select id="meuSelect">

<option>1</option>

<option>2</option>

<option>3</option>

</select>

Bom, espero que sirva de exemplo!

 

07/10/2010 Development / java script

Entaum, varios amigos ficam com essa duvida, de quando usar o tal this, oque que eh o this, quem inventou o this?

this eh uma referencia ao objeto que esta chamando o metodo!

Exemplo rapidinho:

// Extendendo a funcao ao objeto String
String.prototype.hello = function(){
 alert(this);
}

Duas maneiras de chamar o metodo:

var x = "teste";
x.hello(); ou "este eh o this".hello();

Eh isso, Abraaaaco ;-)

 

30/09/2010 Development / java script

Imports
// http://code.jquery.com/jquery.js
// jquery.tmpl.js

<SCRIPT>

    var data = [{ stock: "PETR4", id: 1, value: "R$40,00" }, { stock: "CESP6", id: 2, value: "R$50,00" }, { stock: "ITAU4", id: 3, value: "R$60,00"}];

    function update() {
        $("ul").html("");
        $("#Template").tmpl($.shuffle(data)).appendTo("ul");
    }

    jQuery(function(){
        setInterval("update()", 1000)
    });

    // Extendo a funcao para jQuery * Realiza um random do Array
    $.shuffle = function(arr) {
        for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
        return arr;
    }

</SCRIPT>

<ul></ul>

<script id="Template" type="text/html">
    <li><a href="${id}">${stock}</a> - ${value}</li>
<script>

 

28/09/2010 Development / java script

Cara, eu axo mto loooko, essas paradas de inovacao em termo de tecnologia. Jquery por exemplo, "fazer mais, escrevendo menos", Iraado!

LinqToSQL, outra maneira de escrever SQL e tem o mesmo resultado, foooda!

JavaScript Template eh a mesma coisa, vc escreve um template HTML e atraves de um JSON ele preenche automaticamente esse template. Qual a vantagem? naum precisamos ficar varrendo o JSON, ele se encaixa automaticamente! ;-)

Usando o metodo tradicional temos:

var clientData = [ { name: "Rey Bango", id: 1 },{ name: "Mark Goldberg", id: 2 },{ name: "Jen Statford", id: 3 }];

for(var i=0; i<client.name.length; i++) { temp += "<li><a href='clients/"+client.id[i]+"'>" + client.name[i] + "</a></li>"; }

Com JsTemplate:

<script id="clientTemplate" type="text/html"> 
<li><a href="clients/${id}">${name}</a></li>
</script>

Fazendo a chamada:

$("#clientTemplate").tmpl(clientData).appendTo( "ul" );

Aqui esta a pagina no projeto: http://github.com/nje/jquery-tmpl


 

31/08/2010 Development / java script

Assim como o XmlHttpRequest, webSocket eh um componente acessível por Javascript disponível em todo browser que implementa HTML 5. Já existe no Google Chrome 4.x, no Safari/WebKit e no Firefox 3.7.

Com o WebSocket é possível abrir uma conexão HTTP, mantê-la aberta, ?escutar? seu stream por novas mensagens e reagir a elas via javascript e inclusive enviar novos dados (como uma nova mensagem), tudo na mesma conexão, sem precisar passar pelo peso da rotina de abrir conexão, enviar/receber dados, fechar conexão e repetir daqui a alguns segundos. Ou seja, a vantagem é diminuir a quantidade enorme de conexões batendo no servidor para uma ordem de grandeza menos.

Obviamente vai demorar um bom tempo para aparecer no IE, mas relaxa, existe uma alternativa muito interessante chamada Web-Socket.js. Ela simula a mesma API do WebSocket padrão (e no Chrome ela nem se ativa), mas usa um pequeno Flash como ponte para criar a conexão HTTP permanente, com os mesmos eventos.

Interessante neh, ficou curioso? Entaum vambora!


O construtor: WebSocket

O WebSocket (url, protocolo) construtor leva um ou dois argumentos. O primeiro argumento, URL, especifica a URL para o qual deseja se conectar. A, segundo o protocolo, se presente, especifica um sub-protocolo que o servidor deve oferecer suporte para a conexão seja bem sucedida.

Quando o WebSocket() é invocado, executa as seguintes etapas:

  1.  Parse da url, para obter host, porta, nome do recurso, e seguro. Se falhar a conexao, lancara um SYNTAX_ERR.
  2. Se a conexao falhar devido bloqueio do acesso a porta, lancara um SECURITY_ERR. Por exemplo porta 80 ou porta 443.
  3. Se o protocolo estiver presente, contém a seqüência de caracteres com pontos de código Unicode, então lance um SYNTAX_ERR.
  4. Deixe origem ser a serialização ASCII da origem do script que invocou o WebSocket () construtor, convertida em minúsculas ASCII.

Retorna uma nova WebSocket objeto, e prosseguir com estas etapas em segundo plano (sem bloquear scripts).

Estabelecer uma conexão Socket Web para um host host, na porta da porta (se foi especificado), de origem, com a bandeira seguro, com o nome do recurso como o nome do recurso, e com o protocolo como o protocolo (se houver).


bufferedAmount:

O atributo bufferedAmount deve retornar o número de bytes que foram enfileiradas, mas ainda não foi enviada.

readyState:

O atributo readyState representa o estado da conexão. Pode ter os seguintes valores:

CONNECTING (valor numérico 0)
A conexão ainda não foi estabelecida.

OPEN (valor numérico 1)
A Web Socket conexão é estabelecida e comunicação é possível.

CLOSED (valor numérico 2)
A conexão foi fechada ou não pôde ser aberto.

Quando o objeto é criado a sua readyState deve ser definida para (0)


send:

O metodo send(dados) transmite dados usando a conexão. Se o readyState atributo é CONNECTING, deve lancar um INVALID_STATE_ERR.
O método deve retornar true se a conexão ainda está estabelecida (e os dados foram enviados com sucesso ou em fila), ou falso se a conexão é fechada.


close:

O metodo close() deve fechar a conexão WebSocket, se houver, e mudar o readyState do valor do atributo para CLOSED(2). Se a conexão já está fechada, ele deve fazer nada.


Manipuladores de evento:

onopen:
Quando a conexao eh estabelecida, nesse momento o agente altera o readyState para OPEN(1)

onmessage:
QUando uma mensagem eh recebida, o agente usa a interface MessageEvent. Verifica se a conexao esta ativa e encaminha os dados.

onerror:
Quando uma conexao WebSocket eh detectada um erro.

onclose:
QUando o socket eh fechada. O agente altera o readyState para CLOSED(2), e em seguida lanca para o evento.

//*******************************************

INTERFACE:

[Constructor(in DOMString url, in optional DOMString protocols)]
[Constructor(in DOMString url, in optional DOMString[] protocols)]
interface WebSocket {
  readonly attribute DOMString url;

  // ready state
  const unsigned short CONNECTING = 0;
  const unsigned short OPEN = 1;
  const unsigned short CLOSING = 2;
  const unsigned short CLOSED = 3;
  readonly attribute unsigned short readyState;
  readonly attribute unsigned long bufferedAmount;

  // networking
           attribute Function onopen;
           attribute Function onmessage;
           attribute Function onerror;
           attribute Function onclose;
  readonly attribute DOMString protocol;
  void send(in DOMString data);
  void close();
};
WebSocket implements EventTarget

//*******************************************


Vamos ao exemplo:

Javascript bem simples

        var sock;
        function connectToServer() {
            try {
                sock = new WebSocket("ws://localhost:8181/websock");
                sock.onopen = sockOpen;
                sock.onerror = sockError;
                sock.onclose = sockClosed;
                sock.onmessage = sockMessage;
            } catch (e) {
                log("error:" + e);
            }
        }

        function sockOpen() {
            log("connected");
        }

        function sockError(error, p2) {
            log("socket error!");
        }

        function sockClosed() {
            log("socket closed");
        }

        function sockMessage(event) {
            log("Received message: " + event.data);
        }

        function log(msg) {
            var txtLog = document.getElementById("log");
            txtLog.value += "\r\n" + msg;
        }

Coloquei um video de demonstrando a aplicacao rodando na minha maquina. Eh isso galera, bons estudos!!!

 

17/08/2010 Development / java script

Escrevo este post apenas para me comprometer a escrever sobre estes assuntos. E uma forma de me sentir cobrado, motivado ao mesmo tempo. ;-)

Soh aguardar!!! Abraaaaaaco

 

04/08/2010 Development / java script

Dica do nosso amigo Bruno Souza "Marronete" ;-)

Pessoal, Segue uma dica para quem tiver problema com safari/Chrome e Microsoft Ajax. Esses browsers não são reconhecidos como “SAFARI”, logo, o controltoolkit não consegue reconhecer o browser e dá um erro de javascript que não pode carregar o js. Para isso existe esse hack abaixo que adiciona a extensão “WebKit” para ser reconhecido pelo js da Microsoft.

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Path="~/Scripts/Safari3AjaxHack.js" />
    </Scripts>
</asp:ScriptManager>

The file can exist in any folder in your site, but as kshakir says, it should contain this code:

Sys.Browser.WebKit = {}; //Safari 3 is considered WebKit
if( navigator.userAgent.indexOf( 'WebKit/' ) > -1 )
{
  Sys.Browser.agent = Sys.Browser.WebKit;
  Sys.Browser.version = parseFloat( navigator.userAgent.match(/WebKit\/(\d+(\.\d+)?)/)[1]);
  Sys.Browser.name = 'WebKit';
}

Microsoft and the AjaxControlToolkit project managers tell me they want to fix this bug in the toolkit, so eventually this hack will (hopefully) no longer be necessary. But in the meantime, this solution solves the problem with AjaxControlToolkit scripts not being loaded properly during partial updates.

 

16/06/2010 Development / java script

Ooooooooooooh Mooooooooooçaaada!!!!

Taeó, um exemplo rapidinho de criar variáveis js em tempo de execução.

for(var x = 10; x>0; x--){
     window['variavel_'+x] = x;
}

Parece bobo né, mas talvez um dia você irá precisar!!!

 

11/06/2010 Development / java script
O código que não utilize eval executa cerca de 95% mais rápido que o original no Opera 9, Firefox e Internet Explorer, e cerca de 85% mais rápido no Safari.

function Teste(){
 alert('TESTE');
}

function fn(oString) {
  eval(oString)();
}

function _fn(oString) {
 this[oString]();
 //oString();
}

_fn("Teste");

 

11/06/2010 Development / java script

Alguns links para se aprender.

Pra testar o regexpal
  1. Você pode testar o  regexpal.com da seguinte forma:
  2. Visite o site regexpal.com
  3. Digite no primeiro campo a expressão regular: [0-9]
  4. No segundo campo digite: Brasil descoberto em 1500
  5. Observe que o número 1500 ficou marcado já que [0-9] localiza todos os números de 0 a 9.
  6. Se no lugar de [0-9] você colocar [a-z] marcará todas as letras minúsculas que existem entre a e z.

 

26/05/2010 Development / java script

funçãozinha pra mandar mensagem customizada pro usuário:

var nome  = "Felipe";
var login   = "huggler";
var senha = "senha";
 
alert("Prezado @nome@, Seu login é: @login@ * Sua senha é: @senha@".replace(/@([^@]+)@/g, function(a, variavel){
  return "<" + eval(variavel) + ">";
}));

 

12/05/2010 Development / java script

As vezes quando se espera uma resposta de uma função, fica complicado passar junto dessa respostas os parametros que foram passados anteriormente. Dá uma olhada nesse exemplo.

var mapstrings = ["url1","url2","url3"] ;
 
function getcallback(iteration, point) {
    if (!point) {
        if (mapstrings[iteration]) {
            geocoder.getLatLng(mapstrings[iteration], 
                function(point) { getcallback(iteration+1, point) ; } );
        }
        return ;
    }
    map.setCenter(point, 13);
    map.setZoom(7);
    map.addOverlay(new GMarker(point));
}; 
 
getcallback(0);

 

03/05/2010 Development / java script

Se você tiver uma situação onde mtas funções chamem a mesma função e você quer quais são essas funções, coloque dentro da função.

alert(arguments.callee.caller.toString());

Simplezinho mais ajuda mto!!!

 

03/03/2010 Development / java script

Se servir pra vc, show de bola!!!

function getNumberExtension(n){
var arrNumber = new Array();
 arrNumber[0] = "Zero";
 arrNumber[1] = "Um";
 arrNumber[2] = "Dois";
 arrNumber[3] = "Três";
 arrNumber[4] = "Quatro";
 arrNumber[5] = "Cinco";
 arrNumber[6] = "Seis";
 arrNumber[7] = "Sete";
 arrNumber[8] = "Oito";
 arrNumber[9] = "Nove";

 for(var x = 0; x< n.length; x++){
 var _n = (arrNumber[n.charAt(x)] == undefined) ? n.charAt(x) : arrNumber[n.charAt(x)];
  document.write(_n + " ");
 }
}

getNumberExtension("9998-7732");

 

22/02/2010 Development / java script

Hoje a tarde acabei de fazer a prova para certificação JavaScript da W3Schools. Acertei 58 de 70, não foi excelente neh mas tá valendo ;-)

 

20/02/2010 Development / java script

Depois de fazer a tal provinha de Js, fiquei curioso por saber como seria a certificação. "Oque não faz algumas cervejas na mente de um cidadão retartado", rsrsrsrsrsr. Pois bem, paguei a muther fucker certification e tô pra ver qual vai ser, bateu aquele friozinho na barriga, por isso vale a pena dar uma recapitulada, além do mais, a prova é acompanhada por um supervisor, caso aprovado, ele lança a assinatura, então, que tal ter nada mais nada menos doque a assinatura de um coordenador pica das arabias ;-)...Bruno Lemos na área!!!

Segue o link http://www.w3schools.com/jsref/default.asp

Vamu que vamu!!!

 

19/02/2010 Development / java script

Ajudando um amigo aqui no trabalho a serializar um Objeto Java em Json, fiquei curioso em saber como seria em AspNet. Segue exemplo.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim serializar As JavaScriptSerializer = New JavaScriptSerializer()
Dim pessoa As IList(Of Pessoa) = New List(Of Pessoa)
For x As Integer = 0 To 5
Dim p As New Pessoa
p.Idade = 10
p.Nome =
"Felipe " & x
pessoa.Add(p)
Next

TextBox1.Text = serializar.Serialize(pessoa).ToString()
End Sub

Public Class Pessoa

Private _idade As String
Private _nome As String

Public Property Idade() As String
Get
Return _idade
End Get
Set(ByVal value As String)
_idade = value
End Set
End Property

Public Property Nome() As String
Get
Return _nome
End Get
Set(ByVal value As String)
_nome = value
End Set
End Property

'*** Construtor
'Public Sub New(ByVal nome, ByVal idade)
' _idade = idade
' _nome = nome
'End Sub

End Class

 

18/02/2010 Development / java script

Script simplezinho mas que ajuda muuuuuito!!!

function ConcatJson(o1, o2) {
 for (var key in o2) {
  o1[key] = o2[key];
 }
 return o1;
}

var favdata = {
            title: 'Favorite Things',
            favs: ['raindrops', 'whiskers', 'mittens']
        };

var fData = {teste : '123'}

var output = {};
output = ConcatJson(favdata , fData );

alert(output.favs[0]);

 

12/02/2010 Development / java script

Para base de estudos!!!

var xmlHttp;
function webService(){
this.codCliente = '100';
this.token;
this.urlWebService = 'http://www.endereco.com.br/WebService.asmx';
this.soapRequest = '<?xml version="1.0" encoding="utf-8"?>' +
'<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd=http://www.w3.org/2001/XMLSchema xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">' +
'<soap:Body>' +
'<TRANSFER_SetData xmlns="http://www.namespace.com.br">' +
'<data>' + this.codCliente + '</data>' +
'</TRANSFER_SetData>' +
'</soap:Body>' +
'</soap:Envelope>';
};

webService.prototype.setCliente = function(codCliente) {
this.codCliente = codCliente;
};

webService.prototype.SoapCall = function() {
xmlHttp =
new ActiveXObject("Microsoft.XMLHTTP");
xmlHttp.open(
"post", this.urlWebService, true);
xmlHttp.setRequestHeader(
"Content-Type", "text/xml; charset=utf-8");
xmlHttp.setRequestHeader(
"SOAPAction", http://www.namespace.com.br/TRANSFER_SetData);
xmlHttp.onreadystatechange =
this.doUpdate;
xmlHttp.send(
this.soapRequest);
return false;
};

webService.prototype.doUpdate = function() {
//debugger;
if (xmlHttp.readyState == 4) {
var responseXMLResult = xmlHttp.responseXML;
this.token = responseXMLResult.lastChild.nodeTypedValue;
resposta.innerText =
this.token;
}
};

var ws = new webService();
ws.SoapCall();

 

09/02/2010 Development / java script

function Msg()
{
 this.message = "Método";
}

Msg.prototype.toString = function()
{
 return "[Sobrescrevendo <" + this.message + ">]";
}


Msg.prototype.toUpperCase = function(msg)
{
 return msg + " * javascript";
}
 
var m = new Msg();
alert(m.toUpperCase(m));
alert(m.toUpperCase(m).toUpperCase());

04/02/2010 Development / java script

Um exemplo bem básico de como tabular os dados pra deixar uma mensagem um pouco melhor.

var msg = "";
var obj = []

function Pessoa(){
 this.id;
 this.nome;
 this.idade;
 this.sexo
}

for(var i = 0; i<5; i++){
 var o = new Pessoa();
 o.id    = i;
 o.nome  = 'huggler'+i;
 o.idade = 'idade'+i;
 o.sexo  = 'sexo'+i;
 obj.push(o);
}

for(var x = 0; x<obj.length; x++){
 p = obj[x];
 msg += p.id+ "\t"+ p.nome+"\t"+ p.idade + "\t" + p.sexo + "\n";
}

alert(msg);

04/02/2010 Development / java script

Exemplo simples de como invocar o método através de assinaturas. Nesse caso, só irá funcionar no IE.

var Core = {};
Core.start = function(fn){
 Core.addEventListener(window, "load", fn.init);
};

Core.addEventListener = function(element, type, listener){
 listener.call(element, event);
};
 
var minhafuncao = {
 init : function(){
  minhafuncao.close();
 },
 
 close: function(){
  alert('closed');
 }
}

var minhafuncao2 = {
 init : function(){
  alert('oi');
 }
}

Core.start(minhafuncao);
Core.start(minhafuncao2);

04/02/2010 Development / java script

Sabemos que pra tudo na vida há uma solução. No desenvolvimento eu não penso diferente, acredito que há sempre uma forma de se chegar ao objetivo e mais..que existem várias formas se alcançar o mesmo resultado.

Abaixo, duas maneiras de criar um anterior e próximo varrendo uma list.

  1. Na primeira, usando nextSibling, firstChild, previousSibling...eu particularmente não sou muito fã de usar esses métodos.
  2. Na segunda, lendo um Array, que na minha opinião é mais rápido e mais fácil de trabalhar.

Esse exemplos são somente com demonstração mesmo e para estudos de como utilizar esse comandos.

// Primeiro Case **********************************

var dados = document.getElementById('list');
var name  = document.getElementById('nome');
var cont  = 0;
function anterior(){
 name.innerText = dados.childNodes[cont].previousSibling.innerText;
 cont--;
}

function proximo(){
 name.innerText = dados.childNodes[cont].nextSibling.innerText;
 cont++;
}

function init(){
 name.innerText = dados.firstChild.innerText;
}

init();

// Segundo Case **********************************

var data = document.getElementById('list').getElementsByTagName('li');
var num  = 0;
function ant(){
 alert(data[--num].innerText);
}

function prox(){
 alert(data[num++].innerText);
}

// html *********************************

<ul id="list">
 <li>Alec</li>
 <li>Daniel</li>
 <li>William</li>
 <li>Hugo</li>
</ul>

<span id="nome"></span><p>
<button onclick="anterior()">Previous</button><button onclick="proximo()">Next</button><p>
<button onclick="ant()">Previous</button><button onclick="prox()">Next</button>

13/01/2010 Development / java script

Resumidamente o conceito de ServerPush é: Abrir um canal de comunicação http e ficar recebendo os dados da aplicação sem efetuar posts. Essa tecnologia foi introduzida em 1996 por PointCast e Marimba e em 1997 Microsoft e NetScape aplicaram esse canal dentro de seus Browsers. Para mais detalhes http://en.wikipedia.org/wiki/Push_technology#HTTP_server_push

Vou demonstrar como desenvolver este mecanismo de comunicação utilizando JSP e Javascript.

Nosso exemplo terá 3 páginas:

  1. Index.jsp
  2. Display.jsp
  3. Streamer.jsp

Index.jsp
Nessa página criaremos os frames [display.jsp e streamer.jsp] e os tratamentos javascript para as mensagens que chegarão.

A página display.jsp vai conter nossos objetos que serão atualizados. Ex: Grids, Divs, Tabelas, ou pode ser também uma página em branco, se for apenas printar a mensagem recebida.

A página Streamer.jsp irá conter a regra de negócio. O grande lance aqui é a possibilidade de utilizar a "Thread.sleep" do Jsp...Nesse exemplo estamos apenas printando de tempo em tempo um contador, mas um implementação siginificativa seria a ida em um banco de dados resgatando os últimos cadastrados, as melhores ofertas de compra, etc...

Finalizando:

Quando a aplicação estiver rodando, o streamer.jsp enviará o conteúdo para a função push localizada no Index.jsp.

O push pegará o conteúdo e jogará no frame "display". Podemos também acessar através do button que chamará a função SendEvent que enviará para o tratarMensagemPublicada a mensagem digitada no input. Nesse caso o tratarMensagemPublicada fará um Split na mensagem e de acordo com as condições encaminhará a mensagem para os devidos métodos.

Faça o download do Exemplo

13/01/2010 Development / java script

Para quem quiser um teclado virtual, pode iniciar as alterações partindo desse aki.

www.felipehuggler.com/testes/teclado/

Att,
Huggler

13/01/2010 Development / java script

A ídeia é ter um método com o mesmo nome, porém, executando funções distintas, através do recebimento de seus parâmetros!!!

// addMethod - By John Resig (MIT Licensed)
function addMethod(object, name, fn){
     var old = object[ name ];
     if ( old )
         object[ name ] = function(){
             if ( fn.length == arguments.length )
                 return fn.apply( this, arguments );
             else if ( typeof old == 'function' )
                 return old.apply( this, arguments );
         };
     else
         object[ name ] = fn;
}

// A configuração dos métodos

function Users(){

  addMethod(this, "find", function(){
   alert('Todos os usuários');
  });

  addMethod(this, "find", function(name){
    alert('O nome é ' + name);
  });

  addMethod(this, "find", function(first, last){
    alert('O nome é ' + first + ' sobrenome ' + last);

  });
}

// Aplicando os métodos

var users = new Users();
users.find();                          // Pesquisa todos usuários
users.find("John");                  // Pesquisa pelo Nome
users.find("John", "Resig");       // Pesquisa pelo Nome e Sobrenome
users.find("John", "E", "Resig"); // Não retorna nada

26/08/2009 Development / java script

Manipular um JSON bem tranquilo.

Ex: var obj = { 'nome' : 'felipe huggler', 'idade' : 'idade da pedra' };
alert(obj.nome);

A tarefa transformar um Array em um Objeto JSON...

var objArray = new Array();
function Pessoa(nome){
this.nome = nome;
}

objArray.push(new Pessoa('Felipe'));
objArray.push(new Pessoa('Huggler'));

O grande lance aqui...Baixar a biblioteca JSON2.js e usar o mtodozinho JSON.stringify(objeto))

alert(JSON.stringify(objArray))

22/07/2009 Development / java script

    var palavra = "<a href=':empresa:'>:dado:"
    palavra.replace(/:[^:]*:/g, function(g){ alert(g) });

;-)

03/08/2009 Development / java script

MacMenu = function(container)
{
UL = $('<ul>');
this.setItem = function(refMenu, subMenu, titulo, href){
if(subMenu == ''){
LI = $('<li>');
LI.append(LI.text(titulo));
UL.append(LI);
_UL = $('<ul>').attr("id", refMenu);
LI.append(_UL);
return false;
}
_LI = $('<li>');
_LI.append(_LI.text(titulo));
_UL.append(_LI);
}
$("#"+container).append(UL);}
$(document).ready(function(){
$('#menu li').hover(function() { $('ul', this).css('display', 'block'); },function() { $('ul', this).css('display', 'none'); });
});

// Pra usar
var menu = new MacMenu('menu');
menu.setItem('root1','','Menu','link');
menu.setItem('root1.1','root1','Sub1','link');
menu.setItem('root1.2','root1','Sub2','link');
menu.setItem('root1.3','root1','Sub3','link');
menu.setItem('root2','','Menu2','link');
menu.setItem('root2.1','root2','Sub1','link');
menu.setItem('root2.2','root2','Sub1.1','link');
menu.setItem('root2.3','root3','Sub3','link');
menu.setItem('root3','','Menu3','link');
menu.setItem('root3.1','root3','Sub1','link');
menu.setItem('root3.2','root3','Sub2','link');
menu.setItem('root3.3','root3','Sub3','link');


// CSS
#menu ul{
list-style:none;
margin: 0px;
padding: 0;
display: block;
}

#menu li{
background: #99cc66;
border-bottom: 1px solid white;
color: white;
padding: 0px;
width: 150px;
display: block;
text-align: right;
font-family: Arial;
font-size: 11px;
float: left
}

#menu li ul{
text-decoration: none;
color: white;
display: none;
padding: 0px;
}

20/05/2009 Development / java script

Nos sistemas atuais estamos utilizando mtas janelas com drag-drop, janela Modal, sendo assim, não havendo mais necessidade de abrir os antigos pop-ups.

Num passado não mto distante quando vc fazia um sistema e tinha lah, o formulário para usuário selecionar o cliente, provavelmente ao lado, teria a opção de incluir um novo cliente, caso o mesmo não estivesse na combo. O usuário clicava, cadastrava o cliente e através do "opener" vc populava a combo com o novo registro.

Nesse novo cenário, é possível que exista mais de um módulo no sistema com a combo de cliente, então quando o usuário clica para cadastrar um novo cliente, o ideial é que todas as combos se atualizem.

Segue o código abaixo.

function populaCombo(objName, value, text)
{
    cont++;
    $('select[name="'+ objName +'"]').prepend('<option value="'+ cont +'">'+ cont +'</option>');
    $('option:first', 'select[name="'+ objName +'"]').attr("selected","selected");

}

Abraaaaaaço!!!

06/08/2009 Development / java script

Essa semana surgiu uma situação aqui na empresa onde precisamos verificar se o link que a gente tava chamando realmente existia e se nele estava tudo correto. Primeiro fizemos em asp.net

Dim SiteExists As Boolean = True
Dim URL_Object As New System.Uri(url)
Dim URL_WebRequest As System.Net.HttpWebRequest
Dim URL_WebResponse As System.Net.HttpWebResponse

Try
URL_WebRequest = System.Net.WebRequest.Create(URL_Object)
URL_WebRequest.Timeout = 4000
URL_WebRequest.AllowAutoRedirect = True
URL_WebRequest.MaximumAutomaticRedirections = 3
URL_WebResponse = URL_WebRequest.GetResponse
SiteExists = True
URL_WebResponse.Close()
Catch ex As Exception
SiteExists = False
End Try

If SiteExists Then
Return True
Else
Return False
End If

ou seja, retorna um true ou false do link.

Dentro da tal aplicação ocorria um postBack, e nessa hora nós não tinhamos mais como saber se a aplicação estava ON ou OFF... Então sugerimos ao analista que colocasse essa tal verificação também na página deles. Mas, eis que surge a situação: E se após o carregamento da página, o cliente desse um postBack e nessa hora o servidor ja está fora...iria aparecer na tela um 404 not found bonito. Então sugerimos que antes de ocorrer o postBack o desenvolvedor checasse via Javascript se o servidor esta respondendo.

Primeiro, eu fiz um script rapidinho, procurei na internet os objetos XMLHttpRequest e mandei pra ele. Ficou mais ou menos assim.

var request = false;

try{ request = new XMLHttpRequest();}
catch(ee){
try{request = new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){
try{request = new ActiveXObject("Microsoft.XMLHTTP");}
catch(E){request = false;}}}

if (!request){ alert("Erro na inicialização do objeto XMLHttpRequest!"); }

function getCustomerInfo() {
var url = document.getElementById("url").value;
request.open("GET", url, false);
request.onreadystatechange = updatePage;
request.send(null); }

function updatePage() {
if (request.readyState == 4){
if (request.status == 200){
alert('OK A PAGINA ESTA ATIVA... O STATUS EH: ' + request.status)}
else{
alert("EITA.....A PAGINA ESTA FORA: O Status da página eh: " + request.status);}
}}

O codigo acima chega se o endereo da url que esta num input é valido ou não

Tudo bem, tudo legal...mas depois eu comecei a pesquisar como seria essa parada com o tal do Jquery ehhhhhh:

$.ajax({
    url: 'teste.asp',
    type: 'POST',
    data: {nome: "felipe", ts: 2},
    timeout: 1000,
    error: function(e){
        alert("error:" + e.message);
    },
    success: function(xml){
        alert(xml);}
    });

18/09/2008 Development / java script

//*************************************************************
// Função para gerar números randômicos
//*************************************************************
function gera_random(n) {
        var ranNum = Math.round(Math.random() * n);
        return ranNum;
}

//*************************************************************
// Função para retornar o resto da divisao entre números (mod)
//*************************************************************
function mod(dividendo, divisor) {
        return Math.round(dividendo - (Math.floor(dividendo / divisor) * divisor));
}

//*************************************************************
// Função que gera números de CPF válidos
//*************************************************************
function cpf() {
        var n = 9;
        var n1 = gera_random(n);
        var n2 = gera_random(n);
        var n3 = gera_random(n);
        var n4 = gera_random(n);
        var n5 = gera_random(n);
        var n6 = gera_random(n);
        var n7 = gera_random(n);
        var n8 = gera_random(n);
        var n9 = gera_random(n);
        var d1 = n9 * 2 + n8 * 3 + n7 * 4 + n6 * 5 + n5 * 6 + n4 * 7 + n3 * 8 + n2 * 9 + n1 * 10;
        d1 = 11 - (mod(d1, 11));
        if (d1 >= 10) d1 = 0;
        var d2 = d1 * 2 + n9 * 3 + n8 * 4 + n7 * 5 + n6 * 6 + n5 * 7 + n4 * 8 + n3 * 9 + n2 * 10 + n1 * 11;
        d2 = 11 - (mod(d2, 11));
        if (d2 >= 10) d2 = 0;
        return '' + n1 + n2 + n3 + '.' + n4 + n5 + n6 + '.' + n7 + n8 + n9 + '-' + d1 + d2;
}

//*************************************************************
// Função que gera números de CNPJ válidos
//*************************************************************
function cnpj() {
        var n = 9;
        var n1 = gera_random(n);
        var n2 = gera_random(n);
        var n3 = gera_random(n);
        var n4 = gera_random(n);
        var n5 = gera_random(n);
        var n6 = gera_random(n);
        var n7 = gera_random(n);
        var n8 = gera_random(n);
        var n9 = 0; //gera_random(n);
        var n10 = 0; //gera_random(n);
        var n11 = 0; //gera_random(n);
        var n12 = 1; //gera_random(n); 
        var d1 = n12 * 2 + n11 * 3 + n10 * 4 + n9 * 5 + n8 * 6 + n7 * 7 + n6 * 8 + n5 * 9 + n4 * 2 + n3 * 3 + n2 * 4 + n1 * 5;
        d1 = 11 - (mod(d1, 11));
        if (d1 >= 10) d1 = 0;
        var d2 = d1 * 2 + n12 * 3 + n11 * 4 + n10 * 5 + n9 * 6 + n8 * 7 + n7 * 8 + n6 * 9 + n5 * 2 + n4 * 3 + n3 * 4 + n2 * 5 + n1 * 6;
        d2 = 11 - (mod(d2, 11));
        if (d2 >= 10) d2 = 0;
        return '' + n1 + n2 + '.' + n3 + n4 + n5 + '.' + n6 + n7 + n8 + '/' + n9 + n10 + n11 + n12 + '-' + d1 + d2;
}

//*************************************************************
// Função para escolher qual função chamar de acordo com a chamada
//*************************************************************
function faz() {
        if (document.form1.tipo[0].checked) document.form1.numero.value = cpf();
        else document.form1.numero.value = cnpj();
}