# angular-ocDialog

**Repository Path**: otzzhy/angular-ocDialog

## Basic Information

- **Project Name**: angular-ocDialog
- **Description**: 基于Angular的窗体指令。
包含：
* 窗体操作阻塞
* 窗体关闭及回调
* 窗体打开及回调
* z-index管理
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2015-11-21
- **Last Updated**: 2020-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

angular-ocDialog
=========================
基于Angular的窗体应用框架
---------------------------

## 项目状态
### 综合情况
综合案例，实际正在开发的项目
Demo: http://probedemo.or-change.cn/probe
托管地址: https://git.oschina.net/increase/LemonProbe.git

* Version（版本）: 0.5.1 Alpha 1
* Author（作者）: Chao Li, Weilin Shi, Yueyu Li
* License（许可）: MIT
* Supported Browsers（支持的浏览器）: Chrome,Firefox,Safari,Opera,IE 9+,iOS Safari 7.1+,Android Browser 2.3+
* Document（文档）: 有标题的功能已经实现，但文档仍在努力完善

### submodules（子模块）:
* ocCore - 图形操作动作库: http://git.oschina.net/increase/angular-ocCore


## 快速开始
通过快速开始，您将了解到使用本框架的基本流程。
如果需要看看效果，可以访问test/debugger.html文件，里面含有一些不完整的例子。
关于更加综合的应用案例，欢迎大家了解我们团队关于WEB自动化测试的项目Lemonce - LemonProbe。
相关地址见[综合情况](#综合情况)。

另外，Lemonce v0.6.4 Alpha 1版本目前停止更新，Alpha 2正在紧张研发，感兴趣的朋友仍然可以通过访问：
(http://www.lemonce.net/) 来了解我们Alpha 1的产品

### 安装
引用脚本资源以及样式资源，注意需要加载ocCore的资源，项目地址见 ``项目状态 > 子模块``
```html
<script src="./ocCore_Path/dist/ocCore[.min].js"></script>
<script src="./ocDialog_Path/dist/ocDialog[.min].js"></script>
<link rel="stylesheet" src="./ocDialog_Path/dist/style.css" />
```

### 配置

```javascript
angular.module("YourApp", ['oc-dialog'])
    .config(function (ocDialogProvider) {
        ...
    
		// 配置窗体资源的路由
        ocDialogProvider.config("ROUTE_PATH", "./src/dialog/");
		// 窗体的基准z-index值
    	ocDialogProvider.config("BASE_Z_INDEX", 500);
        
        ...
    });
```

## 指令 - Directive
### ocDialogOpen - 根据配置打开窗口
as attribute:
```html
<ANY
	oc-dialog-open="">
...
</ANY>
```
使用指令方式打开窗体会自动阻塞父窗体（如果存在父窗体的话）。
#### 例如
根据配置打开一个Dialog：
```html
<script>
yourAppModule.controller('OpenDialog', function ($scope) {
	$scope.myDialog = {
		name: "dialogFactoryName",
		share: function () {
			return {
				data: "定义要和被打开窗体共享的数据",
				...
			};
		}
	}
});.controller('MyDialog', function ($scope, $element, ocDialog) {
	var DI = ocDialog.queryDI($element); //根据控制器所在的dom查询所在的dialog实例对象
	console.log(DI.share); //访问共享数据
	
	...... other statements;
});
</script>
<div ng-controller="OpenDialog">
	<button oc-dialog-open="myDialog"></button>
</div>
```

``myDialog.html``
```html
<oc-dialog>
	<div ng-controller="MyDialog"></div>
</oc-dialog>
```


### ocDialogSizeMode - 切换窗体最大化和普通
### ocDialogClose - 关闭窗口
as attribute:
```html
<ANY
	oc-dialog-close>
...
</ANY>
```
自动查询该指令最近的窗体并关闭。
#### 例如
``myDialog.html``
```html
<oc-dialog>
	<div ng-controller="MyDialog">
		<button oc-dialog-close>取消</button>
	</div>
</oc-dialog>
```


### ocAlertOpen - 打开警告窗口
as attribute:
```html
<ANY
	oc-alert-open="">
...
</ANY>
```

### ocFileOpen - 打开文件列表窗口
as attribute:
```html
<ANY
	oc-file-open="">
...
</ANY>
```

## 服务 - Service
### ocDialog.queryDI(element) - 根据一个HTMLElement查询其所在的Dialog实例
### ocDialog.getNewDI(dialogFactoryName) - 根据Dialog工厂名获取一个Dialog实例
### ocDialog.alert(options) - 生成一个alertDialog实例并打开
### ocDialog.file(options) - 生成一个fileDialog实例并打开

## 设计窗体
使用ocDialog可以自定义一个指令
### ocDialog
定义一个最简单的没有内容窗体：
```html
<oc-dialog></oc-dialog>
```

### ocDialogTitle - 窗体标题
这个属性会影响到窗体的标题栏内容，值作为直接量读取：
```html
<oc-dialog oc-dialog-title="The title of myDialog"></oc-dialog>
```

### ocDialogIcon - 窗体标志Class
这个属性会影响到窗体左上角的图标区的class，配合自定义的css样式可以设定这个区域的样式：
```html
<oc-dialog oc-dialog-icon="lemoncelogo"></oc-dialog>
```

### ocDialogSwitch - 窗体开关配置
这个属性用于隐藏右上角的按钮，M隐藏最小化按钮，S隐藏尺寸模式按钮：
```html
<oc-dialog oc-dialog-switch="MS"></oc-dialog>
```

### 编码过程
根据[配置](#配置)的情况，在项目路径下 ``src/dialog/`` 目录内创建窗口定义``welcome.html``。
创建定义一个简单的登陆窗口，窗体的布局方式参见[emGrid](#emGrid)：
```html
<oc-dialog  style="width:10.2rem;height:6rem" oc-dialog-title="登陆窗口" oc-dialog-switch="MS">
	<div class="grid" ng-controller="Login">
		<label style="top:0rem;left:0.3rem;">输入令牌：</label>
		<input type="text" style="top:1.3rem;left:0.3rem;width:16em;">
		<button oc-dialog-open="main"
			style="right:0.3rem;bottom:0.3rem;height:1.4rem;width:4.3rem">取消</button>
	</div>
</oc-dialog>
```
在html中编写一个HTML元素来打开该窗体，引入的脚本资源除了Angular以外还包括[安装](#安装)中所提到的。
应用的引导文件典型的如下：
```html
<!DOCTYPE html>
<html ng-app="probe" ng-controller="Global" style="font-size: 20px;">
	<head>
		<meta charset="utf-8" />
		<script src="[yourPath]/angular.min.js"></script>
		<!-- 《安装》一节所需要引用的资源 -->
	</head>
	<body>
		<a oc-dialog-open="welcomeDialog">打开欢迎登陆窗口</a>
	</body>
</html>
```
使用了名为``Global``的控制器，主要提供打开welcome窗口的配置：
```javascript
youApp.controller('Global', function ($scope) {
	$scope.welcomeDialog = {
		name: 'welcome'
	};
});
```
运行应用，点击``打开欢迎登陆窗口``按钮，打开了之前定义的窗口。
除此之外，可以继续点击该按钮无限打开welcome窗体工厂创建的窗体实例。

### emGrid
支持全局缩放的2D窗体布局方法，该特性用于支持rem单位的浏览器上

## 元件
模仿常用的操作系统窗体编程的控件抽象的控件集合
### 工具栏

### 操作柄

### 按钮 / 输入框
位于Dialog内部的&lt;button>, &lt;input>都会受到影响

### ocAddress - 地址栏
操作页面中某个iframe的控件

### ocListMenu - 列表菜单
仿Windows 10 经典模式的列表菜单

### ocTabs - 选项卡
仿Windows 8/10 样式的选项卡控件，可以使用一个控制对象来从外部控制tab控件的行为和状态。
#### 用法
as Element:
```html
<oc-tab-set oc-tab-contro="...">
	<oc-tab oc-tab-title="..." oc-tab-active-fn="...">...</oc-tab>
	...
</oc-tab-set>
```

#### 例如
简单地用指令实现一个ocTab控件，控件的尺寸直接在ocTabSet指令内定义：
```html
<oc-tab-set style="width:20rem;height:20rem">
	<oc-tab oc-tab-title="Tab 0"></oc-tab>
	<oc-tab oc-tab-title="Tab 1"></oc-tab>
</oc-tab-set>
```

使用控制对象ocTabControl设定默认激活的tab选项卡，需要在ocTabSet控件所在的$scope下定义一个对象，（例如 tabControl)。
ocTabControl会将对象反射到ocTabSet的Scope中。通过该控制对象，可以 设置/获取 当前被选中的选项卡序号；通过访问$tabs对象可以设定某个选项卡是否被禁用。

例，使用控制对象默认激活 ``第1个`` 选项卡，设定 ``第0个`` 选项卡禁用，并能够用外部方式激活 ``第2个`` 选项卡。
```html
<script>
yourAppModule.controller('TabDemo', function ($scope) {
	$scope.tabControl = {
		selected: 1
	};
	
	$scope.toDisable = function (index) {
		$scope.tabControl.selected = index;
	}
	
	$scope.activeTab = function (index) {
		$scope.tabControl.$tabs[index].isDisabled = true;
	}
	
});
</script>
<div ng-controller="TabDemo">
	<button ng-click="toDisable(0)">设置第0个选项卡禁用</button>
	<button ng-click="activeTab(2)">设定第2个选项卡激活</button>
	<label>当前激活的选项卡序号</label>
	<input ng-model="tabControl.selected" />
	<oc-tab-set oc-tab-control="tabControl" style="width:20rem;height:20rem">
		<oc-tab oc-tab-title="Tab 0">tab 0</oc-tab>
		<oc-tab oc-tab-title="Tab 1">tab 1</oc-tab>
		<oc-tab oc-tab-title="Tab 2">tab 2</oc-tab>
	</oc-tab-set>
</div>
```

如果需要在某个选项卡激活的时候执行一个过程，则可以使用ocTab指令上的ocTabActiveFn绑定一个方法。
```html
<script>
yourAppModule.controller('TabDemo', function ($scope) {
	
	$scope.activeFn = function () {
		console.log('hello, world.');
	}
	
});
</script>
<div ng-controller="TabDemo">
	<oc-tab-set oc-tab-control="tabControl" style="width:20rem;height:20rem">
		<oc-tab oc-tab-title="Tab 0" oc-tab-active-fn="activeFn">tab 0</oc-tab>
		<oc-tab oc-tab-title="Tab 1">tab 1</oc-tab>
		<oc-tab oc-tab-title="Tab 2">tab 2</oc-tab>
	</oc-tab-set>
</div>
```

以上例子，每当选项卡0被激活，都会调用一次activeFn方法。


### ocGrid - 矩阵表格
类似Excel的二维数组处理控件。主要将类似：
```javascript
[
	['one', 'two', 'three'],
	['foo', 'bar', 'baz'],
	['duang', 'duang', 'duang'],
	['1', '2', '3'],
	['infantry', 'artillery', 'horse'],
	['land', 'air', 'navy'],
	['魏', '蜀', '吴'],
	['1st', '2nd', '3rd'],
	['幽州', '并州', '冀州'],
	['青州', '兖州', '豫州'],
	['徐州', '雍州', '凉州'],
	['扬州', '荆州', '交州'],
	['益州', '司隶', '淮南'],
	...
]
```
这样的二维数组结构的数据以类似Excel的电子表格方式展现。

#### 用法
as Element:
```html
<oc-grid style="width:400px;height:500px"
	oc-grid-data="..."
	oc-grid-refresh="..."
	oc-grid-control="..."></oc-grid>
```

### ocList - 数据列表
仿Windows文件列表的控件。主要将类似：
```javascript
[
	{ fileName: 'xxxx1', updateTime: 'yyyy-HH-dd', ... },
	{ fileName: 'xxxx2', updateTime: 'yyyy-HH-dd', ... },
	{ fileName: 'xxxx3', updateTime: 'yyyy-HH-dd', ... },
	{ fileName: 'xxxx4', updateTime: 'yyyy-HH-dd', ... },
	...
]
```
这样的数据用列表的形式展现。

#### 用法
as Element:
```html
<oc-list oc-list-data="..."
	oc-list-control="..."></oc-list>
```

#### 例如
简单的指定数据源，列标题会根据列表中第一个数据对象的key自动生成，默认宽度120px：
```html
<script>
yourAppModule.controller('listDemo', function ($scope) {
	$scope.listData = [
		{ fileName: 'xxxx1', updateTime: '2001-04-21' },
		{ fileName: 'xxxx2', updateTime: '2001-04-22' },
		{ fileName: 'xxxx3', updateTime: '2001-04-23' },
		{ fileName: 'xxxx4', updateTime: '2001-04-24' }
	];
	
});
</script>
<div ng-controller="listDemo">
	<oc-list oc-list-data="listData"></oc-list>
</div>
```

通过使用控制对象，可以用外部方式控制ocList控件的行为。例如，设置/获取 当前选中的项目序号，设置标题文本及宽度：
```html
<script>
yourAppModule.controller('listDemo', function ($scope) {
	$scope.listData = [
		{ fileName: 'xxxx1', updateTime: '2001-04-21' },
		{ fileName: 'xxxx2', updateTime: '2001-04-22' },
		{ fileName: 'xxxx3', updateTime: '2001-04-23' },
		{ fileName: 'xxxx4', updateTime: '2001-04-24' }
	];
	
	$scope.listCtrl = {
		selected: 2,
		header: [
			{
				key: 'fileName'
				text: "文件名",
				width: '70px'
			},
			{
				key: 'updateTime'
				text: "更新日期",
				width: '6em'
			}
		]
	}
});
</script>
<div ng-controller="listDemo">
	<oc-list oc-list-data="listData" oc-list-control="listCtrl"></oc-list>
</div>
```