Skip to content

Instantly share code, notes, and snippets.

View mohandere's full-sized avatar
🎯
Focusing

Mohan Dere mohandere

🎯
Focusing
View GitHub Profile
@mohandere
mohandere / vue-infinite-loader.vue
Last active December 17, 2019 13:22
Infinite Loading with Vue.js
<template>
<main class="container">
<div>
<header>
<h3>Archives</h3>
</header>
<div v-if="posts && posts.length" class="postsList">
<ul class="row">
<li v-for="(post, index) in posts" class="postItem col-sm-4">
<div class="postContent">
@mohandere
mohandere / vue-infinite-loader.vue
Created December 1, 2017 13:00
Infinite Loading with Vue.js
<template>
<main class="container">
<div>
<header>
<h3>Archives</h3>
</header>
<div v-if="posts && posts.length" class="postsList">
<ul class="row">
<li v-for="(post, index) in posts" class="postItem col-sm-4">
<div class="postContent">
@mohandere
mohandere / app.js
Created November 21, 2017 05:30
Jquery Panzoom with UI slider and Flexslider
var App = {
initialize: function() {
// Initialize flexslider
$flexSlider = self.$('#product-slider'),
$flexSlider.flexslider({
animation: "slide",
slideshow: false,
animationLoop: false,
start: function(slider) {
console.log('in start == slider.currentSlide ==>', slider.currentSlide);
@mohandere
mohandere / accordion.js
Last active November 21, 2017 05:15
Jquery UI Sortable with Accordion: Save sort order
scmAcco.accordion({
header: "> div > h3",
collapsible: true,
active: false,
heightStyle: "content",
}).sortable({
update: function(event, ui) {
//On update get new order of elements as an array
var serialized = $(this).sortable("toArray", {
@mohandere
mohandere / MyModal.js
Last active October 12, 2017 15:32
Higher Order Component for react-modal to handle modal bottom issue
import React from 'react';
import ReactModal from 'react-modal';
import withModal from './withModal';
class MyModal extends React.Component {
constructor(props) {
super(props)
@mohandere
mohandere / epic.js
Last active August 31, 2017 13:33
Writing epics with redux-observable
import * as ajax from '../../utils/ajax';
import 'rxjs/add/operator/catch'
import {
Observable
} from 'rxjs/Observable';
import queryString from 'query-string'
import _ from 'lodash'
import {
PRODUCTS_REQUEST_START,
@mohandere
mohandere / 0_reuse_code.js
Created June 21, 2017 17:51
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
@mohandere
mohandere / App.js
Last active January 28, 2021 09:24
React js Responsive Gallery with Masonry Layout and Lightbox
import React, {
Component
} from 'react';
//Import responsive gallery component
import ResponseiveGallery from './components/ResponsiveGallery';
// Define array of images with thumbnails
const DEFAULT_IMAGES = [{
src: '/images/gallery-1.jpg',
thumbnail: '/images/gallery-1.jpg',
@mohandere
mohandere / FilesLoader-Usage.js
Created June 21, 2017 12:21
Asynchronous files loading with jquery deferred with callback
//Usage
var tplsToLoad = [
'tpl/menu-section',
'tpl/header',
'tpl/footer'
];
window.FilesLoader.load(tplsToLoad,
function () {
@mohandere
mohandere / app.js
Last active May 19, 2017 17:29
React-todo
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { Grid, Row, Col, PageHeader } from 'react-bootstrap';
import './App.css';
import Home from './components/Home';
import About from './components/About';
class App extends Component {