working on it ...

Filters

Explore Public Snippets

Sort by

Found 117 snippets matching: uikit

    public by pradithya modified Dec 9, 2017  514  1  4  0

    Launching Image Picker

    self.present(UIImagePickerController(), animated:true, completion: nil);
    																		

    public by pradithya modified Dec 9, 2017  436  0  4  0

    Creating Alert with Action

    let controller = UIAlertController()
    controller.title = "Hey!"
    controller.message = "Don't Worry Be Happy!"
            
    let okAction = UIAlertAction(title: "ok", style: UIAlertActionStyle.default) { (alert: UIAlertAction) in
        self.dismiss(animated:true)
    }
            
    controller.addAction(okAction)
    self.present(controller, animated: true, completion: nil)
    						

    public by pradithya modified Dec 9, 2017  326  1  4  0

    Launching Activity View Controller

    let image = UIImage()
    let viewController = UIActivityViewController(activityItems:[image], applicationActivities: nil)
    self.present(viewController, animated:true, completion: nil);
    						

    external by novusidea modified Sep 30, 2014  206  0  3  0

    CakePHP UIkit Pagination

    CakePHP UIkit Pagination : pagination.ctp
    PHP
    <?php if( $this->Paginator->counter('{:pages}') > 1 ) : ?>
    <ul class="uk-pagination">
    	<?php
    		echo $this->Paginator->prev(
    			'<i class="uk-icon-angle-double-left"></i>',
    			array(
    				'tag' => 'li',
    				'escape' => false,
    				'disabledTag' => 'span',
    				'class' => false
    			),
    			null,
    			array(
    				'tag' => 'li',
    				'escape' => false,
    				'disabledTag' => 'span',
    				'class' => 'uk-disabled'
    			)
    		);
    		echo $this->Paginator->numbers(
    			array(
    				'first' => 1,
    				'last' => 1,
    				'ellipsis' => '<li><span>...</span></li>',
    				'modulus' => 4,
    				'currentClass' => 'uk-active',
    				'currentTag' => 'span',
    				'separator' => false,
    				'tag' => 'li'
    			)
    		);
    		echo $this->Paginator->next(
    			'<span><i class="uk-icon-angle-double-right"></i></span>',
    			array(
    				'tag' => 'li',
    				'escape' => false,
    				'disabledTag' => 'span',
    				'class' => false
    			),
    			null,
    			array(
    				'tag' => 'li',
    				'escape' => false,
    				'disabledTag' => 'span',
    				'class' => 'uk-disabled'
    			)
    		);
    	?>
    </ul>
    <?php endif; ?>
    
    

    external by Mark Joseph Rivera modified Jan 3, 2018  8  1  1  0

    Uikit 3 Modal popup using JSCookie #javascript #uikit

    Uikit 3 Modal popup using JSCookie #javascript #uikit: disclaimer.js
    <script>
    
    "use strict";
    !(function($) {
    
      $.getScript('https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js', function() {
        var visits = Cookies.set('visits') || 0;
        visits++;
    
        Cookies.set('visits', visits, { expires: 1, path: '/' });
        console.debug(Cookies.set('visits'));
    
        if ( Cookies.set('visits') > 1 ) {
          console.log('More than a visit');
          Cookies.remove('visits', { path: '' });
        } else {
          console.log('1 Visit');
          UIkit.modal('#modal-example').show();
        }
      });
    
      $.ajaxSetup({ cache: true });
    
    })(jQuery); 
      
    </script>
    
    

    external by Mark Joseph Rivera modified Feb 16, 2018  8  0  1  0

    Uikit 3 Accordion + ScrollTo #uikit #jquery

    Uikit 3 Accordion + ScrollTo #uikit #jquery: accordion.js
    // Script originally made by @zzseba78
    // Using JQuery
    var $ac = $('#accordion');
    UIkit.accordion($ac, {
      multiple: false,
      collapsible: true,
      duration: 300,
      transition:"easeInOut"
    });
    $('a.uk-accordion-title').on('click', function() {
      // Get the current index
      var scrollEl = $(this);
      // Scroll to element with timeout to let content show
      setTimeout(function(){
        var $scrolling = UIkit.scroll({ duration: 300, offset: 20 });
        $scrolling.scrollTo(scrollEl);
     }, 320);
    });
    
    

    external by KOBAYASHI-Toshinobu modified May 15, 2015  102  0  2  0

    React + UIkit Markdown Editor component

    React + UIkit Markdown Editor component: markdownEditor.js.jsx
    (function() {
      $(function() {
        "use strict";
    
        var MarkdownEditor = React.createClass({
          propTypes: {
            onChange: React.PropTypes.func,
            name: React.PropTypes.string,
            textValue: React.PropTypes.string
          },
          getDefaultProps: function() {
            return {
              textValue: ''
            }; 
          },
          getInitialState: function() {
            return {
              textValue: this.props.textValue
            };
          },
          componentWillMount: function() {
            var el = document.createElement('textarea');
            el.setAttribute("name", this.props.name);
            el.value = this.props.textValue;
            var htmleditor = this.htmleditor = UIkit.htmleditor(el, { mode:'split', maxsplitsize:600, markdown:true });
            this.editor = htmleditor.htmleditor[0];
          },
          componentDidMount: function() {
            React.findDOMNode(this).appendChild(this.editor);
            this.htmleditor.redraw();
            $(this.htmleditor.element).on('input', this.handleChange);
          },
          handleChange: function(event) {
            if (this.props.onChange) {
              this.props.onChange(event);
            }
            this.setState({textValue: event.target.text});
          },
          componentWillReceiveProps: function() {
            this.setState({textValue: this.props.textValue});
          },
          componentDidUpdate: function() {
            if (this.htmleditor.element[0].value === this.props.textValue) return;
            this.componentWillUnMount();
            this.componentWillMount();
            this.componentDidMount();
          },
          componentWillUnMount: function () {
            $(this.htmleditor.element).off();
            React.findDOMNode(this).removeChild(this.editor);
            this.htmleditor = null;
          },
          render: function() {
            return (
                <div />
              );
          }
        });
        window.MarkdownEditor = MarkdownEditor;
      });
    }).call(this);
    
    

    external by Github modified Nov 28, 2015  4526  50  3  0

    UIKit Upload example

    UIKit Upload example: index.html
    <!DOCTYPE html>
    
    <html>
    	<head>
    		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.0/css/uikit.min.css">
    		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.0/css/components/upload.css">
    
    		<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.0/js/uikit.min.js"></script>
    		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.0/js/components/upload.min.js"></script>
    
    		<script type="text/javascript">
    			$(function(){
    			        var progressbar = $("#progressbar"),
    			            bar         = progressbar.find('.uk-progress-bar'),
    			            settings    = {
    			                action: '/upload',
    			                allow : '*.(jpg|jpeg|gif|png)',
    			                filelimit: 1,
    			                loadstart: function() {
    			                    bar.css("width", "0%").text("0%");
    			                    progressbar.removeClass("uk-hidden");
    			                },
    			                progress: function(percent) {
    			                    percent = Math.ceil(percent);
    			                    bar.css("width", percent+"%").text(percent+"%");
    			                },
    			                allcomplete: function(response) {
    			                    bar.css("width", "100%").text("100%");
    			                    setTimeout(function(){
    			                        progressbar.addClass("uk-hidden");
    			                    }, 250);
    			                    alert("Upload Completed")
    			                }
    			            };
    			        var select = UIkit.uploadSelect($("#upload-select"), settings),
    			            drop   = UIkit.uploadDrop($("#upload-drop"), settings);
    			});
    		</script>
    	</head>
    
    	<body>
    		<div id="upload-drop" class="uk-placeholder">
    		    Info text... <a class="uk-form-file">Select a file<input id="upload-select" type="file"></a>.
    		</div>
    
    		<div id="progressbar" class="uk-progress uk-hidden">
    		    <div class="uk-progress-bar" style="width: 0%;">...</div>
    		</div>
    	</body>
    </html>
    
    

    external by rolandtoth modified May 17, 2015  79  0  1  0

    add extra Uikit grid sizes

    add extra Uikit grid sizes: uikit-extra-grid-sizes-mixin
    /*
    * add extra Uikit grid sizes
    *
    * usage:
    * @media (min-width: 1480px) {
    *  .add-grid-sizes(xlarge-x);
    * }
    */
    
    .add-grid-sizes(@size) {
    
      /* Whole */
      .uk-width-@{size}-1-1,
      .uk-grid-width-@{size}-1-1 > * {
        width: 100%;
      }
    
      /* Halves */
      .uk-width-@{size}-1-2,
      .uk-width-@{size}-2-4,
      .uk-width-@{size}-3-6,
      .uk-width-@{size}-5-10,
      .uk-grid-width-@{size}-1-2 > *,
      .uk-grid-width-@{size}-2-4 > *,
      .uk-grid-width-@{size}-3-6 > *,
      .uk-grid-width-@{size}-5-10 > * {
        width: 50%;
      }
    
      /* Thirds */
      .uk-width-@{size}-1-3,
      .uk-width-@{size}-2-6,
      .uk-grid-width-@{size}-1-3 > *,
      .uk-grid-width-@{size}-2-6 > * {
        width: 33.333%;
      }
    
      .uk-width-@{size}-2-3,
      .uk-width-@{size}-4-6,
      .uk-grid-width-@{size}-2-3 > *,
      .uk-grid-width-@{size}-4-6 > * {
        width: 66.666%;
      }
    
      /* Quarters */
      .uk-width-@{size}-1-4,
      .uk-grid-width-@{size}-1-4 > * {
        width: 25%;
      }
    
      .uk-width-@{size}-3-4,
      .uk-grid-width-@{size}-3-4 > * {
        width: 75%;
      }
    
      /* Fifths */
      .uk-width-@{size}-1-5,
      .uk-width-@{size}-2-10,
      .uk-grid-width-@{size}-1-5 > *,
      .uk-grid-width-@{size}-2-10 > * {
        width: 20%;
      }
    
      .uk-width-@{size}-2-5,
      .uk-width-@{size}-4-10,
      .uk-grid-width-@{size}-2-5 > *,
      .uk-grid-width-@{size}-4-10 > * {
        width: 40%;
      }
    
      .uk-width-@{size}-3-5,
      .uk-width-@{size}-6-10,
      .uk-grid-width-@{size}-3-5 > *,
      .uk-grid-width-@{size}-6-10 > * {
        width: 60%;
      }
    
      .uk-width-@{size}-4-5,
      .uk-width-@{size}-8-10,
      .uk-grid-width-@{size}-4-5 > *,
      .uk-grid-width-@{size}-8-10 > * {
        width: 80%;
      }
    
      /* Sixths */
      .uk-width-@{size}-1-6,
      .uk-grid-width-@{size}-1-6 > * {
        width: 16.666%;
      }
    
      .uk-width-@{size}-5-6,
      .uk-grid-width-@{size}-5-6 > * {
        width: 83.333%;
      }
    
      /* Tenths */
      .uk-width-@{size}-1-10,
      .uk-grid-width-@{size}-1-10 > * {
        width: 10%;
      }
    
      .uk-width-@{size}-3-10,
      .uk-grid-width-@{size}-3-10 > * {
        width: 30%;
      }
    
      .uk-width-@{size}-7-10,
      .uk-grid-width-@{size}-7-10 > * {
        width: 70%;
      }
    
      .uk-width-@{size}-9-10,
      .uk-grid-width-@{size}-9-10 > * {
        width: 90%;
      }
    }
    
    

    external by Victor Baro modified Feb 23, 2015  45  0  1  0

    Small class (Alert View) we made during third week at ironhack bootcamp using UIKit Dynamics. http://victorbaro.com/2015/02/custom-dynamic-alertview/

    Small class (Alert View) we made during third week at ironhack bootcamp using UIKit Dynamics. http://victorbaro.com/2015/02/custom-dynamic-alertview/: CustomDynamicAlertView
    //
    //  CustomDynamicAlertView.h
    //  Week3_inclass
    //
    //  Created by Victor Baro on 18/02/2015.
    //  Copyright (c) 2015 Produkt. All rights reserved.
    //
    
    #import <UIKit/UIKit.h>
    
    @protocol CustomDynamicAlertViewDelegate <NSObject>
    - (void)dismissAnimationFinished;
    @end
    
    @interface CustomDynamicAlertView : UIView
    @property (nonatomic, strong) NSString *mainText;
    @property (nonatomic, strong) NSString *dismissButtonText;
    @property (nonatomic, weak) id<CustomDynamicAlertViewDelegate> delegate;
    - (instancetype)initWithFrame:(CGRect)frame
                         mainText:(NSString *)mainText
                dismissButtonText:(NSString *)dismissButtonText;
    @end
    
    
    
    //
    //  CustomDynamicAlertView.m
    //  Week3_inclass
    //
    //  Created by Victor Baro on 18/02/2015.
    //  Copyright (c) 2015 Produkt. All rights reserved.
    //
    
    #import "CustomDynamicAlertView.h"
    
    @interface CustomDynamicAlertView () <UICollisionBehaviorDelegate>
    @property (nonatomic,weak) UIView *alertView;
    @property (nonatomic, weak) UILabel *mainTextLabel;
    @property (nonatomic, weak) UIButton *dismissButton;
    @property (nonatomic, strong) UIDynamicAnimator *mainAnimator;
    @property (nonatomic, strong) UISnapBehavior *snapBehavior;
    
    @end
    
    static CGFloat const buttonHeight = 50;
    static CGFloat const alertWidth = 250;
    static CGFloat const alertHeight = 150;
    static CGFloat const mainTextMargin = 15;
    static NSString const *kBoundaryID = @"outsideBoundary";
    
    
    @implementation CustomDynamicAlertView
    
    - (instancetype)initWithFrame:(CGRect)frame {
        return [self initWithFrame:frame mainText:@"Add a main text to show here as a main text." dismissButtonText:@"Dismiss"];
    }
    - (instancetype)initWithFrame:(CGRect)frame mainText:(NSString *)mainText dismissButtonText:(NSString *)dismissButtonText {
        self = [super initWithFrame:frame];
        if (self) {
            _mainText = mainText;
            _dismissButtonText = dismissButtonText;
            [self initializeCustomProperties];
        }
        return self;
    }
    - (void)initializeCustomProperties {
        self.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.6];
        [self createAlertView];
        [self initializeDynamics];
    }
    
    - (void)createAlertView {
        UIView *alertView = [[UIView alloc]initWithFrame:CGRectMake(CGRectGetWidth(self.bounds)/2 - alertWidth/2,
                                                                    -400,
                                                                    alertWidth,
                                                                    alertHeight)];
        alertView.backgroundColor = [UIColor whiteColor];
        alertView.clipsToBounds = YES;
        alertView.layer.cornerRadius = 10;
        [self addSubview:alertView];
        self.alertView = alertView;
        
        UILabel *mainTextLabel = [[UILabel alloc]initWithFrame:CGRectMake(mainTextMargin, 0, alertWidth - mainTextMargin*2, alertHeight - buttonHeight)];
        mainTextLabel.text = self.mainText;
        mainTextLabel.backgroundColor = [UIColor clearColor];
        mainTextLabel.textColor = [UIColor colorWithWhite:0.05 alpha:1.0];
        mainTextLabel.font = [UIFont systemFontOfSize:14];
        mainTextLabel.numberOfLines = 0;
        mainTextLabel.textAlignment  = NSTextAlignmentCenter;
        [alertView addSubview:mainTextLabel];
        self.mainTextLabel = mainTextLabel;
        
        UIButton *dismissButton = [UIButton buttonWithType:UIButtonTypeSystem];
        dismissButton.frame = CGRectMake(0, alertHeight - buttonHeight, alertWidth, buttonHeight);
        [dismissButton setTitle:self.dismissButtonText forState:UIControlStateNormal];
        [dismissButton addTarget:self action:@selector(dismissButtonPressed) forControlEvents:UIControlEventTouchUpInside];
        dismissButton.backgroundColor = [UIColor redColor];
        dismissButton.tintColor = [UIColor whiteColor];
        [alertView addSubview:dismissButton];
        self.dismissButton = dismissButton;
    }
    
    - (void)initializeDynamics {
        self.mainAnimator = [[UIDynamicAnimator alloc]initWithReferenceView:self];
        self.snapBehavior = [[UISnapBehavior alloc]initWithItem:self.alertView snapToPoint:CGPointMake(CGRectGetWidth(self.bounds)/2, CGRectGetHeight(self.bounds)/2)];
        [self.mainAnimator addBehavior:self.snapBehavior];
    }
    
    - (void)dismissButtonPressed {
        [self.mainAnimator removeAllBehaviors];
        UIGravityBehavior *gravityB = [[UIGravityBehavior alloc]initWithItems:@[self.alertView]];
        gravityB.magnitude = 4.0;
        [self.mainAnimator addBehavior:gravityB];
        
        UIPushBehavior *pushB = [[UIPushBehavior alloc]initWithItems:@[self.alertView] mode:UIPushBehaviorModeInstantaneous];
        [pushB setAngle:-(M_PI_2 * 0.8) magnitude:25.0];
        [self.mainAnimator addBehavior:pushB];
        
        UICollisionBehavior *collisionB = [[UICollisionBehavior alloc]initWithItems:@[self.alertView]];
        
        [collisionB addBoundaryWithIdentifier:kBoundaryID
                                    fromPoint:CGPointMake(0, CGRectGetHeight(self.bounds) + alertHeight)
                                      toPoint:CGPointMake(CGRectGetWidth(self.bounds) * 2, CGRectGetHeight(self.bounds) + alertHeight)];
        
        
        collisionB.collisionDelegate = self;
        [self.mainAnimator addBehavior:collisionB];
    }
    
    #pragma mark -  CollisionDelegate
    
    - (void)collisionBehavior:(UICollisionBehavior *)behavior beganContactForItem:(id<UIDynamicItem>)item withBoundaryIdentifier:(id<NSCopying>)identifier atPoint:(CGPoint)p {
        if (identifier == kBoundaryID) {
            [self.delegate dismissAnimationFinished];
            [self removeFromSuperview];
        }
    }
    
    
    #pragma mark -  setters
    - (void)setMainText:(NSString *)mainText {
        _mainText = mainText;
        self.mainTextLabel.text = mainText;
    }
    - (void)setDismissButtonText:(NSString *)dismissButtonText {
        _dismissButtonText = dismissButtonText;
        [self.dismissButton setTitle:dismissButtonText forState:UIControlStateNormal];
    }
    @end
    
    
    
    • Public Snippets
    • Channels Snippets